rcarragher edited this page Mar 15, 2013 · 3 revisions

The Shell

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 CalatravaPage annotation and the page must be given the correct name in the annotation. The page class must inherit from WebViewActivity and it must override the following methods.

  • String getPageName(): Return the name of the page as a String.
  • List<String> getEvents(): Return the names of all the semantic events that this page will raise as a list of Strings.
  • List<String> getFields(): Return the name of all the fields that this page exposes that can be queried for as a list of Strings.

These last two overrides are required due to the way that the JavaScript interface into a web view must be implemented on Android. Future improvements to Calatrava will hopefully remove the need for these.

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.