Rich User Interface (Web 2.0) Sample

Added by Jennifer L Frischknecht | Edited by IBM contributor

Michael Burati on June 20, 2012 | Version 20

Edit
More Actions ▼

Abstract

No abstract provided.

Tags: Dojo, Rich UI, User Interface, Tag Cloud

IBM WebSphere Portlet Factory – Rich User Interface (Web 2.0) Sample

NOTE - This older set of samples (pre-WEF7.0.1) has been superceded by the Web Experience Factory Rich Web UI Samples. The charting sample is unique to this older package. For the rest of the samples, please refer to that newer article and download package.

© Copyright International Business Machines Corporation 2009. All rights reserved.

This article with the accompanying sample shows you how to use IBM WebSphere Portlet Factory (hereafter called Portlet Factory) to create applications with interesting and colorful, customized User Interfaces.

This article is one in a collection of articles and samples that illustrate techniques for developing with Portlet Factory. See Portlet Factory Wiki Samples for a complete list. For an introduction to developing with Portlet Factory, you should look at the tutorials that are available in the product help and at the re sources described in the Learning Roadmap.

Prerequisites:
You should have a basic familiarity with Portlet Factory (version 6.1.5 or higher is required for this sample) and be able to run Portlet Factory models.

Sample Description:
This sample consists of several models that are accessed via a launch page.

The models illustrate the following techniques:

Launcher (../samples/rich_ui/Index.model): This is the main model and can be used to launch the other models in the sample. It demonstrates some ways to create curved and colorful UIs.

Image of Launcher model

Dojo View/Form (../samples/rich_ui/OrdersViewAndForm.model): This model uses View & Form showing Dojo enhance ments.

* · Uses the new Split Pager on list view
* · Edit page has Dojo inputs specified from RDD (Calendar, Time, Currency, Zip, Email, regex, etc)
* · Edit page uses Dojo RTE builder
* · Create new record uses Dojo Form Dialog builder
* · Tooltip builder

Image of Dojo View/Form model

Rich Customizer (../samples/rich_ui/OrdersViewAndForm.model):

* · Uses Portlet Customizer and other builders to create the UI for customization
* · Uses Dojo drag and drop to hide and show columns
* · Uses buttons to reorder columns
* · Allows changing portlet UI theme

Image of Rich Customizer Model

Employee Search (../samples/rich_ui/EmployeeTestContainer.model): This model demonstrates rich UI techniques for Employee lookup

* · Dojo Tree
* · Dojo Animation
* · Dojo Progress Indicator
* · Split Pager
* · Custom type-ahead picker

Image of Employee Search model

Tag Cloud (../samples/rich_ui/TagCloud.model):

* · Uses Border builder
* · Uses Dojo Page Elements builder to add Dojo slider widget
* · Shows client event to separate portlet, which will display search results from the selected tag

Image of Tag Cloud model

Charting (../samples/rich_ui/SampleDojo2dCharts.model): This model shows several ways to integrate with Dojo charts

(Note: both IBM WebSphere Portlet Factory and IBM WebSphere Dashboard Framework provide full featured charting support. This sample demonstrates integration of Dojo charting for a simple chart display.)

* · Dojo Charting
* · Dojo data source
* · Drop-down button
* · Progress indicator
* · Client eventing
* · Partial-page refresh

Image of Charting model

Rich Grid (../samples/rich_ui/DojoG ridWithDetails.model): This sample shows how to connect a Dojo Grid to data from a Portlet Factory model. This also demonstrates a technique for viewing the details of a selected grid row, using a hidden input to submit the value(order ID) from the selected row.

Image of Rich Grid model

Installation:

To run the sample application:

1. Download the sample ZIP file and import it into a project using the File, Import, WebSphere Portlet Factory Archive command (you can also right click the project, then choose Import, WebSphere Portlet Factory Archive). The project must also have the Dojo and Tutorials And Samples feature sets installed.
2. Publish your project to the server.
3. Open the Index model and run it to see the application. This model will run standalone as well as in IBM WebSphere Portal. To add the portlet to a WebSphere Portal page, find the portlet named Rich UI Launch Page. You will be able to access the other models from this main Launcher page.

Using this sample as a portlet:

The included "Launch Page" portlet can be used in Web Sphere Portal to provide navigation among the other samples. When using this approach, the following page/portlet structure is assumed:

Portal Page Unique Name Portlet(s) on Page

LauncherPage Rich UI Launch Page

ViewAndForm Rich UI View and Form

Employees Rich UI Find Employees / Rich UI Employee Details

TagCloud Rich UI Tag Cloud / Rich UI DeveloperWorks

DojoCharts Rich UI Dojo Charts - Description = WrapperForDojoCharts

DojoGrid Rich UI Dojo Grid - Description = WrapperForDojoGrid

Trademarks

· DB2, IBM, Lotus, Tivoli, Rational, and WebSphere are trademarks or registered trademarks of IBM Corporation in the United States, other countries, or both.

· Windows and Windows NT are registered trademarks of Microsoft Corporation in the United States, other countries, or both.

· Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

· Other company, product, and service names may be trademarks or servic e marks of others.