[richfaces-svn-commits] JBoss Rich Faces SVN: r18530 - in branches/development/docs/Component_Reference/src/main/docbook/en-US: extras and 1 other directory.

Author: SeanRogers Date: 2010-08-10 03:16:02 -0400 (Tue, 10 Aug 2010) New Revision: 18530 Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml Log: Updated rich:jQuery Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml 2010-08-09 23:44:47 UTC (rev 18529) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml 2010-08-10 07:16:02 UTC (rev 18530) @@ -57,9 +57,133 @@ The <sgmltag>&lt;rich:jQuery&gt;</sgmltag> component applies styles and custom behavior to both <acronym>JSF</acronym> (JavaServer Faces) objects and regular <acronym>DOM</acronym> (Document Object Model) objects. It uses the <phrase>jQuery</phrase> JavaScript framework to add functionality without conflicting with the <filename>prototype.js</filename> library. </para> <para> - The query triggered by the <sgmltag>&lt;rich:jQuery&gt;</sgmltag> component is specified using the <varname>query</varname> attribute. Any objects or lists of objects used in the query are specified using the <varname>selector</varname> attribute. The <varname>selector</varname> attribute uses syntax defined by the <orgname>World Wide Web Consortium (<acronym>W3C</acronym>)</orgname> for the <acronym>CSS</acronym> rule selector. + The query triggered by the <sgmltag>&lt;rich:jQuery&gt;</sgmltag> component is specified using the <varname>query</varname> attribute. </para> <para> + Any objects or lists of objects used in the query are specified using the <varname>selector</varname> attribute. The <varname>selector</varname> attribute references objects using the following method: + </para> + <itemizedlist> + <listitem> + <para> + The <varname>selector</varname> attribute can refer to the <varname>id</varname> attribute of any JSF component or client. + </para> + </listitem> + <listitem> + <para> + If the <varname>selector</varname> attribute does not match the <varname>id</varname> attribute of any JSF components or clients on the page, it instead uses syntax defined by the <orgname>World Wide Web Consortium (<acronym>W3C</acronym>)</orgname> for the <acronym>CSS</acronym> rule selector. <xref linkend="exam-Component_Reference-richjQuery-Example_selector_values" /> shows a list of examples of the selector syntax. Refer to the syntax specification at <ulink url="http://www.w3.org/TR/CSS2/selector.html">http://www.w3.... for full details. + </para> + <example id="exam-Component_Reference-richjQuery-Example_selector_values"> + <title>Example selector values</title> + <variablelist> + <varlistentry> + <term><code>p[a]</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements which contain an <sgmltag>&lt;a&gt;</sgmltag> element are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p.foo[a]</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements of class <literal>foo</literal> which contain an <sgmltag>&lt;a&gt;</sgmltag> element are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p#secret</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements with an <literal>id</literal> identifier of <literal>secret</literal> are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>ul/li</code></term> + <listitem> + <para> + All <sgmltag>&lt;li&gt;</sgmltag> elements contained in <sgmltag>&lt;ul&gt;</sgmltag> elements are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>input[@name=bar]</code></term> + <listitem> + <para> + All <sgmltag>&lt;input&gt;</sgmltag> elements with a <varname>name</varname> attribute whose value is <literal>bar</literal> are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>input[@type=radio][@checked]</code></term> + <listitem> + <para> + All <sgmltag>&lt;input&gt;</sgmltag> elements with both a <code><varname>type</varname>="radio"</code> attribute and a <code><varname>checked</varname></code> attribute are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p,span,td</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements, <sgmltag>&lt;span&gt;</sgmltag> elements, and <sgmltag>&lt;td&gt;</sgmltag> elements are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p span</code></term> + <listitem> + <para> + All <sgmltag>&lt;span&gt;</sgmltag> elements that are direct or indirect children of <sgmltag>&lt;p&gt;</sgmltag> elements are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p//span</code></term> + <listitem> + <para> + All <sgmltag>&lt;span&gt;</sgmltag> elements that are direct or indirect children of <sgmltag>&lt;p&gt;</sgmltag> elements are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p/../span</code></term> + <listitem> + <para> + All <sgmltag>&lt;span&gt;</sgmltag> elements that are grandchildren of <sgmltag>&lt;p&gt;</sgmltag> elements are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p[@foo^=bar]</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements that contain a <varname>foo</varname> attribute with a textual value <emphasis>beginning</emphasis> with <literal>bar</literal> are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p[@foo$=bar]</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements that contain a <varname>foo</varname> attribute with a textual value <emphasis>ending</emphasis> with <literal>bar</literal> are selected. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><code>p[@foo*=bar]</code></term> + <listitem> + <para> + All <sgmltag>&lt;p&gt;</sgmltag> elements that contain a <varname>foo</varname> attribute with a textual value that contains the sub-string <literal>bar</literal> in any position are selected. + </para> + </listitem> + </varlistentry> + </variablelist> + </example> + </listitem> + </itemizedlist> + <para> The query can be triggered in three different ways. Use the <varname>timing</varname> attribute to specify the point at which the query is triggered: </para> <variablelist> @@ -91,6 +215,22 @@ </listitem> </varlistentry> </variablelist> + <example id="exam-Component_Reference-richjQuery-richjQuery_example"> + <title><sgmltag>&lt;rich:jQuery&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <para> + In the example, the selector picks out the odd <sgmltag>&lt;tr&gt;</sgmltag> elements that are children of the element with an <code><varname>id</varname>="customlist"</code> attribute. The query <code>addClass(odd)</code> is then performed on the selection during page loading (<literal>onload</literal>) such that the <literal>odd</literal> CSS class is added to the selected elements. + </para> + </example> + <!-- TODO + <para> + Avoid syntax confusion. + </para> + <example id="exam-Component_Reference-richjQuery-Avoiding_syntax_confusion"> + <title>Avoiding syntax confusion</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + --> </section> <!-- TODO not in M2 --> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample 2010-08-10 07:16:02 UTC (rev 18530) @@ -0,0 +1,6 @@ +<h:form id="form"> + <h:panelGrid id="menu"> + <h:graphicImage value="pic1.jpg" /> + <h:graphicImage value="pic2.jpg" /> + </h:panelGrid> +</h:form> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample 2010-08-10 07:16:02 UTC (rev 18530) @@ -0,0 +1,5 @@ +<rich:dataTable id="customList" ... > + ... +</rich:dataTable> + +<rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" />