[richfaces-svn-commits] JBoss Rich Faces SVN: r15383 - in root/docs/trunk/guides: migrationguide and 9 other directories.

Author: artdaw Date: 2009-08-27 20:39:31 -0400 (Thu, 27 Aug 2009) New Revision: 15383 Added: root/docs/trunk/guides/photo_album_app_guide/ root/docs/trunk/guides/photo_album_app_guide/en/ root/docs/trunk/guides/photo_album_app_guide/en/pom.xml root/docs/trunk/guides/photo_album_app_guide/en/src/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/a4j_status.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/albumView.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/button.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/errorsReports.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/hiw.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/imageView.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/navigationPanel.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/shelfView.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/skinnability.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/uploadImages.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/usedComponents.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/userPreferencesView.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/validators.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/master.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/application_overview.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/getting_started.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/intro.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/overview.xml root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/ root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/albumView.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_album.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_image.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_shelf.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/contentArea.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/diagram.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/dnd.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/ejb_struct.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/erd.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/imageView.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/image_size.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/indexxhtml.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/messages_en_property.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/modulesList.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/richfaces_logo.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_mess.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_pers.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_start.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/slide_show.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/tooltip.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/tree.png root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/web_struct.png root/docs/trunk/guides/photo_album_app_guide/pom.xml Modified: root/docs/trunk/guides/migrationguide/pom.xml root/docs/trunk/guides/pom.xml Log: https://jira.jboss.org/jira/browse/RF-7335 - Photo Album Guide is added to the 4.0 build Modified: root/docs/trunk/guides/migrationguide/pom.xml =================================================================== --- root/docs/trunk/guides/migrationguide/pom.xml 2009-08-28 00:25:48 UTC (rev 15382) +++ root/docs/trunk/guides/migrationguide/pom.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -11,233 +11,5 @@ <name>RichFaces Migration Guide</name> <modules> <module>${docs.translation}</module> - </modules> - - <!--version>3.3.2-SNAPSHOT</version> - <name>Migration Guide</name> - <description>RichFaces Migration Guide from 3.1.* to 3.2.0 version</description> - <pluginRepositories> - <pluginRepository> - <releases> - <enabled>true</enabled> - </releases> - <snapshots> - <enabled>false</enabled> - <updatePolicy>never</updatePolicy> - </snapshots> - <id>repository.jboss.com</id> - <name>Jboss Repository for Maven</name> - <url>http://repository.jboss.com/maven2/</url> - <layout>default</layout> - </pluginRepository> - </pluginRepositories> - <profiles> - <profile> - <id>html</id> - <build> - <pluginManagement> - <plugins> - <plugin> - <groupId>org.jboss.maven.plugins</groupId> - <artifactId>maven-jdocbook-plugin - </artifactId> - <version>2.1.0-200803311251UTC-MPJDOCBOOK-8 - </version> - <configuration> - <formats> - <format> - <formatName>html</formatName> - <stylesheetResource> ${xsl_html}</stylesheetResource> - <finalName> index.html</finalName> - <imageCopyingRequired> true</imageCopyingRequired> - <imagePathSettingRequired> false</imagePathSettingRequired> - </format> - </formats> - </configuration> - </plugin> - </plugins> - </pluginManagement> - </build> - </profile> - <profile> - <id>html_single</id> - <build> - <pluginManagement> - <plugins> - <plugin> - <groupId>org.jboss.maven.plugins</groupId> - <artifactId>maven-jdocbook-plugin - </artifactId> - <version>2.1.0-200803311251UTC-MPJDOCBOOK-8 - </version> - <configuration> - <formats> - <format> - <formatName>html_single</formatName> - <stylesheetResource> ${xsl_html_single}</stylesheetResource> - <imageCopyingRequired> true</imageCopyingRequired> - <imagePathSettingRequired> false</imagePathSettingRequired> - <finalName> index.html</finalName> - </format> - </formats> - </configuration> - </plugin> - </plugins> - </pluginManagement> - </build> - </profile> - </profiles> - <build> - <pluginManagement> - <plugins> - <plugin> - <groupId>org.apache.maven.plugins</groupId> - <artifactId>maven-dependency-plugin</artifactId> - <executions> - <execution> - <id>unpack</id> - <phase>generate-resources</phase> - <goals> - <goal>unpack</goal> - </goals> - <configuration> - <artifactItems> - <artifactItem> - <groupId> - org.richfaces.docs.common-resources - </groupId> - <artifactId> - ${translation} - </artifactId> - <version> - ${project.version} - </version> - <type>jar</type> - <overWrite>true</overWrite> - <outputDirectory> - ${project.build.directory} - </outputDirectory> - </artifactItem> - </artifactItems> - <overWriteReleases> - false - </overWriteReleases> - <overWriteSnapshots> - true - </overWriteSnapshots> - </configuration> - </execution> - </executions> - </plugin> - <plugin> - <groupId>org.jboss.maven.plugins</groupId> - <artifactId>maven-jdocbook-plugin</artifactId> - <version>2.1.0-200803311251UTC-MPJDOCBOOK-8</version> - <executions> - <execution> - <id>jdocbook:generate</id> - <phase>compile</phase> - <goals> - <goal>generate</goal> - </goals> - </execution> - <execution> - <id>jdocbook:resources</id> - <phase>process-resources</phase> - <goals> - <goal>resources</goal> - </goals> - </execution> - <execution> - <id>jdocbook:bundle</id> - <phase>package</phase> - <goals> - <goal>bundle</goal> - </goals> - </execution> - </executions> - <dependencies> - <dependency> - <groupId>org.jboss</groupId> - <artifactId>jbossorg-docbook-xslt</artifactId> - <version>1.1.0</version> - </dependency> - <dependency> - <groupId>org.jboss</groupId> - <artifactId>jbossorg-jdocbook-style</artifactId> - <version>1.1.0</version> - <type>jdocbook-style</type> - </dependency> - <dependency> - <groupId>org.richfaces.docs.common-resources</groupId> - <artifactId>${translation}</artifactId> - <version>${project.version}</version> - <type>jar</type> - </dependency> - <dependency> - <groupId>org.apache.xmlgraphics</groupId> - <artifactId>fop</artifactId> - <version>0.95</version> - </dependency> - </dependencies> - <configuration> - <sourceDirectory> - ${basedir}/src/main/docbook - </sourceDirectory> - <imageResource> - <directory> - ${project.build.directory}/common-resources - </directory> - </imageResource> - <cssResource> - <directory> - ${project.build.directory}/common-resources - </directory> - </cssResource> - <sourceDocumentName>master.xml</sourceDocumentName> - <formats> - <format> - <formatName>pdf</formatName> - <stylesheetResource>classpath:/common-resources/xslt/pdf-common.xsl</stylesheetResource> - <finalName>richfaces_migration_guide.pdf</finalName> - <imagePathSettingRequired>true</imagePathSettingRequired> - </format> - <format> - <formatName>html</formatName> - <stylesheetResource> - ${xsl_html} - </stylesheetResource> - <finalName>index.html</finalName> - <imageCopyingRequired> - true - </imageCopyingRequired> - <imagePathSettingRequired> - false - </imagePathSettingRequired> - </format> - <format> - <formatName>html_single</formatName> - <stylesheetResource> - ${xsl_html_single} - </stylesheetResource> - <imageCopyingRequired>true</imageCopyingRequired> - <imagePathSettingRequired>false</imagePathSettingRequired> - <finalName>index.html </finalName> - </format> - </formats> - <xincludeSupported>true</xincludeSupported> - <options> - <xincludeSupported>true</xincludeSupported> - <useRelativeImageUris> true </useRelativeImageUris> - <xmlTransformerType> saxon </xmlTransformerType> - <docbookVersion>1.72.0</docbookVersion> - </options> - </configuration> - </plugin> - </plugins> - </pluginManagement> - </build> - <modules> - <module>en</module> - </modules--> + </modules> </project> Added: root/docs/trunk/guides/photo_album_app_guide/en/pom.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/pom.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/pom.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,33 @@ +<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> + <parent> + <groupId>org.richfaces.docs.guides</groupId> + <artifactId>photo_album_app_guide</artifactId> + <version>4.0.0-SNAPSHOT</version> + </parent> + <modelVersion>4.0.0</modelVersion> + + <groupId>org.richfaces.docs.photo_album_app_guide</groupId> + <artifactId>en</artifactId> + <packaging>jar</packaging> + <name>RichFaces Photo Album Application Guide (${translation})</name> + <build> + <finalName> + ${project.parent.artifactId}_${translation}-${version} + </finalName> + <plugins> + <plugin> + <groupId>org.apache.maven.plugins</groupId> + <artifactId>maven-dependency-plugin</artifactId> + </plugin> + <plugin> + <groupId>org.codehaus.mojo</groupId> + <artifactId>xml-maven-plugin</artifactId> + </plugin> + + <plugin> + <groupId>org.jboss.maven.plugins</groupId> + <artifactId>maven-jdocbook-plugin</artifactId> + </plugin> + </plugins> + </build> +</project> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/pom.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/a4j_status.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/a4j_status.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/a4j_status.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="a4j_status"> + <title>The <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> component</title> + <para> + + <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> + is a component, designed to create some visual effect during Ajax request. The comportment is usually attached to a certain request, which implies time consuming processing, so that the end user is aware the page is not hung up, + it's responding to her actions: the user sees the processing progress (the component is frequently used to indicate file uploading process). + </para> + <para> + However, in the Photo Album application the <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> component is triggered on any Ajax request: to demonstrate the component itself and partially to display for the user that on every click on a link or a button something is happening, as all actions in the application occur on a single page which is not typical for usual web-workflow, when on each action the user navigates to a new page. + </para> + <para> + + By default, <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> works for each Ajax components inside the local region. This means if you have no region defined on the page (the whole view is a region) and have only one <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> on the page, the <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> will be activated during Ajax request by any of the Ajax component located on the page. + </para> + <para> + As there are no regions defined explicitly in the application, <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> is located in the main template (template.xhtml) for all pages: + </para> + <programlisting role="XML"><![CDATA[... +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + ... + <body class="main-body"> + ... + <ui:include src="/includes/index/status.xhtml" /> + </body> +</html> + +...]]></programlisting> + <para> + Hence the default behavior of the component meets that application&apos;s requirements: the component is shown on every single Ajax request. + </para> + <para> + This is the page with the <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> component: + </para> + <programlisting role="XML"><![CDATA[... +<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"> + <a4j:status layout="block" stopStyle="display: none;" + startStyle="height: 52px; width: 79px; position: absolute; top: 0px; left: 278px;"> + <f:facet name="start"> + <h:panelGroup> + <h:graphicImage style="position: absolute; top: 0px; left: 0px;" + height="79" width="52" alt="" value="/img/shell/ai.png" /> + <h:graphicImage style="position: absolute; top: 26px; left: 13px;" + height="26" width="26" alt="" value="/img/shell/ai.gif" /> + </h:panelGroup> + </f:facet> + </a4j:status> +</ui:composition> +...]]></programlisting> + <para> + The <code>startStyle=&quot;height: 52px; width: 79px; position: absolute; top: 0px; left: 278px;&quot;</code>, attribute specifies what is displayed on the page after the request initiation, which means in our case that it is positioned absolutely: 278 pixels from the left border of the page and 0 pixels from the top, its width is 79px and the height is 52px. + </para> + + <para> + The <code>stopStyle=&quot;display: none;&quot;</code> attribute is responsible for displaying the component on the page when the request is finished, in our case the it will be hidden. + + </para> + <para> + As we need to show only the beginning of the request, we customize only the <code>&lt;f:facet name=&quot;start&quot;&gt;</code> which is just an image(you can insert any image you like). + </para> + <para> + + If you would like to get more details about the <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> please visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?... Demo</ulink> web page and <ulink url="&devguide;/#a4j_status">RichFaces Developer Guide</ulink>. + </para> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/a4j_status.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/albumView.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/albumView.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/albumView.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,390 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="albumView"> + <title>Album View</title> + <para> + <property>Album</property> view allows you to observe album items as thumbnails, + scale the size of the thumbnails with the slider control, as well as to switch to slideshow mode. + By clicking on an image in the <property>Album</property> view the <property>Image</property> View is opened. + </para> + + <figure> + <title>Album view</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/albumView.png"/> + </imageobject> + </mediaobject> + </figure> + <section> + <title>Image Size Control with &lt;rich:inputNumberSlider&gt;</title> + <para> + The <emphasis role="bold"><property>&lt;rich:inputNumberSlider/&gt;</property></emphasis> component in the Photo Album Demo is used as a control that helps a user to change photos size while previewing an album. + A handler position on the slider track corresponds to a particular value of an image size. + The component is included into the page with the help of <emphasis role="bold"><property>&lt;ui:include/&gt;</property></emphasis>: + </para> + <programlisting role="XML"><![CDATA[... +<ui:include src="src/main/webapp/includes/image/inputNumberSlider.xhtml"/> +...]]></programlisting> + + <para> + Now let's have a look at <code>src/main/webapp/includes/image/inputNumberSlider.xhtml</code> file: + </para> + <programlisting role="XML"><![CDATA[... +<ui:composition ...> + <div> + <rich:inputNumberSlider value="#{imageSizeHelper.value}" + minValue="80" + maxValue="200" + step="40" + enableManualInput="false" + showArrows="false" + showBoundaryValues="true" + showInput="false"> + <a4j:support event="onchange" reRender="userAlbumImages"/> + </rich:inputNumberSlider> + </div> +</ui:composition> +...]]></programlisting> + <para> + There is special Enumeration type that contains four predefined values for image size. Each type has a set of image related attributes such as CSS class for new photo size, postfix for a new file name, image background. + The <code>setValue</code> method of the <code>ImageSizeHelper.java</code> class is triggered on each slider's position change. This method sets one of four predefined values for image size and corresponds to slider&apos;s position. + </para> + <programlisting role="JAVA"><![CDATA[public void setValue(int value) { + currentDimension = ImageDimension.getInstance(value); + this.value = currentDimension.getX(); +}]]></programlisting> + + <para> + And here is the <code>ImageDimension.java</code> class: + </para> + + <programlisting role="JAVA"><![CDATA[... + public enum ImageDimension { + + SIZE_80(80), SIZE_120(120), SIZE_160(160), SIZE_200(200), SIZE_MEDIUM(600), ORIGINAL(0); + + final static String CSS_CLASS = "preview_box_photo_"; + final static String FILE_POSTFIX = "_small"; + final static String IMAGE_BG = "/img/shell/frame_photo_%1$d.png"; + final static String IMAGE_BG_STYLE = "width: %1$dpx; height: %1$dpx"; + + int x; + String bgStyle; + String cssClass; + String imageBgSrc; + String filePostfix; + + private ImageDimension(int x) { + this.x = x; + this.bgStyle = String.format(IMAGE_BG_STYLE, x + 20); + cssClass = CSS_CLASS + x; + imageBgSrc = String.format(IMAGE_BG, (x == 160) ? 200 : x); + if(x == 600){ + filePostfix = "_medium"; + }else if(x == 0){ + filePostfix = ""; + }else{ + filePostfix = FILE_POSTFIX + x; + } + } + ...]]></programlisting> + + <para> + After the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> finished its job user photos + (more exactly, the <emphasis role="bold"><property>h:panelGroup</property></emphasis> with <code>userAlbumImages</code> id that contains user photos) + are rendered correspondingly to the new value. Here is <code>web/src/main/webapp/includes/image/imageList.xhtml</code>: + </para> + <programlisting role="XML"><![CDATA[... +<h:panelGroup id="userAlbumImages"> + <a4j:repeat id="imageList" value="#{model.images}" var="image" rows="20"> + <h:panelGroup layout="block" styleClass="#{imageSizeHelper.currentDimension.cssClass}"> + <h:graphicImage styleClass="pr_photo_bg" style="#{imageSizeHelper.currentDimension.imageBgStyle}" value="#{imageSizeHelper.currentDimension.imageBg}" /> + <h:panelGrid cellpadding="0"> + <h:panelGroup> + <a4j:commandLink + actionListener="#{controller.showImage(image)}" + reRender="mainArea, treePanel"> + <a4j:mediaOutput id="img" element="img" + createContent="#{imageLoader.paintImage}" + style="border : 1px solid #FFFFFF;" + value="#{fileManager.transformPath(image.fullPath, imageSizeHelper.currentDimension.filePostfix)}"> + <f:param value="#{imageSizeHelper.currentDimension.x}" name="x" /> + <rich:dragSupport rendered="#{controller.isUserImage(image)}" reRender="mainArea, treePanel" id="dragSource" dragIndicator="dragIndicator" + dragType="image" dragValue="#{image}"> + <rich:dndParam id="dragParam" name="label" value="#{image.name}" /> + </rich:dragSupport> + </a4j:mediaOutput> + </a4j:commandLink> + <br/> + </h:panelGroup> + <ui:include src="/includes/contextMenu/CMForImage.xhtml" > + <ui:param name="image" value="#{image}" /> + <ui:param name="mediaOutput" value="#{rich:clientId('img')}"/> + </ui:include> + + </h:panelGrid> + <h:panelGroup layout="block" styleClass="photo_name">#{image.name}</h:panelGroup> + <h:panelGroup layout="block" styleClass="photo_data"> + <h:outputText value="#{image.created}"> + <f:convertDateTime /> + </h:outputText> + </h:panelGroup> + </h:panelGroup> + </a4j:repeat> + </h:panelGroup> +...]]></programlisting> + + <para> + When the <emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> is rendered, initially its default value for image size is 120 px. + </para> + + <figure> + <title>Image size control</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/image_size.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Visit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter: + </para> + + <itemizedlist> + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... page for the <emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... for the <emphasis role="bold"><property>&lt;a4j:suport&gt;</property></emphasis> component. + </para> + </listitem> + + + </itemizedlist> + + </section> + + + + <section id="slideshow"> + <title>Slideshow</title> + + <para>The slideshow feature in the Photo Album Demo can be enabled by clicking on <emphasis role="bold">&quot;Start Slideshow&quot;</emphasis> link from two different places in the application: + 1) from user&apos;s album preview (<code>/web/src/main/webapp/image/albumInfo.xhtml</code>) and 2) from a particular photo preview (<code>src/main/webapp/image/imageInfo.xhtml</code>). + Both of two mentioned XHTML files include slideshow with the help of Facelets &lt;<emphasis role="bold"><property>ui:include</property></emphasis> tag + (for more information about &lt;<emphasis role="bold"><property>ui:include</property></emphasis> see Facelets Reference Guide — + <ulink url="http://www.jsftoolbox.com/documentation/facelets/01-Introductio...>). + </para> + <para> + The components that implement the slideshow functionality are: + </para> + <itemizedlist> + <listitem><para><emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> located in <code>web/src/main/webapp/includes/image/slideshow.xhtml</code> that is hidden by default as the attribute <code>showWhenRendered=&quot;#{slideshow.active}&quot;</code> and the active property of <code>SlideshowManager.java</code> is set to &quot;false&quot; by default.</para></listitem> + <listitem><para><emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> located in <code>includes/misc/slideShowPooler.xhtml</code> which is also inactive due to the mentioned active property ( <code>active=#{slideshow.active}</code>)</para></listitem> + </itemizedlist> + + <para> + + After activation, <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> will send asynchronous requests to the server with some certain interval, as the result of these requests modal panel will display the next image in the row. + </para> + +<para> + Now let&apos;s have a look at the details of the slideshow implementation. +</para> + + <para> + The <code>startSlideshow()</code> method of <code>SlideshowManager.java</code> is invoked when no photo is selected in the current image list. The method iterates over all photos of a particular album starting from the first one in the list. Look at the <code>SlideshowManager.java</code> listing below: + </para> + +<programlisting role="JAVA"><![CDATA[... + ... +public void startSlideshow(){ + active = true; + this.slideshowIndex = 0; + if(model.getImages() == null || model.getImages().size() < 1){ + stopSlideshow(); + Events.instance().raiseEvent(Constants.ADD_ERROR_EVENT, "No images for slideshow!"); + return; + } + this.selectedImage = model.getImages().get(this.slideshowIndex); + this.selectedImage.getAlbum().visitImage(selectedImage, true); +} +...]]></programlisting> + <para> + The second variation of the <code>startSlideshow()</code> method is activated when a link to slide-show is clicked from a particular photo preview. This method iterates over the rest of photos starting from the current selected one: + + </para> + <programlisting role="JAVA"><![CDATA[... + public void startSlideshow(Image selectedImage){ + active = true; + if(model.getImages() == null || model.getImages().size() < 1){ + stopSlideshow(); + Events.instance().raiseEvent(Constants.ADD_ERROR_EVENT, "No images for slideshow!"); + return; + } + this.slideshowIndex = model.getImages().indexOf(selectedImage); + this.selectedImage = selectedImage; + this.selectedImage.getAlbum().visitImage(selectedImage, true); +} +...]]></programlisting> + + <para> + Both variants of <code>startSlideshow()</code> method set the <code>active</code> property to &quot;true&quot; as a result the poller is activated and modal panel becomes visible. + + </para> + <para> + The slideshow modal panel is kept in the <code>web/src/main/webapp/includes/image/slideshow.xhtml</code> file and referred from the corresponding pages with the help of &lt;ui:include&gt; Facelets tag: + </para> + <programlisting role="XML"><![CDATA[... +<ui:include src="/includes/image/slideshow.xhtml"/> +...]]></programlisting> + <para> + Have a look at <code>web/src/main/webapp/includes/image/slideshow.xhtml</code> file: + </para> + <programlisting role="XML"><![CDATA[... +<ui:composition xmlns="http://www.w3.org/1999/xhtml"...> + + <rich:modalPanel showWhenRendered="#{slideshow.active}" + + domElementAttachment="parent" + + id="slideShowModalPanel" + + width="650" + + onshow="showPictureEffect();" + + height="650"> + + <f:facet name="controls"> + + <h:panelGroup> + + <h:graphicImage value="/img/modal/close.png" style="cursor:pointer" id="hidelink"> + + <a4j:support event="onclick" actionListener="#{slideshow.stopSlideshow}" reRender="slideShowForm, mainArea, tree" /> + + </h:graphicImage> + + </h:panelGroup> + + </f:facet> + + ... + + </rich:modalPanel> + +</ui:composition> + +...]]></programlisting> + <para> + + This is the source code of <code>includes/misc/slideShowPooler.xhtml</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"> + <a4j:form id="slideShowForm"> + <a4j:poll reRender="slideshowImage" + actionListener="#{slideshow.showNextImage()}" + interval="#{slideshow.interval}" + enabled="#{slideshow.active}" + onsubmit="hidePictureEffect()" + oncomplete="showPictureEffect();"/> + </a4j:form> +</ui:composition> +...]]></programlisting> + + <para> + The slideshow poller sends the request for the next image (<code>showNextImage()</code> method) each four seconds. + The interval is defined in the interval property of the <code>SlideshowManager.java</code> and refers to a <code>INITIAL.DELAY</code> constant (<code>constants.java</code>). + </para> + <para> + The described above example implements a modal panel with photos that rotate them in the order they are stored in an album. + </para> + <figure> + <title>Image size control</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/slide_show.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + To stop the slide-show user clicks <emphasis role="bold">Close window</emphasis> button on the slide-show panel and <code>stopSlideshow()</code> method is invoked. + </para> +<programlisting role="XML"><![CDATA[... +@Observer("stopSlideshow") + public void stopSlideshow(){ + active = false; + this.selectedImage = null; + this.slideshowIndex = 0; + } + ...]]></programlisting> + + <para> + The <code>active</code> field is set to &quot;false&quot; again, consequently the poller becomes inactive and the modal panel becomes invisible too. + </para> + </section> + <para> + Visit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter: + </para> + + <itemizedlist> + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... page for the <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?... for the <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/mediaOutput... for the <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... for the <emphasis role="bold"><property>&lt;a4j:suport&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandLink... for the <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=... for the <emphasis role="bold"><property>&lt;a4j:form&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/poll.jsf?c=... for the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> component. + </para> + </listitem> + </itemizedlist> + +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/albumView.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/button.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/button.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/button.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,184 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="Button"> + <title>How the button is created and how it acts + </title> + <para> + + Due to specific design of the buttons in the Photo Album application, it&apos;s necessary to clarify some design and development points about the button. The button is visually represented by Facelets template stored in the <property>button.xhtml</property> file. + + </para> + <para>Please have a look at the content of the file: + </para> + <programlisting role="XML"><![CDATA[... +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:s="http://jboss.com/products/seam/taglib" + xmlns:c="http://java.sun.com/jstl/core" + 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"> + <a4j:loadScript src="/scripts/buttons.js" /> + <richx:actionMapper> + <a4j:outputPanel layout="block" style="#{style}" styleClass="photoalbumButton #{styleClass}" lang="#{lang}" dir="#{dir}" title="#{title}" + rendered="#{empty rendered or rendered}" + onmousedown="RF_RW_DEMO.toPressed(this)" onmouseup="RF_RW_DEMO.toReleased(this)" onmouseout="RF_RW_DEMO.toReleased(this)"> + <h:graphicImage value="/img/shell/button.png" alt="" /> + <h:graphicImage value="/img/shell/button_press.png" style="display: none;" alt="" /> + <div>#{value}</div> + <a4j:commandButton accesskey="#{accesskey}" ajaxSingle="#{ajaxSingle}" alt="#{alt}" type="image" image="/img/shell/spacer.gif" + actionListener="#{mappedActionListener}" action="#{mappedAction}" bypassUpdates="#{bypassUpdates}" data="#{data}" disabled="#{disabled}" + eventsQueue="#{eventsQueue}" focus="#{focus}" ignoreDupResponses="#{ignoreDupResponses}" immediate="#{immediate}" limitToList="#{limitToList}" + onbeforedomupdate="#{onbeforedomupdate}" timeout="#{timeout}" tabindex="#{tabindex}" status="#{status}" similarityGroupingId="#{similarityGroupingId}" + reRender="#{reRender}" requestDelay="#{requestDelay}" process="#{process}" oncomplete="#{oncomplete}" + onblur="#{onblur}" onclick="#{onclick}" ondblclick="#{ondblclick}" onfocus="#{onfocus}" onkeydown="#{onkeydown}" onkeypress="#{onkeypress}" onkeyup="#{onkeyup}" + onmousedown="#{onmousedown}" onmousemove="#{onmousemove}" onmouseout="#{onmouseout}" onmouseover="#{onmouseover}" onmouseup="#{onmouseup}" /> + </a4j:outputPanel> + </richx:actionMapper> +</ui:composition> + +...]]></programlisting> + <para> + The <emphasis role="bold"> <property>&lt;richx:actionMapper&gt;</property></emphasis> + tag is covered in more detail further in the text. In brief, it&apos;s a special tag developed deliberately to pass to the button a method expression of the action which must be performed when the button is clicked. + + </para> + <para> + To make sure the button works correctly we include the required JavaScript code that is located in the button.js file using <code> &lt;a4j:loadScript src="/scripts/buttons.js" /&gt; </code> component. + </para> + <para> + The button consists of several parts: + </para> + <itemizedlist> + <listitem><para>2 images (pressed and not pressed)</para></listitem> + <listitem><para>&lt;div&gt; element that displays the button&apos;s text </para></listitem> + <listitem><para><emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> that sends Ajax request to the server</para></listitem> + + </itemizedlist> + <para> + These elements are wrapped by <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> to adjust the look-and-feel. + </para> + <para> + In the application the button is used for example like this: + </para> + <programlisting role="XML"><![CDATA[... +<richx:commandButton actionListener="#{authenticator.register(user)}" reRender="mainform, headerPanel" value="#{messages['user.register']}" /> +...]]></programlisting> + <para> + We can pass to the <emphasis role="bold"><property>&lt;richx:commandButton&gt;</property></emphasis> all required attributes, in the example only actionListener, reRender and value are passed. + </para> + <para> + <emphasis role="bold"><property>&lt;richx:commandButton&gt;</property></emphasis> + is a custom tag that is declared in the photoalbum-taglib.xml tag library: + </para> + <programlisting role="XML"><![CDATA[... +<?xml version="1.0"?> +<!DOCTYPE facelet-taglib PUBLIC + "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" + "facelet-taglib_1_0.dtd"> +<facelet-taglib> + <namespace>http://richfaces.org/richx</namespace> + <tag> + <tag-name>commandButton</tag-name> + <source>templates/button.xhtml</source> + </tag> + <tag> + <tag-name>actionMapper</tag-name> + <handler-class>org.richfaces.photoalbum.util.ActionMapperTagHandler</handler-class> + </tag> +</facelet-taglib> +...]]></programlisting> + <para> + In order to use the <emphasis role="bold"><property>&lt;richx:commandButton&gt;</property></emphasis> on the page the namespace of the taglib must be declared: + </para> + <programlisting role="XML"><![CDATA[... +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + ... +xmlns:richx="http://richfaces.org/richx"> +...]]></programlisting> + <para> + A more complex part of the button implementation, as we said earlier, is <emphasis role="bold"><property>&lt;richx:actionMapper&gt;</property></emphasis> which is also described in tablib. But it is not just a simple tag-template since it has Facelets handler-class which specifies how it is handled when declared on the page. It is created because Facelets templates do not allow to make the MethodExpression a Facelets-template parameter. Please find below the code of the class(some irrelevant details are omitted): + </para> + <programlisting role="JAVA"><![CDATA[... + public class ActionMapperTagHandler extends TagHandler { + + private static final Class<?>[] ACTION_PARAM_TYPES = new Class[0]; + + private static final Class<?>[] ACTION_LISTENER_PARAM_TYPES = new Class[] {ActionEvent.class}; + + private static final String ACTION = "action"; + + private static final String ACTION_LISTENER = "actionListener"; + + private static final String MAPPED_ACTION = "mappedAction"; + + private static final String MAPPED_ACTION_LISTENER = "mappedActionListener"; + + public ActionMapperTagHandler(TagConfig config) { + super(config); + } + + private MethodExpression remap(FaceletContext faceletContext, String varName, + Class<?> expectedReturnType, Class<?>[] expectedParamTypes) { + + MethodExpression result = null; + + VariableMapper mapper = faceletContext.getVariableMapper(); + ValueExpression valueExpression = mapper.resolveVariable(varName); + if (valueExpression != null) { + ExpressionFactory ef = faceletContext.getExpressionFactory(); + ELContext elContext = faceletContext.getFacesContext().getELContext(); + + result = ef.createMethodExpression(elContext, valueExpression.getExpressionString(), + expectedReturnType, expectedParamTypes); + } + + return result; + } + + public void apply(FaceletContext ctx, UIComponent parent) + throws IOException, FacesException, FaceletException, ELException { + + MethodExpression actionExpression = remap(ctx, ACTION, String.class, ACTION_PARAM_TYPES); + MethodExpression actionListenerExpression = remap(ctx, ACTION_LISTENER, null, ACTION_LISTENER_PARAM_TYPES); + + if (actionExpression != null || actionListenerExpression != null) { + VariableMapper initialVarMapper = ctx.getVariableMapper(); + try { + VariableMapperWrapper varMapper = new VariableMapperWrapper(initialVarMapper); + + if (actionExpression == null) { + actionExpression = NOOP_ACTION_EXPRESSION; + } + + varMapper.setVariable(MAPPED_ACTION, + ctx.getExpressionFactory().createValueExpression(actionExpression, + MethodExpression.class)); + + if (actionListenerExpression == null) { + actionListenerExpression = NOOP_ACTION_LISTENER_EXPRESSION; + } + + varMapper.setVariable(MAPPED_ACTION_LISTENER, + ctx.getExpressionFactory().createValueExpression(actionListenerExpression, + MethodExpression.class)); + + ctx.setVariableMapper(varMapper); + + nextHandler.apply(ctx, parent); + + } finally { + ctx.setVariableMapper(initialVarMapper); + } + } else { + nextHandler.apply(ctx, parent); + } + } +} + +...]]></programlisting> + <para> + You can find more infromation about Facelets, custom tags, taglibs, Facelets tag handlers and Facelets templates here. + </para> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/button.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,128 @@ +<section id="contextMenu"> + <title>Context Menus </title> + <para>Context menus are called when you right-click on a UI element. RichFaces library provides a special component <emphasis role="bold"><property>&lt;rich:contextMenu &gt;</property></emphasis> to implement this type of functionality. </para> + + + <para>Context menu is made for the following UI controls:</para> + + <itemizedlist> + <listitem> + <para><property>Album</property> menu item in navigation menu/Album thumbnail</para> +<figure> + <title>Context Menu for </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/cm_album.png"/> + </imageobject> + </mediaobject> +</figure> + + + </listitem> + <listitem><para>Image thumbnail</para> + + + <figure> + <title>Image thumbnail context menu</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/cm_image.png"/> + </imageobject> + </mediaobject> + </figure> + + </listitem> + + <listitem><para><property>Shelf</property> menu item in navigation menu</para> + <figure> + <title>Context Menu for Shelf menu item </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/cm_shelf.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + </itemizedlist> + <para> + Let's have a look at the context menu for single image is constructed. + </para> + + <programlisting role="XML"><![CDATA[... + <rich:contextMenu disableDefaultMenu="false" style="text-align:left;" rendered="#{controller.isUserImage(image)}" + event="oncontextmenu" attached="true" submitMode="ajax" attachTo="#{mediaOutput}"> + <rich:menuItem value="#{messages['image.delete']}" limitToList="true" + actionListener="#{confirmationPopupHelper.initImagePopup('deleteImage',messages['image.delete.confirm'],image)}" + oncomplete="#{rich:component('confirmation')}.show()" + reRender="confirmation"> + </rich:menuItem> + <rich:menuItem value="#{messages['image.edit']}" limitToList="true" + actionListener="#{controller.startEditImage(image)}" + reRender="mainArea"> + </rich:menuItem> + <rich:menuItem value="#{messages['image_show']}" limitToList="true" + actionListener="#{controller.showImage(image)}" + reRender="mainArea"> + </rich:menuItem> + </rich:contextMenu> + ...]]></programlisting> + <para> + That is a listing from <code>\includes\contextMenu\CMForImage.xhtml</code>. + This code is included into the very bottom of imageList.xhtml file like this: + </para> + + <programlisting role="XML"><![CDATA[... + <ui:include src="/includes/contextMenu/CMForImage.xhtml" > + <ui:param name="image" value="#{image}" /> + <ui:param name="mediaOutput" value="#{rich:clientId('img')}"/> + </ui:include> + ...]]></programlisting> + + <para>The context menu code is included with 2 parameters: <code>&quot;image&quot;</code> and <code>&quot;mediaOutput&quot;</code>. The first ( <code>&quot;image&quot;</code>) is the name of the current image. The <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> iterates over a collection of images(see the next listing), the name of the current image is stored in the <code>&quot;image&quot;</code> variable. <code>&quot;mediaOutput&quot;</code> parameter is set with the help of <code>rich:clientId('id')</code> that returns client id by short id or null if the component with the id specified hasn't been found. </para> + + <para>This is the block of code that displays each image: </para> + + <programlisting role="XML"><![CDATA[... +<a4j:repeat id="imageList" value="#{model.images}" var="image" rows="20"> + <h:panelGroup layout="block" styleClass="#{imageSizeHelper.currentDimension.cssClass}"> + <h:graphicImage styleClass="pr_photo_bg" style="#{imageSizeHelper.currentDimension.imageBgStyle}" value="#{imageSizeHelper.currentDimension.imageBg}" /> + <h:panelGrid cellpadding="0"> + <h:panelGroup> + <a4j:commandLink + actionListener="#{controller.showImage(image)}" + reRender="mainArea, treePanel"> + <a4j:mediaOutput id="img" element="img" + createContent="#{imageLoader.paintImage}" + style="border : 1px solid #FFFFFF;" + value="#{fileManager.transformPath(image.fullPath, imageSizeHelper.currentDimension.filePostfix)}"> + <f:param value="#{imageSizeHelper.currentDimension.x}" name="x" /> + <rich:dragSupport rendered="#{controller.isUserImage(image)}" reRender="mainArea, treePanel" id="dragSource" dragIndicator="dragIndicator" + dragType="image" dragValue="#{image}"> + <rich:dndParam id="dragParam" name="label" value="#{image.name}" /> + </rich:dragSupport> + </a4j:mediaOutput> + </a4j:commandLink> + <br/> + </h:panelGroup> + </h:panelGrid> + <h:panelGroup layout="block" styleClass="photo_name">#{image.name}</h:panelGroup> + <h:panelGroup layout="block" styleClass="photo_data"> + <h:outputText value="#{image.created}"> + <f:convertDateTime /> + </h:outputText> + </h:panelGroup> + </h:panelGroup> + <ui:include src="/includes/contextMenu/CMForImage.xhtml" > + <ui:param name="image" value="#{image}" /> + <ui:param name="mediaOutput" value="#{rich:clientId('img')}"/> + </ui:include> + </a4j:repeat> + + ...]]></programlisting> + + <para>The key attribute of <emphasis role="bold"><property>&lt;contextMenu&gt;</property></emphasis> is <emphasis><property>&quot;attachTo&quot;</property></emphasis> that specifies for which control the context menu is displayed. As you can see this attribute has <code>#{mediaOutput}</code> as its value(<code> attachTo="#{mediaOutput}"</code> so this way the id of the current image is passed to <emphasis role="bold"><property>&lt;rich:contexMenu&gt;</property></emphasis> and this is how it knows what photo is affected by user actions. </para> + + +</section> + Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/errorsReports.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/errorsReports.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/errorsReports.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,74 @@ +<section id="errorsReports"> + <title>Errors Reports</title> + <para> + The Photo Album application has a global mechanism for errors checking. + You become informed about the error each time it occurs. + It is possible because + the main page of the application + <code>web/src/main/webapp/index.xhtml + </code> + includes the + <code>web/src/main/webapp/includes/misc/errorPanel.xhtml</code>: + </para> + <programlisting role="XML"><![CDATA[... +<a4j:outputPanel id="errors" ajaxRendered="true"> + <h:panelGroup rendered="#{errorHandlerBean.errorExist}"> + <rich:modalPanel id="errorPanel" showWhenRendered="true" minWidth="300" minHeight="200" autosized="true"> + ... + </rich:modalPanel> + </h:panelGroup> +</a4j:outputPanel> +...]]></programlisting> + <para> + Here is the listing of the <code>errorHandlerBean</code> class: + </para> +<programlisting role="JAVA"><![CDATA[package org.richfaces.photoalbum.ui; +import java.util.ArrayList; +import java.util.List; +import org.jboss.seam.ScopeType; +import org.jboss.seam.annotations.AutoCreate; +import org.jboss.seam.annotations.Name; +import org.jboss.seam.annotations.Observer; +import org.jboss.seam.annotations.Scope; +import org.richfaces.photoalbum.service.Constants; + +@Name("errorHandlerBean") +(a)Scope(ScopeType.EVENT) +@AutoCreate +public class ErrorHandlerBean { + private List<String> errors = new ArrayList<String>(); + + public List<String> getErrors() { + return errors; + } + + public boolean isErrorExist(){ + return errors.size() > 0 ; + } + + @Observer(Constants.ADD_ERROR_EVENT) + public void addToErrors(String e){ + errors.add(e); + } +}]]></programlisting> + <para> + The error panel contains the + <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> + component that is rendered on every Ajax request (<code>ajaxRendered=&quot;true&quot;</code>). + If an error is occurred the <code>isErrorExist()</code> method of <code>errorHandlerBean</code> class + returns &quot;true&quot;, so the + <emphasis role="bold"><property>&lt;h:panelGroup&gt;</property></emphasis> component + is rendered. + In order to show nested + <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> component + with the collected errors + the <emphasis><property>&quot;showWhenRendered&quot;</property></emphasis> attribute + should be set to &quot;true&quot;. + </para> + <para> + The <code>addToErrors()</code> method is annotated with <code>@Observer</code> annotation, + thus it observes all events with <code>ADD_ERROR_EVENT</code> constant and adds errors to the + <code>errors</code> List. + </para> +</section> + Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/errorsReports.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/hiw.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/hiw.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/hiw.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="UTF-8"?> + + + + <section> + <title>Image Size control</title> + + + <section> + <title>Links in Photo Album Demo. Using the &lt;a4j:commandLink&gt;</title> + <para> + The main difference between <emphasis role="bold"><property>&lt;h:commandLink&gt;</property></emphasis> component is a) Ajax request that is generated on a click and b) dynamic rerendering of the page after a response comes back. + It's not necessary to plug any support into the component, as Ajax support is already built-in. + </para> + <para> + The <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> component is used widely in the application. + In the following example clicking on the &lt;Edit&gt; link will rerender the main ares (watching area) of the application and open an album edit form. + Each album has its owner and only owner can edit the album contents. + The link &lt;Edit&gt; will be rendered only if the current logged-in user is the owner of this album: the <emphasis><property>&quot;rendered&quot;</property></emphasis> attribute refers to the owner id and compares it with the current user id: + </para> + <programlisting role="XML"><![CDATA[... +<a4j:commandLink rendered="#{model.selectedAlbum.owner.id == user.id}" + value="#{messages['album.edit']} " + actionListener="#{controller.startEditAlbum(model.selectedAlbum)}" + reRender="mainArea"> +</a4j:commandLink> +...]]></programlisting> + <para> + The <emphasis><property>&lt;value&gt;</property></emphasis> attribute (text that will appear on the link) is picked up from the <code>messages_en.properties</code> file. + Such property files are very useful e.g. for multi language applications. + Each property is saved in the format &quot;name—value&quot;. + Let's have a look at this file in the JBDS: + </para> + <figure> + <title>Image size control</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/messages_en_property.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + + + + </section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/hiw.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/imageView.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/imageView.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/imageView.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,165 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="imageView"> + <title>Image View</title> + <para> + Image View in the Photo Album application is a page where only one image is displayed. In this view you can also browse the current album with the image scroller as well as to switch to slideshow mode. + If you are a registered user you can leave comments under the current image. + </para> + + <figure> + <title>Some title</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/imageView.png"/> + </imageobject> + </mediaobject> + </figure> + <section id="customImagesScroller"> + <title>Custom images scroller widget</title> + + <para> + The Images Scroller implementation in the Photo Album application is basically <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> with the value attribute bound to <code>#{model.selectedAlbum.images}</code>, which is a collection of images of the selected album and the <emphasis role="bold"><property>&lt;rich:dataScroller&gt;</property></emphasis> component tied to the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> . + </para> + + <para> + The source code you can find in the includes/images/imageScroller.xhtml file. + Now let's go deeper into the details. The main component here is <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis>: + + </para> + + <programlisting role="XML"><![CDATA[... +<a4j:repeat value="#{model.selectedAlbum.images}" rows="5" + var="img" id="repeat" rowKeyVar="rk"> + + <a4j:outputPanel layout="block" + styleClass="preview_box_photo_nav #{model.selectedImage == img ? 'preview_box_photo_current' : 'preview_box_photo_default'}"> + <h:panelGroup layout="block" styleClass="preview_box_photo_80"> + <h:graphicImage styleClass="pr_photo_bg" + value="/img/shell/frame_photo_80.png" /> + <h:panelGrid cellpadding="0" cellspacing="2"> + <h:panelGroup layout="block"> + <a4j:mediaOutput element="img" + createContent="#{imageLoader.paintImage}" + value="#{fileManager.transformPath(img.fullPath, '_small80')}"> + </a4j:mediaOutput> + <br /> + </h:panelGroup> + </h:panelGrid> + <h:panelGroup layout="block" styleClass="photo_name"> + <h:outputText value="#{img.name}" /> + </h:panelGroup> + <h:panelGroup layout="block" styleClass="photo_data"> + <h:outputText value="#{rk + 1}" /> + </h:panelGroup> + </h:panelGroup> + + <a4j:support event="onclick" rendered="#{model.selectedImage != img}" + reRender="mainArea,treePanel, imagesTable" action="#{controller.showImage(img)}" /> + </a4j:outputPanel> +</a4j:repeat> +...]]></programlisting> + + <para> + Each element of the + + <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> has a corresponding <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> with the <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> as a nested element. <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> renders the thumbnail of the image. As the rows attribute is set to &quot;5&quot; (<code>rows="5"</code>), only 5 images are displayed on the page at a time. + + </para> + + <para> + As you&apos;ve noticed, the currently selected image in the images scroller has different style, namely: a red frame around thumbnail, which is implemented with this code: + </para> + <programlisting role="XML"><![CDATA[... +<a4j:outputPanel layout="block" +styleClass="preview_box_photo_nav #{model.selectedImage == img ? 'preview_box_photo_current' : 'preview_box_photo_default'}"> +...]]></programlisting> + <para> + As you can see from the code snippet, + identification of whether the currently selected image is the same image displayed by the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> is performed in the styleClass, if it returns &quot;true&quot;, different style is applied. + </para> + <para> + Each <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> has a corresponding <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> configured like this: + </para> + <programlisting role="XML"><![CDATA[... + <a4j:support event="onclick" + rendered="#{model.selectedImage != img}" + reRender="mainArea,treePanel, imagesTable" + action="#{controller.showImage(img)}" /> + +...]]></programlisting> + + <para> + On every click <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> calls <code> #{controller.showImage(img)}</code> method that sets the current image, thumbnail of which has just been clicked on. For more details please see Controller.java class. + </para> + + <para> + To implement thumbnails scrolling effect the <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> is attached to the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis>: + </para> + + <programlisting role="XML"><![CDATA[... +<rich:datascroller page="#{controller.getPage()}" + styleClass="image-scroller" lastPageMode="full" for="repeat" reRender="imagesTable" + boundaryControls="hide" stepControls="hide"> + <f:facet name="pages"> + <h:outputText /> + </f:facet> + <f:facet name="fastforward"> + <h:graphicImage styleClass="image-scroller-right-arrow" + value="img/shell/arr_right.png" /> + </f:facet> + <f:facet name="fastforward_disabled"> + <h:graphicImage styleClass="image-scroller-right-arrow" + value="img/shell/arr_right_dis.png" /> + </f:facet> + <f:facet name="fastrewind"> + <h:graphicImage styleClass="image-scroller-left-arrow" + value="img/shell/arr_left.png" /> + </f:facet> + <f:facet name="fastrewind_disabled"> + <h:graphicImage styleClass="image-scroller-left-arrow" + value="img/shell/arr_left_dis.png" /> + </f:facet> +</rich:datascroller> + +...]]></programlisting> + <para> + The page attribute identifies which page should be displayed right now. For instance, if you have only 20 images and the current image has the 12<superscript>th</superscript> index in the collection, then the 3<superscript>rd</superscript> page will be displayed: + + </para> + <programlisting role="XML"><![CDATA[... +public Integer getPage(){ + final Integer index = model.getSelectedAlbum().getIndex(model.getSelectedImage()); + return index / 5 + 1; + } + +...]]></programlisting> + + <para> + The <code>lastPageMode=&quot;full&quot; </code> attribute ensures that 5 thumbnails are always shown on the page. If this attribute hadn't been configured like this, in case the 19th thumbnail out of 20 had been selected then only 2 last thumbnails would have been displayed. + </para> + + <para> + As you can see, <emphasis role="bold"><property>&lt;rich:dataScroller&gt;</property></emphasis> has a slightly different look-and-feel, the trick is in the redefinition of <property>fastforward</property>, <property>fastforward_disabled</property>, <property>fastrewind</property> and <property>fastrewind_disabled</property> facets on which places we display our images. We didn't redefine other facets because they are not rendered to the page which is achieved with <code>boundaryControls=&quot;hide&quot;</code> and <code>stepControls=&quot;hide</code> attributes of <emphasis role="bold"><property>&lt;rich:dataSroller&gt;</property></emphasis>. + </para> + + <para> + Visit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter: + </para> + + <itemizedlist> + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... page for the <emphasis role="bold"><property>&lt;rich:dataScroller&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?... for the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component. + </para> + </listitem> + + </itemizedlist> + + </section> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/imageView.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/navigationPanel.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/navigationPanel.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/navigationPanel.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,403 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="navigationTree" xreflabel="navigationTree"> + <?dbhtml filename="navigationPanel.html"?> + <title>Navigation tree</title> + <para> + The <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> component takes one of the main places + in the <property>Photo Album</property> and is tightly bound with the application logic. + It helps to represent + and implement inherently the &quot;Shelves - Albums&quot; hierarchy. + Shelf is the highest possible level in the tree hierarchy, that + is used to group thematic albums and may contain as many albums as needed. + </para> + <para> + There are two types of navigation tree in the application: for a registered user and for a guest. + The difference between them is that the first one has a context menu and drag-and-drop possibility. + </para> + <section> + <title>Navigation tree for a guest</title> + + <!--para> + The <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> component is designed for + hierarchical data presentation and is used to build a tree structure. + The component also supports built-in drag-and-drop functionality. + </para--> + <para> + Navigation tree for a guest is represented as a simple + <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> component. + </para> + <para> + There are several ways to implement the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> on a page. + In the current application the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> is designed + using a model tag <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis>. + </para> + <para> + The <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component + has a <emphasis><property>&quot;nodes&quot;</property></emphasis> attribute that accepts + a collection of elements, so <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> + iterates over the collection and renders a hierarchical tree structure on a page. + </para> + <para> + According to the &quot;Shelves - Albums&quot; hierarchy we need two nested + <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> components. + The first one iterates over the Shelves collection + that is returned from the <code>getPredefinedShelves()</code> method of <code>ShelfManager.java</code> class: + </para> + <programlisting role="JAVA"><![CDATA[... +public List<Shelf> getPredefinedShelves() { + if (shelves == null) { + shelves = shelfAction.getPredefinedShelves(); + } + return shelves; + } +} +...]]></programlisting> + <para> + The second <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component + iterates over the Albums collection of the current Shelf which is available via + <emphasis><property>&quot;var&quot;</property></emphasis> attribute. + The <emphasis><property>&quot;var&quot;</property></emphasis> attribute + is used to get access to the data object of the current collection element Shelf, + so it is possible to output any necessary data. Let's see the <code>src/main/webapp/includes/index/tree.xhtml</code> file: + </para> + <!-- + The <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component accepts + a collection of elements, which are allowed to include lists, arrays, maps, XML NodeList or NamedNodeMap, and iterate over it. + The <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component repeats a hierarchical tree structure on a <code>xhtml</code> or <code>jsp</code> page in a component tree and can be nested without any limitations. + The code snippet below schematically shows the idea of how a tree can be built on a page with the help of adaptors: + + + + <programlisting role="XML"><![CDATA[<rich:tree> + <rich:treeNodesAdaptor> + <rich:treeNode /> + + <rich:treeNodesAdaptor> + <rich:treeNode /> + + <rich:treeNodesAdaptor> + <rich:treeNode /> + ... + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> +</rich:tree>]]></programlisting> + + <para> + When using <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component + there is no need to specify + the <emphasis><property>&quot;value&quot;</property></emphasis> and + <emphasis><property>&quot;var&quot;</property></emphasis> attributes + for the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis>. + The values for nodes to render are passed directly into the corresponding adaptor + and the component performs all the necessary iterative work + (Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAd... page</ulink> on the RichFacesLiveDemo for more details). + </para> + + <para> + Implementation of the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> in the application + is very similar to the model shown above. + The top <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> + in the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> in the Photo Album + application is responsible for shelves rendering. + Its <emphasis><property>&quot;nodes&quot;</property></emphasis> attribute refers + to <emphasis><property>getShelves()</property></emphasis> method of the <code>ShelfManager</code> class + and gets the collection of shelves associated with the current user including all shared shelves in the system. + Take a look at this method: + </para--> + + <!-- para> + When the <emphasis><property>&quot;nodes&quot;</property></emphasis> attribute of the <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis>, which is responsible for shelves rendering, receives the collection of shelves, + the iteration process switches to the nested <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis>, which is responsible for albums. + The &quot;albums&quot; <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> <emphasis><property>&quot;nodes&quot;</property></emphasis> attribute refers in its turn to the <code>albums</code> field of the <code>Shelf</code> class + and takes a collection of all albums associated with the current shelf. + The &quot;albums&quot; <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> renders all albums that belong to the current iterating shelf and then switches back to the &quot;shelf&quot; <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> to render and iterate the next shelf in the shelves collection received earlier. + Here is how it looks in the <code>webapp/includes/index/tree.xhtml</code> file: + </para--> + + <programlisting role="XML"><![CDATA[... +<rich:tree adviseNodeOpened="#{treeManager.adviseNodeSelected}" + adviseNodeSelected="#{treeManager.adviseNodeSelected}" + ajaxSubmitSelection="false" id="PreDefinedTree" + treeNodeVar="treeNode" switchType="client" + iconCollapsed="/img/shell/tree_icon_plus.png" + iconExpanded="/img/shell/tree_icon_minus.png" + showConnectingLines="false"> + <rich:treeNodesAdaptor nodes="#{shelfManager.getPredefinedShelves()}" var="shelf"> + <rich:treeNode style="cursor:pointer" reRender="treePanel,mainArea" selectedClass="tree-selected-node"> + <f:facet name="icon"> + <h:graphicImage style="border: none" value="/img/shell/tree_icon_shelf.png"> + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" /> + </h:graphicImage> + </f:facet> + <a4j:outputPanel > + <h:outputText style="cursor:pointer" value="#{shelf.name}" /> + <h:outputText value=" :: " /> + <strong>#{shelf.unvisitedImages.size()}</strong> new + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" /> + </a4j:outputPanel> + </rich:treeNode> + + <rich:treeNodesAdaptor var="album" nodes="#{shelf.albums}"> + <rich:treeNode style="cursor:pointer" reRender="treePanel,mainArea" selectedClass="tree-selected-node" icon="img/shell/tree_icon_album.png"> + <f:facet name="iconLeaf"> + <h:graphicImage style="border: none" value="img/shell/tree_icon_album.png"> + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" /> + </h:graphicImage> + </f:facet> + <a4j:outputPanel> + <h:outputText style="cursor:pointer" value="#{album.name}" /> + <h:outputText value=" :: " /> + <strong>#{album.unvisitedImages.size()}</strong> new + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" /> + </a4j:outputPanel> + </rich:treeNode> + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> +</rich:tree> +...]]></programlisting> + + <para> + The image below shows how the navigation tree for a guest is rendered on the page. + </para> + + <figure> + <title>Shelves and albums nodes rendered with the help of the &lt;rich:treeNodesAdaptor&gt;</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree.png"/> + </imageobject> + </mediaobject> + </figure> + +</section> + + <section> + <title>Navigation tree for a registered user</title> + <para> + As it was mentioned before a navigation tree for a registered user has + two main features: drag-and-drop and context menu. Context menu is described + in the <link linkend="contextMenu">&quot;Context menu&quot;</link> chapter. + </para> + <para> + Drag-and-drop feature supported in the Photo Album application is not so complicated + as it may seem from the first view. + In this application we can mark out two types of drag-and-drop: + one type takes place only inside the tree (between tree nodes) + and another one - between the watching area and the tree. + The difference is not considerable enough to describe two types separately, + but also not at all insignificant to be omitted here. + </para> + + <para> + The tree related components + (<emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis>) + have their own attributes that provide drag-and-drop functionality. + These attributes can be divided into two groups: + those which provide drag (dragValue, dragListener, dragIndicator, dragType attributes) + and those which provide drop operations (dropValue, dropListener, acceptedTypes, typeMapping). + </para> + <note> + <title> + Note: + </title> + <para> + Due to &quot;Shelves - Albums - Photos&quot; hierarchy we can say that photos could be moved between albums, + albums could be moved between shelves. + To avoid a mishmash, it's not allowed to place photos directly in shelves as well as nesting shelves + inside shelves or albums inside albums. + </para> + </note> + <para> + Let&apos;s explore how drag-and-drop works for albums. + </para> + <para> + All albums, that are represented as TreeNodes, must be marked somehow for dragging. + For this purpose we use previously mentioned + <emphasis><property>&quot;dragValue&quot;</property></emphasis>, + <emphasis><property>&quot;dragType&quot;</property></emphasis> + attributes. Let's have a look at the <code>src/main/webapp/includes/index/tree.xhtml</code> file: + </para> + <programlisting role="XML"><![CDATA[<rich:treeNodesAdaptor var="album" nodes="#{shelf.albums}"> + <rich:treeNode style="cursor:pointer" + reRender="mainArea, treePanel" + dragType="album" + dragValue="#{album}" + dropValue="#{album}" + acceptedTypes="image" + selectedClass="tree-selected-node" + icon="img/shell/tree_icon_album.png"> + ... + <rich:dndParam name="label" type="drag" value="#{album.name}" /> + ... + </rich:treeNode> +</rich:treeNodesAdaptor> +]]></programlisting> + <para> + To provide drop functionality for the marked albums, we should mark Shelves as drop zones in the application code too. + For this purpose we add the <emphasis><property>&quot;dropValue&quot;</property></emphasis> and + <emphasis><property>&quot;acceptedTypes&quot;</property></emphasis> attributes to the &quot;Shelf&quot; node in the same <code>src/main/webapp/includes/index/tree.xhtml</code> file: + </para> + <programlisting role="XML"><![CDATA[<rich:treeNodesAdaptor nodes="#{shelfManager.getUserShelves()}" var="shelf"> + <rich:treeNode style="cursor:pointer" acceptedTypes="album" dropValue="#{shelf}" reRender="mainArea, treePanel" selectedClass="tree-selected-node"> + ... + </rich:treeNode> +</rich:treeNodeAdaptor>]]></programlisting> + <para> + The <emphasis><property>&quot;acceptedTypes&quot;</property></emphasis> attribute tells the &quot;Shelf&quot; node + what types of dragged zones (albums in this case) it can accept. + We have specified &quot;Album&quot; node + <emphasis><property>&quot;dragType&quot;</property></emphasis> as &quot;album&quot;, + so the &quot;Shelf&quot; node can accept it. + </para> + <para> + Finally in order to process drop on the server side we need to specify a listener for the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> in the <emphasis><property>&quot;dropListener&quot;</property></emphasis> + attribute (<code>src/main/webapp/includes/index/tree.xhtml</code> file): + </para> + <programlisting role="XML"><![CDATA[<rich:tree adviseNodeOpened="#{treeManager.adviseNodeSelected}" + adviseNodeSelected="#{treeManager.adviseNodeSelected}" + ajaxSubmitSelection="false" dragIndicator="dragIndicator" + treeNodeVar="treeNode" switchType="client" + iconCollapsed="/img/shell/tree_icon_plus.png" + iconExpanded="/img/shell/tree_icon_minus.png" + dropListener="#{dndManager.processDrop}" + showConnectingLines="false"> + ... +</tree>]]></programlisting> + <para> + The code for the <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> looks like the following: + </para> + <programlisting role="XML"><![CDATA[<rich:dragIndicator id="dragIndicator" />]]></programlisting> + + + <para> + The <code>processDrop()</code> method of <code>DnDManager.java</code> class is shown in the listing below: + </para> + <programlisting role="JAVA"><![CDATA[... +public void processDrop(DropEvent dropEvent) { + Dropzone dropzone = (Dropzone) dropEvent.getComponent(); + Object dragValue = dropEvent.getDragValue(); + Object dropValue = dropzone.getDropValue(); + if(dragValue instanceof Image){ + if(!((Album)dropValue).getOwner().getLogin().equals(user.getLogin())){ + Events.instance().raiseEvent(Constants.ADD_ERROR_EVENT, Constants.DND_PHOTO_ERROR); + return; + } + handleImage((Image)dragValue, (Album)dropValue); + }else if(dragValue instanceof Album){ + if(!((Shelf)dropValue).getOwner().getLogin().equals(user.getLogin())){ + Events.instance().raiseEvent(Constants.ADD_ERROR_EVENT, Constants.DND_ALBUM_ERROR); + return; + } + handleAlbum((Album)dragValue, (Shelf)dropValue); + } +} +...]]></programlisting> + <para> + Here is the whole example of the &quot;Navigation tree for a registered user&quot;: + </para> + <programlisting role="XML"><![CDATA[<h:panelGroup id="tree" rendered="#{identity.hasRole('admin')}" layout="block"> + <a4j:commandLink actionListener="#{controller.selectShelves()}" reRender="mainArea, treePanel"><h2><h:outputText value="My shelves:"/></h2></a4j:commandLink><br/> + <rich:dragIndicator + id="dragIndicator" /> + <rich:tree + adviseNodeOpened="#{treeManager.adviseNodeSelected}" + adviseNodeSelected="#{treeManager.adviseNodeSelected}" + ajaxSubmitSelection="false" dragIndicator="dragIndicator" + treeNodeVar="treeNode" switchType="client" + iconCollapsed="/img/shell/tree_icon_plus.png" + iconExpanded="/img/shell/tree_icon_minus.png" + dropListener="#{dndManager.processDrop}" + showConnectingLines="false"> + + <f:facet name="icon"> + <h:graphicImage style="border: none" value="/img/shell/tree_icon_shelf.png"> + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" /> + </h:graphicImage> + </f:facet> + <ui:include src="/includes/contextMenu/CMForShelf.xhtml" > + <ui:param name="shelf" value="#{shelf}" /> + </ui:include> + <a4j:outputPanel> + <h:outputText style="cursor:pointer" value="#{shelf.name}" /> + <h:outputText value=" :: " /> + <strong>#{shelf.unvisitedImages.size()}</strong> new + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" /> + </a4j:outputPanel> + </rich:treeNode> + + <rich:treeNodesAdaptor var="album" + nodes="#{shelf.albums}"> + <rich:treeNode style="cursor:pointer" reRender="mainArea, treePanel" dragType="album" + dragValue="#{album}" dropValue="#{album}" + acceptedTypes="image" + selectedClass="tree-selected-node" + icon="img/shell/tree_icon_album.png"> + <f:facet name="iconLeaf"> + <h:graphicImage style="border: none" value="img/shell/tree_icon_album.png"> + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" /> + </h:graphicImage> + </f:facet> + <ui:include src="/includes/contextMenu/CMForAlbum.xhtml" > + <ui:param name="album" value="#{album}" /> + </ui:include> + <rich:dndParam name="label" type="drag" value="#{album.name}" /> + <a4j:outputPanel > + <h:outputText style="cursor:pointer" value="#{album.name}" /> + <h:outputText value=" :: " /> + <strong>#{album.unvisitedImages.size()}</strong> new + <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" /> + </a4j:outputPanel> + </rich:treeNode> + + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> + + </rich:tree> + </h:panelGroup>]]></programlisting> + <para> + The image below shows how the described above drag-and-drop features are rendered in the Photo Album. + </para> + <figure> + <title>Dragging the &quot;Flora&quot; album from &quot;Sport&quot; shelf into the &quot;Nature&quot; (left) and the tree after drag-and-drop (right).</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dnd.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Visit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter: + </para> + + <itemizedlist> + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=... for the <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAd... for the <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... for the <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... for the <emphasis role="bold"><property>&lt;rich:dndParam&gt;</property></emphasis> component. + </para> + </listitem> + + </itemizedlist> + + + </section> +</section> + Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/navigationPanel.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/shelfView.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/shelfView.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/shelfView.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="shelfView"> + <title>Shelf View</title> + <para> + Work in progress... + </para> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/shelfView.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/skinnability.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/skinnability.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/skinnability.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="skinnability" xreflabel="skinnability"> +<?dbhtml filename="skinnability.html"?> + <title>Skinnability</title> + <para> + + The Photo Album application employs such feature of RichFaces framework as skinnability. If you have a look at the web.xml you will see that the <code> + org.richfaces.SKIN + </code> + parameter has &quot;photoalbum&quot; value. + </para> + <programlisting role="XML"><![CDATA[... + <context-param> + <param-name>org.richfaces.SKIN</param-name> + <param-value>photoalbum</param-value> + </context-param> +...]]></programlisting> + <para> + This means that the application uses the custom &quot;photoalbum&quot; skin. The skin parameters are stored in the <code>photoalbum.skin.properties</code> file that is located in the + <code>photoalbum\source\web\src\main\resources\META-INF\skins\</code> folder. + </para> + <para> + Each visual RichFaces component has a XCSS file where some CSS selectors are defined with style properties mapped to the skin parameters. Here is a fragment of the XCSS file of <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis>. + </para> + + <programlisting role="XML"><![CDATA[... + <u:selector name=".rich-calendar-header"> + <u:style name="border-bottom-color" skin="panelBorderColor"/> + <u:style name="background-color" skin="additionalBackgroundColor"/> + <u:style name="font-size" skin="generalSizeFont"/> + <u:style name="font-family" skin="generalFamilyFont"/> + </u:selector> + ...]]></programlisting> + <para>This code sets style for upper part of the calendar. Hence, for example, <code>font-family</code> property is mapped to the <code>generalFamilyFont</code> property which in its turn has <code>Arial, Verdana, sans-serif</code> value. </para> + <para>These are all values the <code>.rich-calendar-header</code> has.</para> + <programlisting role="XML"><![CDATA[... +panelBorderColor=#636363 +additionalBackgroundColor=#F2F2F2 +generalSizeFont=11px +generalFamilyFont=Arial, Verdana, sans-serif +...]]></programlisting> + + <para> + You can find more information about the Skinnability feature in <ulink url="&devguide;/#Skinnability">RichFaces Developer Guide</ulink>. + </para> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/skinnability.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="tooltips"> + <title>ToolTips </title> + <para> + When using RichFaces components library you&apos;ve got nealy everything to build UI, making a tooltip is not an exception. RichFaces provides a separate component to make a bubble appeare when the user hovers a UI element or layout area. + The component is <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>. + There's nothing complicated in using <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>: you just need to set the text to be shown in the tooltip with the <emphasis><property>&quot;value&quot;</property></emphasis> attribute and specify for which component you want the tooltip to be shown with the <emphasis><property>&quot;for&quot;</property></emphasis> attribute that takes the id of the targeted component as a parameter. + </para> + + <programlisting role="XML"><![CDATA[... +<rich:panel id="panelId"> +<p>Element which has a tooltip</p> +</rich:panel> +<rich:toolTip value="This is a tooltip." for="panelId"/> +...]]></programlisting> + + <para> + Alternatively, you can just place <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> as a nested element of container for which the tooltip is shown. + + </para> + + + <programlisting role="XML"><![CDATA[... +<div> +<p>Element which has a tooltip</p> + +<rich:toolTip> +<p>Tooltip text</p> +</rich:toolTip> +</div> +...]]></programlisting> + <para>This approach was adopted in the Photo Alum to display tooltips for </para> + + <para> + This code outputs an album&apos;s image. + </para> + + <programlisting role="XML"><![CDATA[... +<a4j:mediaOutput id="img" element="img" styleClass="main-image" + createContent="#{imageLoader.paintImage}" style="border : 3px solid #808080;" + value="#{fileManager.transformPath(model.selectedImage.fullPath, '_medium')}"> + +</rich:dragSupport> + <rich:toolTip followMouse="true" direction="top-right" + showDelay="500" styleClass="tooltip" rendered="#{model.selectedImage.showMetaInfo}"> + <span style="white-space:nowrap; display:block; text-align:left;"> + <h:outputText value="Size in bytes: #{model.selectedImage.size}" /> + <br /> + <h:outputText + value="#{messages['original_size']}: #{model.selectedImage.height}x#{model.selectedImage.width}" /> + <br /> + <h:outputText value="Captured at: #{model.selectedImage.created}" /> + <br /> + <h:outputText + value="#{messages['camera']}: #{model.selectedImage.cameraModel}" /> + </span> + </rich:toolTip> +</a4j:mediaOutput> +...]]></programlisting> + + <para>The <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is nested in <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> +and prints the size of the image, size in pixels, when the picture was taken and the type of camera used to take the picture. + </para> + <figure> + <title>Tooltip</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tooltip.png"/> + </imageobject> + </mediaobject> + </figure> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/uploadImages.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/uploadImages.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/uploadImages.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,136 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <title>Upload Images</title> + <para> + In the previous chapter we have discussed how to create Navigation Trees + that represent &quot;Shelves - Albums&quot; hierarchy. + Now it is time to upload images. + </para> + <para> + The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component + in the Photo Album application uses the embedded Flash module + that adds extra functionality to the component: + </para> + <itemizedlist> + <listitem> + <para>Multiple files choosing;</para> + </listitem> + <listitem> + <para>Definition of permitted file types in the &quot;Open File&quot; dialog window;</para> + </listitem> + <listitem> + <para>A number of additional client-side object properties.</para> + </listitem> + </itemizedlist> + <para> + The code for the <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> is contained in the &quot;/includes/fileUpload/fileUploader.xhtml&quot; page: + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload + allowFlash="true" maxFilesQuantity="100" autoclear="true" + fileUploadListener="#{fileUploadManager.listener}" id="fileUpload" + disabled="#{model.selectedAlbum == null}" + immediateUpload="false" acceptedTypes="jpg,jpeg"> + <a4j:support event="onuploadcomplete" reRender="filesPanel, treeform" actionListener="#{fileWrapper.setComplete(true)}"/> + <a4j:support event="onfileuploadcomplete" /> +</rich:fileUpload> +...]]></programlisting> + <para> + The <emphasis><property>&quot;allowFlash&quot;</property></emphasis> attribute set to &quot;true&quot; + enables the Flash module. + </para> + <para> + The <emphasis><property>&quot;acceptedTypes&quot;</property></emphasis> attribute + specifies &quot;jpg&quot;, &quot;jpeg&quot; as the permitted file types you can upload. + </para> + <para> + The <emphasis><property>&quot;fileUploadListener&quot;</property></emphasis> attribute + represents the action listener method <code>listener()</code> of the <code>FileUploadManager</code> + class that is notified after file is uploaded. + This method makes the main job on the upload: + </para> +<programlisting role="JAVA"><![CDATA[... + public void listener(UploadEvent event) throws Exception { + UploadItem item = event.getUploadItem(); + Image image = constructImage(item); + try { + extractMetadata(item, image); + } catch (Exception e1) { + addError(item, image, Constants.FILE_PROCESSING_ERROR); + return; + } + image.setAlbum(model.getSelectedAlbum()); + if(image.getAlbum() == null){ + addError(item, image, Constants.NO_ALBUM_TO_DOWNLOAD_ERROR); + return; + } + try{ + if(imageAction.isImageWithThisPathExist(image)){ + image.setPath(generateNewPath(image.getPath())); + } + imageAction.addImage(image); + }catch(Exception e){ + addError(item, image, Constants.IMAGE_SAVING_ERROR); + return; + } + if(!fileManager.addImage(image.getFullPath(), item.getFile().getPath())){ + addError(item, image, Constants.FILE_SAVE_ERROR); + return; + } + fileWrapper.getFiles().add(image); + Events.instance().raiseEvent(Constants.IMAGE_ADDED_EVENT, image); + item.getFile().delete(); + } +...]]></programlisting> + <para> + The <code>listener()</code> method is called at server side after every file uploaded + and server saves these files in a temporary folder or in RAM depending on configuration. + In the Photo Album application the uploaded files are stored in the temporary folder + because the value of the <code>createTempFile</code> parameter is set to <code>true</code>. + See the code from the <code>web.xml</code> descriptor: + </para> + +<programlisting role="XML"><![CDATA[... +<filter> + <filter-name>Seam Filter</filter-name> + <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> + <init-param> + <param-name>createTempFiles</param-name> + <param-value>true</param-value> + </init-param> + <init-param> + <param-name>maxRequestSize</param-name> + <param-value>20000000</param-value> + </init-param> +</filter> +...]]></programlisting> + <para> + The <code>listener()</code> method creates an <code>Image</code> object + and extracts all image metadata such as Camera name, Image size, etc. + It performs scaling of an image and saves six different image's dimentions in order to create thumbnails. + After that the photo is added into the database + the temporary file is removed. + </para> + + <para> + Visit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter: + </para> + + <itemizedlist> + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.... page for the <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... for the <emphasis role="bold"><property>&lt;a4j:suport&gt;</property></emphasis> component. + </para> + </listitem> + + + </itemizedlist> + + +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/uploadImages.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/usedComponents.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/usedComponents.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/usedComponents.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="usedComponents" xreflabel="usedComponents"> +<?dbhtml filename="usedComponents.html"?> + <title>Used Components</title> + <para> + Have a look at the list of components used in the <property>Photo Album</property> application. + </para> + <table> + <title>Components used in &quot;Photo Album Demo&quot;</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>&lt;a4j:commandLink&gt;</entry> + <entry>The component is very similar to the &lt;h:commandLink&gt; component, the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back. It's not necessary to plug any support into the component, as Ajax support is already built in.</entry> + </row> + <row> + <entry>&lt;a4j:commandButton&gt;</entry> + <entry>The component is very similar to the &lt;h:commandButton&gt; component, the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back. It's not necessary to plug any support into the component, as Ajax support is already built in.</entry> + </row> + <!-- row> + <entry>a4j:push</entry> + <entry>The component periodically perform Ajax request to the server, to simulate 'push' data.</entry> + </row--> + <row> + <entry>&lt;a4j:poll&gt;</entry> + <entry>The component allows periodical sending of Ajax requests to the server and is used for a page update according to a specified time interval.</entry> + </row> + <row> + <entry>&lt;rich:calendar&gt;</entry> + <entry>The component is used for creating monthly calendar elements on a page.</entry> + </row> + <row> + <entry>&lt;rich:contextMenu&gt;</entry> + <entry>The component is used for creation of multileveled context menus that are activated after a user defines an event ("onmouseover", "onclick", etc.) on any element on the page.</entry> + </row> + <row> + <entry>&lt;rich:dataGrid&gt;</entry> + <entry>The component to render data as a grid that allows choosing data from a model and obtains built-in support of Ajax updates.</entry> + </row> + <row> + <entry>&lt;rich:datascroller&gt;</entry> + <entry>The component is designed for providing the functionality of tables scrolling using Ajax requests.</entry> + </row> + <row> + <entry>&lt;rich:fileUpload&gt;</entry> + <entry>The component is designed to perform Ajax-ed files upload to the server.</entry> + </row> + <row> + <entry>&lt;rich:inplaceInput&gt;</entry> + <entry>The component is an input component used for displaying and editing data inputted. </entry> + </row> + <row> + <entry>&lt;rich:inplaceSelect&gt;</entry> + <entry>The component is used to create select based inputs: it shows the value as text in one state and enables editing the value, providing a list of options in another state.</entry> + </row> + <row> + <entry>&lt;rich:mediaOutput&gt;</entry> + <entry>The component implements one of the basic features specified in the framework. The component is a facility for generating images, video, sounds and other binary resources defined by you on-the-fly.</entry> + </row> + <row> + <entry>&lt;rich:modalPanel&gt;</entry> + <entry>The component implements a modal dialog window. All operations in the main application window are locked out while this window is active. Opening and closing the window is done with client JavaScript code.</entry> + </row> + <row> + <entry>&lt;rich:progressBar&gt;</entry> + <entry>The component is designed for displaying a progress bar which shows the current status of the process. </entry> + </row> + <row> + <entry>&lt;rich:tree&gt;</entry> + <entry>The component is designed for hierarchical data presentation and is applied for building a tree structure with a drag-and-drop capability. The component also uses built-in drag and drop.</entry> + </row> + + + </tbody> + </tgroup> + </table> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/usedComponents.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/userPreferencesView.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/userPreferencesView.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/userPreferencesView.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="userPrefView"> + <title>User Preferences View</title> + <para> + Work in progress... + </para> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/userPreferencesView.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/validators.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/validators.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/validators.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section id="Validators"> + <title>User Input Data Validation</title> + <para> + Validation of user input is a very frequent situation for a developer. RichFaces library offers 3 component to get this job done: + <emphasis role="bold"><property>&lt;rich:beanValidator&gt;</property></emphasis>, <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property></emphasis>, + + and <emphasis role="bold"><property>&lt;rich:ajaxValidator&gt;</property></emphasis>. The latter two components are used in the Photo Album application. <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property></emphasis> is intended to validate the whole object or the graph of interrelated objects and the validation occurs when the whole form is submitted. While <emphasis role="bold"><property>&lt;rich:ajaxValidator&gt;</property></emphasis> validates only one input field or a value at a time, validation is activated upon some event and adds interactivity to the application. + Both components use Hibernate validators which helps to locate validation logic in one place, such approach is really helpful given that usually data validation logic is stored in multiple places including UI pages and in Java code that interacts with a database. + </para> + <para> + + Let's have a look at the components usage on the registration page. This is how the page looks like (some irrelevant details were removed from the example): + + </para> + <programlisting role="XML"><![CDATA[... +<ui:composition xmlns="http://www.w3.org/1999/xhtml" ... + + <rich:graphValidator> + ... + <h:inputText id="loginName" value="#{user.login}" /> + <rich:messages for="loginName" /> + <h:inputSecret required="true" id="password" value="#{user.password}" /> + <rich:messages for="password" /> + <h:inputSecret required="true" id="confirmPassword" + value="#{user.confirmPassword}" /> + <rich:messages for="confirmPassword" /> + <h:inputText id="firstname" value="#{user.firstName}" /> + <rich:messages for="firstname" style="color:red;" /> + <h:inputText id="secondname" value="#{user.secondName}" /> + <rich:messages for="secondname" /> + <h:selectOneRadio required="true" id="sex" value="#{user.sex}"> + <f:selectItems value="#{userPrefsBean.sexs}" /> + <s:convertEnum /> + </h:selectOneRadio> + <rich:messages for="sex" /> + <a4j:outputPanel id="calendar" layout="block"> + <rich:calendar id="birthDate" value="#{user.birthDate}" + + <rich:ajaxValidator event="oninputblur" /> + </rich:calendar> + </a4j:outputPanel> + <rich:messages for="birthDate" /> + <h:inputText id="email" value="#{user.email}" /> + <rich:messages for="email" /> + </rich:graphValidator> + <richx:commandButton actionListener="#{authenticator.register(user)}" + value="Register" /> + <richx:commandButton actionListener="#{controller.cancelRegistration()}" + immediate="true" value="Cancel" /> +</ui:composition> + +...]]></programlisting> + + <para> + + <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property></emphasis> validates the entity User object, in which restrictions are set with the help of Hibernate annotations. + When the <emphasis role="bold" >Register</emphasis> button is clicked on the <property>name, password, sex</property> etc. fields are validated sequentially. In case of an error (for example, if a <property>loginName</property> contains only on character and the annotation restricts it to at least 3 characters to be typed in) a error message in red color is displayed next to the input field and the request is aborted. If all values are valid the <code>authenticator.register(user)</code> method will be invoked and the user will be saved to the database. + + </para> + <para> + <emphasis role="bold"><property>&lt;rich:ajaxValidator&gt;</property></emphasis> acts in a slightly different way, in our case it is attached to the <code>user.birthDate</code> field. When the value of the field is changed and the field loses focus it is immediately validated. If the input data is incorrect and error message will displayed, which is a quick way to respond to user input errors and avoid sending incorrect data to the server. + + </para> + <para> + If you would like to get more details about the validators that RichFaces library provides please visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/ajaxValidat... Demo</ulink> web page and <ulink url="&devguide;" >RichFaces Developer Guide</ulink>. + + </para> +</section> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/includes/validators.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/master.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/master.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/master.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,117 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3CR3//EN" +"http://www.docbook.org/xml/4.3CR3/docbookx.dtd" [ + <!ENTITY intro SYSTEM "modules/intro.xml"> + <!ENTITY application_overview SYSTEM "modules/application_overview.xml"> + <!ENTITY overview SYSTEM "modules/overview.xml"> + <!ENTITY getting_started SYSTEM "modules/getting_started.xml"> + + + <!ENTITY skinnability SYSTEM "includes/skinnability.xml"> + <!ENTITY usedComponents SYSTEM "includes/usedComponents.xml"> + <!ENTITY navigationPanel SYSTEM "includes/navigationPanel.xml"> + <!ENTITY uploadImages SYSTEM "includes/uploadImages.xml"> + <!ENTITY shelfView SYSTEM "includes/shelfView.xml"> + <!ENTITY albumView SYSTEM "includes/albumView.xml"> + <!ENTITY errorsReports SYSTEM "includes/errorsReports.xml"> + <!ENTITY imageView SYSTEM "includes/imageView.xml"> + <!ENTITY contextMenu SYSTEM "includes/contextMenu.xml"> + <!ENTITY tooltips SYSTEM "includes/tooltips.xml"> + <!ENTITY hiw SYSTEM "includes/hiw.xml"> + <!ENTITY validators SYSTEM "includes/validators.xml"> + <!ENTITY button SYSTEM "includes/button.xml"> + <!ENTITY a4j_status SYSTEM "includes/a4j_status.xml"> + + <!ENTITY cdkguide "../../cdkguide/html_single/index.html"> + <!ENTITY devguide "../../devguide/html_single/index.html"> + <!ENTITY migrationguide "../../migrationguide/html_single/index.html"> + <!ENTITY photoalbumguide "../../realworld/html_single/index.html"> + <!ENTITY realworld "../../realworld/html_single/index.html"> + <!ENTITY tlddoc "../../tlddoc/index.html"> + <!ENTITY apidoc "../../apidoc/index.html"> + <!ENTITY apidoc_framework "../../apidoc_framework/index.html"> + +]> + +<book> + <bookinfo> + <title>RichFaces Photo Album Application Guide</title> + <corpauthor> + <inlinemediaobject> + <imageobject role="fo"> + <imagedata format="PNG" fileref="images/richfaces_logo.png" /> + </imageobject> + <imageobject role="html"> + <imagedata/> + </imageobject> + </inlinemediaobject> + </corpauthor> + <subtitle>This documentation is work in progress, thus some mistakes or incompleteness is possible</subtitle> + <author> + <firstname>Alex</firstname> + <surname>Tsebro</surname> + <email&gt;atsebro(a)exadel.com&lt;/email&gt; + </author> + <author> + <firstname>Svetlana</firstname> + <surname>Mukhina</surname> + <email&gt;smukhina(a)exadel.com&lt;/email&gt; + </author> + <author> + <firstname>Gleb</firstname> + <surname>Galkin</surname> + <email&gt;ggalkin(a)exadel.com&lt;/email&gt; + </author> + <author> + <firstname>Michael</firstname> + <surname>Sorokin</surname> + <email&gt;msorokin(a)exadel.com&lt;/email&gt; + </author> + <copyright> + <year>2009</year> + <holder>Red Hat</holder> + </copyright> + + <!--<abstract> + <title/> + <para> + <ulink url="../../migrationguide/pdf/richfaces_migration_guide.pdf">PDF version</ulink> + </para> + </abstract> --> + + </bookinfo> + <toc/> + &intro; + &getting_started; + &overview; + <!-- &application_overview; --> + <chapter id="patterns" xreflabel="patterns"> + <?dbhtml filename="patterns.html"?> + <chapterinfo> + <keywordset> + <keyword>RichFaces</keyword> + </keywordset> + </chapterinfo> + <title>How it works</title> + <para> + In this chapter we explain how the Photo Album works. + </para> + <?forseChanks?> + + &usedComponents; + &skinnability; + &navigationPanel; + <!-- &shelfView; --> + &albumView; + &imageView; + &uploadImages; + &contextMenu; + &tooltips; + &validators; + &button; + &a4j_status; + <!-- &hiw; --> + &userPreferencesView; + &errorsReports; + </chapter> +</book> Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/master.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/application_overview.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/application_overview.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/application_overview.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,200 @@ +<?xml version="1.0" encoding="UTF-8"?> +<chapter id="app_over" xreflabel="app_over"> + <?dbhtml filename="app_over.html"?> + <chapterinfo> + <keywordset> + <keyword>RichFaces</keyword> + + </keywordset> + </chapterinfo> + + <title>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>Enterprise Java Beans (EJB) 3.0</emphasis>, technology for development of server-side component architecture for Java Platform, Enterprise Edition (Java EE);</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 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. + </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 the key concepts and conceptual representation of data of the <property>Photo Album Demo</property> 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. + </para> + + <figure> + <title>The Photo Album Demo Entity Relation Diagram</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/erd.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + 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. + </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 the 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 the 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 the 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=photoalbum-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 its features should be described: + </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 a 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 that 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 the 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 is 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 picture below shows <code>index.xhtml</code> page schematically with all its &quot;includes&quot; and paths to them:</para> + <mediaobject> + <imageobject> + <imagedata fileref="images/indexxhtml.png"/> + </imageobject> + </mediaobject> + + + </section> + + +</chapter> + Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/application_overview.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/getting_started.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/getting_started.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/getting_started.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,175 @@ +<?xml version="1.0" encoding="UTF-8"?> +<chapter id="getting_started" xreflabel="getting_started"> + <?dbhtml filename="getting_started.html"?> + <chapterinfo> + <keywordset> + <keyword>RichFaces</keyword> + + </keywordset> + </chapterinfo> + <title>Getting started</title> + <section> + <title>Environment Configuration</title> + <para> + In order to download, build, modify, and deploy the Photo Album application + you need to have the following installed and configured: + </para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://java.sun.com/javase/downloads/index.jsp">JDK 1.5 and higher</ulink> + </para> + </listitem> + <listitem> + <para> + <ulink url="http://maven.apache.org/download.html">Maven 2.0.10</ulink> + </para> + </listitem> + <listitem> + <para> + <ulink url="http://www.jboss.org/tools">JBoss Tools</ulink> + (or <ulink url="http://www.eclipse.org/">Eclipse</ulink>) + </para> + </listitem> + <listitem> + <para> + <ulink url="http://www.jboss.org/jbossas/downloads/">JBoss Server</ulink> (4.2.3.GA, 5.0.x.GA) + </para> + </listitem> + <listitem> + <para> + <ulink url="http://subversion.tigris.org/">SVN client</ulink> + </para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Installation</title> + <para> + Once you have configured the environment you can install the Photo Album application: + </para> + <itemizedlist> + <listitem> + <para> + <emphasis>Checkout the project</emphasis> + </para> + <programlisting role="XML"><![CDATA[svn co http://anonsvn.jboss.org/repos/richfaces/trunk/examples/photoalbum/]]>... + </listitem> + <listitem> + <para> + <emphasis>Build the project</emphasis>. + Open command line console, + point to the folder with checkouted project, + and tell Maven: + </para> + <programlisting role="XML"><![CDATA[mvn clean install eclipse:eclipse -Dwtpversion=1.5]]></programlisting> + </listitem> + <listitem> + <para> + <emphasis>Import the project into Eclipse IDE</emphasis>. + You can just deploy Photo Album application onto the server, but + the convenient way is to import the project into your IDE. + We recommend Eclipse with JBoss Tools since this bundle is more preferable to + ensure rapid development process with Seam and RichFaces. + You can find a step-by-step tutorial &quot;Importing existing projects&quot; + at the +<ulink url="http://help.eclipse.org/ganymede/topic/org.eclipse.platform.doc... documentation</ulink> page +or simply in the <emphasis>Help</emphasis> &gt; <emphasis>Help Contents</emphasis> of the Eclipse. + <!-- + Steps to follow for JBDS users: + click <code>File</code> -> <code>Import</code> and select <code>Existing project into Workspace</code> as import source; + in <code>Import Project</code> window click <code>Browse</code> button and point to the realworld project folder; сlick <code>OK</code>. + --> + As the result three modules of Photo Album project appear in the Workspace: + </para> + <figure> + <title>Modules of Photo Album in the Workspace</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/modulesList.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> + <emphasis>Add JBoss AS</emphasis>. + Now you need to add JBoss Application Server runtime. + + Detailed instructions on how you can do it are given in the + <ulink url="http://download.jboss.org/jbosstools/nightly-docs/en/as/html/ru... and Servers in the JBoss AS plugin</ulink> + chapter from the <ulink url="http://download.jboss.org/jbosstools/nightly-docs/en/as/html/in... Server Manager Reference Guide</ulink>. + </para> + </listitem> + <listitem> + <para> + <emphasis>Run photoalbum-ear-1.0-SNAPSHOT</emphasis> on the JBoss Application Server + you have just installed. + </para> + </listitem> + <listitem> + <para> + Browse to <code>http:/localhost:8080/photoalbum</code>. + </para> + </listitem> + </itemizedlist> + + <tip> + <title>Tip:</title> + <para> + By default Photo Album is assembled with a limited set of images (4-5 in each album). + In order to build the version of the application with a full set of images you need to use <property>livedemo</property> profile while building Photo Album like this: + </para> +<programlisting role="JAVA"><![CDATA[ +mvn clean install -Plivedemo +]]></programlisting> + + </tip> + </section> + <section> + <title>Running Functional(Selenium) Tests </title> + <para> + Before starting Selenium test please make sure that you have Firefox browser installed on your local machine, as + the Photo Album application is designed to be deployed and run on JBoss Application server, + so please make sure that the &lt;jboss.installer.url&gt; property of the project pom.xml (<code>examples/photoalbum/</code>) points to an existing JBoss Application server copy. + </para> + + <para> + You also need to build the Photo Album project in <code>inexamples/photoalbum/reource</code>. + </para> + <para> + Then, you need to go to the test folder of the project (examples/photoalbum/test/) and run the + + + </para> + <programlisting role="XML"><![CDATA[... +mvn clean integration-test +...]]></programlisting> + <para> + By default Selenium tests are executed in the Firefox browser, hence you need to have it installed. + If you configured everything like it is said above you will see tests being executed in the Firefox browser. + When the tests are finished you can read test reports in the <code>examples/photoalbum/tests/target/surefire-reports/</code> folder. + </para> + </section> + + <section> + <title>Context Help</title> + <para> + The Photo Album application was developed in the first place to demonstrate the mighty power of RichFaces thus most of UI elements in the application has a context help article that tells how a particular element works, providing technical details about it. + A context help article is displayed when you click on the question mark icon ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/help_sign.png"/> + </imageobject> + </inlinemediaobject> + ). + + </para> + </section> + + + + + +</chapter> \ No newline at end of file Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/getting_started.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/intro.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/intro.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/intro.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8"?> +<chapter id="introduction" xreflabel="introduction"> + <?dbhtml filename="introduction.html"?> + + <title>Introduction</title> + <para> + The &quot;Photo Album&quot; web application 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 no possibilities to create personal + shelves or albums or upload photos are available. + </para> + <para> + The &quot;Photo Album&quot; represents and implements strict &quot;Shelves - Albums - Photos&quot; hierarchy. + 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 Photo Album web application is designed and developed with RichFaces and by RichFaces team. This application 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 + <ulink url="&devguide;/#Skinnability">Skinnability</ulink>. + </para> + </listitem> + </itemizedlist> + <para> + The Photo Album application also encompasses technologies and frameworks such as: + </para> + <itemizedlist> + <listitem> + <para> + <ulink url="https://facelets.dev.java.net/">Facelets</ulink> + </para> + </listitem> + <listitem> + <para> + <ulink url="http://java.sun.com/products/ejb/">Enterprise Java Beans (EJB) 3.0</ulink> + </para> + </listitem> + <listitem> + <para> + <ulink url="http://seamframework.org/">Seam framework</ulink> + </para> + </listitem> + </itemizedlist> + <para> + The application is available online at <ulink url="http://livedemo.exadel.com/photoalbum/">Photo Album</ulink> page. + </para> + +</chapter> + + Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/intro.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/overview.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/overview.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/overview.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,133 @@ +<?xml version="1.0" encoding="UTF-8"?> +<chapter id="overview" xreflabel="overview"> + <?dbhtml filename="overview.html"?> + <chapterinfo> + <keywordset> + <keyword>RichFaces</keyword> + + </keywordset> + </chapterinfo> + <title>Application Overview </title> + <section id="pageFlows"> + <title>Page flows</title> + <para> + + The page flow of the application is illustrated in the diagram. + </para> + <figure> + <title>Page Flow diagram</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/diagram.png"/> + </imageobject> + </mediaobject> + </figure> + <section> + <title>Page flows: implementation details</title> + + <para> + This section covers how the particular elements that govern page flow are implemented in the application. + </para> + <section> + <title>Registering</title> + <para> + Registering in is basically the first step a user takes in the application if he/she wants to have access to all features of the application. Have a look at a piece of code from <code>\includes\index\index.xhtml</code>: + </para> + <programlisting role="XML"><![CDATA[... +<h:panelGroup rendered="#{!identity.loggedIn}" styleClass="top-right-bottom-menu-item-link" layout="block"> + <h:form style="margin: 0px"> + <a4j:commandLink value="#{messages['login.register']}"actionListener="#{authenticator.goToRegister}" reRender="mainArea" /> + </h:form> +</h:panelGroup> +...]]></programlisting> + <para>When the button is hit the <code>goToRegister</code> method of the <code>Authenticator</code> class is invoked and the <code>START_REGISTER_EVENT</code> is raised. These action display the registration form that is included from <code>\includes\register.xhtml</code>. </para> + + + <para>The <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> displays the link to the registration form and invokes the <code>goToRegister</code> method. + </para> + <para>When all fields are filled out with correct values the <code>authenticator.register(user)</code> is triggered and a new user object is declared. </para> + </section> + + <section> + <title>Navigation Between Pages</title> + <para> + Technically, user does not browse between pages of the application: every content page is included into the content area of <code>index.xhtml</code> file after a certain action performed by user. + </para> + <programlisting role="XML"><![CDATA[... +<h:panelGroup styleClass="content_box" layout="block"> + <ui:include src="#{model.mainArea.template}" /> +</h:panelGroup> +...]]></programlisting> + <figure> + <title>Content Area</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/contentArea.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + + The <code>NavigationEnum</code> enumeration encapsulated all possible states, that can be applied to content area (&quot;mainArea&quot;) on the page. + + </para> + + <programlisting role="XML"><![CDATA[... + public enum NavigationEnum { + ANONYM("includes/publicShelves.xhtml"), + FILE_UPLOAD("includes/fileUpload.xhtml"), + USER_PREFS("includes/userPrefs.xhtml"), + REGISTER("includes/register.xhtml"), + SEARCH("includes/search.xhtml"), + ALBUM_PREVIEW("includes/album.xhtml"), + ALBUM_IMAGE_PREVIEW("/includes/image.xhtml"), + SHELF_PREVIEW("/includes/shelf.xhtml"), + ALL_SHELFS("/includes/userShelves.xhtml"), + TAGS("includes/tag.xhtml"), + ALL_ALBUMS("/includes/userAlbums.xhtml"), + ALL_IMAGES("/includes/userImages.xhtml"), + ALBUM_IMAGE_EDIT("/includes/imageEdit.xhtml"), + ALBUM_EDIT("/includes/albumEdit.xhtml"), + SHELF_EDIT("/includes/shelfEdit.xhtml"), + SHELF_UNVISITED("/includes/shelfUnvisited.xhtml"), + USER_SHARED_ALBUMS("/includes/userSharedAlbums.xhtml"), + USER_SHARED_IMAGES("/includes/userSharedImages.xhtml"), + ALBUM_UNVISITED("/includes/albumUnvisited.xhtml"); +... +} +]]></programlisting> + + <para> + + This class specifies which file is included depending on some user action. + The template to be loaded is identified according to some condition in the Controller + (<code>Controllor.java</code>) class and is saved to the Model (<code>Model.java</code>). During <code>index.xhtml</code> page rendering the value is taken from the Model to define what should be rendered to the page. + </para> + </section> + + </section> + <section id="dataModel"> + <title>Data Model</title> + <para> + The data model of the application has the following structure: + </para> + + <figure> + <title>Photo Album Data Model</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/erd.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + <!--section id="setUp"> + <title>Project Set Up</title> + <para> + Work in progress... + </para> + </section--> +</chapter> + Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/docbook/modules/overview.xml ___________________________________________________________________ Name: svn:executable + * Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/albumView.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/albumView.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_album.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_album.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_image.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_image.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_shelf.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/cm_shelf.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/contentArea.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/contentArea.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/diagram.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/diagram.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/dnd.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/dnd.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/ejb_struct.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/ejb_struct.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/erd.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/erd.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/imageView.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/imageView.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/image_size.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/image_size.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/indexxhtml.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/indexxhtml.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/messages_en_property.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/messages_en_property.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/modulesList.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/modulesList.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/richfaces_logo.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/richfaces_logo.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_mess.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_mess.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_pers.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_pers.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_start.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/rw_its_start.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/slide_show.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/slide_show.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/tooltip.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/tooltip.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/tree.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/tree.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/web_struct.png =================================================================== (Binary files differ) Property changes on: root/docs/trunk/guides/photo_album_app_guide/en/src/main/resources/images/web_struct.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: root/docs/trunk/guides/photo_album_app_guide/pom.xml =================================================================== --- root/docs/trunk/guides/photo_album_app_guide/pom.xml (rev 0) +++ root/docs/trunk/guides/photo_album_app_guide/pom.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -0,0 +1,17 @@ +<project xmlns="http://maven.apache.org/POM/4.0.0" + xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" + xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> + <parent> + <groupId>org.richfaces.docs</groupId> + <artifactId>guides</artifactId> + <version>4.0.0-SNAPSHOT</version> + </parent> + <modelVersion>4.0.0</modelVersion> + <groupId>org.richfaces.docs.guides</groupId> + <artifactId>photo_album_app_guide</artifactId> + <packaging>pom</packaging> + <name>RichFaces Photo Album Application Guide</name> + <modules> + <module>${docs.translation}</module> + </modules> +</project> Property changes on: root/docs/trunk/guides/photo_album_app_guide/pom.xml ___________________________________________________________________ Name: svn:executable + * Modified: root/docs/trunk/guides/pom.xml =================================================================== --- root/docs/trunk/guides/pom.xml 2009-08-28 00:25:48 UTC (rev 15382) +++ root/docs/trunk/guides/pom.xml 2009-08-28 00:39:31 UTC (rev 15383) @@ -19,7 +19,8 @@ <!-- all deployed modules should be reflected in version-matrix also --> <modules> <module>testguide</module> - <module>migrationguide</module> + <module>migrationguide</module> + <module>photo_album_app_guide</module> </modules> <build>