RichFaces

# Application Overview

## General overview

While designing the Photo Album Demo, one of the goal was to create a well-structured and transparent system, which will provide a photo-album-like functionality on one hand and demonstrate the main benefits of the RichFaces on the other. Thinking within the bounds of the RichFaces library only we could get is an application flooded with modal panels, toggles and other controls where they are necessary and where are not. Developing just a photo album could cause missing the goal to demonstrate the components functionality. That’s why the development of the application was started with brewing of Rich component use cases. Some smart cases of using the components were found.

The clickable prototype of the application (a scope of graphic images linked with HTML graphic map) is available for download at https://anonsvn.jboss.org/repos/richfaces/management/design/realWorldDemo/prototypes/ver_8/

In order to document the key concepts and conceptual representation of data of the Photo Album Demo application the Entity Relation Diagram (ERD) is created. The diagram also identifies the relationships among all major entities within the system and their significant methods and attributes. It provides a structural view of the system that can be complemented by other dynamic views in use case models.

The Photo Album Demo Entity Relation Diagram

An important benefit of an entity relation diagram is that it describes and constrains the system scope. It is also used to verify and validate the understanding of the problems among various stakeholders of a project group. It is especially useful as a communication tool and a focusing point between technical and business teams.

To create a Seam application with RichFaces and Facelets project structure, use special archetype that could be found at https://anonsvn.jboss.org/repos/richfaces/trunk/cdk/maven-archetype-seam-app/ directory. For this purpose the Maven should be installed and configured (see the "Environment Configuration" chapter). This archetype represents a project template.

The following steps describe how to use this archetype:

- Create a new project directory on your hard disk;

- Browse to the directory with the archetype (`richfaces\cdk\maven-archetype-seam-app`), switch to the command line and type the next command `mvn install` to install the archetype in your repository;

- Then browse to your project directory and type in the command line

  `mvn archetype:generate`

  `-DarchetypeGroupId=org.richfaces.cdk`

  `-DarchetypeArtifactId=maven-archetype-seam-app`

  `-DarchetypeVersion=3.3.0-SNAPSHOT`

  `-DgroupId=[Your_project_group_id]`

  `-DartifactId=[Your_project_name]`

  Some project preferences such as RichFaces components version or Jboss server version and others could be customized in the root `.pom` file

- Type `mvn install`;

- Type `mvn eclipse:eclipse` to generate eclipse project

- Import projects into your IDE.

View the generated project structure. It keeps three main modules called `ear`, `ejb` and `web`. This is a typical Seam project structure.

The `ear` module generated with the help of this archetype contains `jboss-app.xml` file:

    <jboss-app>
          <loader-repository>
                seam.jboss.org:loader=photoalbum-ear-1.0-SNAPSHOT.ear
          </loader-repository>
    </jboss-app>

The loader repository is a specific feature of JBoss projects architecture. It's used to prevent classes of one application being used by classes of another application when two or more applications running on the same server. Jboss class loading uses the concept of a class loader repository. It needs a little getting used to, so some its features should be described:

- Each of dynamically deployed files (EAR, WAR, EJB jar, RAR and SAR) is loaded with a new subordinate class loader;

- However the files also register themselves with a loader repository;

- These class loaders at first ask the repository and then load their own classes;

- They may also decide to become the head of a new loader repository;

- Classes loaded into child loader repositories are not visible to parent loader repositories;

- The order in which the class loaders are added to the repository matters.

The EJB module contains the entity diagram classes and the classes for interaction with a database. The structure of EJB module is illustrated below:

The Photo Album Demo EJB module structure

The WEB module structure contains `.xhtml` sources that looks similar to a usual JSF application. The structure of WEB module is illustrated below:

The Photo Album Demo EJB module structure

Since the Photo Album Demo uses the Facelets technology the main page `index.xhtml` represents an <include> (or facelet) wrapped with the <ui:composition> tag. This tag is used to trim unnecessary markup in the facelet. Any content outside of <ui:composition> tag is ignored by the Facelets view handler. A facelet can be incorporated into another page or facelet with the help of <ui:define> and <ui:include> tags pointed to by the <ui:include> "src" attribute. The facelet may simply contain a fragment of XHTML or XML to be included.

Here is `index.xhtml` page source code:

    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    		    xmlns:s="http://jboss.com/products/seam/taglib"
    		    xmlns:ui="http://java.sun.com/jsf/facelets"
    		    xmlns:f="http://java.sun.com/jsf/core"
    		    xmlns:h="http://java.sun.com/jsf/html"
    		    xmlns:rich="http://richfaces.org/rich"
    		    xmlns:a4j="http://richfaces.org/a4j"
    		    xmlns:richx="http://richfaces.org/richx"
    		    template="layout/template.xhtml">

    	<ui:define name="searchWidget">
    		<ui:include src="includes/search/searchWidget.xhtml" />
    	</ui:define>

    	<ui:define name="menu">
    		<ui:include src="/includes/index/menu.xhtml" />
    	</ui:define>

    	<ui:define name="tree">
    		<ui:include src="/includes/index/tree.xhtml" />
    	</ui:define>

    	<ui:define name="body">
    		<h:panelGroup id="mainArea" layout="block">
    			<h:panelGroup styleClass="content_box" layout="block">
    				<ui:include src="#{model.mainArea.template}" />
    			</h:panelGroup>
    			<ui:include src="includes/misc/errorPanel.xhtml" />
    		</h:panelGroup>
    	</ui:define>

    </ui:composition>

The snippet above shows that the `index.xhtml` page does not contain sources for application functional parts but includes them as templates that are rendered depending on conditions and events taking place during user interaction with the Photo Album Demo. The picture below shows `index.xhtml` page schematically with all its "includes" and paths to them: