Mobile module for Magnolia CMS is a custom module that allow to serve different templates with the same content according to device used to browse pages. Developers can define different templates to be served depending mobile device capabilities, resolution, browser, OS, device. 

The module uses wurfl to identify mobile device and select the right template to serve.

Module includes preview mode (with configurable devices) to spot how pages would be visualized on real device (dimensions and templates).

Page editing is made in the usual way.

  The URI of the ContextMenu tag library is mgnlmobile.

<jsp:root version="2.0" ... xmlns:mobile="mgnlmobile">

<cms:mainBar>
    <mobile:preview position="left"/>
</cms:mainBar> 

 Add a content node to devices-preview in Configuration workspace named as wurfl device identificator (e.g. apple_ipad_ver1 for iPad).

• Insert outer frame size in previewHeight and previewWidth nodedata.
• Insert device screen size (mind toolbar) in screenHeight and screenWidth nodedata.
• Insert distance from frame outer border to preview area in screenTop and screenLeft nodedata.
• Fill previewImage nodedata with image url that will be used as preview area frame .

Add a content node named mobile to your normally defined template. Now you can add a content  node named defaultTemplate, this is the template that will be served if no other specific devices or capabilities templates are defined.

Additional templates can be defined for specific devices, user agent or wurfl defined capabilities.

The only difference between paragraphs and templates definitions is the names of content nodes inside mobile node.

defaultTemplate become defaultParagraph

templates become paragraphs

Templates and paragraphs priority chain is:

• Single device template
• Generic mobile template
• Normal template

You can define the following properties in the mobile template definition:

• id
• userAgent
• capabilities (map of capabilities, a node with multiple properties)
  • capability name = capability value (e.g. ajax_support_javascript=true)

You can force the device detected by adding a mgnlDeviceId parameter to the query string, e.g.

• ?mgnlDeviceId=apple_ipad_ver1