Roller Mobile Themes are popping up in your mobile device.!!!

So the new mobile appearance of Roller coming into action.I believe all the Roller users will be please to hear this news.I was able to commit a basic sample mobile theme which is mobile friendly to view and it is supported by newly designed roller mobile rendering platform.You do not have go to additional URLs to view mobile version.Just view in a mobile device it will render the mobile version of templates.

Yes the current mobile theme is at its early childhood, But the platform enables users to add their mobile themes into the system very easily.My theme just an example to illustrate and test the platform. You can edit your mobile templates when you customize your theme or add new templates for shared themes.

Here are some of the screenshot of my theme design.These screenshot were taken using nook color which has android OS. [I am not an expert in theme designing but JQuery was powerful enough to assist me in that task within a very short time.]

1.Home Page

2.Entry Page

3.Search Result page

How to change template codes in Roller template editing page

Nothing major has changed for mobile.But you will be able to edit the template of mobile version by just switching using the tabs in the template editing page.Following is a screenshot of the editor with new changes.

Changes in the theme.xml [New changes]

Earlier we were trying to add another theme for mobile, But with the new roller architecture we have theme packs with templates with different template codes as template contents.

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.

Roller WeblogTemplateCode [design]

In our new design we are using WeblogTemplateCode to maintain the information of template content, template language and template type. Following is the complete entry for the database table we are creating make them persistent.


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')
);

This design allow us not to deviate from existing roller architecture.We are simply prepare the template using the WeblogTemplateCode for the detected type (standard, mobile etc.) before rendering it to the user.

Improvement in Roller Mobile Design

You may be sometimes wonder why i was silent for couple of weeks without posting.It was some hard brainstorming and sleepless nights that i had to spent to come up with a solution for a blocker i had while implementing.

At the start of this blog we have been discussing and chose the path of theme based rendering.In another words we agreed to have two different themes to for two types we have at the moment (Which are type standard and mobile.)There was some friction as progressed but i was able to tackle all the hurdles up to the  point of implementing "theme customization".We had separate types of templates bunched to different types of Themes.

The actual problem is when someone starts customizing a theme then he creates a wrapper Theme which is attributed as "custom" and it gets all the templates from the them importing.Since we have two types of Shared themes initially, once you start customizing this leads to a major problem.There are 4 possible states such as {Shared.Standard , Shared.mobile} ,{Shared.Mobile ,Custom.standard} ,{Shared.Standard,Custom.mobile} and {Custom.standard, Custom.mobile} Which complicates the existing architecture of Roller.

Therefore after discussing with Dave i started to redesign and came up with a better solution which has less impact on the roller core as well as elegant to have in the system.This time we decided not to attribute types to Themes or Templates but to maintain WeblogTemplateCode objects which will keep the different types of codes to render when it identifies the correct request.

I have committed the code and implemented the changes, reverted some of the codes from previous design.One of the things i noticed while implementing this new design is the less friction to implement.That is because ,it is more aligned with the existing Roller architecture. Even though i had to spent extra hours on this. I am really happy that i could produce some better code and design than previous so it is an important improvement for the future of Roller Mobile platform as well as coming new types.I really appreciate and thank Dave who is my mentor for offering his helping hand whenever needed.

Await for coming post to experience on how easy to add and customize new templates.