Page History

...

...

How to render the mobile theme?

There are 3 options available,

• Use different weblog,search ,tags and entry pages for each template. complex to maintain and handle
• Use a one default mobile theme for all desktop theme. restricted
• Use different mobile theme for each desktop theme. preferred method

User preferences for mobile/desktop rendering

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.Image Removed

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

Image Removed

Mobile Theme setting up and its Use Cases

http://rollermobile.blogspot.com/2011/05/mobile-theme-setting-up-and-its-use.html^{Image Removed}

Adding Meta-data in theme.xml

http://rollermobile.blogspot.com/2011/06/adding-meta-data-in-themexml-to.html^{Image Removed}

Tag to define template type in theme.xml

http://rollermobile.blogspot.com/2011/06/tag-to-define-template-type-in-themexml.html^{Image Removed}

Creating custom template

http://rollermobile.blogspot.com/2011/06/creating-custom-template.html^{Image Removed}

...

Image Added

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.

Image Added

Sample Mobile theme Design Preview in Nook Color.

Home Page

Image Added

Entry Page

Image Added

Search Result page

Image Added

Blog Posts relevant for design

Roller Mobile design - New approach

http://rollermobile.blogspot.com/2011/06/editing-templates08/u-turn-in-roller-mobile-design.html^{Image Removed}

...

Roller WeblogTemplateCode design

http://rollermobile.blogspot.com/2011/0708/changingroller-mobileweblogtemplatecode-theme-templatedesign.html^{Image Removed}