Mobile apps usually consist of many pages. In this tutorial, we want to show you how you can create two pages and link between them. We won't go into much detail about how a page is created, which we already covered in the Hello World tutorial.

Page one

Lets get started with the first page.

var page1 = new qx.ui.mobile.page.NavigationPage();
page1.setTitle("Page 1");
this.getManager().addDetail(page1);

This is the basic setup for our page. We add a button in the initialize handler to jump to the next page.

page1.addListener("initialize", function() {
  var button = new qx.ui.mobile.form.Button(
    "Next Page"
  );
  page1.getContent().add(button);
},this);
page1.show();

Page two

Now, lets add the second page which is almost like page one.

var page2 = new qx.ui.mobile.page.NavigationPage();
page2.set({
  title : "Page 2",
  showBackButton : true,
  backButtonText : "Back"
});
this.getManager().addDetail(page2);

The main difference to page one is that we tell the page to show a back button with a certain text.

Of course, you will only see page one after running your app because we did not connect the buttons.

Connect the pages

The next step is to connect the pages. That means we need to tell the application to jump to the second page in case we press the button on the first page. Add a tap listener to the button of page one in the initialize handler.

  button.addListener("tap", function() {
    page2.show();
  }, this);

Now run your code and click the button. You will see that your second page will slide in as expected. But clicking on the back button does not work like expected. That will be our next task, connecting the back button.

page2.addListener("back", function() {
  page1.show({reverse:true});
}, this);

Ad these lines of code after the creation of page two. As you see in the code, its like the listener we added to the button on the first page. The only exception is that we tell the show method to reverse the animation. Now give it a try, your final mobile app featuring two pages is ready!

If you want to continue, try to add content to the second page like a qx.ui.mobile.basic.Label, or add a third page.