corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Using Portal Pack on NetBeans IDE With Theme Plugin Support

Contributed by Maruthi Patlo

This article describes how to use Portal Pack plugins to create and modify Sun the GlassFish server Web Space Server/Liferay themes on NetBeans IDE (Integrated Development Environment).

With Portal Pack 3.0.2 you can create or modify a Web Space Server/Liferay theme inside NetBeansTM IDE. Developers can use Portal Pack 3.0.2 to create or modify a theme without using Dreamweaver or any other HTML editor.

This article discusses how you can use the Portal Pack 3.0.2 plugins on NetBeans IDE 6.5 and above versions to create or modify a theme used on Sun the GlassFish serverTM Web Space Server. This document assumes that you have some introduction to NetBeans, Portal Pack, and Web Space Server.

Before you start, install the Portal Pack 3.0.2 plugins on NetBeans IDE 6.5, 6.5.x, or 6.7 version. You can download the latest Portal Pack plugin from http://netbeans.org/projects/contrib/. Also, install Sun the GlassFish server Web Space Server 10.0 or 10.x version. You can download Web Space Server from http://webspace.dev.java.net/.

stamp graphic showing page content applies to NetBeans IDE 6.5/6.7

The following topics are covered in this article:

What's New in Portal Pack 3.0.2

This section describes the new features available in the Portal Pack 3.0.2 release.

Directory Deployment and Deploy on Save for Portlet Application

Using the Directory Deployment and Deploy on Save feature, you do not need to redeploy your application during development time. Once you save the changes in any of the files, IDE takes care of everything else. If a Java file is changed and saved, it is automatically compiled and the application is reloaded to reflect the new change. When you refresh your browser, you can see the change. This behavior is also true for vm, jsp, javascript, html and even portlet.xml files.

You can enable or disable Directory Deployment in Server Config Panel inside your NetBeans IDE. On NetBeans IDE, choose Tools → Servers, and select the server that is configured as your runtime. You can use the Directory Deployment Enabled option to enable or disable directory deployment. By default Directory Deployment is not enabled. You need to enable Directory Deployment to use the Deploy on Save feature.

Web Space Server/Liferay Theme Development

Using Portal Pack 3.0.2, you can create and edit Web Space Server/Liferay Theme plugins. For Liferay, you need to select the Run In Developer Mode option in the server config panel in NetBeans. This mode enables NetBeans to start Web Space Server in developer mode, which is required during theme development. Web Space Server works in developer mode by default.

Web Space Server Hook Plugins Support

Portal Pack 3.0.2 also provides support for different types of Hook applications. Event Handler Hook, Model Listeners Hook, Portal Properties Hook, and Jsp Hook are the different kinds of hooks that you can create. To develop hooks on NetBeans IDE for Web Space Server or Liferay, you need to create a web application with a name ending with -hook. as per the naming convention mandated. To develop a hook plugin, make Web Space Server as your target server, and select Hook Plugin as the file type after you select WebSpace/Liferay Plugins from categories in the wizard to create a new file.

Creating a Web Application Using Web Space Server as the Target Server

Before you can modify or create a Web Space Server theme, you need to create a web application on NetBeans IDE that uses Web Space Server as the target runtime.

To Add Web Space Server as a Target Server for NetBeans IDE

  1. Choose Servers from the Tools menu.

  2. Click the Add Servers button.

  3. Select WebSpace 10.x (Project WebSynergy) and click Next.

  4. Specify the GlassFish server home and domain directory.

    1. To specify the GlassFish server Home, browse the the GlassFish server folder under the Web Space Server installation directory.

    2. To specify Domain Dir, browse the the GlassFish server/domains/domain1 folder under the Web Space Server installation directory.

    Values for User Name, Port, and Admin Port (admin, 8080, and 4848 respectively) are populated.

  5. Type a password and click Next.

    The default the GlassFish server password is adminadmin.

  6. Select the Directory Deployment Enabled option and click Finish.

To Create a Web Application That Uses Web Space Server as the Target Runtime

  1. Choose New Project from the File menu.

    By default, Java Web and Web Application are selected from Categories and Projects respectively.

  2. Click Next.

  3. Type a name for the project, and click Next.

    In this example, name the project CustomTheme.

  4. Select WebSpace 10.x (Project WebSynergy) as the server, and click Next.

  5. Click Finish.

Creating a Web Space Server Theme

When Sun the GlassFish server Web Space Server is configured as the target runtime for your NetBeans IDE, you can create a theme based on a theme applied to Web Space Server. You can customize the default theme.

