nuxeo • Themes

I am currently setting up a payment portal for the university.

Start page

Invoice view

Account setup

The layout is rather straight-forward (a top header and a 2-column layout in the main content area), but when viewed using an iPhone the text size is much too small to be usable and a lot of vertical scrolling is required to scan the entire page width.

jQuery Mobile framework

I experimented with the jQuery Mobile Framework (currently in alpha release) and the results seem promising, with little effort required.

iPhone view using jQuery mobile

The only issue is that all existing templates have to be rewritten using the jQuery Mobile markup. jQuery mobile makes use of the HTML5 features.

Even with a well designed separation between the presentation data and the templates a lot of the markup has to be rewritten entirely.

A theme engine for mobiles

I am thinking of registering a new “jquery mobile” engine for use with mobile devices. This is meant instead of the default tabled-layout rendering engine which was designed for desktop browsers (Firefox, IE, …).

jQuery mobile targets most known devices: iPhone, Android, Windows Mobile, BlackBerry ..

It would be up to the application designer to decide which URLs to serve using the jquery-mobile engine, e.g. (mysite.com/nuxeo/site/my-app/mobile/) by registering a specific application view:

<application root="/nuxeo/site/my-app" template-engine="freemarker">
  <view id="/mobile">
    <theme>myapp/mobile</theme>
    <engine>jquery-mobile</theme>
  </view>
</application>
 

A jQuery mobile engine would include:

• the required javascript, css files and images using by the mobile framework
• a translation of pages / sections / cells concepts already used by the nuxeo theme engine into jQuery Mobile concepts (pages, page sections, horizontal content grids)
• probably new fragment views corresponding to jQuery Mobile UI elements (lists, menus, navigation elements, …) to offer a new presentation layer for existing content.

Probably this will be released as an add-on. See NXP-6584 for more details.