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.

Weblog and Theme Association with types [Design Change]

After the review of Dave's excellent feedback i was redesigning the things implemented which would make things easier to develop the mobile rendering infrastructure.Actually those suggestion would become handy when a new type is introduced in the future.You can see the complete midterm feedback here.[1]


WeblogThemeAssoc is added to Roller Business module which will keep track of WeblogTheme and its associated types.This class is persisted through JPA and has the following table.

create table rol_weblogtheme (
    id              varchar(48)  not null primary key,
    weblogid varchar(48) not null,    
    name            varchar(255)  not null,
    custom          $db.BOOLEAN_SQL_TYPE_FALSE not null,
    #columnNotNullWithDefault('type' 'varchar(16)' 'standard')
);

I have added following method to WeblogManager which is implemented in JPAWeblogManagerImpl.
 
public WeblogThemeAssoc getThemeAssoc(Weblog weblog , String type) throws WebloggerException;

public void saveThemeAssoc(WeblogThemeAssoc themeAssoc) throws WebloggerException;


[1] https://cwiki.apache.org/confluence/display/ROLLER/Roller+GSOC+2011+-+mid+term+project+review

Changes In API

In roller weblog for a theme we can get the template using a link.After introducing mobile templates we need to have two templates for a single link such as  <BaseUrl>/page/archive . Therefore following API change was done in Theme.

public List<ThemeTemplate> getTemplatesByLink(String link) throws WebloggerException

This will return list of templates for the given link (Earlier it was single template.) So the templates will be differentiated using their type (mobile , standard)

I have added a method in Page Model to retrieve the StyleSheet of mobile template.So template creators can add the mobile style sheet using following script.

$model.weblog.mobileStylesheet

Changing a mobile Theme template

In Roller we can change the standard theme by navigating to theme page (in settings) and by selecting one of the available ones we need to change into. Similarly in you will be given an option to change the mobile theme through the same page. The changes to the theme selection page will be roughly look as below. (There a few names/description to be updated properly.)

Editing templates

  Following screenshot explains how i have modified the template editing page so a user can edit both the standard and mobile versions of the templates.

The problems that i had to address were,

1) How to keep track of mobile and standard template pages. (According to the templateEdit class we need to get template id from the bean to display the current template to edit.) 

This was bit tricky and in bean i store both mobile and standard template id. According to the user request we load the mobile or standard template in the tabbed panel.

2) How to synchronize between standard template and mobile template if user changes name or the link.

When user saves a page we will try to figure out if the mobile and standard have the same link and corresponding template name.(for mobile it is foo.Mobile if standard's name is foo). if there is any changes we will change the mobile templates link or/and name, then save it in roller.

3) How to display if only the standard template is only available template.

Simply check if there are multiple templates for a single link and if so use the above UI or else switch to what we have in past (single template page without tabs).

Creating a custom template.

 During the past weeks there were few important mile stones .The first major implementation i had to decide was on how to create a custom template and let the user to render it.I have discussed it in the mailing list and could come up with a method which seems to be convenient and manageable to a user without much trouble. [1]

 The above diagram shows how the custom template creation is going to be handled. When a user logs land on the template creation page he can give the template name (lets say it foo.). And then user clicks on add to add a template to roller.

This will make a roller to create two template pages of types mobile and standard.In that we will assign the default link both the templates as /foo so they are viewable at {baseUrl}/page/foo. So i have modified such that roller can have duplicate templates for a single link but with different types.

Since roller cannot have duplicate templates with single name we are changing the name of the mobile template to "foo.Mobile". But user will not be aware of this action and he will not see such a template in the templates table he sees on the templates page. ( In next post we will let you know how he will be able to edit change mobile version of the template in roller.)

[1]http://www.mail-archive.com/dev@roller.apache.org/msg02470.html

1st patch to test the functionality [setting a theme to render it a mobile theme]

I was able to wrap up my work in to a patch [1] and let the developers to test my progress.I hope i will get feedback on this.To test the work following are the instructions.
1.Apply the patch to the trunk
2.copy one of the Themes in themes directory of webapp (lets copy basic and then change the themes.xml as following)

<id>mobile</id>
 <name>Mobile</name>
 <author>Roller Weblogger</author>
  <type>mobile</type>

Please note in the patch i changed the type of fauxcoly to "mobile" so it will recognize as a mobile theme as well.
3. After building Roller run Dev test run and you can define a mobile theme at weblog creation time.

4.After that try to view the weblog from desktop as well as a mobile emulator (opera mobile emulator). so it will render your defined theme for mobile when you try to view through mobile emulator.



[1] https://issues.apache.org/jira/browse/ROL-1919

Tag to define template type in theme.xml

