CODEWITHSUNDEEP
architecturecordova
Asaf Haim
Asaf Haim

Reputation: 45

Phonegap - architecture design

I have a question regarding the Phonegap basic architecture design:

1.The phonegap project contains an "index.html" file which controls the flow and functionality of the application.

If I need to implement an app which contains 4 tabs, the general idea is creating 4 classes, one for each tab, allocate a middle section for its view (the upper and lower sections are the static bars) and changing it each time a click event is happening on the tabbar (the bottom bar).

Should I squeez everything into one giant index.html file or use couple of html files but then how can I upload more then one file when the project is beeing deployed via Phonegap (since the deployment requires one html file).

2.Where can I get a good explanation with examples of creating (and deploying) a complete phonegap project.

Thanks, Asaf

Upvotes: 2

Views: 3219

Answers (2)

Madhusudhan Mahale
Madhusudhan Mahale

Reputation: 21

just came across this link , though very old question , answering here for the benefit of subsequent visitors ..

PhoneGap / Cordova apps can be written in two flavors

  1. Single Page App (ajax based , 1 html file (index.html) + no of JS , css , resources )
  2. Multipage App (multiple Html pages )

From my experience I would suggest, go for Single page application strategy , reason it has many performance advantages over multipage application , as follows

Cons of Multipage Applications Cons

  1. Due to transition between pages

    • Flicker and blank screen when pages are loaded and unloaded
    • Lose anything in-memory in JavaScript.(libraries, collected data)

  2. PhoneGap JavaScript library Should be included in every page that uses PhoneGap APIs.

    • Now this expects to have DeviceOnReady event fired for Every page , this will incur
      substantial delay in the app which is highly undesirable .

  3. Apple Appstore (The Dark Giant in White )

    • Any app that looks or behaves like website will be rejected and it is explicitly stated inthe Apple’s iOS Human Interface Guidelines that apps exhibiting “Web Based Designs” will be rejected.

Suggestion frameworks to build Cool Single page ( UI + PhonegGap ) App

  1. Sencha Touch 2.x , this is very comprehensive Mobile framework , completely based on

HTML5 , css, JS also its offers inbuilt MVC also out of the box Store , so its MVCS

M - Model
V - View 
C - Controller
S - Store

have a look at http://www.sencha.com/products/touch/

Upvotes: 2

Mayur Birari
Mayur Birari

Reputation: 5835

Please go through with this document called 'get started Guild' for phonegap. You can setup Phonegap in 5 mobile platforms sdk.

Now Phonegap runs on HTML, css and Javascript, so you need to get familiar with the HTML, css, javascript and yes it is possible to create multiple html pages in your app, to navigate from one html page to another you just need to call js method window.location from your index.html which is default main html page for phonegap application.

You can build bottom tab bar in phonegap by using 2 ways specially in iPhone you can called the native UITabBarController or you can customize bottom tabbar using HTML, JS and css so that can useful for many platforms.

There are number of good js plugin available for Mobile that you can easily integrate in Phonegap like sencha touch, JQTouch, jQuery Moblie etc.

Following link will help you to setup sencha in phonegap- http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap

If you interested to integrate sencha framework please download sencha framework
Demo - http://dev.sencha.com/deploy/touch/examples/kitchensink/

If you interested in JQtouch, you can find useful code here
Demo - http://web.me.com/djpinter1/iPhone/jqtouch/demos/main_tabbar/#ui

thanks,
Mayur

Upvotes: 0

Related Questions