Add Content Pages

Typical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. You now add two of them to your app.

1. One sap.m.Page control is created, its title is set and the content is just one button:

    // create the first page of your application
   var page1 = new sap.m.Page("page1", {
     title: "Initial Page",
     content : new sap.m.Button({ 
       // content is just one Button
       text : "Go to Page 2",
       tap : function() {
         app.to("page2"); 
         // when tapped, it triggers drilldown to page 2
       }
     })
   }); 

   When the Button is pressed, it triggers a drilldown navigation by calling app.to("page2"), where page2 is the ID of the second page. You could also give the animation type. The default is a slide animation from right to left.

   sap.m.Page controls can be used as pages, and the aggregation is called pages, but other controls could be used as well.
2. Add the following to the <script> seciton of the HTML page below the part, where you've initialized the app:

    // create the second page of your application
   var page2 = new sap.m.Page("page2", {
     title: "Page 2",
     showNavButton: true, 
   // page 2 should display a back button
     navButtonTap: function(){ 
       app.back(); 
   // when tapped, the back button should navigate back up to page 1
     },
     icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
     content : new sap.m.Text({text:"Hello Mobile World!"})
   }); 

   showNavButton is set to true to get a Back button displayed. When this button is triggered, the handler calls app.back(). This causes an inverse animation, which leads back to the main page.

   A header icon, which is only visible on Android, and "Hello Mobile World" content is also given.

3. Finally, add the two pages to the App:

   // add both pages to the App
   app.addPage(page1).addPage(page2); 
   

   The app is placed into the HTML like a SAPUI5 desktop control. The App takes care to cover the whole screen.