Step 11: Pages and Panels


After all the work on the app structure it’s time to improve the look of our app. We will use two controls from the sap.m library to add a bit more “bling” to our UI. You will also learn about control aggregations in this step.


Step 11: Pages and Panels - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 11.

We put both the input field and the button inside a containing control called sap.m.Page. The page provides an aggregation to
0..N other controls called content. It also displays the title attribute in a header section on
top of the content. The page itself is placed into the pages aggregation of another control called
sap.m.App which does the following important things for us:

  • It writes a bunch of properties into the header of the index.html that are necessary for proper display on
    mobile devices.

  • It offers functionality to navigate between pages with animations. We will use this soon.

In order to make the fullscreen height of the view work properly, we add the displayBlock attribute with the
value true to the view. The actual content is wrapped inside a Panel control, in order to group
related content.


We add new key/value pairs to our text bundle for the start page title and the panel



8 + thirteen =