[richfaces-svn-commits] JBoss Rich Faces SVN: r14035 - trunk/docs/realworld_app_guide/en/src/main/docbook/includes.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Wed May 6 10:31:47 EDT 2009
Author: atsebro
Date: 2009-05-06 10:31:47 -0400 (Wed, 06 May 2009)
New Revision: 14035
Modified:
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/navigationPanel.xml
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/uploadImages.xml
Log:
RF-5768: Real World Demo Application Tutorial Update for 3.3.1 release: updating guide
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml 2009-05-06 13:59:46 UTC (rev 14034)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml 2009-05-06 14:31:47 UTC (rev 14035)
@@ -14,11 +14,11 @@
The component is included into the page with the help of <emphasis role="bold"><property>ui:include</property></emphasis>:
</para>
<programlisting role="XML"><![CDATA[...
-<ui:include src="/includes/misc/inputNumberSlider.xhtml"/>
+<ui:include src="src/main/webapp/includes/image/inputNumberSlider.xhtml"/>
...]]></programlisting>
<para>
- Now let's have a look at <code>src/main/webapp/includes/misc/inputNumberSlider.xhtml</code> file:
+ Now let's have a look at <code>src/main/webapp/includes/image/inputNumberSlider.xhtml</code> file:
</para>
<programlisting role="XML"><![CDATA[...
<ui:composition ...>
@@ -37,73 +37,92 @@
</ui:composition>
...]]></programlisting>
<para>
- On each slider position change the <emphasis role="bold"><property>a4j:support</property></emphasis> component invokes an Ajax request that passes a new set value into the <code>ImageSizeHelper.java</code> class.
- This class saves new photo dimensions, processes and assigns new values to photo related attributes (a CSS class for new photo size, postfix for a new file name, image background):
+ 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 due to slider'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 static enum ImageDimension {
-
- SIZE_80(80), SIZE_120(120), SIZE_160(160), SIZE_200(200);
-
- 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";
+ public enum ImageDimension {
- int x;
- String bgStyle;
- String cssClass;
- String imageBgSrc;
- String filePostfix;
+ SIZE_80(80), SIZE_120(120), SIZE_160(160), SIZE_200(200), SIZE_MEDIUM(600), ORIGINAL(0);
- 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);
- filePostfix = FILE_POSTFIX + x;
- }
+ 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 <code>ImageSizeHelper.java</code> is worked out the <emphasis role="bold"><property>a4j:support</property></emphasis> component renders user photos
+
+ <para>
+ After the <emphasis role="bold"><property><a4j:support></property></emphasis> is worked out user photos
(more exactly, the <emphasis role="bold"><property>h:panelGroup</property></emphasis> with <code>userAlbumImages</code> id that contains user photos)
- correspondingly to a new set value. Here is <code>web/src/main/webapp/includes/image/imageList.xhtml</code>:
+ are rendered correspondingly to a new set 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, tree">
- <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, tree" id="dragSource" dragIndicator="dragIndicator"
- dragType="image" dragValue="#{image}">
- <rich:dndParam id="dragParam" name="label" value="#{image.name}" />
- </rich:dragSupport>
- <ui:include src="/includes/contextMenu/CMForImage.xhtml" >
- <ui:param name="image" value="#{image}" />
- </ui:include>
- </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>
- </a4j:repeat>
-</h:panelGroup>
+ <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>
@@ -118,6 +137,25 @@
</imageobject>
</mediaobject>
</figure>
+ <para>
+ Vizit 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/inputNumberSlider.jsf?c=inputNumberSlider">InputNumberSlider</ulink> page for the <emphasis role="bold"><property><rich:inputNumberSlider></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support">AjaxSupport</ulink> for the <emphasis role="bold"><property><a4j:suport></property></emphasis> component.
+ </para>
+ </listitem>
+
+
+ </itemizedlist>
</section>
@@ -305,5 +343,53 @@
}
...]]></programlisting>
+ <para>
+ Vizit 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.jsf?c=modalPanel">ModalPanel</ulink> page for the <emphasis role="bold"><property><rich:modalPanel></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?c=effect">Effect</ulink> for the <emphasis role="bold"><property><rich:effect></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/mediaOutput.jsf?c=mediaOutput">MediaOutput</ulink> for the <emphasis role="bold"><property><a4j:mediaOutput></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support">AjaxSupport</ulink> for the <emphasis role="bold"><property><a4j:suport></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandLink.jsf?c=commandLink">CommandLink</ulink> for the <emphasis role="bold"><property><a4j:commandLink></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=form">AjaxForm</ulink> for the <emphasis role="bold"><property><a4j:form></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/poll.jsf?c=poll">Poll</ulink> for the <emphasis role="bold"><property><a4j:poll></property></emphasis> component.
+ </para>
+ </listitem>
+ </itemizedlist>
+
</section>
</section>
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/navigationPanel.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/navigationPanel.xml 2009-05-06 13:59:46 UTC (rev 14034)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/navigationPanel.xml 2009-05-06 14:31:47 UTC (rev 14035)
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
-<section id="navigationPanel" xreflabel="navigationPanel">
+<section id="navigationTree" xreflabel="navigationTree">
<?dbhtml filename="navigationPanel.html"?>
- <title>Navigation panel</title>
+ <title>Navigation tree</title>
<para>
The <emphasis role="bold"><property><rich:tree></property></emphasis> component takes one of the main places
in the <property>Photo Album</property> and is tightly bounded with the application logic.
@@ -11,11 +11,11 @@
is used to group thematic albums and may contain as many albums as needed.
</para>
<para>
- There are two types of navigation panel in the application: for a registered user and for a guest.
+ 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 panel for a guest</title>
+ <title>Navigation tree for a guest</title>
<!--para>
The <emphasis role="bold"><property><rich:tree></property></emphasis> component is designed for
@@ -23,7 +23,7 @@
The component also supports built-in drag-and-drop functionality.
</para-->
<para>
- Navigation panel for a guest is represented as a simple
+ Navigation tree for a guest is represented as a simple
<emphasis role="bold"><property><rich:tree></property></emphasis> component.
</para>
<para>
@@ -41,7 +41,7 @@
According to the "Shelves - Albums" hierarchy we need two nested
<emphasis role="bold"><property><rich:treeNodesAdaptor></property></emphasis> components.
The first one iterates over the Shelves collection
- that is returned from the <code>getPredefinedShelves()</code> method:
+ that is returned from the <code>getPredefinedShelves()</code> method of <code>ShelfManager.java</code> class:
</para>
<programlisting role="JAVA"><![CDATA[...
public List<Shelf> getPredefinedShelves() {
@@ -58,7 +58,7 @@
<emphasis><property>"var"</property></emphasis> attribute.
The <emphasis><property>"var"</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:
+ 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><rich:treeNodesAdaptor></property></emphasis> component accepts
@@ -116,53 +116,49 @@
</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="treeform,mainArea"
- selectedClass="tree-selected-node">
- <f:facet name="icon">
- <h:graphicImage style="border: none" value="/img/shell/tree_icon_shelf.png">
- <a4j:support reRender="treeform,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="treeform,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="treeform,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="treeform,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="treeform,mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" />
- </a4j:outputPanel>
- </rich:treeNode>
- </rich:treeNodesAdaptor>
- </rich:treeNodesAdaptor>
- </rich:tree>
+<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 panel for a guest is rendered on the page.
+ The image below shows how the navigation tree for a guest is rendered on the page.
</para>
<figure>
@@ -177,9 +173,9 @@
</section>
<section>
- <title>Navigation panel for a registered user</title>
+ <title>Navigation tree for a registered user</title>
<para>
- As it was mentioned before a navigation panel for a registered user has
+ 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">"Context menu"</link> chapter.
</para>
@@ -220,23 +216,32 @@
For this purpose we use previously mentioned
<emphasis><property>"dragValue"</property></emphasis>,
<emphasis><property>"dragType"</property></emphasis>
- attributes:
+ 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 dragType="album" dragValue="#{album}" reRender="mainArea, treeform">
- ...
- </rich:treeNode>
+ <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>"dropValue"</property></emphasis> and
- <emphasis><property>"acceptedTypes"</property></emphasis> attributes to the "Shelf" node:
+ <emphasis><property>"acceptedTypes"</property></emphasis> attributes to the "Shelf" 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 acceptedTypes="album" dropValue="#{shelf}" reRender="mainArea, treeform">
- ...
- </rich:treeNode>
+ <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>"acceptedTypes"</property></emphasis> attribute tells the "Shelf" node
@@ -246,14 +251,27 @@
so the "Shelf" node can accept it.
</para>
<para>
- Finally we need to specify a listener in the <emphasis><property>"dropListener"</property></emphasis>
- attribute in order to process drop on the server side:
+ Finally in order to process drop on the server side we need to specify a listener for the <emphasis role="bold"><property><rich:tree></property></emphasis> in the <emphasis><property>"dropListener"</property></emphasis>
+ attribute (<code>src/main/webapp/includes/index/tree.xhtml</code> file):
</para>
- <programlisting role="XML"><![CDATA[<rich:tree dragIndicator="dragIndicator" dropListener="#{dndManager.processDrop}">
- ...
-</rich:tree>]]></programlisting>
+ <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>processDrop()</code> method is shown in the listing below:
+ The code for the <emphasis role="bold"><property><rich:dragIndicator></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) {
@@ -276,23 +294,25 @@
}
...]]></programlisting>
<para>
- Here is the whole example of the "Navigation panel for a registered user":
+ Here is the whole example of the "Navigation tree for a registered user":
</para>
-<programlisting role="XML"><![CDATA[<rich:tree
+ <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">
- <rich:treeNodesAdaptor nodes="#{shelfManager.getUserShelves()}"
- var="shelf">
- <rich:treeNode style="cursor:pointer" acceptedTypes="album" dropValue="#{shelf}"
- reRender="mainArea, treeform"
- selectedClass="tree-selected-node">
+
<f:facet name="icon">
<h:graphicImage style="border: none" value="/img/shell/tree_icon_shelf.png">
- <a4j:support reRender="treeform, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" />
+ <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" />
</h:graphicImage>
</f:facet>
<ui:include src="/includes/contextMenu/CMForShelf.xhtml" >
@@ -302,20 +322,20 @@
<h:outputText style="cursor:pointer" value="#{shelf.name}" />
<h:outputText value=" :: " />
<strong>#{shelf.unvisitedImages.size()}</strong> new
- <a4j:support reRender="treeform, mainArea" event="onclick" actionListener="#{controller.showShelf(shelf)}" similarityGroupingId="sel" />
+ <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, treeform" dragType="album"
+ <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="treeform, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" />
+ <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" />
</h:graphicImage>
</f:facet>
<ui:include src="/includes/contextMenu/CMForAlbum.xhtml" >
@@ -326,14 +346,15 @@
<h:outputText style="cursor:pointer" value="#{album.name}" />
<h:outputText value=" :: " />
<strong>#{album.unvisitedImages.size()}</strong> new
- <a4j:support reRender="treeform, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" />
+ <a4j:support reRender="treePanel, mainArea" event="onclick" actionListener="#{controller.showAlbum(album)}" similarityGroupingId="sel" />
</a4j:outputPanel>
</rich:treeNode>
</rich:treeNodesAdaptor>
</rich:treeNodesAdaptor>
-</rich:tree>]]></programlisting>
+ </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>
@@ -345,6 +366,38 @@
</imageobject>
</mediaobject>
</figure>
+ <para>
+ Vizit 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=tree">Tree</ulink> for the <emphasis role="bold"><property><rich:tree></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAdaptor.jsf?c=treeNodesAdaptor">TreeNodesAdaptor</ulink> for the <emphasis role="bold"><property><rich:treeNodesAdaptor></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf?c=dragIndicator">DragIndicator</ulink> for the <emphasis role="bold"><property><rich:dragIndicator></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf?c=dndParam">DragDropParameter</ulink> for the <emphasis role="bold"><property><rich:dndParam></property></emphasis> component.
+ </para>
+ </listitem>
+
+ </itemizedlist>
+
+
</section>
</section>
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/uploadImages.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/uploadImages.xml 2009-05-06 13:59:46 UTC (rev 14034)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/uploadImages.xml 2009-05-06 14:31:47 UTC (rev 14035)
@@ -2,12 +2,12 @@
<section>
<title>Upload Images</title>
<para>
- In the previous chapter we have discussed how to create Navigation Panels
+ In the previous chapter we have discussed how to create Navigation Trees
that represent "Shelves - Albums" hierarchy.
Now it is time to upload images.
</para>
<para>
- The implementation of <emphasis role="bold"><property><rich:fileUpload></property></emphasis>
+ The <emphasis role="bold"><property><rich:fileUpload></property></emphasis> component
in the Photo Album application uses the embedded Flash module
that adds extra functionality to the component:
</para>
@@ -23,8 +23,7 @@
</listitem>
</itemizedlist>
<para>
- The "/includes/fileUpload/fileUploader.xhtml" page
- is responsible for the photos uploading functionality:
+ The code for the <emphasis role="bold"><property><rich:fileUpload></property></emphasis> is contained in the "/includes/fileUpload/fileUploader.xhtml" page:
</para>
<programlisting role="XML"><![CDATA[...
<rich:fileUpload
@@ -46,7 +45,7 @@
</para>
<para>
The <emphasis><property>"fileUploadListener"</property></emphasis> attribute
- represents the action listener method <code>listener()</code> of the <code>fileUploadManager</code>
+ 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>
@@ -85,7 +84,7 @@
...]]></programlisting>
<para>
The <code>listener()</code> method is called at server side after every file uploaded
- and saves files in a temporary folder or in RAM.
+ 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:
@@ -93,22 +92,45 @@
<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>
- ...
+ <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>
- After the image is stored in the temporary folder
- the <code>listener()</code> method creates an <code>Image</code> object
+ The <code>listener()</code> method creates an <code>Image</code> object
and extracts all image metadata such as Camera name, Image size, etc.
- It saves six different sizes of the photo in order to create thumbnails
- and perform images scaling.
+ 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>
+ Vizit 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.jsf?c=fileUpload">FileUpload</ulink> page for the <emphasis role="bold"><property><rich:fileUpload></property></emphasis> component;
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support">AjaxSupport</ulink> for the <emphasis role="bold"><property><a4j:suport></property></emphasis> component.
+ </para>
+ </listitem>
+
+
+ </itemizedlist>
+
+
</section>
More information about the richfaces-svn-commits
mailing list