Rich User Interface (Web 2.0) Sample 

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

© 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.


 

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



 


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




 


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



 

 

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




 


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




 


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.




 

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.