In this tutorial, you will learn how to build an app with more than one page and to enable the user to switch between the pages using buttons. The tutorial will build upon the first tutorial in this series - Hello World - so you might want to look at that first If you haven't already done so.
Log in and create a new app. You can call it what you like - mine is called "Two Pages". You should see the three column arrangement of the now (hopefully) familiar Layout tool. In the property grid in the right panel, click on the box tab and use the color picker to change the colour of the starter page:
Add a second page
Now turn your attention to the bottom of the left most panel, to the pages section underneath the widget pallette:
Click on Add, and a second page should appear:
The new page, Page 2, is automatically selected to appear in the middle panel f the screen - that's why it's gone white. Click on the two named buttons in the pages section to switch the central panel between the two pages and notice the colour changing.
Differentiating the pages
Let's make the differences between the pages greater. Select Page 1 by clicking on the button with that label in the pages panel. Then add a label widget to the page, change it's text to "This is Page 1" and increase it's size. If you are not sure how to do this, look back at Tutorial 1 - Hello World.
Now we want to do something similar to page 2 but we will use a short cut. Select the label widget by clicking on one of its words in the central panel. You should see the yellow box surrounding the text. Now click on the Copy button in the menu just above the panels:
You should see the Paste button become light to signal that you have something in the copy buffer. Now switch to Page 2 and click on the Paste button. A copy of the label widget should appear on that page in the same position as on Page 1. Select the label text and change it to say "This is Page 2":
Don't forget to click the Save button now and then to keep your work safe. To ensure you have got this far correctly, use the buttons in the pages section to switch between the two pages. You should see both the colour and the text on the pages changes as you do so.
Adding the buttons
Switch to Page 1. Then click on the Button tab in the widget panel:
Select the second of the available button widget styles and drag it onto the page. Feel free to resize and position it, then change its text label in the properties grid to "Go to Page 2".
Select the button and click Copy. Switch to Page 2 and paste an identical button there. Select the button and change its label to "Go to Page 1". Save your changes.
Make the buttons change the page
Finally, let's make the buttons do what they say on their labels: change to the other page. Switch to Page 1 and select the button there. Go to the settings tab in the property grid and use the dropdown next to the word "navigate" in the 'tapped' section to select Page 2. As you have probably guessed, this means that the button will cause the app to navigate - or to change - to Page 2 when it is tapped by the user. The dropdown contains all of the pages in the app plus a couple of general options - "back" which means navigate back to the last page shown, and "None" which means do not leave this page. While you are there, select the page by clicking an empty part of the background (or the Page 1 button under the Pages heading) and set the animation drop down to "Slide Right" to control how the page appears on screen.
Now switch to Page 2 and repeat those actions for the button there, selecting Page 1 in the navigation dropdown and Slide Left in the ainmation dropdown, and save your changes.
Preview your app
Click on the Preview button at the top of the screen to see your app in action. Check out Tutorial 1: Hello World if you are unsure about this part. The result of your hard work should be that you can slide between pages by clicking on the buttons found on each of them.
One more thing - the Home page
Looking back over the screenshots above, you might notice that the Page 1 button in the pages panel has a little house on it:
That means that Page 1 is the Home page - the page that will first appear when the app starts up. Any page can be set to be the home page - just drag Page 2 above Page 1 in the pages panel to set it as the home page, save and preview the app again to see the effect.
And that's it. Feel free to play around with pages further to explore, for example, other transitions and the navigate back option.
Now you can move between pages, next we'll be looking at Adding Dynamic Content so that you can use a single page to display different data - cutting down the number of pages and work needed to build your app.