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