Project WebSynergy Milestone 4 Developer's Guide

Developing Themes Using ViewDesigner Plugin in Project WebSynergy

The ViewDesigner plugin enables a web designer to design and customize a theme of a portal page in Project WebSynergy. You can download the plugin from the ViewDesigner project website. The topics covered in this section are:

Overview of ViewDesigner Plugin

The layout and design of any 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.

ViewDesigner makes it possible for a web designer to create a well designed user interface for a portal in the Project WebSynergy. ViewDesigner aims to provide plugins for popular web design tools, which enables a web designer to easily customize, design, and theme a portal page. For more information on ViewDesigner, see https://designview.dev.java.net/

At present, Project WebSynergy provides a plugin for DreamWeaver that works in conjunction with the Desktop Design Tool (DDT) feature.

Using Desktop DDT and ViewDesigner Plugin

    This section explains how a web designer can use the DDT and ViewDesigner plugin in Project WebSynergy.

  1. Install the extension in Dreamweaver (.mxp file) by navigating to MacroMedia Extension Manager -> Install Plugin -> Select the mxp file -> Install -> Accept License Agreement.

  2. Download the websynergy theme war file from Sun Java System Portal Server 7.2 console's DDT by selecting the layout and theme that you wish your portal page to have. To do this:

    1. Login to Portal Server 7.2 Console.

    2. Click Portals tab.

    3. Select a portal from the list.

    4. Click Manage Themes URL.

    5. Select a Theme to download.

    6. Click Download.

  3. Import the downloaded websynergy theme war file into Dreamweaver using the ViewDesigner plugin. To do this:

    1. Open Dreamweaver.

    2. Click File.

    3. Select Import and click Import Skin option.

      The ViewDesigner plugin opens the portal sample page (index.html) in Dreamweaver.

  4. Enter values for the following:

    • Path to websynergy theme war file — Location where you have downloaded the websynergy theme war file.

    • Folder to extract websynergy theme war file — The directory where you want to extract the websynergy theme war file.

    • Path to Java.exe — Location of the java.exe.

    If you enter the values for the Java.exe path for the first time, it is persisted by the plugin. This path will be pre-populated next time you navigate to the Import or Export skin dialog box.

  5. Click OK. If you enter values for all the fields correctly, the plugin opens the portal sample page (index.html / index.htm).


    Note –

    These are the error messages that are displayed when you do not enter the values for the fields correctly.

    • Please select the folder to extract the websynergy theme war file. — If you leave the "Folder to extract websynergy theme war file" blank and click OK.

    • The file path entered for Skin Extract Folder is incorrect. — If you enter incorrect value for the "Folder to extract websynergy theme war file" and click OK.

    • Please select the websynergy theme war file. — If you leave the "Path to websynergy theme war file" blank and click OK.

    • The file path entered for websynergy theme war file is incorrect. — If you enter incorrect path for the "Path to websynergy theme war file" and click OK.

    • Please select only a .websynergy theme war file. — If you enter a non-websynergy theme war file path for the "Path to websynergy theme war file" and click OK.

    • Please select the Java Executable Path. — If you leave the "Path to Java.exe" blank and click OK.

    • The file path entered for Java.exe is incorrect. — If you enter incorrect path for the "Path to Java.exe" and click OK.

    • Please choose only a java.exe file — If you enter the path of non-java.exe file for the "Path to Java.exe" and click OK.

    • The Sun Java Systems Portal Server Skin Extension is not installed. — If you do not install the extension click OK.


  6. Click the Help button to get any help related to filling up the Import Skin dialog box.

  7. Click the Cancel button to close the Import Skin dialog box.

  8. Make changes to the downloaded portal skin by modifying the css files included in the downloaded websynergy theme war file. The changes that can be made to the theme are:

    • Update any existing attributes of the css files. For example, font color, size and so on.

    • Add new attributes to the existing css styles.

    • Point to any other existing image or create a new image and point the css style to that.

    • When you create a new image, ensure that it is created in the images folder of the websynergy theme war file.

    • You cannot create new styles in an existing css file or create new css files.

    • In Portal Server 7.2 release, only the theming can be modified. The layouts cannot be modified.

  9. Export the changes made to the websynergy theme war file using the plugin by clicking the Export Skin option in the Dreamweaver —> File —> Export.

  10. Enter values for the following:

    1. Path to the Unziped websynergy theme war file — The location where the websynergy theme war file has been extracted and theme modified.

    2. Save New websynergy theme war file to — The name and location of the new websynergy theme war file (that contains the modified theme).

    3. Path to Java.exe -> Location of the java.exe.

  11. Click OK.

    If export is successful, you will get the confirmation message as “Export Complete”. Use the Portal Server console to apply a new theme.

    These are the error messages that are displayed when you do not enter the field values correctly.

    • Please select the folder that contains the unzipped Sun Java System Portal Server websynergy theme war file. — If you leave the "Path to the Unziped websynergy theme war file" blank and click OK.

    • The file path entered for Unzipped websynergy theme war file is incorrect. — If you enter incorrect path for the "Path to the Unziped websynergy theme war file" and click OK.

    • Please select the Sun Java Systems Portal Server websynergy theme war file. — If you leave the "Save New websynergy theme war file to" blank and click OK.

    • Please choose only a .websynergy theme war file. — If you enter non-websynergy theme war file path for the "Save New websynergy theme war file to" and click OK.

    • Please choose only a .websynergy theme war file. — If you enter non-websynergy theme war file path for the "Save New websynergy theme war file to" and click OK.

    • Please select the Java Executable Path. — If you leave the "Path to Java.exe" blank and click OK.

    • The file path entered for Java.exe is incorrect. — If you enter incorrect path for the "Path to Java.exe" and click OK.

    • Please choose only a java.exe file — If you enter path of non-java.exe file for the "Path to Java.exe" and click OK.

    • The Sun Java System Portal Server Skin Extension is not installed. — If you do not install the extension properly and click OK.

  12. Click the Cancel button to close the Export Skin dialog box.

  13. Use the The DDT in Portal Server console to apply the changes to your live portal and view the look and feel change that has taken effect immediately. To do this:

    1. Login to Portal Server console.

    2. Click Portal tab.

    3. Click a Portal.

    4. Select an Organization from the Select DN list box.

    5. Click Manage Themes URL.

    6. Click the Upload button.

    7. Enter a Theme name and description. Click Save to upload the newly modified websynergy theme war file.

      The new theme appears on the list of available themes.

    8. Click on theme name URL to preview the portal page. You can view all the changes that were applied.

    9. Select the DN as EnterpriseSample and choose the option next to the theme.

    10. Click the "Set as Default" button.

    11. Navigate to the portal page and click the EnterpriseSample URL. The changes that were seen can be applied here.