Author: msorokin Date: 2009-06-08 10:18:56 -0400 (Mon, 08 Jun 2009) New Revision: 14553 Modified: branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml Log: https://jira.jboss.org/jira/browse/RF-5768 TooTip section Modified: branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml =================================================================== --- branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml 2009-06-08 13:44:15 UTC (rev 14552) +++ branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml 2009-06-08 14:18:56 UTC (rev 14553) @@ -1,7 +1,72 @@ <?xml version="1.0" encoding="UTF-8"?> <section id="tooltips"> - <title>ToolTips</title> + <title>ToolTips TBR</title> <para> - Work in progress... + 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>