Note - Enable Directory Deployment for faster theme development.

Themes can be organized into theme folders. All the folders related to the theme reside inside the Web Pages folder. The css folder contains the CSS (Cascading Style Sheet) files. The images folder contains subfolders for images. The templates folder contains all the Velocity Template (.vm) files related to the theme.

To Create a Web Space Server Theme

  1. Right-click the project (web application) and choose New → Other.

    A window appears.

  2. Choose WebSpace/Liferay Plugins from Categories and Import/Create New Theme from File Types, and click Next.

  3. Type a Theme ID and Theme Name. You can also specify a theme folder.

    In this example, use Custom_theme and Custom Theme as the Theme ID and Theme Name respectively. If you are creating more than one theme, it is better to create a Theme Folder as well.

  4. Click Finish.

Deploying and Making Changes to a Custom Theme

You can modify a theme by making changes to images, CSS files and velocity template files. This section discusses how you can deploy a custom theme to Web Space Server, make changes to the theme, and preview it on Web Space Server.

The following topics are covered in this section:

Deploying the Custom Theme to Web Space Server

If you are using Sun the GlassFish server Web Space Server as the target server for your NetBeans IDE, deploying the web application that is used to create a custom theme means you can apply the custom theme to your Web Space Server instance, and preview your modifications.

To Apply the Custom Theme to Your Web Space Server Instance

  1. To deploy the web application used in creating a custom theme, right-click the project and choose Deploy.

    The theme is deployed to the target runtime (Web Space Server), and you can apply the theme to the Web Space Server instance on your machine.

  2. Log in to Web Space Server as the admin user.

  3. Navigate to Manage Pages from the Welcome menu.

  4. Click the Look and Feel tab.

    The Custom Theme, which is the same as the Classic Theme, is listed under Install More.

  5. Select Custom Theme.

    The Custom Theme is applied to Web Space Server running on your machine.

Making Changes to a Theme by Editing CSS Files

This section discusses how you can modify some styles in CSS files for customizing a portal theme.

The following topics are covered in this section:

To Change the Banner Style

  1. Navigate to the images directory for the web application.

  2. Navigate to the common folder inside the images directory, and copy an image file into the directory.

    You can use a JPEG file which has similar dimensions compared with existing banner files. In this example, banner.jpg is the name of the image file.

  3. Navigate to the css folder, and open the custom.css file.

    Navigator, Style Builder, and Preview are the user interface components that are helpful in working with a CSS file.

  4. To edit the banner style, select #banner from the Navigator.

    The #banner style has specifications such as background, height, top, and background-image. You can use the Style Builder to populate these values.

  5. Delete the background parameter from the #banner style.

  6. Click the Background tab on the Style Builder, and browse to a background image.

    In this example, select the banner.jpg file in the images/common folder.

  7. Set Tile to repeat.

    This option repeats the display of the image.

  8. Click Save All (Press Ctrl-Shift-S).

  9. If the web application is not yet deployed to the target server (Sun the GlassFish server Web Space Serverin our case) right-click the web application and choose Deploy.

  10. Refresh the browser for your Web Space Server instance.

    The new banner is applied to the portal.

To Change the Navigation Style

  1. Navigate to the css folder, and open the custom.css file.

  2. To edit the navigation style, select #navigation from the Navigator.

  3. Click the Background tab on the Style Builder.

  4. Change the background color.

    The default background color for the Navigator is black. Choose a different color, say brown.

  5. Click Save All (Press Ctrl-Shift-S).

  6. Refresh the browser for your Web Space Server instance.

    The color of the navigation bar of the portal is changed to the selected color.

To Change the Color of the Navigation Tab

  1. Navigate to the css folder, and open the custom.css file.

  2. To edit the navigation tab color, select #navigation li.selected a, #navigation li a:hover from the Navigator.

  3. Click the Background tab on the Style Builder.

  4. Change the background color.

    The default background color for the navigation tab is black. Choose a different color, say blue.

  5. Click Save All (Press Ctrl-Shift-S).

  6. Refresh the browser for your Web Space Server instance.

    The color of the navigation tab of the portal is changed to the selected color.

