[richfaces-svn-commits] JBoss Rich Faces SVN: r18696 - in trunk/examples/richfaces-showcase/src/main/webapp/richfaces: jquery and 1 other directories.

Tue Aug 17 03:29:01 EDT 2010

Author: ilya_shaikovsky
Date: 2010-08-17 03:29:01 -0400 (Tue, 17 Aug 2010)
New Revision: 18696

Modified:
   trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dataTable/samples/tableStyling-sample.xhtml
   trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml
   trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/samples/jquery-sample.xhtml
Log:
https://jira.jboss.org/browse/RF-9080 -adjustments after component refactoring.

Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dataTable/samples/tableStyling-sample.xhtml
===================================================================

--- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dataTable/samples/tableStyling-sample.xhtml	2010-08-17 05:07:09 UTC (rev 18695)
+++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dataTable/samples/tableStyling-sample.xhtml	2010-08-17 07:29:01 UTC (rev 18696)
@@ -55,12 +55,12 @@
 			</rich:column>
 		</rich:dataTable>
 	</h:form>
-	<script>
-	$('.stable tr').mouseover(function(){$(this).addClass('active-row')});
-	$('.stable tr').mouseout(function(){$(this).removeClass('active-row')});
+	
+    <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
+    <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
+    <rich:jQuery selector=".stable tr" event="mouseover"
+        query="jQuery(this).addClass('active-row')"/>
+    <rich:jQuery selector=".stable tr" event="mouseout" 
+        query="jQuery(this).removeClass('active-row')"/>
 
-	$('.stable tr:odd').addClass('odd-row');
-	$('.stable tr:even').addClass('even-row');
-
-</script>
 </ui:composition>
\ No newline at end of file

Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml
===================================================================
--- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml	2010-08-17 05:07:09 UTC (rev 18695)
+++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml	2010-08-17 07:29:01 UTC (rev 18696)
@@ -3,7 +3,38 @@
 	xmlns:h="http://java.sun.com/jsf/html"
 	xmlns:f="http://java.sun.com/jsf/core"
 	xmlns:ui="http://java.sun.com/jsf/facelets">
+	<p>rich:jQuery integrates jQuery javascript framework into the
+	JavaServer Faces application. The component allows to apply the styles
+	and behavior to the DOM elements dynamically, including the result of
+	JSF components rendering.</p>
+	<p>The <b>selector</b> attribute defines an object or list of objects,
+	the query defined with the query attribute will be applied to.
+	And <b>query</b> attribute should be defined with valid JavaScript statements or jQuery api calls</p>
+		
+	<p>rich:jQuery can be used in next major modes:</p>
+	<ul>
+		<li>as a once time query applied immediately or on document ready
+		event</li>
+		<li>definition of event handler which bound to elements returned
+		by selector on some event.</li>
+		<li>as a javascript function that can be invoked from the custom
+		javascript</li>
+	</ul>
+	<p>The modes chosen with <b>timing</b>, <b>name </b>and <b>event </b>attributes that
+	can have the following options:</p>
+	<p><b>Timing</b></p>
+	<ul>
+		<li>immediate - applying the query immediately</li>
+		<li>domready - applying the query when the document is loaded.</li>
+	</ul>
+	<p><b>event </b>and <b>attachType </b>defined allows to bind the query to some
+	event of elements which returned by selector. "attachType" could be
+	"<i>live</i>", "<i>bind</i>" and "<i>one</i>".</p>
+	<p>Defining <b>name </b>attribute - causes <u>timing too be ignored</u> and
+	just named function to call from js to be created.</p>
 
+
+This demo shows how to attach the mouseover/mouseout events to the DOM objects. However the images below show how to make them enlarged.
 	<ui:include src="#{demoNavigator.sampleIncludeURI}" />
 	<ui:include src="/templates/includes/source-view.xhtml">
 		<ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" />

Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/samples/jquery-sample.xhtml
===================================================================
--- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/samples/jquery-sample.xhtml	2010-08-17 05:07:09 UTC (rev 18695)
+++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/samples/jquery-sample.xhtml	2010-08-17 07:29:01 UTC (rev 18696)
@@ -39,11 +39,8 @@
 	<rich:jQuery selector="#gallery img" query="addClass('pic-normal')" />
 	<rich:jQuery selector="#gallery img"
 		query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&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" query="stop().animate({width:'180px'})" />
-	<rich:jQuery name="normalPic" query="stop().animate({width:'120px'})" />
+	<rich:jQuery selector="#gallery img" event="mouseover"
+		query="jQuery(this).stop().animate({width:'180px'})" />
+	<rich:jQuery selector="#gallery img" event="mouseout"
+		query="jQuery(this).stop().animate({width:'120px'})" />
 </ui:composition>
\ No newline at end of file

