An Eclipse plug in to allow Liferay developers and designers to quickly create (and/or RE-create) Liferay themes using the latest Liferay technologies
At the moment, theme development consists of taking an existing theme and modifying it by hand. This can be a difficult and time consuming task, especially for those who are not intimately familiar with the Liferay required CSS elements.
More importantly, Liferay functionality is rapidly changing. New features are added, and existing features are changed (for example, in the recent 4.2 code found in Trunk, "template" selection was moved from a drop-down list on the "Add content" screen to its own separate window.) When these changes are finally released, existing users are forced to RE-WRITE their templates to match the new code.
The Liferay Theme Builder will eliminate the need for constant re-factoring of existing templates to catch up with the new Liferay technology, as well as make template creation more accessible to the masses (read: non-programmers). This should help accelerate the adoption of Liferay in general.
Using a Model Driven Architecture approach, the theme builder will start with a single mock-up image of the entire web site (a .jpg). The user will then graphically lay down a series of rectangles to mark "required areas" (as defined by the "theme model"). These areas would be things like "Title bar", "Navigation menu", "Portlet frame", "portlet contents", "footer", etc. This "Mock-up image + Model" would then be saved to a file.
The "theme compiler" will then take the mock-up, extract the necessary image slices, and combine it with a pre-programmed "theme templates" to generate the final theme and CSS.
As Liferay theme functionality is developed, the Liferay development team need only modify the theme templates. Once new versions are delivered, end users need only "recompile" their themes with the updated templates to re-generate a new theme.
Initial Project Scope#
<outline the initial project scope>
Discussion of Design/Implementation Approach#
Eclipse SWT already has a lot of components available for image display. Creating a GUI to allow rectangles to be layed down is fairly straightforward. Here is some sample code to use as a starting point.
The "theme model definition" would be defined in an XML file. The XML file would define what "rectangles" the theme system needs to know about. A rectangle would either be an absolute position rectangle, or a child rectangle relative to and bound somewhere inside of its parent. Other data types may also be needed: a "frame" would be composed of TWO rectangles (a parent and a child rectangle). A "slice" would be a single area inside of a rectangle, with three of its four sides defined as the boundary of its parent rectangle.
The "theme compiler" would use Velocity. A "theme cartridge" would be a series of velocity template files, as well as an XML file describing the theme, its purpose, the elements from the theme model that it REQUIRES, etc. The theme compiler would fill the Velocity context with all of the rectangle elements defined in the theme model, then would process each template in the cartridge by sending it through Velocity, and saving the result in the target theme's project directory.
Note that while a theme template file would be a Velocity template file, that does not mean the target theme would need to be a Velocity theme. The Velocity template file could be a template of the .JSP file (or someother display technology for that matter).