A Simple Login form using XML View

In this tutorial, we are going to see how to create a Simple Application using XML View.

 

Step 1:  Create an Application project as shown below:

 

File à New à Project :  Choose Application project from SAP UI5 development application.

 

 

Click on Next. Enter the Name for Application project. Choose Mobile library and Click on next.

 

 

 

Enter the Name for the View, Choose the type of View as XML view and Click on Finish.

 

 

 

Step 2: Open the XML file created for the view in the text editor and write the following code.

 

 

Write the code for heading as below:

 

Execute the application and see the output:

 

 

 Now let us construct the form for Username and Password. To construct a form, I am going to add a library sap.ui.commons.forms  to the xml page.

 

Explanation: I have included the sap.ui.commons.form library in the XML view and created a XML Namespace for that library as form. To access the elements from the sap.ui.commons.form library I use the namespace “form” that I have created for it and create a Simple Form HTML tags Input , and button.

 

Execute the application and output appears as below:

 

Note: We will do the formatting option later in this tutorial.

 

Let us also construct a footer for the screen.

 

 

Execute the application and Output appears as:

 

 

 

Now we have constructed our login screen let’s do the formatting option. I wanted all of the Elements to be appear in an individual column and that too on center. So I am going to split the form into 3 columns and place the controls in the second column so that the controls appear in the middle of the page.

 

Change the XML coding as below:

Execute the application and output appears as below:

 

To bring it to the center of the page, Reduce the width of the form. Change the width of the form as below:

 

Execute the application and output appears as:

 

I Hope you find these tutorials helpful for learning. Please leave your feedback in comments section.

 

 

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Arun