Author: atsebro Date: 2009-04-17 15:21:05 -0400 (Fri, 17 Apr 2009) New Revision: 13657 Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/modules/application_overview.xml trunk/docs/realworld_app_guide/en/src/main/docbook/modules/intro.xml Log: RF-5768: Real World Demo Application Tutorial Update for 3.3.1 release Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/modules/application_overview.xml =================================================================== --- trunk/docs/realworld_app_guide/en/src/main/docbook/modules/application_overview.xml 2009-04-17 19:18:01 UTC (rev 13656) +++ trunk/docs/realworld_app_guide/en/src/main/docbook/modules/application_overview.xml 2009-04-17 19:21:05 UTC (rev 13657) @@ -9,8 +9,190 @@ </chapterinfo> <title>Application overview</title> - <section><title>General application overview</title> - + + <section><title>Used technologies</title> + <para> + The Photo Album Demo application is not only a JSF application. It encompasses various technologies and frameworks: + </para> + <itemizedlist> + <listitem><para><emphasis>Java Server Faces (JSF)</emphasis>, technology that provides a single, standard, efficient way to use Java technologies to build Web-based applications;</para></listitem> + <listitem><para><emphasis>Facelets</emphasis>, technology that combines the power of UI components and the flexibility of XML to accelerate JSF development. Facelets presents a compelling alternative to JSP as the markup technology of choice for next-generation JSF applications;</para></listitem> + <listitem><para><emphasis>Asynchronous JavaScript and XML (AJAX)</emphasis>, several incorporated technologies. Ajax binds together standards-based presentation using XHTML and CSS, dynamic display and interaction using the DOM, data interchange and manipulation using XML and XSLT, asynchronous data retrieval using XMLHttpRequest and JavaScript;</para></listitem> + <listitem><para><emphasis>Seam</emphasis> technology that integrates previous mentioned technologies with Java Persistence (JPA), Enterprise Java Beans (EJB 3.0) and Business Process Management (BPM) into a unified full-stack solution;</para></listitem> + <listitem><para><emphasis>RichFaces</emphasis>, a framework and library of Ajax-capable UI components for JSF framework that had been evolved from Ajax4JSF framework (merge of Ajax and JavaServer Faces technologies).</para></listitem> + </itemizedlist> </section> + + <section> + <title>General overview</title> + <para> + While designing the <property>Photo Album Demo</property>, 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 <property>RichFaces</property> on the other. + Thinking within the bounds of the <property>RichFaces</property> library only we could get an application flooded with modal panels, toggles and other controls where they are necessary and where not. + Developing just a photo album could cause missing the goal of demonstraiting the components. + 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. + </para> + <para> + The clickable prototype of the application (a scope of graphic images linked with HTML graphic map) is available for download at + <ulink url="https://anonsvn.jboss.org/repos/richfaces/management/design/rea... + </para> + <para> + In order to document key concepts and conceptual representation of data of the <property>Photo Album Demo</property> application the Entity Relation diagram (ERD) was 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. + </para> + + <figure> + <title>Thе Photo Album Demo entity relation diagram</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/erd.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + An important benefit of a 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 helpful as a communication tool and a focusing point between technical and business teams. + </para> + + <para> + To create a Seam application with <property>RichFaces</property> and Facelets project structure, use special archetype that could be found at + <ulink url="https://anonsvn.jboss.org/repos/richfaces/trunk/cdk/maven-arche... directory. + For this purpose the Maven should be installed and configured (see the &quot;Environment Configuration&quot; chapter). + This archetype represents a project template. + </para> + <para> + The following steps describe how to use this archetype: + </para> + <itemizedlist> + <listitem><para>create a new project directory on your hard disk;</para></listitem> + <listitem><para>browse to the directory with the archetype (<code>richfaces\cdk\maven-archetype-seam-app</code>), switch to command line and type the next command <code>mvn install</code> to install the archetype in your repository;</para></listitem> + <listitem><para>then browse to your project directory and type in command line</para> + <para><code>mvn archetype:generate </code></para> + <para><code>-DarchetypeGroupId=org.richfaces.cdk </code></para> + <para><code>-DarchetypeArtifactId=maven-archetype-seam-app </code></para> + <para><code>-DarchetypeVersion=3.3.0-SNAPSHOT </code></para> + <para><code>-DgroupId=[Your_project_group_id] </code></para> + <para><code>-DartifactId=[Your_project_name] </code></para> + <para>some project preferences such as <property>RichFaces</property> components version or Jboss server version and others could be customized in root <code>.pom</code> file </para> + </listitem> + <listitem><para>type <code>mvn install</code>;</para></listitem> + <listitem><para>type <code>mvn eclipse:eclipse</code> to generate eclipse project </para></listitem> + <listitem><para>import projects into your IDE.</para></listitem> + </itemizedlist> + + <para> + View the generated project structure. It keeps three main modules called <code>ear</code>, <code>ejb</code> and <code>web</code>. + This is a typical Seam project structure. + </para> + + <para> + The <code>ear</code> module generated with the help of this archetype contains <code>jboss-app.xml</code> file: + </para> + <programlisting role="XML"><![CDATA[<jboss-app> + <loader-repository> + seam.jboss.org:loader=realworld-ear-1.0-SNAPSHOT.ear + </loader-repository> +</jboss-app>]]> + </programlisting> + + <para> + 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 it features should be touched here: + </para> + + <itemizedlist> + <listitem><para>Each of dynamically deployed files (EAR, WAR, EJB jar, RAR and SAR) is loaded with a new subordinate class loader; </para></listitem> + <listitem><para>However the files also register themselves with a loader repository;</para></listitem> + <listitem><para>These class loaders at first ask the repository and then load their own classes;</para></listitem> + <listitem><para>They may also decide to become the head of a new loader repository;</para></listitem> + <listitem><para>Classes loaded into child loader repositories are not visible to parent loader repositories;</para></listitem> + <listitem><para>The order in which the class loaders are added to the repository matters.</para></listitem> + </itemizedlist> + + <para> + The EJB module contains the entity diagram classes and the classes for interaction with database. The structure of EJB module is illustrated below: + </para> + + <figure> + <title>The Photo Album Demo EJB module structure</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/ejb_struct.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The WEB module structure contains <code>.xhtml</code> sources looks similar to a usual JSF application. The structure of WEB module is illustrated below: + </para> + + <figure> + <title>The Photo Album Demo EJB module structure</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/web_struct.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Since the Photo Album Demo uses Facelets technology the main page <code>index.xhtml</code> represents an &lt;include&gt; (or facelet) wrapped with the <emphasis role="bold">&lt;ui:composition&gt;</emphasis> tag. + This tag is used to trim unnecessary markup in the facelet. + Any content outside of <emphasis role="bold">&lt;ui:composition&gt;</emphasis> tag will be ignored by the Facelets view handler. + A facelet can be incorporated into another page or facelet with the help of <emphasis role="bold">&lt;ui:define&gt;</emphasis> and <emphasis role="bold">&lt;ui:include&gt;</emphasis> tags pointed to by the <emphasis role="bold">&lt;ui:include&gt;</emphasis> &quot;src&quot; attribute. + The facelet may simply contain a fragment of XHTML or XML to be included.</para> + + <para>Here is <code>index.xhtml</code> page source code:</para> + <programlisting role="XML"><![CDATA[<!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>]]> + </programlisting> + + <para>The snippet above shows that the <code>index.xhtml</code> 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 illustration below shows <code>index.xhtml</code> page schematically with it &quot;includes&quot; and paths to them:</para> + <mediaobject> + <imageobject> + <imagedata fileref="images/indexxhtml.png"/> + </imageobject> + </mediaobject> + + + </section> + + </chapter> Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/modules/intro.xml =================================================================== --- trunk/docs/realworld_app_guide/en/src/main/docbook/modules/intro.xml 2009-04-17 19:18:01 UTC (rev 13656) +++ trunk/docs/realworld_app_guide/en/src/main/docbook/modules/intro.xml 2009-04-17 19:21:05 UTC (rev 13657) @@ -4,23 +4,38 @@ <title>Introduction</title> <para> - The <emphasis>RichFaces Real World Application</emphasis> — the working name is &quot;<emphasis role="bold">Photo Album</emphasis>&quot; — is created to imaginate the way - the web applications designed and developed with <property>RichFaces</property> could look and behave. + The <emphasis>RichFaces Real World Demo Application</emphasis> — &quot;<emphasis role="bold">Photo Album Demo</emphasis>&quot; — + is created to help you imagine the way web applications designed and developed with <property>RichFaces</property> can look like and behave. </para> <para> - The RichFaces are evolved from <emphasis>Ajax4JSF</emphasis> framework (merge of Ajax and JavaServer Faces technologies) and - represent a framework and library of <emphasis>Ajax-capable UI components for JSF framework</emphasis>. - Amongst the wide range of similar libraries the RichFaces has set of benefits that is fully described in - the <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... to the RichFaces</ulink>. - The &quot;Photo Album&quot; covers some of the most important of them and demonstrates: + The <property>RichFaces</property> is an opensource framework and library of Ajax-capable UI components for JavaServer Faces framework. + The <property>RichFaces</property> is evolved from Ajax4JSF framework (integration of Ajax and JavaServer Faces technologies). </para> - - <itemizedlist> - <listitem><para><emphasis>wide variety of UI components</emphasis>, which provides Lego-like way of building user interfaces for web applications;</para></listitem> - <listitem><para><emphasis>built-in Ajax capability</emphasis>, which offers both component-wide and a lot more flexible page-wide Ajax support;</para></listitem> - <listitem><para><emphasis>highly customizable look-and-feel</emphasis> (the RichFaces have special feature called - &quot;<ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... - </itemizedlist> + <para> + The <property>RichFaces</property> provides a set of benefits which distinguish it from a wide range of similar libraries and frameworks. + All the <property>RichFaces</property> benefits and advantages are fully described in the + &quot;<ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... to the RichFaces</ulink>&quot; chapter of the + &quot;<ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... Developer Guide</ulink>&quot;. + The &quot;<emphasis role="bold">Photo Album Demo</emphasis>&quot; covers some of the main ones and demonstrates: + </para> + <itemizedlist> + <listitem><para><emphasis>wide variety of UI components</emphasis> — the <property>RichFaces</property> provides a Lego-like way of building user interfaces for web applications;</para></listitem> + <listitem><para><emphasis>built-in Ajax capability</emphasis> — the <property>RichFaces</property> offers both component-wide and very flexible page-wide Ajax support with no need to write any JavaScript code; </para></listitem> + <listitem><para><emphasis>highly customizable look-and-feel</emphasis> — the <property>RichFaces</property> have special feature called + &quot;<ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... + </itemizedlist> + <para> + The &quot;Photo Album Demo&quot; is a desktop-like on-line photo manager. + It provides social services for uploading photos, storing and previewing them, creating your own albums and sharing them with other users, searching albums, photos or users, managing the environment. + Newcomers or not registered users can navigate through other users shelves and albums in &quot;Anonymous mode&quot;, but in this case <property>no</property> possibilities to create personal shelves or albums or upload photos are available. + </para> + <para> + The &quot;Photo Album Demo&quot; represents and implements strict &quot;Shelves—Albums—Photos&quot; paradigm. + It means that photos are kept in albums and albums are stored on shelves, but albums can not contain another albums or shelves and shelves can not keep another shelves and can not be stored in albums. + </para> + <para> + The <property>RichFaces</property> &quot;Photo Album Demo&quot; is a blue print application. One of it main goal is to show patterns of the <property>RichFaces</property> components usage. + </para> </chapter>