To Change the Color of the Portlet Title Bar

  1. Navigate to the css folder, and open the custom.css file.

  2. Select .portlet-topper from the Navigator.

  3. Click the Background tab on the Style Builder.

  4. Delete the background parameter from the .portlet-topper style.

  5. Change the background color.

    The default background color for the portlet title bar is gray. Choose a different color, say pink.

  6. Click Save All (Press Ctrl-Shift-S).

  7. Refresh the browser for your Web Space Server instance. The color of portlet title bar of all the portlets is changed to the selected color.

To Change the Font of the Portlet Title Bar

  1. Navigate to the css folder, and open the custom.css file.

  2. Select .portlet-title from the Navigator.

  3. Click the Font tab on the Style Builder.

  4. Select a font and a font size. Scroll down the Font tab to select attributes such as Style, Weight, Variant, and Color.

    For example, select Times New Roman as the font and 14 as the font size, and select italic and bold for Style and Weight respectively.

  5. Click Save All (Press Ctrl-Shift-S).

  6. Refresh the browser for your Web Space Server instance.

    The font and size of all portlet titles are changed.

Making Changes to a Theme by Editing Velocity Template Files

Velocity template language files are used to embed dynamic content in web sites.

The following topics are covered in this section:

Velocity Template Files in a Web Space Server Theme

You can view and modify the Velocity Template (.vm) files of a custom theme applied to Web Space Server. Velocity Template files are placed inside the templates folder.

The following are the Velocity Template files in the Classic Theme in Web Space Server:

  • dock.vm — Displays the items in the welcome dock.

  • init_custom.vm — Enabless you to override and define new velocity variables.

  • navigation.vm — Displays the navigation bar.

  • portal_normal.vm — The main template file in the theme.

  • portal_pop_up.vm — Defines the behavior of pop-up menus in the web page.

  • portlet.vm — Displays individual portlets.

The Theme plugin provides code completion and method help for all the Velocity variables used by Web Space Server.

To Invoke a Method for a Velocity Variable

  1. Open a Velocity Template (.vm) file.

  2. Press CTRL-Spacebar anywhere in the file.

    All the Velocity variables used by Web Space Server are listed.

  3. Select a Velocity variable.

    For example, select the Velocity variable $company.

  4. Place a dot (.) next to the Velocity variable, and press CTRL-Spacebar again.

    All the methods associated with the Velocity variable are listed.

  5. Select the method to be called.

    For example, if you select getName(), $company.getName() will fetch the company name.

Making Changes to the Footer of a Web Page

This section describes how you can make changes to the footer of a web page.

To Make Changes to the Footer of a Web Page

  1. Navigate to the templates folder, and open the portal_normal.vm file.

  2. Scroll down and select the footer tag.

    <div id=”footer”></div>

  3. To add the name of the company to the footer:

    1. Press CTRL-Spacebar inside the footer tag, and add the $company Velocity variable.

    2. Place a dot (.) next to the Velocity variable and press CTRL-Spacebar again.

    3. Select the getName() method.

    The company name will appear in the footer of the web page.

    <div id=”footer”>$company.getName()</div>

  4. To add the email address of the company to the footer, add $company.getEmailAddress().

    <div id=”footer”>$company.getName() Email: $company.getEmailAddress()</div>

  5. Click Save All (Press Ctrl-Shift-S).

  6. Refresh the browser for your Web Space Server instance.

    The name of the company and email address are displayed in the footer of the web site.

  7. To change the alignment of the footer place align=”center” inside the tag attributes for the footer tag.

    <div id=”footer” align="center">$company.getName() Email: $company.getEmailAddress()</div>

    By default, the footer is left justified. This attribute changes the alignment to center justified.

  8. Click Save All (Press Ctrl-Shift-S).

  9. Refresh the browser for your Web Space Server instance.

    The footer is now center justified.

Making Changes to the Dock View

You can make changes to the dock.vm Velocity template file to switch between the interactive mode and static mode of Welcome dock. By default, the Welcome dock is interactive, and the applications in the Welcome dock are displayed in a vertical list. When the interactive mode is off, all the applications are displayed in a horizontal row on the banner of the web page.

To Make Changes to the Dock View

  1. Navigate to the templates folder, and open the dock.vm file.

    The file has a division that uses a class, named lfr-dock. The class has a attribute named interactive-mode associated with it.

  2. In the first line of the file, emove the interactive-mode attribute from <div class=”lfr-dock interactive-mode”>.

    The first line is now <div class=”lfr-dock”>.

  3. Click Save All (Press Ctrl-Shift-S).

  4. Refresh the browser for your Web Space Server instance.

    The applications in the Welcome menu are now displayed in a horizontal row on the banner of the web page.



See Also