After discussing the proper meta data entry in the theme.xml i was able to finalize a proper tag in theme.xml.So we will be using <type> to indicate a particular theme's type.At the moment we are defining two types of values for <type>.

1. standard - Normal Desktop/laptop screen size supported themes. (Of course these themes support apple IPAD too.But in future we may have different type of theme for IPAD or tablet optimized too. ;) )

2.mobile - for themes that support mobile devices , (iphones , android phones etc.)

Following is an extract from the new theme.xml for a mobile theme.


<id>basic</id>
<name>Basic</name>
<author>Roller Weblogger</author>
<type>mobile</type>

Adding a meta data in Theme.xml to Identify a mobile optimized theme [Discussion]

It was a week with understanding how the Themes will be loading from the physical location and creating the weblog internal context.I wanted to add a metadata in Theme.xml to identify that a theme is mobile ready or not.

After discussions in the mailing list we are going have <type></type> in the Theme.xml file.So in mobile version of a theme it will be <type>mobile</type>.This is an interesting suggestion from the community since we will be able to define themes for different type of devices in future. So by defining the correct Template designer can make them available for selective rendering based on the device.

 We need to have a default value for <type> tag and following are the candidates proposed.

1.desktop - (we have ipads and laptops so misleading.)
2.default     (not self explaining the type )
3.html         (There are overlapping with mobile theme as well.)

While i was brainstorming for a good candidate i got ,"standard". You can find on going discussion on the above matter in the mailing list. [0]

[0]http://mail-archives.apache.org/mod_mbox/roller-dev/201105.mbox/%3CBANLkTinR+2S4Ppf9rmcTi2Ou+FM1o7myBg@mail.gmail.com%3E

Mobile Theme setting up and its Use Cases

Setting Up a Mobile Theme By Weblog admin


An admin can set up a default weblog theme( Desktop theme.) in current weblog creation page.So one additional step with defining a default mobile theme from the available mobile themes collections.(There will be at least one default as i am going to add a  HTML5 mobile Theme for sure.)

So in theme.xml we will be having an additional entry to indicate that the theme is a mobile theme.(Still it is not finalized with the community and will decide soon on the entry.)

How Rendering will pick up the theme.(Changes in the core)


After the recognition of the request coming from a mobile device, in the PageServlet we need to switch from desktop them  to the defined mobile theme for the identified weblog.So in the weblog we will be having a "defaultMobileTheme" attribute which will be set by the weblog admin at the weblog creation.

So we will assign mobile theme using setEditorTheme( ) at the time it looks for the template to render in PageServlet. (So roller will continue same process afterwards , But having a mobile theme is assigned for its editor theme.)

In coming discussions i will be post on the velocity macros we are going to add to Roller to enhance capabilities in Roller mobile themes.

I would like to thank all the users and developers who gave their valuable feedback in Roller dev mailing list and expect further assistance in future.:)

How to render mobile theme. [Discussion]

This will be interesting an decision to make .After discussion with Dave in a weekly project meeting following are the available options we were able to figure out.

• 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. [ more restricted to a developer]
• Use different mobile theme for each desktop theme. [preferred method for the moment]

So the method we chose is to have different set of mobile themes which can be added separately and specially add a metadata it as a mobile theme.So at the weblog creation user can define one of the mobile themes as the preferred mobile theme to render.I am still evaluating the options and different approaches so the most suitable and maintainable method will be implemented.

Below is a simple view of how rendering is to happen with Roller mobile.

You can find the proposal at Apache Roller wiki : https://cwiki.apache.org/confluence/display/ROLLER/Proposal+HTML5+Mobile+Template+for+Apache+Roller

  

How mobile platforms identify mobile devices

This is the most fundamental question is for anyone who is developing a mobile rendering platform.Lets have a look at the available options.I am getting some examples and try to identify how WordPress plugins and Joomla Templates try to achieve the goal.


I found two popular plugins for WordPress which can identify the device and render the mobile theme accordingly.Mobile Press and Wp-Mobile-Detector are similar in identifying the device and they use a pre defined set of possible values to detect a match in request. (Eg: check possible user agent in request.)Joomla templates also using a similar method by matching the possible values using regular expressions for  HTTP_USER_AGENT.

The most interesting and extensible method i found was to use WURLF .As in the project home page it is "The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices".They are offering a good API for JAVA as well as PHP and i think using WURLF will be more appropriate as it is being updated by the user base more frequently to identify more mobile platforms in the mobile world.


Update. (2011 May 19)
In my Project i will not be using wurlf.

• WURLF is under GPL and not compatible with Apache licence.
• At the moment we do not want to know the device capabilities.

Project 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.

You can find the complete proposal at : 

http://socghop.appspot.com/gsoc/proposal/review/google/gsoc2011/shelan/1