« Back to Themes

Theme Development using the ViewDesigner Dreamweaver Plugin

NOTE: As of May 2011 the ViewDesigner project is no longer active.  Many of the below links no longer work and the project is no longer maintained.  If you still wish to use it, you will need to manually compile the plugin in an appropriate Win32 environment.

Introduction #

ViewDesigner helps web designers to easily create or modify Liferay 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 web-designers are used to.

ViewDesigner is an OpenSource Project licensed under CDDL. While it currently supports Windows, a Mac version will be available shortly. It will work with DreamWeaver 8, CS3 and CS4. You can download the plugin from here

Setup #

  • Download DW from Adobe Downloads and install. Ensure that the DW Extension Manager is also installed.
  • 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.
  • 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.

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 Issues#

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

See Also #

1 Attachment
60634 Views
Average (3 Votes)
The average rating is 4.33333333333333 stars out of 5.
Comments
Threaded Replies Author Date
Thank U and if there is any way to help u pls... Nikos Kapatos December 10, 2008 2:50 PM
Hi After installing on Dreamweaver the latest... dixan martinez May 4, 2009 1:43 AM
Same thing here. The error occurs in the... Arnd Beissner May 4, 2009 7:07 AM
Hi Arnd, Martin, I guess the problem is bcos... Ganesh Ram May 5, 2009 9:21 PM
Ganesh - in the screencast, you mention that a... Brandon Wagner March 26, 2010 4:25 PM
For editing the vm files, dont forget that you... Joss Sanglier July 22, 2009 5:04 AM
gah! Just found this: ... Joss Sanglier July 22, 2009 5:12 AM
I'm stuck at the export stage. At first I was... Adam Newdow October 17, 2009 4:20 PM
I seem to have problems seeing newly installed... Kwasi Adutwum Asiedu November 24, 2009 1:00 AM
Hi.I am Modifying the Theme the ViewDesigner... igor kotlov kim February 25, 2010 5:04 AM
This concept is exceptionally different and... DarshanKumar N Bhatia June 15, 2010 11:06 PM
The current plugin does not work with... Christopher Brisee July 13, 2010 11:32 AM
I get a error Message while importing .war... Dhananjay Tiwari August 3, 2010 11:09 PM
I am using Dreamweaver CS4 and Win7. I have... fayr _ August 8, 2010 10:20 PM
I had originally downloaded the CB-14, and that... fayr _ August 8, 2010 10:25 PM
Hi How can i download CR1-Patch6 ? Where is... Seyed Mohammad Hossein Jamali August 29, 2010 1:09 AM
The latest version is here: ... Christopher Brisee September 8, 2010 8:51 AM
Hi I'm trying to work with Dreamweaver 8 with... Marlon Viñan November 1, 2010 12:02 PM
just uploaded a CS5 compliant extension. When... alex keller December 31, 2010 3:46 AM
Can't download this plugin. Site says "Your... Sergey Stepanenko January 24, 2011 5:16 AM

Thank U and if there is any way to help u pls say it.
Posted on 12/10/08 2:50 PM.
Hi
After installing on Dreamweaver the latest plugin version, which at the moment is CB-14
(Draft ganesh_ram on Thursday, March 19, 2009 at 9:52:38 AM )

I got the following error trying to import a theme .war. The same error with a couple of themes. Any idea?

Dreamweaver
---------------------------
While executing onClick in SunPortalPluginImportSkin.htm, a JavaScript error occurred.
Posted on 5/4/09 1:43 AM.
Same thing here.

The error occurs in the dialog that shows after selecting "Import Web Space Theme File."

The same error message occurs when clicking the Help button before even selecting a theme, so it doesn't seem to have anything to do with the data in the theme.

Tested with Dreamweaver CS3 (9.0 Build 3483), several plugin version up to and including CB-14. Tested on Windows Vista Business, with default web browser set to either Firefox 3 or Internet Explorer 7. All at latest patch level.

Looks like a general compatibility problem.
Posted on 5/4/09 7:07 AM in reply to dixan martinez.
Hi Arnd, Martin,

I guess the problem is bcos there is some pblm when the plugin installs on Vista.
Some one else had also reported a similar pblm on Vista.

We could reproduce the same pblm, when u install DW freshly on vista, and install the plugin, and try to import theme.
We closed DW, started it again, and then it worked fine.

Could you also try this work around and let me know.
If you could, pls try on another m/c that does not have vista. You could try on XP.
Pls let me know the results.
Thanks for using ViewDesigner emoticon
Posted on 5/5/09 9:21 PM in reply to Arnd Beissner.
For editing the vm files, dont forget that you can add the vm file extension to Preferences > File Types in Dreamweaver.

At least that means it opens in code view, which is a start
Posted on 7/22/09 5:04 AM.
gah!

Just found this:

http://velocity.gilluminate.com/

Its a dreamweaver extension for velocity files.
Posted on 7/22/09 5:12 AM in reply to Joss Sanglier.
I'm stuck at the export stage. At first I was trying to export sample-advanced theme and that wasn't working at all because of a missing lifefray.plugin.package.properties file. Finally figured that out, and it's telling me another reason why it's not exporting my .war file.

"Could not export web space theme file. Please refer to the logs."

I thought I was about to win the battle and then I got stuck here. I am a designer, and I probably should not be tackling a liferay theme, but I took the job, and I've invested a couple of days trying to pick this up. Please help.

-Adam@indiadamjones.com
Posted on 10/17/09 4:20 PM.
I seem to have problems seeing newly installed themes (customized in Dreamweaver). I have downloaded several themes off sourceforge to find what themes work. The only theme that seems to work is the "Liferay Jedi" theme.

I have followed the instructions in the screencast as well as the details provided here. Liferay states that the themes are installed successfully but they don't appear as an available theme.

Any help will be much appreciated.
Posted on 11/24/09 1:00 AM.
Hi.I am Modifying the Theme the ViewDesigner Dreamweaver Plugin . I Do Export the Theme WAR file after making changes .For LR 5.2.3 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 .Result -
The WAR file theme plugin was uploaded successfully and is now being installed. The look- available Modifying Themes no installed???They don't appear as an available theme???Help!
Posted on 2/25/10 5:04 AM.
Ganesh - in the screencast, you mention that a Mac version will be out soon. Any update on that? Our designer is, naturally, on a Mac and when he tries to File -> Import->Import Web Space Theme File, the Import Web Space Theme File menu item is disabled. But he says he had no problem installing the plugin.
Posted on 3/26/10 4:25 PM in reply to Ganesh Ram.
This concept is exceptionally different and innovative.
but can we change behavior of theme like javascript menu/jquery error messages using this plugins.
will it allow to integrate some default portlets in my pages like language /navigation /sign in using theme.
U can try portal pack netbeans plugins to create cutom portlet/theme /hooks for liferay.

Thanks and Regards
Darshankumar Bhatia
Posted on 6/15/10 11:06 PM.
The current plugin does not work with Dreamweaver CS5 - any chance this is being updated to support this version?
Posted on 7/13/10 11:32 AM.
I get a error Message while importing .war File, as Unsupported Version of Dreamweaver , I use Dreamweaver cs5,
Liferay 523 Follwoed the Steps.
Posted on 8/3/10 11:09 PM.
I am using Dreamweaver CS4 and Win7. I have tried both the Wintersky and the Liferay-Jedi war files, and they both give the following error:
While executing onClick in SunPortalPluginImportSkin.htm, a Javascript error occurred.

I would like to be able to edit Liferay themes in Dreamweaver.
Posted on 8/8/10 10:20 PM.
I had originally downloaded the CB-14, and that gave the Javscript error. I uninstalled it, and downloaded CR1-patch6 and installed that, and it worked.
I suggest clarifying the labelling system inside the viewdesigner portlet project.
Posted on 8/8/10 10:25 PM in reply to Heidi Hendry.
Hi

How can i download CR1-Patch6 ?
Where is its download link ?

thanks
Posted on 8/29/10 1:09 AM.
The latest version is here:

https://viewdesigner.dev.java.net/servlets/ProjectDocumentList?folderID=116­32&expandFolder=11632&folderID=0

However, this is not supported in Dreamweaver CS5 - it does work in CS3 though.
Posted on 9/8/10 8:51 AM in reply to Seyed Mohammad Hosein Jamali.
Hi I'm trying to work with Dreamweaver 8 with CR1-patch6(1) on Windows XP; with themes liferay 5.x version works fine but with themes version 6.x I can't work properly.

Can you help me?

When the plugin will be finished to modify the vm files??

thanks in advance..!!

REGARDS
Posted on 11/1/10 12:02 PM.
just uploaded a CS5 compliant extension.
When running with WIN7, i had problems reading
SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Explorer\\User Shell Folders
So, just in case run Dreamwaver as Admin (works fine for me)
Posted on 12/31/10 3:46 AM.
Can't download this plugin. Site says "Your account does not have the "Project Page - View" permission needed...".
Another questions is - does it support 6.x themes?

Thanks in advance!
Posted on 1/24/11 5:16 AM.