Templates - Page Look & Feel
From bemoko developer wiki
FreeMarker
The out-of-the-box templating is FreeMarker. FreeMarker provides a very flexible, powerful and simple templating language that ideal for delivering web sites and services. The FreeMarker documentation provides an excellent reference for what you can do.
MVC
bemokoLive follows a standard Model-View-Controller pattern. This essentially means the model (i.e. the data), the view (i.e. the page rendering) and the controller (i.e. the application flow) are all separated. The bemokoLive templating takes the content loaded by the platform, along with content from the custom plugins, and allows this content to be delivered to the user.
Inclusion
You may have spotted a bit of templating in the getting started article. The instruction
[#include "common/header.html"]
in the getting started guide (and included in the example below) instructs bemokoLive to include the named resource in the appropriate location.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Artists</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> [#include "common/header.html"] <div>Inclusion example</div> </body> </html>
A basic principle of UI development in bemokoLive is that of breaking it down into appropriate building blocks. Breaking it down in such a manner makes it easy to reuse - especially through the site and UI inheritance
Looping Through Collections
You can loop through collections, e.g.
<ol> [#list content.artists as artist] <li>${artist}</li> [/#list] </ol>
where the variable content.artists is a collection and the variable artist is a single element in this collection.
Conditional, if & else
You can conditional render content in your templates, with the if and else construct
[#if condition] condition is true [#else] condition is false [/#if]
For example
[#if device.model == "iPhone"]Welcome, iPhone user[/#if]
If you want to test whether some content is available you can use the ??"" operator at the end of the variable, e.g.
[#if content.blog??]Blog plugin is available[/#if]
And there's more
... See FreeMarker for more details on the templating language used within bemokoLive