[richfaces-svn-commits] JBoss Rich Faces SVN: r14539 - branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Fri Jun 5 11:53:54 EDT 2009
Author: msorokin
Date: 2009-06-05 11:53:54 -0400 (Fri, 05 Jun 2009)
New Revision: 14539
Modified:
branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml
Log:
https://jira.jboss.org/jira/browse/RF-5768
added content to the Context Menu section
Modified: branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml
===================================================================
--- branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml 2009-06-05 14:29:29 UTC (rev 14538)
+++ branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/contextMenu.xml 2009-06-05 15:53:54 UTC (rev 14539)
@@ -1,5 +1,94 @@
<section id="contextMenu">
- <title>Context Menus</title>
- <para>Work in progress...</para>
+ <title>Context Menus TBR</title>
+ <para>Context menus are called when you right-click on a UI element. RichFaces library provides a special component <emphasis role="bold"><property><rich:contextMenu ></property></emphasis> to implement this type of functionality. </para>
+
+
+ <para>Context menu is made for the following UI controls:</para>
+
+ <itemizedlist>
+ <listitem><para>Album</para></listitem>
+ <listitem><para>Image</para></listitem>
+ <listitem><para>Self</para></listitem>
+ <listitem><para>User</para></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>"image"</code> and <code>"mediaOutput"</code>. The first ( <code>"image"</code>) is the name of the current image. The <emphasis role="bold"><property><a4j:repeat></property></emphasis> iterates over a collection of images(see the next listing), the name of the current image is stored in the <code>"image"</code> variable. <code>"mediaOutput"</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><contextMenu></property></emphasis> is <emphasis><property>"attachTo"</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><rich:contexMenu></property></emphasis> and this is how it know what photo is affected by user actions. </para>
+
+
</section>
More information about the richfaces-svn-commits
mailing list