Rich Web User Interface Sample 

This set of samples shows how to use some of the Dojo, Ajax, and rich user interface features of IBM Web Experience Factory version 7.0.1  

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

This article with the accompanying sample shows you how to use IBM Web Experience Factory (hereafter called Web Experience 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 Web Experience Factory. See for a complete list. For an introduction to developing with Web Experience Factory, you should look at the tutorials that are available in the product help and at the re sources described in the .

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

This sample set requires that you include the following product feature sets in your project:

• Dojo Extension - 1.x (under User Interface)
• Enterprise Theme Extension (under Integration Extensions)
• Building Models (under Tutorials And Samples)

Sample Description:
This sample consists of several sample models that are accessed via a launch page. The samples may be run standalone from the Web Experience Factory Designer for simple test purposes, but are best viewed when used as portlets within WebSphere Portal, as described below. These samples illustrate how rich web user interfaces can be built with Web Expereince Factory, including leading edge CSS styles and AJAX and Dojo mechanisms. Some of the techniques used by these samples look best in the latest version browsers based on Webkit and Mozilla browser frameworks.

Note, for simplicity, some of these samples include inline CSS styles directly in the page. A best practice for building larger applications with many styles would be to include those in CSS file(s) integrated with the WebSphere Portlet Factory Style Sheet and/or Theme builders.

The models illustrate the following techniques:

Launcher (../samples/rich_web_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. When run standalone, this model launches the other samples in new browser instances. When configured as a portlet in portal as described below, it leverages the WebSphere Portal Link builder to switch to a separate portal page for each individual sample.



Employee Search and Details (../samples/rich_web_ui/FindEmployees.model and ../samples/rich_web_ui/EmployeeDetails.model):
This model demonstrated rich UI techniques for employee lookup.

This sample utilizes the following:

• Dojo Accordion - To allow you to choose between the search UI to use (Tree, Table or TypeAhead)
• Dojo Tree - To allow you to drill down and choose an individual employee from the organization's hierarchy.
• Dojo Animation - To fade in selected data
• Dojo Progress Indicator - To indicate that an action is in progress
• Dojo Hover Tab Container - To allow you to select between two panes of employee details
• Custom Type Ahead Picker - To allow you to search by name as the user is typing.
• Client events with Partial Page Refresh - To send the employee id from the search portlet to the details portlet.

Orders View and Update (../samples/rich_web_ui/OrdersView.model):

• Uses Data Services User Interface builder to display and update data
• Uses Dojo Tab Container to display multiple views of data
• Displays multi-line view of data with expand and collapse for each item
• Expand/Collapse is done via Dojo Title Pane
• Dojo controls are applied using Data Field Settings (Calendar, Time, Currency, Rich Tex Editor, Zip, Email, regex, etc)
• Create new record uses Dojo Form Dialog builder to create a pop-up dialog
• Profiled using WebSphere Portal groups so that update, create and delete are not available for “customers” group
• Dojo Tooltip builder

Orders Portlet Customizer (../samples/rich_web_ui/customizers/OrdersViewCustomizer.model)

• Uses Customizer and other builders to create the UI for customization
• Uses Dojo Drag and Drop builder to hide/show columns
• Uses Buttons to reorder columns
• Allows changing Portlet UI Theme

Articles Feed and Tag Cloud (../samples/rich_web_ui/TagCloud.model and ../samples/rich_web_ui/DeveloperWorksConsumer.model)

• Dojo slider is used to filter the list of tags shown by relative tag usage
• Fires client event to separate portlet which will dislay search results from selected tag

Multipage Registration Form (../samples/rich_web_ui/Convention.model)

• Splits large registration input structure into several form pages with final review page
• The entire input structure is submitted from the final page
• Uses Custom Imported HTML pages created by a UI designer
• Provides a banner at the top which indicates which page of the form one is viewing

Employee Photo Directory (../samples/rich_web_ui/EmployeePhotoDirectory.model)
Demonstrates different ways to browse employee photo images using the new Dojo Lightbox builder and using the Dojo Page Elements builder with the Dojo Slideshow and Dojo Image Gallery widget types, selectable via a menu created with the Dojo Drop Down Button builder




Video Viewer (../samples/rich_web_ui/VideoViewer.model)

Demonstrates Dojo based Drag and Drop, leveraging embedded videos of WebSphere Portal topics



Note that clicking on the window that contains the actual video will leave the sample application and open the video hosting website.


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 WebSphere 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 Web UI Launch Page
Employees	Rich Web UI Find Employees / Rich Web UI Employee details
OrdersView	Rich Web UI – Orders Tab View
TagCloud	Rich Web UI Tag Cloud / Rich Web UI DeveloperWorks Consumer
MultiPageForm	Rich Web UI Multi Page Form
SalesOrdersMobile	Rich Web UI Sales Orders Mobile
EmployeePhotos	Rich Web UI Employee Photo Directory
VideoViewer	Rich Web UI Video Viewer

Other setup needed by portlets

• For the portal group profiling used in the Orders portlet, you will need to have a portal group called "customers" and a user in that group. It is recommended to also make the user a member of the wpsadmins group so that you don't have to mess around with portletaccess rights.
• This sample requires Portal Pages to use Server Side Rendering and will not function correctly when added to a page set to Client Side Rendering

IBM PROVIDES THESE SAMPLES "AS IS" SUBJECT TO ANY STATUTORY WARRANTIES THAT CANNOT BE EXCLUDED. IBM MAKES NO WARRANTIES OR CONDITIONS, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OR CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT REGARDING THESE SAMPLES OR TECHNICAL SUPPORT, IF ANY.

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 service marks of others.