test

Sun GlassFish Web Space Server 10.0 Developer's Guide

Developing Themes Using the ViewDesigner Plug-in in Sun GlassFish Web Space Server

The ViewDesigner plug-in available in Sun GlassFish Web Space Server, enables web designers to design new and customize existing themes, which could then be applied to a portal page.. You can download the ViewDesigner plug-in from the ViewDesigner project web site. The topics covered in this section are:

Overview of ViewDesigner Plug-in

The layout and design of web or portal page(s) is done by professional web designers. Web designers are comfortable with tools such as Dreamweaver, Microsoft FrontPage and so on. Most portals at present, provide a web based user interface to create, design, and theme a portal. So, it would be better and an advantage, if portals provide a method by which a web designer is able to use professional web design tools to create an elegantly designed portal.

The ViewDesigner plug-in makes it possible for a web designer to create a well designed user interface for a portal in Sun GlassFish Web Space Server. The ViewDesigner project aims to provide plug-ins for popular web design tools, which enables a web designer to easily customize, design, and theme a portal page. For more information on ViewDesigner project, see the project home page.

At present, the Sun GlassFish Web Space Server provides a plug-in for DreamWeaver 8, Adobe Dreanweaver CS3, and Adobe Dreamweaver CS4.

Note –

Currently, the ViewDesigner plug-in is supported only on Windows platform.

Installing the Dreamweaver Software

Before installing the ViewDesigner plug-in, you need to install Dreamweaver software on your desktop.

ProcedureTo Install Dreamweaver Software

  1. Download Dreamweaver software from Adobe downloads page.

  2. Follow the installation instructions and install the software.

  3. While installing the Dreamweaver software, ensure that you also install Dreamweaver Extension Manager.

Installing the ViewDesigner Plug-in

You need to install the ViewDesigner plug-in on the Dreamweaver software to create new or modify existing themes in the Sun GlassFish Web Space Server.

ProcedureTo Install the ViewDesigner Plug-in

  1. Download the ViewDesigner plug-in. The most recent version of the plug-in is available on the ViewDesigner downloads page.

  2. Install the ViewDesigner plug-in using the Dreamweaver Extension Manager. To do this:

    1. Form the Dreamweaver Extension Manager, click File and select Install Extension.

    2. Click Browse and select the .mxp file that you have downloaded.

    3. Click OK.

    4. Accept the license agreement.

      A message appears that the ViewDesigner plug-in has been installed successfully.

  3. Open the Dreamweaver software.

  4. To confirm the successful installation, click File and select the Import and Export options.

    You should see the Import Web Space Theme File and Export Web Space Theme File options.

Downloading an Existing Theme WAR File

In order to modify an existing theme, you need to download a theme.

ProcedureTo Download an Existing Theme WAR FIle

  1. Using the Sun GlassFish Web Space Server Plug-in Installer portlet, download any existing Theme WAR file. To do this:

    1. On Sun GlassFish Web Space Server, add the Plug-in Installer portlet.

    2. From the Plug-in Installer portlet, click the Browse Repository tab.

    3. Click the Themes Plugins tab and download an existing theme.

  2. Alternatively, you could download a Theme WAR file from the official or community plug-ins page on Liferay or the SourceForge repository.

Importing the Theme WAR File into Dreamweaver Software

After downloading the Theme WAR file, you need to import the file into the Dreaweaver software to modify the theme.

ProcedureTo Import the Theme WAR File into Dreamweaver Software

  1. From the Dreamweaver software, click File, select Import, and select Import Web Space Theme File option.

    The Import Web Space Theme File window appears.

  2. Enter appropriate values in the following fields.

    • Path to Web Space Theme file — Specify the location of the Sun GlassFish Web Space Server Theme WAR file that you have downloaded using the Plug-in Installer portlet.

    • Working folder of Web Space Theme file — Specify any directory on your desktop where you want to extract the Theme WAR file.

    • Path to Java.exe — Specify the location of Java.exe file. Once you mention this location, this value gets persisted, and shows up in this text box by default. If you do not want this value, you can change it.

  3. (Optional) You may click Cancel or Help to close the Import Web Space Theme File window or to open the Help for importing the Theme WAR file.

  4. Click OK.

    The Theme WAR file is imported into the Dreamweaver software.

    The ViewDesigner plug-in 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 does not appear on the portal.

Modifying the Theme File

Modify the changes in the Theme file according to your requirements. The index.html page shows you a preview of the changes that you are making to the CSS files. After doing the necessary modifications, click File and select Save or Save All to save the changes to the Theme file.

Exporting the Modified Theme WAR File

After doing the modifications in the Theme WAR file, you need to export the file to a new location.

ProcedureTo Export the Modified Theme WAR File

  1. From the Dreamweaver software, click File, select Export, and select Export WebSynergy Theme File option.

    The Export WebSynergy Theme File window appears.

  2. Enter appropriate values in the following fields.

    • Working Folder for WebSynergy Theme file — Specify the location of the folder where you have extracted the Theme WAR file and made changes.

    • Save New WebSynergy Theme file To — Specify the location where you would like to save the modified Theme WAR file.

    • Path to Java.exe — Specify the location of Java.exe file.

    Note –

    As soon as you specify the working folder for WebSynergy Theme file, the ViewDesigner plug-in reads the liferay-look-and-feel.xml and liferay-plugin-package.properties files and populates the fields in the Theme Properties:. You might want to change the filed values or leave them as it is before the Export operation. If you want to change any of the theme properties, you 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 file.

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

    • Theme Description — A short description of the theme. This gets persisted into the liferay-plugin-package.properties file.

    • Compatibility Version — The version of Sun GlassFish Web Space Server 10.0, this theme is compatible with. This gets persisted into the liferay-look-and-feel.xml file.

    • Author — The author (for example, company name) of the theme. This gets persisted into the liferay-plugin-package.properties file.

    • Author URL — The author URL (could be the company URL). This gets persisted into the liferay-plugin-package.properties file.

    • Theme Licence — The licence of the theme. This gets persisted into the liferay-plugin-package.properties file.

  3. (Optional) You may click Cancel or Help to close the Export WebSynergy Theme File window or to open the Help for exporting the Theme WAR file.

  4. Click OK.

    The Theme WAR file is exported to the Sun GlassFish Web Space Server 10.0 Theme WAR. A message appears to inform you that the export was successful.

Deploying the New Theme WAR File

After exporting the modified Theme WAR file, you need to deploy the file on Sun GlassFish Web Space Server.

ProcedureTo Deploy the New Theme WAR File

  1. In the Plugin Installer portlet, click the Upload File tab.

  2. Click Browse for the new WAR file and select the modified Theme WAR file.

  3. Click Install.

    The new Theme WAR file is deployed on Sun GlassFish Web Space Server.

  4. Alternatively, you can upload the new Theme WAR file into the Sun GlassFish Web Space Server Hot Deploy directory to automatically deploy the new Theme WAR file on Sun GlassFish Web Space Server.

Applying the New Theme to a Sun GlassFish Web Space Server Community

You can apply the newly created Theme to any community on Sun GlassFish Web Space Server.

ProcedureTo Apply the New Theme to Sun GlassFish Web Space Server Community

  1. On Sun GlassFish Web Space Server, select a community.

  2. From the Welcome drop down menu, click Manage Pages and select Look and Feel.

    The newly deployed Theme appears.

  3. Click the new Theme and set it as the current theme for the selected community.