From bemoko developer wiki

What is a UI in bemokoLive?

A UI (or User Interface) in bemokoLive is a collection of resources that define what the site should look for a given UI segmentation. A UI may either contain all the resources required to render the UI, or may rely on the inheritance fall back to provide the the full UI. Each UI is enabled for a given a UI segmentation by defining the context rule for which the UI is relevant.

How do I configure UI Segmentation?

UI segmentation is defined in the site-config.xml file, e.g.

<site>
  <uigroup>
    <ui name="iphone" expr="device.vendor=='Apple'" fallback="ajax" />
    <ui name="ajax" expr="device.isRepository('wurfl') and device.get('wurfl:xhtml_support_level')==4"/>
    <ui name="pc" expr="!device.isMobile" fallback="320" />
    <ui name="320" expr="device.displayWidth ge 320" fallback="240" />
    <ui name="240" expr="device.displayWidth ge 240" fallback="208" />
    <ui name="208" expr="device.displayWidth ge 208" fallback="176" />
    <ui name="176" expr="device.displayWidth ge 176" fallback="128" />
    <ui name="128" expr="device.displayWidth lt 176" fallback="root" />
  </uigroup>
</site>

Note that each UI definition is defined with an expression. If this expression is true then the UI is enabled for the given context. In most cases the context for UI selection is based on the device capabilities, however it needn't be restricted to this - for example different UIs could be applied based on user preferences.

These UIs are by default defined by in the default site that comes inside the bemokoLive web application (in the WEB-INF/sites/default) directory. All sites implicitly extend this default site and hence implicitly have the this default UI configuration applied.

For example an Applie iPhone would, according to the configuration above, be identified as an "iphone" AND a "320". Both of these UIs would also be subject to inheritance such that a UI resource would be search for in the UIs in the following order

1. iphone → ajax - and then if not found ...
2. 320 → 240 → 208 → 176 → 128 →

Configuration UI Segmentation Over-And-Above the Default Configuration

The default UI configuration is defined in the default site out of the box - i.e. in the file WEB-INF/sites/default/site-config.xml in the web application. Any site can build on this default configuration and add further UI configuration, e.g.

For example if you wanted to do iPhone3 specific configuration you might want to create an iphone3 ui, e.g. include the following in you site-config.xml

  <uigroup>
    <ui name="iphone3" expr="device.vendor=='Apple' and device.version gt '3'" fallback="iphone" />
  </uigroup>

UI Segmentation Best Practices

A best practice implementation for UI segmentation is defined out-of-the-box for bemokoLive so you're ready to roll with out the need for any UI configuration in the site configuration file. However, you are free to extend to your hearts content if you feel you need the control. This follows one of the general principles of bemokoLive in that we are best practice driven - i.e. out-of-the-box the system works in a ready to use and sensible manner - however we have no desire to constrain you to what we provide. If you need to take control of the UI for a brand new device on the market - then you have the control.

What is a UI Resource in bemokoLive?

A UI resource is a file that provides a part of the UI, for example:

1. An HTML or WML template
2. A CSS file
3. An image or any other binary media file

All text UI resources, for example HTML or CSS files, are templatable and can make reference to dynamic data, either context or content and be broken down as desired into components which can act as building blocks for the site.

Where do I put my UI resources

UI resources should be placed relative to the ui/<ui-name> folder.

Further Reading

• Customise the UI Configuration for a Site - exercise on customising the UI configuration for a site