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.
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.
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.
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.