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.
Very nice article to start with SAP UI5.. I feel better after doing this. cheers!
ReplyDeleteVery good article....nice...Thanks a lot...
ReplyDeleteI need the source, my sample don't running correct.
ReplyDeletenice article.I used VBox in place of simpleForm
ReplyDeletevery nice article
ReplyDeleteBetter to reduce the Button size
ReplyDeleteIt is the login for our email, adwords, adsense, shopping account just as utilized as a username for outsider administrations like Paypal, and so forth On the off chance that for reasons unknown the Gmail account has been undermined, at that point all different records are additionally in danger. hotmail sign in
ReplyDelete