The Best PhoneGap Architecture - (3)

Enjoy the art of the coding...

3. Page And APP Navigation

First, JS part.

Here is a very good sample that demonstrats how to make a page and achieve page navigation.

Here is a page named “Menu” that inherits from nova.Page. It’s method onLoaded will be called when the HTML loaded into the #body div.

Please notice the bindClicks events. It demonstrates 4 kinds of page navigation.

1. Simply go back. (android backbutton can also trigger this).
2. Go to a simple page
3. Go to a normal page.
4. Go to a normal page with parameters.

If you are making a complex page, you can add many more methods to the page prototype object.

More examples:

Then, how is the HTML part?

Second, the HTML Part.

Take a look at the below HTML page.

It’s clean and easy to write. As the basic layout and JS are initialized when APP starts on index.html, the other pages just need to focus on the single page logic. You will love it!

More examples:

Demo source code: https://cordova.codeplex.com/SourceControl/latest#demos/AnnualTargets/www/