HTML5 developing mobile Web Applications--sap UI5 (9)

Before we built the app is based on the display. Now let's format it and introduce a lot of other SAP UI5 component concepts. This makes an interface of the app more hierarchical. More like a mobile app interface, and better use the features available in SAP UI5. Each of these different levels has different functions.

First change the App.view.xml file code:

<MVC: View controllername= "sap.ui.demo.wt.controller.App" xmlns= "sap.m" xmlns:mvc= "Sap.ui.core.mvc" displayblock= "true" &   Gt               <App> <pages> <page title= "{i18n>homepagetitle}" > <content>                     <panel headertext= "{i18n>hellopaneltitle}" > <content>                      <button text= "{i18n>showhellobuttontext}" press= "Onshowhello"/> <input value= "{/recipient/name}" description= "Hello                  {/recipient/name} "valueliveupdate=" true "width=" 60% "/> </content> </Panel> </content> </Page> </pages> < /app> 

</mvc:View>

Compared with the previous, although the content is the same, but we introduced a very many components. Make the interface more hierarchical.

Put all the components in the Page , the basic structure is app->page ( there is content)->panel ( there are content). The real page content is in the Panel , and the first two layers are just for basic functionality. Also set Displayblock to true, so that the ability to make the phone page normal display.

In the index.html file, change the code such as the following:

<! DOCTYPE html>
This takes advantage of the shell component in SAP UI5, where the content of the page is placed to ensure the responsiveness of the page. Better support for mobile devices. Besides. We also set the Height property to 100%. is stained with the entire screen.





 
HTML5 developing mobile Web Applications--sap UI5 (9)