How do I create multiple screens/views using phoneGap?

Question

I'm building a reading application and want to try using phoneGap for the first time. I'm comfortable with HTML, CSS and JS, but don't have much experience with xCode. Let's say that for this reading application on the home screen I have a button. When the user clicks the button I would like it to redirect to another screen/view. Would the correct way of doing this be just to create a link on the home page and when they click it redirect them to another view? I don't think I would need another model or controller, but I'm not certain.

Answer 1

The best way to implement multiple 'views' in a Phonegap application is to use the 'single page application' design pattern.

Phonegap applications are native applications that set a native webview as the default and ONLY native view for the application. Though you can use plugins to implement other types of native views, a basic Phonegap application only uses one native view.

You are able to program with HTML/CSS/JS within the webview anyway you prefer.

If you are not familiar with the single page website design pattern here is a basic explanation:

• One single html file
• Use div containers with specific ids to show and hide content
• Ajax requests are used to manipulate data within the application (so no page refreshes are needed)