Author: SergeySmirnov Date: 2007-10-16 19:49:50 -0400 (Tue, 16 Oct 2007) New Revision: 3413 Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/zebra.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic1.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic2.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic3.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic4.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic5.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic6.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic7.jpg trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic8.jpg Modified: trunk/samples/jQuery-sample/src/main/webapp/WEB-INF/web.xml trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/fishEye.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml trunk/ui/jQuery/src/main/config/component/jQuery.xml Log: jQuery doc and examples Modified: trunk/samples/jQuery-sample/src/main/webapp/WEB-INF/web.xml =================================================================== --- trunk/samples/jQuery-sample/src/main/webapp/WEB-INF/web.xml 2007-10-16 23:42:15 UTC (rev 3412) +++ trunk/samples/jQuery-sample/src/main/webapp/WEB-INF/web.xml 2007-10-16 23:49:50 UTC (rev 3413) @@ -37,7 +37,7 @@ </context-param> <context-param> <param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name> - <param-value>false</param-value> + <param-value>true</param-value> </context-param> <filter> <display-name>Ajax4jsf Filter</display-name> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/fishEye.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/fishEye.xhtml 2007-10-16 23:42:15 UTC (rev 3412) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/fishEye.xhtml 2007-10-16 23:49:50 UTC (rev 3413) @@ -4,10 +4,49 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> + + <style type="text/css"> + .pic-normal { + width: 120px; + border: 2px solid #ACBECE; + + } + .wrap1 { + width:190px; + height: 130px; + float: left; + } + </style> + <rich:separator lineType="solid" height="1" /> + <h:outputText value="This demo shows how to attach the mouseover/mouseout events to the + DOM objects. Hower the images below to make them enlarged." /> - // TODO jQuery example + <rich:separator lineType="solid" height="1" style="padding-bottom:10px;" /> + + <a4j:outputPanel id="gallery"> + <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic2.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic3.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic4.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic5.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic6.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic7.jpg" /> + <h:graphicImage value="/richfaces/jQuery/images/pic8.jpg" /> + </a4j:outputPanel> + + <br style="clear:both" /> - <rich:separator height="1" style="padding-top:10px" /> + + <rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/> + <rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;')" /> + <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/> + <rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/> + + <rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'180px'})" /> + <rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px'})" /> + + + </ui:composition> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/zebra.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/zebra.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/examples/zebra.xhtml 2007-10-16 23:49:50 UTC (rev 3413) @@ -0,0 +1,71 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:a4j="http://richfaces.org/a4j" + xmlns:rich="http://richfaces.org/rich"> + + <style type="text/css"> + .odd-row { + background-color: #ECF3FE; + } + .even-row { + background-color: #FCFFFE; + } + .active-row { + background-color: #FFEBDA; + } + + </style> + + + <rich:separator lineType="solid" height="1" /> + + <h:outputText value="This demo shows how just four rich:jQuery queries allow to + add zebra-style to the table and highlight rows under the mouse cursor." /> + + + <rich:dataTable width="483" id="carList" rows="15" + value="#{dataTableScrollerBean.allCars}" var="category"> + <f:facet name="header"> + <rich:columnGroup> + <h:column> + <h:outputText styleClass="headerText" value="Make" /> + </h:column> + <h:column> + <h:outputText styleClass="headerText" value="Model" /> + </h:column> + <h:column> + <h:outputText styleClass="headerText" value="Price" /> + </h:column> + <h:column> + <h:outputText styleClass="headerText" value="Mileage" /> + </h:column> + </rich:columnGroup> + </f:facet> + + <h:column> + <h:outputText value="#{category.make}" /> + </h:column> + <h:column> + <h:outputText value="#{category.model}" /> + </h:column> + <h:column> + <h:outputText value="#{category.price}" /> + </h:column> + <h:column> + <h:outputText value="#{category.mileage}" /> + </h:column> + + </rich:dataTable> + + <rich:jQuery selector="#carList tr:odd" query="addClass('odd-row')" /> + <rich:jQuery selector="#carList tr:even" query="addClass('even-row')" /> + <rich:jQuery selector="#carList tr" + query="mouseover(function(){jQuery(this).addClass('active-row')})"/> + <rich:jQuery selector="#carList tr" + query="mouseout(function(){jQuery(this).removeClass('active-row')})"/> + + + <rich:separator height="1" style="padding-top:10px" /> +</ui:composition> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic1.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic1.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic2.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic2.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic3.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic3.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic4.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic4.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic5.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic5.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic6.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic6.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic7.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic7.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic8.jpg =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/images/pic8.jpg ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/usage.xhtml 2007-10-16 23:42:15 UTC (rev 3412) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jQuery/usage.xhtml 2007-10-16 23:49:50 UTC (rev 3413) @@ -25,9 +25,9 @@ <div class="sample-container" > - <ui:include src="/richfaces/jQuery/examples/fishEye.xhtml"/> + <ui:include src="/richfaces/jQuery/examples/zebra.xhtml"/> <ui:include src="/templates/include/sourceview.xhtml"> - <ui:param name="sourcepath" value="/richfaces/jQuery/examples/fishEye.xhtml"/> + <ui:param name="sourcepath" value="/richfaces/jQuery/examples/zebra.xhtml"/> </ui:include> </div> <p> @@ -51,6 +51,14 @@ The selector attribute defines an object or list of objects, the query defined with the query attribute will be applied to. </p> + <div class="sample-container" > + + <ui:include src="/richfaces/jQuery/examples/fishEye.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/jQuery/examples/fishEye.xhtml"/> + </ui:include> + </div> + </ui:define> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml 2007-10-16 23:42:15 UTC (rev 3412) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml 2007-10-16 23:49:50 UTC (rev 3413) @@ -19,7 +19,7 @@ <p>The following example shown how the date and time is updated on the page based on the data taken from the server. To turn off polling, press "Stop Polling" button.</p> - <p><b>Note: </b>polling is automatically disabled after one minute of working.</p> + <p><b>Note: </b>polling is automatically disabled in this demo after one minute of working.</p> <div class="sample-container"> Modified: trunk/ui/jQuery/src/main/config/component/jQuery.xml =================================================================== --- trunk/ui/jQuery/src/main/config/component/jQuery.xml 2007-10-16 23:42:15 UTC (rev 3412) +++ trunk/ui/jQuery/src/main/config/component/jQuery.xml 2007-10-16 23:49:50 UTC (rev 3413) @@ -29,9 +29,7 @@ <name>name</name> <classname>java.lang.String</classname> <description> - The name of a function that will be generated to execute a query. If the name is - not defined explicitly, it is pre-generated from the id of the component where - colon is replaced with underscore and "jq_" prefix is added. The "name" attribute is required + The name of a function that will be generated to execute a query. The "name" attribute is required if "timing" attribute equals to "onJScall" </description> <defaultvalue>""</defaultvalue> @@ -40,8 +38,8 @@ <name>selector</name> <classname>java.lang.String</classname> <description> - Selector for a query. The component id as well as any html element id might - be used inside. + Selector for query. The "selector" attribute uses defined by w3c + consortium syntax for CSS rule selector with some jQuery extensions. </description> <defaultvalue>""</defaultvalue> </property>