HTML5 mobile web Application Development-SAP UI5 (9)
Previously, our app construction was based on display. Now let's format it and introduce more SAP UI5 component concepts. This makes an APP interface more hierarchical, more like a mobile APP interface, and better use the features provided in SAP UI5. Each layer has different functions.
First, modify the code of the App. view. xml file:
<mvc:view controllername="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayblock="true"> <app> <pages> <page title="{i18n>homePageTitle}"> <content> <panel headertext="{i18n>helloPanelTitle}"> <content><button text="{i18n>showHelloButtonText}" press="onShowHello"></button><input value="{/recipient/name}" description="Hello {/recipient/name}" valueliveupdate="true" width="60%" data-cke-editable="1" contenteditable="false"><button text="{i18n>showHelloButtonText}" press="onShowHello"></button></content></panel></content></page></pages></app></mvc:view>
Compared with the previous one, although the content is the same, we have introduced many components to make the interface more hierarchical. Put all the components into the Page. The basic structure is App-> Page (which contains content)-> Panel (which contains content ). The real page content is placed in the Panel, and the first two layers are only for basic functions. In addition, you can set displayBlock to true to display the phone page normally.
Modify the code in the index.html file as follows:
<!DOCTYPE html>... <Script> sap. ui. getCore (). attachInit (function () {new sap. m. shell ({app: new sap. ui. core. componentContainer ({name: "sap. ui. demo. wt ", height:" 100% "})}). placeAt ("content") ;}); </script> the Shell component in SAP UI5 is used to store the page content to ensure the response of the page, better support for mobile devices. In addition, we also set the height attribute to 100%, indicating that the screen is full.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
