Theme Development using the ViewDesigner Dreamweaver Plugin Tags: liferay theme development viewdesigner dreamweaver Theme Development

using the ViewDesigner Dreamweaver Plugin Table of Contents [-]
• • • • • • • • • • • • • • • •

1 Theme Development using the ViewDesigner Dreamweaver Plugin 1.1 Business Usecase of the ViewDesigner Plugin 1.2 About Project ViewDesigner 1.3 Installing Dreamweaver 1.4 Installing the ViewDesigner Plugin 1.5 Downloading existing LR / Web Space Theme WAR File 1.6 Importing the Theme WAR into Dreamweaver 1.7 Modifying the Theme 1.8 Exporting the Theme WAR file after making changes 1.9 Deploying the Newly created Theme WAR 1.10 Applying this New Theme To a community 1.11 Links to Screencasts 1.12 Plugin Log Messages 1.13 Known Bugs 1.14 Limitations 1.15 Your Comments

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

com or from the SourceForge repository. you would find "Export Web Space Theme File" menu item. download any existing theme WAR. • Click File -> Import. • Downloading existing LR / Web Space Theme WAR File Using the PluginInstaller portlet . • Plugin Download Location: here • Installing Dreamweaver • • Download DW from Adobe Downloads and install Ensure that the DW Extension Manager is also installed. You would find "Import Web Space Theme File" menu item that is added • Similarily click File->Export. Mac version would be available shortly. you would have to do the above step using the Control Panel -> Plugins Installation -> Theme Plugins -> Install More themes. Supported Dreamweaver Versions: DW 8. • Open Dreamweaver. • This confirms that the ViewDesigner Plugin has been installed successfully.• Supported OS: Windows For now.0 and above. and you would get a message which says that the plugin is installed successfully. • You could alternatively download the theme WAR from plugins. Add Plugin Installer Portlet -> Browse Repository Tab -> Theme Plugins Sub tab.2 and Web Space 10. • In LR 5. Adobe DW CS3 and Adobe DW CS4. . and click on OK • Accept the license.liferay. • Importing the Theme WAR into Dreamweaver • Click File -> Import->Import Web Space Theme File. 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.

If the user wants to change any of the theme properties.html page shows you a preview of the changes that you are making to the CSS files. • Clicking on the "Help" button. Click on File -> Save All. and shows up in this text box by default.properties and populates the fields in the "Theme Properties:". This is just a preview page. • .exe: java.• In the pop up window that appears. enter fill appropriate values for the following Path to Web Space Theme file .exe location. Once you mention this location. • 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. • Working folder of Web SpaceTheme file: . • Click on "Ok" button to import the WAR into Dreamweaver / CS. he/she can enter the new values. • As soon as the user selects the "Working folder for Web Space Theme file:". the plugin reads the liferay-look-and-feel. this value gets persisted. The user might want to change them or leave them as it is before the Export operation. and opens a sample preview page (index.xml and liferay-pluginpackage. opens up the Help page for doing the import. and it gets persisted into the respective files. The index. • The plugin now extracts the Theme WAR file in the specified Working Folder. • 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. and the changes made to this page wont be seen on the portal.html).Any directory on your file system where you would want to extract the Theme WAR file. • Path to Java.exe: Java. You could change it if you want to. • After doing all the desired changes. • Click on "Cancel" to close the "Import Web Space Theme File" dialog box.point it to the LR / Web Space Theme-WAR that you just downloaded using the PluginInstaller.exe location on your local file system. • Modifying the Theme Now make the theme related changes that you want. • Path to Java.

This gets persisted into the liferay-plugin-package.properties. This gets persisted into the liferay-plugin-package. Just click on the theme.The version of Liferay.properties.A short description of the theme. • Applying this New Theme To a community Go to any community page. This gets persisted into the liferaylook-and-feel. this theme is compatible with.xml and liferay-plugin-package. • Click on "Cancel" to close the "Export Web Space Theme File" dialog box.properties. opens up the Help page for doing the Export. This is the name that gets displayed in the list of available themes.This gets persisted into the liferay-look-and-feel. • Compatability Version: . You would see the newly deployed theme in the list of available themes. to set it as the current theme for that community.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. • Theme Licence: The licence of the theme. This gets persisted into the liferay-look-and-feel. • For LR 5.The author(eg company name) of the theme.Theme Id: The id of the theme.properties.2 and Web Space 10. • Theme Description: . • Clicking on the "Help" button.properties. • You would get a message confirming that the export was successful. This gets persisted into the liferay-plugin-package. • .xml • Author: . Plugin Installer -> Upload File Tab -> Browse for the new WAR file -> Install. click on Manage Pages -> Look and Feel Tab. • Deploying the Newly created Theme WAR • Use the Plugin Installer Portlet to deploy this newly created theme WAR file. • Click on Ok to export the Web Space theme WAR. • Author URL: The author URL (could be the company URL). This gets persisted into the liferay-plugin-package. • You could alternatively put this WAR file into LR / Web Space Hot Deploy directory and it would automatically be deployed.xml • Theme Name: .The name of the theme.

png in the "images" folder before exporting the theme WAR file. • Your Comments Please leave your comments on this page. Plugin Log Messages The plugin log messages are written into ViewDesignerLogs.txt which is in <DW config folder>\Configuration\commands\WSThemingPlugin. We are working on building this feature into the plugin.Links to Screencasts • Click here to watch the screencast. In case of any errors during Import / Export operation. this file is automatically opened in the browser and shown to the user. • The index. • Known Bugs The web designer (or the user) would have manually change the thumbnail. when we download the WAR file. • .png and screenshot. Other wise the preview of the theme that shows in the portal page would be a stale one.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. We are working on this also. Would really like to know your feedback. • Limitations Currently the plugin cannot modify the vm(Velocity markup) files of the theme. and packages it into the theme WAR. that the portal creates the preview page.

Sign up to vote on this title
UsefulNot useful