From bemoko developer wiki

Get the Site

1. Check out the source from SVN into your bemokoLive sites directory.

   cd ~/bemoko/sites

   svn co http://bemoko.googlecode.com/svn/sites/exercise_ui_configuration/trunk exercise_ui_configuration

2. Or download (coming soon) and extract the site into your bemokoLive sites directory.
3. Access the page on your bemokoLive install, e.g. http://localhost:8080/live/exercise_ui_configuration/i

You can also simply browse the source.

How does it work?

This exercise demonstrates the definition of a new ipod UI for a site and with the iphone UI to fallback to the ipod UI.

The site-config.xml contains two UI definitions 1) Override of the iphone UI to fallback to the ipod UI and 2) create the ipod ui.

<site>
  <intents>
    <intent name="i" type="template" view="index.html"/>
  </intents>
  <uigroup>
    <ui name="iphone" expr="device.model=='iPhone'" fallback="ipod" />
    <ui name="ipod" expr="device.model=='iPod Touch'" fallback="320"/>    
  </uigroup>
</site>

Since this site (and all sites) extend from the default site, this UI configuration extends from that defined in the bemokoLive web application @ WEB-INF/sites/default/site-config.xml

The [#include "content.html"] instruction in index.html file will then pick up either:

1. ui/iphone/content.html if you are using an iPhone device, e.g. user-agent of

   Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5H11 Safari/525.20

2. ui/ipod/content.html if you are using an iPod device, e.g. user-agent of

   Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Mobile/7C106c

3. ui/root/content.html if you are connecting with any other device

Further Reading

• UI Configuration - documentation on bemoko UI configuration