Personalizing Web Pages Using JSF
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.
- 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
How to run this application?
To run this application, you need the following jar files in the classpath
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 .
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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)