Getting started with bemokoLive - my first site

From bemoko developer wiki

Jump to: navigation, search

Introduction

The bemokoLive platform makes it easy for you to deliver interactive web application for the mobile phone. It allows you to:

  • create UIs (look & feel) using your preferred creative tools.
  • let the platform pick the most appropriate UI for the connecting device
  • create sites using your preferred web framework such as PHP or Grails.
  • rapidly deliver sites based on white labelled site templates and site inheritance.
  • quickly deploy, test (on real devices) and go operational.
  • hook into context awareness - such as the connecting device and location.
  • let the platform take care of any device quirkiness.

If you want to get hands on with these examples quickly install bemokoLive with the Quick Installation guide.

Creating my First Site

The bemokoLive platform provides a very simple mechanism to select the most appropriate UI. This is most easily demonstrated by creating a simple hello world example.

Step 1 : create a file called ui/mobile/index.html in your site directory with the HTML below. The site directory is by default in the WEB-INF/sites directory of the bemokoLive web application, but can be configured to alternative locations with the bemoko.sites.location JVM parameter - see Configuring bemokoLive. 

<?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>my page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>my page</h1>
    <div>hello mobile</div>
  </body>
</html>

Step 2 : create a file called ui/pc/index.html in your site directory with the following HTML: 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>mypage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <h1>my page</h1>
    <div>hello pc</div>
  </body>
</html>

Step 3 : access your site from a PC browser, e.g. go to the URL http:// live.bemoko.com/mysite/i. You should see the "hello pc" message displayed

Step 4 : Now access your site from your mobile phone, go to the same URL as you accessed with the PC browser, e.g. http:// live.bemoko.com/mysite/i. You should see the "hello mobile" message displayed.

So what's happened here?

  1. The platform is picking the most appropriate rendering for the connecting device.
    most appropriate is configurable based on the context of the connection, for example all mobile devices, all wml devices or the iPhone. You'll discover how this is configurable, but a default selection rule is defined out-of-the-box.
  2. The CSS is being picked up from the parent site
    You referred to a css called main.css in your HTML files, but you didn't actually create this file. The platform picks up resources, such as the CSS or images, from either the fallback device or the parent site (which ever is found first). In the case of this simple site the parent site is the default out-of-the-box site which already has a default main.css defined. You'll discover that, as with all site configuration and resources retrieval, you can override the default behaviour and provide your own CSS files, even different CSS files for different UIs if you desired. You can also create template sites which define either default UI styling or default functionality. You can then rapidly create new sites which inherit from these template sites. For example you might have an event template site which is created to define a typical event site. When you come to create an event site for a specific event you can just extend the template one to have fully functional event site up and running in minutes.

Inclusions

Components of the page can be easily reused with the [#include "mypath/myfile.html"] instruction, for example: 

<?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>

As with any other resource loading you have the option of overriding the included file with a special version for a particular UI. By breaking the page down into modules you have the flexibility of configuring small parts of the page for different UIs as needed and not having to create variations of the complete page. This reduces effort in site building by encouraging reuse and removing the need to cut & paste parts of the page.

Creating a Microsite

Dynamic user interactions (and integration with other web frameworks) are configured in the site-config.xml file in the root directory of the site.

Step 1 : create site-config.xml in the root of your site directory. 

<?xml version="1.0" encoding="UTF-8"?>
<site>
  <content-sources>
    <source plugin="yaml">
      <init-params>
        <param name="filepath" value="data/artists.yaml" />
      </init-params>
    </source>
  </content-sources>
 
  <intents>
    <intent name="i" type="template" view="index.html"/>
  </intents>
</site>

Step 2 : create the file data/artists.yaml 

artists:
    - Lloyd Cole
    - Coldcut
    - Underworld
    - The Prodigy

Step 3 : create the ui file ui/mobile/index.html 

<?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>
    <ol>
      [#list content.artists as artist]
      <li>${artist}</li>
      [/#list]
    </ol>
  </body>
</html>

Step 4 : Now access your site from your mobile phone, go to the same URL as you accessed with the PC browser, e.g. http:// live.bemoko.com/mysite/i. You should see the list of artists displayed.

So what's happened here?

  1. The platform has loaded the artists data file made the data available for the UI to render.
  2. The plugin yaml is a standard out of the box plug in (defined in the default site) that loads the YAML file. It's written in Groovy (a Java-like scripting language) and is available to you as a site developer to extend if desired.
  3. The HTML page has some special instructions, such as [#list], which instruct the rendering to include the appropriate data. The default templating language within the bemokoLive platform is FreeMarker and includes rich functions with a particular focus on rendering web pages.

Conclusion

This document gives you a brief introduction to building sites with the bemoko live platform. You have learnt how to delivery different UI to different groups of devices and how to access data in simple microsites.

What next? The bemoko live platform encourages the creative process by making it easy to get a site ready for your mobile. You're encouraged to start creating a site to quickly let your creative ideas go wild and discover what works for you. You can keep it simple to start with, and get something live in a matter of hours - and when you're ready you can start unleashing the full power of the platform by using the web framework of your choice.

Retrieved from "http://www.bemoko.com/wiki/Getting_started_with_bemokoLive_-_my_first_site"