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>&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>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>&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 know what photo is affected by user actions. </para> + + </section>