Proposal: HTML5 Mobile Template for Apache Roller

Proposal Abstract:

Roller is a full-featured, multi-user and group-blog server suitable for blog sites large and small. It has features such as multi-user and group blogging, comment moderation, spam prevention, RSS 2.0 and Atom 1.0 support. In nutshell roller is a blogging engine.

Mobile browsers are starting to eclipse desktop web browsing and, unfortunately, most Roller themes do not work well on small-format mobile devices. This project will address this shortcoming by modifying the Roller blog rendering system to support mobile-ready blog theme templates, and providing one example theme that uses these features in combination with HTML5 to show full-sized pages to desktop browser users and small format pages to mobile users.

Requirements

• Identify and differentiate request from desktop user agent to mobile user agent.
• Ability to specify user preference for mobile theme or full theme (Desktop) as default theme.
• Render mobile theme if user preferred mobile theme and request comes from a mobile device.
• Add one HTML5 mobile theme as a sample.

Issues

• How to detect the possible matches for mobile devices in HTTP header user agent.
• Efficient way to manage and maintain possible devices list for new mobile devices added in the future.
• How to render the mobile theme.(Do we let the theme designers to implement their own mobile theme or one theme to act in both ways.)
• Basic information that is to display in mobile template
• Feature to be added to the HTML5 template.(Client side storage , media etc.)

Design

How mobile detection is done?

Roller mobile will use details in HTTP header's user-agent and match it with possible matches using regular expressions.

How to render the mobile theme?

In our design we are having one template which can be dressed up according to the detected device.We use WeblogTemplateCode to maintain different types of Template Contents , template Language to assist in that.

When a user requests a Weblog page first the template is loaded and then it is being prepared using the identified "type" such as standard , mobile etc.

How a mobile theme is rendered.(User preferred mobile theme for mobile devices.)

How many Themes we have?

We were evaluating the possibility of having a separate theme for mobile and it failed to withstand with roller existing architecture.The most suitable solution is to have a Theme with bunch of templates

Which has different template contents.We can define what are the template codes and their required attributes to load them into system.

What are the changes to Theme.xml ?

Following is an extract from Theme.xml

  <template action="weblog">
        <name>weblog</name>
        <description>weblog</description>
	<link></link>
        <navbar>false</navbar>
        <hidden>true</hidden>
         <templateCode>
           <templateLanguage>velocity</templateLanguage>
           <contentType>text/html</contentType>
           <contentsFile>weblog.vm</contentsFile>
           <type>standard</type>
       </templateCode>
         <templateCode>
           <templateLanguage>velocity</templateLanguage>
           <contentType>text/html</contentType>
           <contentsFile>weblog-mobile.vm</contentsFile>
           <type>mobile</type>
       </templateCode>
    </template>

One should add template code for a standard template and can leave other types (In here mobile template code) not adding.If there is no templateCode entry for mobile type we are cloning the standard's template code.

Major Changes in Roller code

Entry in createDB.vm

create table rol_templatecode (
    id                 varchar(48)  not null primary key,
    templateid varchar(48) not null,
    template     $db.TEXT_SQL_TYPE not null,
    templatelang varchar(48),
    contenttype  varchar(48),
    #columnNotNullWithDefault('type' 'varchar(16)' 'standard')
);

In Templates interface

  public WeblogTemplateCode getTemplateCode(String type) throws WebloggerException;

In WeblogManager interface

 public WeblogTemplateCode getTemplateCodeByType(String templateName, String type)
            throws WebloggerException ;

  public void saveTemplateCode(WeblogTemplateCode templateCode) throws WebloggerException;

User Interface for template code editing.

Sample Mobile theme Design Preview in Nook Color.

Home Page

Entry Page

Search Result page

Blog Posts relevant for design

Roller Mobile design - New approach

http://rollermobile.blogspot.com/2011/08/u-turn-in-roller-mobile-design.html

Roller WeblogTemplateCode design

http://rollermobile.blogspot.com/2011/08/roller-weblogtemplatecode-design.html