3:11 a.m.
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}"
/>