Theme Development using the ViewDesigner Dreamweaver Plugin

Business Usecase of the ViewDesigner Plugin

• Help web designers to easily create or modify LR / Web Space Themes.
• Web designers would be more comfortable with web designer tools like Dreamweaver (DW) / FrontPage(FP) to design the themes rather than using text based editors.
• The current approach of putting the css changes in the _diff folder, and doing an ANT to create the theme WAR is not what a web-designer would want.

About Project ViewDesigner

• Project Home:ViewDesigner
  
• Project Type: OpenSource Project. You could also request for a contributor / observer role if you are interested and want to contribute to this project.
  
• Licence: CDDL
  
• Supported OS: Windows For now. Mac version would be available shortly.
  
• Supported Dreamweaver Versions: DW 8, Adobe DW CS3 and Adobe DW CS4.
  
• Plugin Download Location: here

Installing Dreamweaver

• Download DW from Adobe Downloads and install
• Ensure that the DW Extension Manager is also installed.

Installing the ViewDesigner Plugin

• Download the latest ViewDesigner Plugin from here
  
• Install the plugin using the DW Extension Manager
  • Click File -> Install Extension -> Browse for the mxp file that you just downloaded, and click on OK
  • Accept the license, and you would get a message which says that the plugin is installed successfully.
• Open Dreamweaver.
  
• Click File -> Import. You would find "Import Web Space Theme File" menu item that is added
  
• Similarily click File->Export, you would find "Export Web Space Theme File" menu item.
  
• This confirms that the ViewDesigner Plugin has been installed successfully.
  

Downloading existing LR / Web Space Theme WAR File

• Using the PluginInstaller portlet , download any existing theme WAR. Add Plugin Installer Portlet -> Browse Repository Tab -> Theme Plugins Sub tab.
  
• In LR 5.2 and Web Space 10.0 and above, you would have to do the above step using the Control Panel -> Plugins Installation -> Theme Plugins -> Install More themes.
• You could alternatively download the theme WAR from plugins.liferay.com or from the SourceForge repository.

Importing the Theme WAR into Dreamweaver

• Click File -> Import->Import Web Space Theme File.
  
• In the pop up window that appears, enter fill appropriate values for the following
  
  • Path to Web Space Theme file - point it to the LR / Web Space Theme-WAR that you just downloaded using the PluginInstaller.
    
  • Working folder of Web SpaceTheme file: - Any directory on your file system where you would want to extract the Theme WAR file.
    
  • Path to Java.exe: java.exe location. Once you mention this location, this value gets persisted, and shows up in this text box by default. You could change it if you want to.
    
• Click on "Cancel" to close the "Import Web Space Theme File" dialog box.
  
• Clicking on the "Help" button, opens up the Help page for doing the import.
  
• Click on "Ok" button to import the WAR into Dreamweaver / CS.
  
• The plugin now extracts the Theme WAR file in the specified Working Folder, and opens a sample preview page (index.html). This is just a preview page, and the changes made to this page wont be seen on the portal.
  

Modifying the Theme

• Now make the theme related changes that you want. The index.html page shows you a preview of the changes that you are making to the CSS files.
  
• After doing all the desired changes, Click on File -> Save All.
  

Exporting the Theme WAR file after making changes

• Now click on File->Export->Export Web Space Theme File
  
• Enter the following details
  
  • Working folder for Web Space Theme file: Folder where you extracted the Theme WAR file and made changes.
    
  • Save New Web Space Theme file To: Location on the Local File system where you would like the new modified WAR file to be created.
    
  • Path to Java.exe: Java.exe location on your local file system.
    
  • As soon as the user selects the "Working folder for Web Space Theme file:", the plugin reads the liferay-look-and-feel.xml and liferay-plugin-package.properties and populates the fields in the "Theme Properties:". The user might want to change them or leave them as it is before the Export operation. If the user wants to change any of the theme properties, he/she can enter the new values, and it gets persisted into the respective files.
    
  • Theme Id: The id of the theme.This gets persisted into the liferay-look-and-feel.xml
    
  • Theme Name: - The name of the theme. This is the name that gets displayed in the list of available themes. This gets persisted into the liferay-look-and-feel.xml and liferay-plugin-package.properties.
    
  • Theme Description: - A short description of the theme.This gets persisted into the liferay-plugin-package.properties.
    
  • Compatability Version: - The version of Liferay, this theme is compatible with. This gets persisted into the liferay-look-and-feel.xml
    
  • Author: - The author(eg company name) of the theme. This gets persisted into the liferay-plugin-package.properties.
    
  • Author URL: The author URL (could be the company URL). This gets persisted into the liferay-plugin-package.properties.
    
  • Theme Licence: The licence of the theme. This gets persisted into the liferay-plugin-package.properties.
• Click on "Cancel" to close the "Export Web Space Theme File" dialog box.
  
• Clicking on the "Help" button, opens up the Help page for doing the Export.
  
• Click on Ok to export the Web Space theme WAR.
  
• You would get a message confirming that the export was successful.
  

Deploying the Newly created Theme WAR

• Use the Plugin Installer Portlet to deploy this newly created theme WAR file.
  
  • Plugin Installer -> Upload File Tab -> Browse for the new WAR file -> Install.
    
  • For LR 5.2 and Web Space 10.0 and above use Control Panel -> Plugin Installations -> Theme Plugins -> Install More Themes -> Upload File -> Browse and upload this modified theme WAR
  • The new WAR file would be deployed now.
    
• You could alternatively put this WAR file into LR / Web Space Hot Deploy directory and it would automatically be deployed.
  

Applying this New Theme To a community

• Go to any community page, click on Manage Pages -> Look and Feel Tab. You would see the newly deployed theme in the list of available themes. Just click on the theme, to set it as the current theme for that community.
  

Links to Screencasts

• Click here to watch the screencast.

Plugin Log Messages

• The plugin log messages are written into ViewDesignerLogs.txt which is in <DW config folder>\Configuration\commands\WSThemingPlugin. In case of any errors during Import / Export operation, this file is automatically opened in the browser and shown to the user.

Known Bugs

• The web designer (or the user) would have manually change the thumbnail.png and screenshot.png in the "images" folder before exporting the theme WAR file. Other wise the preview of the theme that shows in the portal page would be a stale one.

Limitations

• Currently the plugin cannot modify the vm(Velocity markup) files of the theme. We are working on building this feature into the plugin.
  
• The index.html (the preview page) is a static page that the plugin adds to the theme WAR during import. The ideal way of doing this would be, that the portal creates the preview page, and packages it into the theme WAR, when we download the WAR file. We are working on this also.
  

Your Comments

• Please leave your comments on this page. Would really like to know your feedback.