Enabling jQuery support

Enabling the jQuery support in a portlet project provides a set of JavaScript Library that simplifies JavaScript programming.

About this task

You can enable jQuery support for both new and existing portlet projects.

Procedure

To enable the jQuery support for a new portlet project:

Click File > New > Portlet Project.
The New Portlet Project wizard displays, specify a name and location for the new portlet project.
Click the Modify button for Web 2.0 Features. The Web 2.0 Features window displays.
Select the JavaScript toolkit.
In the JavaScript Toolkit Settings section, select jQuery.
The Namespace for JavaScript classes is generated to avoid collision between objects of this portlet and other portlets present on the same portal page.
Select a file option to save the generated jQuery related common code. You can save the code in an external JSPF file, or in a Script-based portlet *.js file, or in the portlet JSP file.
Click OK to enable the jQuery support for the portlet project.
Click Finish to create a jQuery supported portlet project.

What to do next

To enable the jQuery support for an existing portlet project:

Right click on the project and select Properties > Project Facets. The Project Facets window appears.
Expand Web 2.0 and select jQuery on WebSphere Portal.
Click OK to enable the jQuery support for the portlet project.

After you enable jQuery support for the portlet projects, a new static web project called PortaljQuery is created in the workspace. To create a jQuery enabled portlet project and deployment on WebSphere Portal Server:

Download the jQuery-mobile.zip file from the jQuery mobile website and copy the jQuery.js, jQuery-mobile.js, jQuery-mobile.css file and the images folder to the WebContent folder of the PortaljQuery project. If you want to enable just core jQuery, then copy only the jQuery.js file into the PortaljQuery project.
Within WebContent folder of portlet project, right-click the portlet JSP file and click Open with > Rich Page editor. The jQuery mobile pages that are contained within that page are displayed in the Mobile Navigation view.
Click the plus sign (+) to add a new jQuery Mobile page. Enter a name to generate a page ID and select a page template. Click Finish.
The Palette view displays jQuery Mobile widgets drawer.
Drag a widget from the jQuery Mobile Widgets drawer in the Palette view on to the portlet JSP file.
In the Server view, start the server to enable the jQuery option. Open the server instance context-menu and select Apply theme profile > jQuery.
Note: The jQuery option is enabled only after the server is started and when the PortaljQuery project exists in the workspace.
The Apply jQuery theme profile confirmation dialog appears, click Yes.
After the theme profile is successfully created, a successful completion message displays. As said in the message, restart the server for the changes to take effect.
Publish the portlet project on the WebSphere Portal Server.
Launch the portal page on any browser, such as Firefox.

Feedback