Author: SeanRogers Date: 2010-08-18 03:00:26 -0400 (Wed, 18 Aug 2010) New Revision: 18745 Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopup-Header_and_controls.png Modified: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml Log: Updated popup (RF-8805) Modified: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml =================================================================== --- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-18 05:35:44 UTC (rev 18744) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-18 07:00:26 UTC (rev 18745) @@ -14,39 +14,113 @@ This chapter details those components which act as panels and containers to hold groups of other components. </para> - <!-- TODO not in M2 --> - <!-- - <section id="sect-Component_Reference-Panels_and_containers-richmodalPanel"> - <title><sgmltag>&lt;rich:modalPanel&gt;</sgmltag></title> + <!--<rich:popup>--> + <section id="sect-Component_Reference-Panels_and_containers-richpopup"> + <title><sgmltag>&lt;rich:popup&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:modalPanel&gt;</sgmltag> component provides a modal panel or window that blocks interaction with the rest of the application while active. It can be easily positioned on the screen, dragged to a new position by the user, and re-sized. + The <sgmltag>&lt;rich:popup&gt;</sgmltag> component provides a modal pop-up panel or window that blocks interaction with the rest of the application while active. It can be easily positioned on the screen, dragged to a new position by the user, and re-sized. </para> - <important> - <title>Placement</title> + + <section id="sect-Component_Reference-richpopup-Basic_usage"> + <title>Basic usage</title> <para> - The <sgmltag>&lt;rich:modalPanel&gt;</sgmltag> component should always be placed outside the original <sgmltag>&lt;h:form&gt;</sgmltag>, and must include its own <sgmltag>&lt;h:form&gt;</sgmltag> if performing submissions. + The <sgmltag>&lt;rich:popup&gt;</sgmltag> must be given an <varname>id</varname> identifier. It can then be shown and hidden using JavaScript API functions. <xref linkend="exam-Component_Reference-richpopup-richpopup_example" /> demonstrates basic usage of the <sgmltag>&lt;rich:popup&gt;</sgmltag> component. </para> - </important> - <para> - By default, the modal panel can be both re-sized and re-positioned by the user. The minimum possible size for the panel can be set with the These abilities can be deactivated by setting <code>resizable</code> or <code>movable</code> to <literal>false</literal> as necessary. The state of the modal panel, including size and position on screen, can be maintained and restored after submitting and reloading by setting <code>keepVisualState="true"</code>. - </para> - <para> - If <code>showWhenRendered="true"</code> then the modal panel will display when the page is first loaded. - </para> - <example id="exam-Component_Reference-richmodalPanel-richmodalPanel_example"> - <title><sgmltag>&lt;rich:modalPanel&gt;</sgmltag> example</title> - -<programlisting language="XML" role="XML"> -&lt;a onclick="Richfaces.showModalPanel('pnl');" href="#"&gt;Show ModalPanel&lt;/a&gt; -&lt;a4j:form&gt; - &lt;rich:modalPanel id="pnl" &gt; - &lt;a onclick="Richfaces.hideModalPanel('pnl');" href="#"&gt;Hide ModalPanel&lt;/a&gt; - &lt;/rich:modalPanel&gt; -&lt;/a4j:form&gt; -</programlisting> - </example> + <example id="exam-Component_Reference-richpopup-richpopup_example"> + <title><sgmltag>&lt;rich:popup&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + <important> + <title>Placement</title> + <para> + The <sgmltag>&lt;rich:popup&gt;</sgmltag> component should always be placed outside the original <sgmltag>&lt;h:form&gt;</sgmltag>, and must include its own <sgmltag>&lt;h:form&gt;</sgmltag> if performing submissions. + </para> + </important> + </section> + + <section id="sect-Component_Reference-richpopup-Size_and_positioning"> + <title>Size and positioning</title> + <para> + By default, the pop-up panel can be both re-sized and re-positioned by the user. The minimum possible size for the panel can be set with the <varname>minWith</varname> and <varname>minHeight</varname> attributes. These abilities can be deactivated by setting <code>resizable</code> or <code>movable</code> to <literal>false</literal> as necessary. The state of the modal panel, including size and position on screen, can be maintained and restored after submitting and reloading by setting <code>keepVisualState="true"</code>. + </para> + <para> + If <code>showWhenRendered="true"</code> then the modal panel will display when the page is first loaded. + </para> + <para> + The <sgmltag>&lt;rich:popup&gt;</sgmltag> component is always rendered in front of any other objects on the page, even if they would ordinarily have a higher <emphasis>"z-index"</emphasis> (the stack order of the objects). This is achieved by attaching the component to the <sgmltag>&lt;body&gt;</sgmltag> element of the page, and setting a very high z-index. However, this may produce unwanted behavior in sufficiently complex layouts. The <sgmltag>&lt;rich:popup&gt;</sgmltag> component can be reattached to its original <acronym>DOM</acronym> element by setting <varname>domElementAttachment</varname> to either <literal>parent</literal> or <literal>form</literal>. + </para> + <para> + Embedded objects inserted into the <acronym>HTML</acronym> with the <sgmltag>&lt;embed&gt;</sgmltag> tag will typically be rendered in front of a <sgmltag>&lt;rich:popup&gt;</sgmltag> component. The <sgmltag>&lt;rich:popup&gt;</sgmltag> component can be forcibly rendered in front of these objects by setting <code><varname>overlapEmbedObjects</varname>="true"</code>. + </para> + </section> + + <section id="sect-Component_Reference-richpopup-Contents_of_the_pop-up"> + <title>Contents of the pop-up</title> + <para> + The <sgmltag>&lt;rich:popup&gt;</sgmltag> component can contain any other rich component just like a normal panel. + </para> + <para> + If the contents of the <sgmltag>&lt;rich:popup&gt;</sgmltag> component extend beyond the dimensions of the pop-up, they will be trimmed. However, the <sgmltag>&lt;rich:popup&gt;</sgmltag> component will expand to accommodate the contents if the <varname>trimOverlayedElements</varname> attribute is set to <literal>false</literal>. + </para> + </section> + + <section id="sect-Component_Reference-richpopup-Header_and_controls"> + <title>Header and controls</title> + <para> + A panel header and associated controls can be added to the <sgmltag>&lt;rich:popup&gt;</sgmltag> component through the use of facets. The <literal>header</literal> facet displays a title for the panel, and the <literal>controls</literal> facet can be customized to allow window controls such as a button for closing the pop-up. <xref linkend="exam-Component_Reference-richpopup-Header_and_controls" /> demonstrates the use of the facets. + </para> + <example id="exam-Component_Reference-richpopup-Header_and_controls"> + <title>Header and controls</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-richpopup-Header_and_controls"> + <title>Header and controls</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richpopup-Header_and_controls.png" format="PNG" /> + </imageobject> + <textobject> + <para> + The <sgmltag>&lt;rich:popup&gt;</sgmltag> component, rendered with a title header and a button control for closing the pop-up. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richpopup-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.popup</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlPopup</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.popup</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.popupRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.popupTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> - --> <section id="sect-Component_Reference-Panels_and_containers-richpanel"> <title><sgmltag>&lt;rich:panel&gt;</sgmltag></title> Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample =================================================================== --- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample (rev 0) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample 2010-08-18 07:00:26 UTC (rev 18745) @@ -0,0 +1,15 @@ +<a onclick="Richfaces.showModalPanel('pop');" href="#">Show pop-up</a> +... +<a4j:form> + <rich:popup id="pop" > + <f:facet name="header"> + <h:outputText value="The title of the panel" /> + </f:facet> + <f:facet name="controls"> + <h:graphicImage value="/pages/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('pop')" /> + </f:facet> + <p> + This is the content of the panel. + </p> + </rich:popup> +</a4j:form> Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample =================================================================== --- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample (rev 0) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample 2010-08-18 07:00:26 UTC (rev 18745) @@ -0,0 +1,6 @@ +<a onclick="Richfaces.showModalPanel('pop');" href="#">Show pop-up</a> +<a4j:form> + <rich:popup id="pop" > + <a onclick="Richfaces.hideModalPanel('pop');" href="#">Hide pop-up</a> + </rich:popup> +</a4j:form> Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopup-Header_and_controls.png =================================================================== (Binary files differ) Property changes on: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopup-Header_and_controls.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream