EGL Development User Group - Group home

EGL ShoppingCart from JSF to Rich UI

  
Customers that have developed JSF applications have asked me few times how to develop similar Rich UI applications.  Some of the how-to questions are: How to display pages? How to access business logic? How to deal with internationalization?
 
You maybe familiar with the EGL JSF Shopping cart application that is a sample available in Rational Business Developer (RBD). While there is an open request for enhancement (8855) to create a similar sample for Rich UI, I thought why can't I create one myself?

So here it is! A Rich UI Shopping cart application (well without the cart part actually... this is the first version...to be continued).
 
 
This application has been developed using RBD 8.0.1 and 8.0.1.2 and runs on WebSphere Application Server 7.0.
 
 
It gives possible solutions to some general concerns like:
  • a usual layout Top/Left/Main/Bottom frames (using DojoBorderContainer)
  • display of different “pages”
  • calling EGL business logic (generated to Java)
  • display images from a BLOB column in Rich UI
  • managing errors
  • multilingual (English and French are available)
This is my own development and shouldn't be considered as *the* recommended IBM way of coding Rich UI. 
 
Here's the instructions:
 
Download

Setup instructions
Follow the steps below: (You can also follow along with the steps in this video. Unzip it and open shoppingcartsetup_viewlet_swf.html in a Web browser.)
  1. unzip the derby database in C:\temp\eglredbkdb
  2. create a new EGL Rich UI Dojo project to make sure the needed dependencies are available in your workspace (com.ibm.egl.rui_2.0.0 and com.ibm.egl.rui.dojo.*)
  3. import the projects into RBD 8.0.2.1: menu File > Import > Existing project then check From an archive file and select the attached zip file
  4. modify com.ibm.egl.rui.shopcart\WebContent\properties\ruishopcartconf.properties to match your WebSphere TCP port (localhost:9080)
  5. start WebSphere Application Server and publish the EGLShoppingCartWebEAR project
  6. Open com.ibm.egl.rui.shopcart\EGLSource\com\ibm\egl\rui\shopcart\handlers\ShoppingCart.egl in the EGL RichUI editor and select the Preview tab

To deploy it to WebSphere Application Server
If you want to deploy the RichUI project com.ibm.egl.rui.shopcart to WebSphere Application Server you can follow the same steps as on the Mortgage tutorial on the Information center.  Then run <your Web project>\WebContent\ShoppingCart-en_US.html

Some references
 
I hope it will help developers to get started with Rich UI. Comments (bad and good) are welcomed, including suggested improvements.  
 
Olivier