In this tutorial, we want to introduce you to qooxdoo mobile. As a first sample, we want to add a page to our mobile app showing one button. This button should bring up an alert window when pressed.

First Page

Creating a page is like creating any other widget. As soon as we have this page, we need to tell the page manager to take care of it. Initially, we want to show this page as well.

var page = new qx.ui.mobile.page.NavigationPage();

this.getManager().addDetail(page);
page.show();

Running this code shows a blank page, not even having a page title. Let's change that and add a page title.

page.setTitle("Hello World");

Add this line between the creation of the page and the show call. This will set the title of the page. Run the sample to see the result.

Add the Button

Next, we want to add a button. As mobile devices are usually not that performant, it is always a good idea to delay execution as much as possible. To make sure we don't create every widget on startup, qooxdoo offers an initialize event which will be fired when the page needs to initialize. In our case, we use that to create our button and add it to the page's content.

page.addListener("initialize", function() {
  var button = new qx.ui.mobile.form.Button(
    "Hello..."
  );
  page.getContent().add(button);
}, this);

Add these lines of code to the sample right after setting the title (and before the show call) and run it. It will show you your mobile app, a page with a button.

Reaction

As a final step, we want to show an alert every time we tap on the button. For that, we need to add a listener to the buttons tap event.

  button.addListener("tap", function() {
    alert("... World!");
  }, this);

Place this code in the handler for the initialize event, run your app and see the final result.