Clone this wiki locally
The shell is the optional HTML UI that can be shared across the Mobile Web, iOS and Android app. In actuality, it is the entirety of the Mobile Web app UI.
We recommend that you begin by building your entire UI in the shell. Then as you find performance issues or things that aren't possible you switch specific pages to native implementations on iOS or Android. There's no need to switch everywhere: only one platform needs to be changed at a time.
Using the shell as the UI for Mobile Web is described under implementing pages for Mobile Web. iOS and Android are a little different, however.
Using the shell as your iOS UI
As with native pages, shell pages on iOS must be named
<PageName>ViewController. However, these pages must inherit from
WebViewController. You must then override
- (NSString *)pageName
to return the page name.
And that's it.
Using the shell as your Android UI
Again, your page class must be tagged with the
annotation and the page must be given the correct name in the
annotation. The page class must inherit from
it must override the following methods.
String getPageName(): Return the name of the page as a
List<String> getEvents(): Return the names of all the semantic events that this page will raise as a list of
List<String> getFields(): Return the name of all the fields that this page exposes that can be queried for as a list of
Layout for the Shell
When developing the mobile web app, you'll be testing it by running
rake web:apache:start, and hitting
http://localhost:8888 in the browser. The page that this serves up is compiled from
web/app/views/index.haml. This is a single page application html. As the app gets built, with
rake web:build, this haml file gets compiled along with all of your page fragments into a large html page.
This is NOT the way the shell works in ios and droid. There, each of your page fragments gets compiled into its own full html page. This is done by using a different layout file,
shell/layouts/single_page.haml. These pages are laid out slightly differently.
Recognize that they need to be different, for the reasons described above, but you may need to make changes to BOTH places in order for your shell to stay consistent when run in browsers versus devices.