Wednesday, October 30, 2013

4. Android backbutton handlers

As I know, many PhoneGap APP’s don’t handle android backbutton event.
For example, the ones built with jQuery Mobile.
When a user taps the backbutton on the android device,
the APP just goes back to the previous page, and if no previous page found,
the APP exists without a message.

This is absolutely not acceptable for professional PhoneGap developers. Because many pages cannot simply go back,
and there should be customizable handlers to handle backbutton event on each page.

Now I’m going to show you how our architecture lets you handle the backbutton so easily.

Firstly, nova.application has an array property named histories that stores all pages except for the index.html.
And then, each page (inherited from nova.Page) has an array of backbuttonHandlers.
When you press backbutton on the page while the array is empty,
the APP will automatically goes back to previous page if there are any in the histories.

You can clear and set nova.application.histories as you wish.

You can go back to a specified page by putting a parameter to nova.application.goback(urlUntil).

You can handle custom backbutton event easily for each page, something like:

If the handler is not ever needed, then you need to call this.backbuttonHandlers.pop();

nova.application.currentPage

Another property of nova.application. You can access to this object anywhere.
It can be used to handle backbutton out of the page definition, instead, can be in helper methods, ect.

Nova.Page.isBackbuttonDisabled

This issued to disable the backbutton on the current page. If it’s set to true,
no backbutton handlers will execute. You will find it useful in some situations.

How to test backbutton handler in web browser?

It’s really simple.

Suppose you are using Google Chrome. In the console, enter “cordova.mock.triggerBackbutton()”.
It mocks a backbutton event is triggered.
You can trigger other events by calling “cordova.mock.trigger(‘menubutton’)”. Of course,
you need to using cordova.mock.js instead of cordova.js when testing on web browsers.

In the last post, I described the file structure.
In this post, I will describe the shell of the APP.

2. APP Starts And Index.html

Firstly, let’s take a look at the index.html.

This page is a shell of your APP. All JS and CSS are loaded once when the APP starts.
You can use this page as a master page of your APP, and you can initialize everything here.
After the initialization is done, call: at.start(new at.pages.Home());

Before running the project, you need to merge all the JS files into the "at.all.js".
There are many tools can do the merge.

Please notice the scripts links. It’s using jQuery.
Don’t worry, the performance is very good after tested on many of our projects.
And then the cordova.js, nova framework(nova.all.js), project (at.all.js).

So is this file, very clean.

Here the variable at = nova.application, and extended with other properties.
The parameter is a page that inherits from nova.Page.
I will describe it how easy to make a page in the next section:
APP Navigation

It's not because it's written by our team,
but I do think it is the best I ever work with after trying so many other architectures.
Here "other architectures" mean the ones based on libs or frameworks or combine like jQueryMobile,
KendoUI, SenchaTouch, AngularJS, BackBone, etc.

Let me show you why it’s the best:

1. Highly Readable Code

A good architecture MUST create clear file structure.
The files must be organized very well to keep the code highly readable, which means:

No file have more than 300 lines of code, normally less than 200;

No folder have more than 30 files.

See below screenshot.

How does it look? I believe it looks very clear. All html pages are put into folder “pages”.
All project-related javascripts are put into “scripts/at”, and there a few layers to group the JS files.
You can easily get to know where to create new files or folders under this architecture.