PhoneGap Sample and Getting Started

Question

I have experience developing WPF, iOS and ASP.NET apps. I want to try PhoneGap, but am really struggling to find a well coded example of a multi page app. The only thing I can thing of for switching between views is by having everything on index.html and toggling div visibility, which seems messy. Also, I can't find any documentation on how to use TabControls. Is there a useful sample app to download anywhere which shows the different features and how to use them?

There dont seem to be any guidelines on whether to use jQuery Mobile, jQuery UI, Django, Backbone, Angular or any number of other Frameworks.

Answer 1

Multi-page apps: Multi-page apps are a bit more difficult to get working right on multiple devices due to the fact that the page transitions (sliding) is difficult because the page you want to navigate to doesn't exist in the DOM yet. With a single page app (with multiple page views) it is much easier to accomplish. Most of the time I do multi-page apps and just ignore the transitions. I, like you apparently, like my code to be a bit cleaner. So the user doesn't get to see the current page slide out and the new page slide in... They will get over it.

Examples: Holly Schinsky has a really good blog with tutorials and tips/tricks. I started following here when she was doing Flex tutorials. Her blog can be found here. In particular, take a look at here getting started guide here. You can find an example of an HTML5 tab control here. Sure seems like a lot of extra code though if you are going to be using a framework (see below). Most of them have tab controls already built in. Take a look here to see Bootstraps implementation of tabs

Frameworks: Personally, I used to use jQuery Mobile but recently I have moved away from them and started using Bootstrap. I am much happier now. BTW, you technically can use jQuery UI, but it is really meant for desktop browsers.