[richfaces-svn-commits] JBoss Rich Faces SVN: r1045 - trunk/docs/userguide/en/included.

Author: vkorluzhenko Date: 2007-06-06 10:19:17 -0400 (Wed, 06 Jun 2007) New Revision: 1045 Modified: trunk/docs/userguide/en/included/modalPanel.xml Log: added details of usage Modified: trunk/docs/userguide/en/included/modalPanel.xml =================================================================== --- trunk/docs/userguide/en/included/modalPanel.xml 2007-06-06 13:31:40 UTC (rev 1044) +++ trunk/docs/userguide/en/included/modalPanel.xml 2007-06-06 14:19:17 UTC (rev 1045) @@ -8,54 +8,54 @@ </keywordset> </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> + <table> + <title>Component identification parameters</title> - <entry>Value</entry> - </row> - </thead> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> - <tbody> - <row> - <entry>component-type</entry> + <entry>Value</entry> + </row> + </thead> - <entry>org.richfaces.ModalPanel</entry> - </row> + <tbody> + <row> + <entry>component-type</entry> - <row> - <entry>component-class</entry> + <entry>org.richfaces.ModalPanel</entry> + </row> - <entry>org.richfaces.component.html.ModalPanel</entry> - </row> + <row> + <entry>component-class</entry> - <row> - <entry>component-family</entry> + <entry>org.richfaces.component.html.ModalPanel</entry> + </row> - <entry>org.richfaces.ModalPanel</entry> - </row> + <row> + <entry>component-family</entry> - <row> - <entry>renderer-type</entry> + <entry>org.richfaces.ModalPanel</entry> + </row> - <entry>org.richfaces.ModalPanelRenderer</entry> - </row> + <row> + <entry>renderer-type</entry> - <row> - <entry>tag-class</entry> + <entry>org.richfaces.ModalPanelRenderer</entry> + </row> - <entry>org.richfaces.taglib.ModalPanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ModalPanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> <title>Creating the Component with a Page Tag</title> @@ -90,9 +90,8 @@ <section> <title>Details of Usage</title> - <para>The component is defined as a panel with some content inside that - displays its content as a modal dialog. To call it and to close it, the - client API for the window is used.</para> + <para>The component is defined as a panel with some content inside that displays its content as + a modal dialog. To call it and to close it, the client API for the window is used.</para> <table> <title>Functions description</title> @@ -122,11 +121,15 @@ </tgroup> </table> -<important><title>New:</title><para>In order to avoid a bug in IE, the root node of the dialog is moved on the top of a DOM tree. However, you should have a separate form inside the modal panel if you want to perform submits from this panel. -</para></important> + <important> + <title>New:</title> + <para>In order to avoid a bug in IE, the root node of the dialog is moved on the top of a DOM + tree. However, you should have a separate form inside the modal panel if you want to perform + submits from this panel. </para> + </important> - <para>It&apos;s possible to add a &quot;header&quot; facet to the component to set the - content for the header.</para> + <para>It&apos;s possible to add a &quot;header&quot; facet to the component to set + the content for the header.</para> <programlisting role="XML">... &lt;form jsfc="h:form" id="form"&gt; @@ -142,22 +145,21 @@ ... </programlisting> - <para>This defines a window with a particular size and ID. It includes one - "Open" link. Clicking on this link makes the modal window content - appear.</para> + <para>This defines a window with a particular size and ID. It includes one "Open" link. Clicking + on this link makes the modal window content appear.</para> <figure> <title>ModalPanel with links</title> <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel2.gif" /> + <imagedata fileref="images/modalpanel2.gif"/> </imageobject> </mediaobject> </figure> - <para>A facet named &quot;controls&quot; can be added to the component to place - control elements on a header.</para> + <para>A facet named &quot;controls&quot; can be added to the component to place control + elements on a header.</para> <programlisting role="XML"> &lt;rich:modalPanel id="panel"&gt; @@ -176,50 +178,57 @@ <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel3.gif" /> + <imagedata fileref="images/modalpanel3.gif"/> </imageobject> </mediaobject> </figure> - <para>To manage the placement of inserted windows, use the <emphasis - role="italic"> + <para>To manage the placement of inserted windows, use the <emphasis role="italic"> <property>"zindex"</property> - </emphasis> attribute that is similar to the standard HTML attribute and - can specify window placement relative to the content.</para> + </emphasis> attribute that is similar to the standard HTML attribute and can specify window + placement relative to the content.</para> - <para>To manage window placement relative to the component, there are - <emphasis role="italic"> + <para>To manage window placement relative to the component, there are <emphasis role="italic"> <property>"left"</property> </emphasis> and <emphasis role="italic"> <property>"top"</property> - </emphasis> attributes defining a window shifting relative to the - top-left corner of the window.</para> + </emphasis> attributes defining a window shifting relative to the top-left corner of the + window.</para> - <para>Modal windows can also support resize and move operations on the - client side. To allow or disallow these operations, set the <emphasis - role="italic"> + <para>Modal windows can also support resize and move operations on the client side. To allow or + disallow these operations, set the <emphasis role="italic"> <property>"resizeable"</property> </emphasis> and <emphasis role="italic"> <property>"moveable"</property> - </emphasis> attributes to &quot;true&quot; or &quot;false&quot; values. Window resizing is - also limited by <emphasis role="italic"> + </emphasis> attributes to &quot;true&quot; or &quot;false&quot; values. Window + resizing is also limited by <emphasis role="italic"> <property>"minWidth"</property> </emphasis> and <emphasis role="italic"> <property>"minHeight"</property> </emphasis> attributes specifying the minimal window sizes.</para> + <para> You can pass your parameters during modalPanel opening or closing. This passing could be + performed in the following way: </para> + <programlisting role="JAVA">Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});</programlisting> + <para> Thus, except the standard modalPanel parameters you can pass any of your own parameters. </para> + <para> Also modalPanel allows to handle its own opening and closing events on the client side. + The &quot;onshow&quot; and &quot;onclose&quot; attributes are used in this + case. </para> + <para> The following example shows how on the client side to define opening and closing event + handling in such a way that your own parameters could also be obtained: </para> + <programlisting role="JAVA">onshow="alert(event.parameters.param1)"</programlisting> + <para> Here, during modalPanel opening the value of a passing parameter is output. </para> + </section> <section> <title>Look-and-Feel Customization</title> - <para>For implementing skinability the components use a <emphasis - role="italic"> + <para>For implementing skinability the components use a <emphasis role="italic"> <property>style class redefinition method</property> - </emphasis>. Default style classes are mapped on <emphasis - role="italic"><property>skin parameters</property>.</emphasis></para> + </emphasis>. Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> - <para>There are two ways to redefine the appearance of all modal panels at - once:</para> + <para>There are two ways to redefine the appearance of all modal panels at once:</para> <itemizedlist> <listitem>Redefine the corresponding skin parameters</listitem> @@ -372,13 +381,12 @@ <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel4.gif" /> + <imagedata fileref="images/modalpanel4.gif"/> </imageobject> </mediaobject> </figure> - <para>The screenshot shows the classes names for defining different - elements.</para> + <para>The screenshot shows the classes names for defining different elements.</para> <table> <title>Class names</title> @@ -388,22 +396,22 @@ <row> <entry>rich-mpnl-pnl-h</entry> - <entry>This class defines the header style. It&apos;s applied to the - header elements of all panels.</entry> + <entry>This class defines the header style. It&apos;s applied to the header elements + of all panels.</entry> </row> <row> <entry>rich-mpnl-pnl-text</entry> - <entry>This class defines the header content style. It&apos;s applied - to the header elements of all panels.</entry> + <entry>This class defines the header content style. It&apos;s applied to the header + elements of all panels.</entry> </row> <row> <entry>rich-mpnl-pnl-body</entry> - <entry>This class defines the style for the content inside a - panel. It&apos;s applied to the elements inside panels.</entry> + <entry>This class defines the style for the content inside a panel. It&apos;s + applied to the elements inside panels.</entry> </row> <row> @@ -415,4 +423,4 @@ </tgroup> </table> </section> -</section> \ No newline at end of file +</section>