[richfaces-svn-commits] JBoss Rich Faces SVN: r14035 - trunk/docs/realworld_app_guide/en/src/main/docbook/includes.

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>&lt;a4j:support&gt;</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/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> @@ -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.... 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> </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>&lt;rich:tree&gt;</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>&lt;rich:tree&gt;</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>&lt;rich:tree&gt;</property></emphasis> component. </para> <para> @@ -41,7 +41,7 @@ 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: + 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>&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: + 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 @@ -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">&quot;Context menu&quot;</link> chapter. </para> @@ -220,23 +216,32 @@ For this purpose we use previously mentioned <emphasis><property>&quot;dragValue&quot;</property></emphasis>, <emphasis><property>&quot;dragType&quot;</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>&quot;dropValue&quot;</property></emphasis> and - <emphasis><property>&quot;acceptedTypes&quot;</property></emphasis> attributes to the &quot;Shelf&quot; node: + <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 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>&quot;acceptedTypes&quot;</property></emphasis> attribute tells the &quot;Shelf&quot; node @@ -246,14 +251,27 @@ so the &quot;Shelf&quot; node can accept it. </para> <para> - Finally we need to specify a listener in the <emphasis><property>&quot;dropListener&quot;</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>&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 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>&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) { @@ -276,23 +294,25 @@ } ...]]></programlisting> <para> - Here is the whole example of the &quot;Navigation panel for a registered user&quot;: + Here is the whole example of the &quot;Navigation tree for a registered user&quot;: </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=... 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> 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 &quot;Shelves - Albums&quot; hierarchy. Now it is time to upload images. </para> <para> - The implementation of <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> + 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> @@ -23,8 +23,7 @@ </listitem> </itemizedlist> <para> - The &quot;/includes/fileUpload/fileUploader.xhtml&quot; page - is responsible for the photos uploading functionality: + 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 @@ -46,7 +45,7 @@ </para> <para> The <emphasis><property>&quot;fileUploadListener&quot;</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.... 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>