Personalization
Personalization is an unavoidable part of any web sites. Personalization allows users to tailor a standard web site as per their needs. User can perform page customizations like adjust the position of various sections of a page, add new sections, remove existing sections etc. In this article we will see how to customize a Dashboard application using Java, Java Server Faces (JSF) and JavaScript.
Dashboards & Dashlets
Dashboards are becoming widely accepted user interface for representing independent units of related information in a common web page. A dashboard can be developed by assembling a set of components called Dashlets, wherein each dashlet represents a useful unit of information. If you take Google Home page for example, there are different dashlets like 'Google Mail', 'Google News', 'Sports News' etc. Upto certain extent, user has been given the option to decide the content to be appeared in this page. The sample application explained here shows how user can personalize a simple dashboard application.
Features Supported
- Displays a set of standard dashlets using default look n feel.
- User can adjust the position of dashlets using drag n drop feature.
- User can easily configure the details of dashlets using a properties file.
- User can remove existing dashlets displayed in a page.
- User can add previously removed dashlets.
How it works?
This application is purely a java based component. The user can mention the name of the dashlets as well as the name of include files storing the content of these dashlets as a comma delimited list in a properties file called dashlet.properties. The content of the property file used in the sample application is shown below
By default, the dashlets are displayed as two columns, the left column and right column. The 'leftDashlets' property set the dashlets to be displayed on the left column. Similarly the rightDashlets property set the dashlets to be displayed on the right column. For the first time site visitors, the application picks the details of dashlets from the dashlet.properties file and displays it using a default look n feel. The look n feel of the site is controlled through a CSS file called dashlet.css. The screen shot of the dashlet page is shown below:
The application uses JSF as the UI framework. The JSF backing bean called DashletBean maintains the state of all UI components displayed in the dashboard. The DashletBean also manages the list of dashlets displayed on the dashboard, the names of the dashlets displayed in the 'Add Dashlet' section etc. Once the user personalizes the content of the site, the DashletBean persists the personalization details to a "Cookie". The personalization details for subsequent visits will be picked from this cookie. Hence it is important that Cookie must be enabled on your browser to get this application properly work.
User can remove any dashlet from the dashboard by clicking the 'Close' button (x) provided at the top right corner of each dashlet window. Whenever user removes a dashlet, the name of this dashlet appears in the 'Add Dashlet' section so that user can add this dashlet back to the dashboard. This page also provides a section called 'Personalize Dashlets' wherein user can adjust the position of each dashlet by dragging and dropping the dashlet to the desired position. The drag-n-drop feature is implemented using Javascript.
How to run this application?
To run this application, you need the following jar files in the classpath
- jsf-impl.jar
- jsf-api.jar
- jstl.jar
- standard.jar
- commons-beanutils.jar
- commons-collections.jar
- commons-digester.jar
- commons-logging.jar
Also keep the dashlet.properties file in your classpath. Create a war file out of the code base and deploy it on any web container. The URL of the dashboard page is http://<hostname>://<port>/<context-root>/dashlet.html .
Conclusion
So far we have discussed how to customize a web page using Java technologies. However you can try adding more features to this application such as enabling AJAX based approach, minimizing/maximizing dashlet windows etc.
Click here to download the code base of the sample application.
