[richfaces-svn-commits] JBoss Rich Faces SVN: r18697 - in trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel: samples and 1 other directory.

[richfaces-svn-commits at lists.jboss.org]

Author: ilya_shaikovsky
Date: 2010-08-17 04:11:30 -0400 (Tue, 17 Aug 2010)
New Revision: 18697

Modified:
   trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml
   trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml
Log:
</a4j:outputPanel>

Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml
===================================================================
--- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml	2010-08-17 07:29:01 UTC (rev 18696)
+++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml	2010-08-17 08:11:30 UTC (rev 18697)
@@ -6,31 +6,46 @@
 	xmlns:a4j="http://richfaces.org/a4j"
 	xmlns:rich="http://richfaces.org/rich">
 	<style>
-.rf-tp-i {
-	border: 1px solid #{ richSkin.panelBorderColor
+.rf-tgp-i {
+	border: 1px solid #{richSkin.panelBorderColor};
+	padding:5px;
 }
-}
+.tabDiv {
+	border: 1px solid #{   richSkin.panelBorderColor};
+	cursor:pointer;
+	width:110px;
+	padding-left:5px;
+	float:left;
+	}
 </style>
 	<h:form>
-		<h:commandLink value="Toggle Panel Item 1">
-			<rich:toggleControl forPanel="panel1" targetItem="item1" />
-		</h:commandLink>
-		<h:outputText value=" | " />
-		<h:commandLink value="Toggle Panel Item 2">
-			<rich:toggleControl forPanel="panel1" targetItem="item2" />
-		</h:commandLink>
-		<rich:togglePanel id="panel1" activeItem="item1">
-			<rich:togglePanelItem name="item1" styleClass="rf-tp-i">
+		<rich:togglePanel id="panel1" activeItem="item1" render="tabs">
+			<rich:togglePanelItem name="item1" styleClass="rf-tgp-i">
 				<p>This toggle panel switches in Ajax mode. So only one active
 				item loaded to the client.</p>
 				<p>For now you are at Panel 1</p>
 			</rich:togglePanelItem>
-			<rich:togglePanelItem name="item2" styleClass="rf-tp-i">
+			<rich:togglePanelItem name="item2" styleClass="rf-tgp-i">
 				<p>After the second link click - panel changed active item to
 				the second one according to name specified in the
 				togglePanelBehavior</p>
 				<p>For now you are at Panel 2</p>
 			</rich:togglePanelItem>
 		</rich:togglePanel>
+		<a4j:outputPanel id="tabs">
+		<a4j:outputPanel layout="block" styleClass="tabDiv">
+			<rich:toggleControl event="click" forPanel="panel1"
+				targetItem="item1" />
+			<h:outputText value="Toggle Panel Item 1"
+				style="#{rich:findComponent('panel1').activeItem == 'item1' ? 'font-weight:bold' : 'font-weight:normal'}" />
+		</a4j:outputPanel>
+		<a4j:outputPanel layout="block" styleClass="tabDiv">
+			<rich:toggleControl event="click" forPanel="panel1"
+				targetItem="item2" />
+			<h:outputText value="Toggle Panel Item 2"
+				style="#{rich:findComponent('panel1').activeItem == 'item2' ? 'font-weight:bold' : 'font-weight:normal'}" />
+		</a4j:outputPanel>
+		</a4j:outputPanel>
+		<br clear="both"/> 
 	</h:form>
 </ui:composition>
\ No newline at end of file

Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml
===================================================================
--- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml	2010-08-17 07:29:01 UTC (rev 18696)
+++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml	2010-08-17 08:11:30 UTC (rev 18697)
@@ -5,6 +5,18 @@
 	xmlns:ui="http://java.sun.com/jsf/facelets">
 
 <ui:composition>
+<p><b>togglePanel</b> is a base component for all switchable panels in RichFaces. It renders 
+sequence of states that can be switched (toggled) by a behavior 
+called <b>toggleControl</b>. rich:togglePanel has no default appearance. You can define it using 
+the set of child <b>togglePanelItem's</b> with any given content inside. </p>
+<p> <b>switchType</b> attribute defines the strategy of switching. The possible values for this attributes are:</p>
+<ul>
+<li><b>client</b> - switching happens on the client without any request to the server. The jsf form is not required in this mode</li>
+<li><b>ajax</b> - when states are switched, the content of new states comes from the server in Ajax way.</li>
+<li><b>server</b> - the whole page is reloaded when states are switched</li>
+</ul>
+<p>As the component not provides any predefined layout it could be used for creation of any kind of switchable panels easilly.
+Here is the sample of simplest tabbed pane organized using that component:</p>
 	<ui:include src="#{demoNavigator.sampleIncludeURI}" />
 	<ui:include src="/templates/includes/source-view.xhtml">
 		<ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" />