You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beehive.apache.org by do...@apache.org on 2005/08/31 21:47:27 UTC
svn commit: r265563 - in
/beehive/trunk/docs/forrest/release/src/documentation:
content/xdocs/netui/tagsFormRepeating.xml
resources/images/repeatCheckBox.png resources/images/repeatRadioButton.png
Author: dolander
Date: Wed Aug 31 12:47:22 2005
New Revision: 265563
URL: http://svn.apache.org/viewcvs?rev=265563&view=rev
Log:
Finish up the Repeating Form Controls topic
Added:
beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatCheckBox.png (with props)
beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatRadioButton.png (with props)
Modified:
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml
Modified: beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml?rev=265563&r1=265562&r2=265563&view=diff
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml (original)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml Wed Aug 31 12:47:22 2005
@@ -7,7 +7,7 @@
<body>
<section id="Intro">
<title>Introduction</title>
- <p> The three NetUI group tags offer a repeating modes which increase the control
+ <p> The three NetUI group tags offer a repeating mode that increase the control
the developer has over their output. For the <code><netui:checkBoxGroup></code>
and the <code><netui:radioButtonGroup</code> the control extends to the layout of the resulting
markup. For the <code><netui:select></code> the developer can control the order of
@@ -28,15 +28,16 @@
information see the <a href="site:databinding_container">data binding container implicit object</a>
topic.
</p>
- <p> This gives the developer more ability to control the layout and style assocated with the options
+ <p> This gives the developer more ability to control the layout and style associated with the options
when they are using an <code>optionsDataSource</code>. Below are example of both the CheckBoxGroup
and the RadioButtonGroup.
</p>
<section id="CheckBoxGroup">
<title>CheckBoxGroup</title>
<p> This example will create a horizontal layout for a set of checkboxes. Individual styles
- will be applied to the labels of the checkbox. The layout is done using a table.
+ will be applied to the labels of the checkbox. The layout is done using an HTML table.
</p>
+ <p><img src="images/repeatCheckBox.png" alt="CheckBoxGroup with horizontal layout"/></p>
<p>In the JSP fragment below, there is a <code><netui:checkBoxGroup></code> that is bound
to an <code>optionsDataSource</code> in the page flow. The <code>optionsDataSource</code>
is an array of a class that contains the style, label value and option value for each
@@ -44,7 +45,7 @@
all the binding expressions start with <code>${container.item.XXX}</code>. The body will be
repeated for each element in the <code>optionsDataSource</code>.
</p>
- <p><strong>NOTE:</strong> The <code>dataSource</code>
+ <p><strong>Note:</strong> The <code>dataSource</code>
also directly binds to a page flow variable. Typically, the <code>dataSource</code>
would bind to an <code>actionForm</code> variable.
</p>
@@ -182,7 +183,8 @@
layout of the radio buttons is vertical. For a detailed discussion, you should
read that example.
</p>
- <p> Below is a JSP fragment that will layout a RadioButtonGroup in a table vertically.
+ <p><img src="images/repeatRadioButton.png" alt="RadioButtonGroup with vertical layout"/></p>
+ <p> Below is a fragment of a JSP that will layout a RadioButtonGroup in a table vertically.
All of the options have an individually applied style. Notice that the
<code>repeater</code> attribute is set on the <code><netui:radioButtonGroup></code>
tag to repeat over the items defined in the <code>optionsDataSource</code>.
@@ -251,32 +253,228 @@
</table>
<section id="selectExample">
<title>Select Example</title>
- <p> The following example is a complex Select that controls both the order and how
- each of the <code><option></code> elements are rendered.
+ <p> The following example is a complex Select control <code><netui:select></code>
+ that controls both the order and how each of the HTML <code><optidon></code>
+ elements are rendered. The source for the JSP is followed by the controller.
+ </p>
+ <p><strong>Note:</strong> The select box posts its value back to the page
+ flow. The typical use would be to post a value back through a <code>FormData</code>
+ subclass.
</p>
+ <p><strong>index.jsp</strong></p>
<source><![CDATA[
-<netui:select dataSource="pageFlow.results1" defaultValue="default Value"
- optionsDataSource="${pageFlow.opts}" repeater="true" size="6"
- repeatingOrder="null, default, option"
- multiple="true" nullable="true">
- <c:if test="${container.metadata.optionStage}">
- <netui:selectOption repeatingType="option"
- value="${container.item.optionValue}" styleClass="normalAttr">
- <netui:span value="${container.item.name}" />
- </netui:selectOption>
- </c:if>
- <c:if test="${container.metadata.defaultStage}">
- <netui:selectOption repeatingType="default"
- value="${container.item}" styleClass="normalAttr">
- <netui:span value="${container.item}" />
- </netui:selectOption>
- </c:if>
- <netui:selectOption repeatingType="null" value="null-opt"
- styleClass="normalAttr">
- <netui:span value="[Nothing]" />
- </netui:selectOption>
-</netui:select>
+<%@ page language="java" contentType="text/html;charset=UTF-8"%>
+<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0" prefix="netui"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<netui:html>
+ <head>
+ <title>Order Repeating Select</title>
+ <style type="text/css">
+ .normalAttr {color: #cc0099;font-family:Verdana; font-size:8pt;margin:0,0,0,0;}
+ </style>
+ </head>
+ <netui:body>
+ <h4>Order Repeating Select</h4>
+ <p style="color:green">This example demonstrates using a repeating select.
+ </p>
+ <netui:form action="post">
+ <netui:select dataSource="pageFlow.results" defaultValue="default Value"
+ optionsDataSource="${pageFlow.opts}" repeater="true"
+ repeatingOrder="null, default, option" nullable="true">
+ <c:if test="${container.metadata.optionStage}">
+ <netui:selectOption repeatingType="option"
+ value="${container.item.optionValue}" styleClass="normalAttr">
+ ${container.item.name}
+ </netui:selectOption>
+ </c:if>
+ <c:if test="${container.metadata.defaultStage}">
+ <netui:selectOption repeatingType="default"
+ value="${container.item}" styleClass="normalAttr">
+ ${container.item}
+ </netui:selectOption>
+ </c:if>
+ <netui:selectOption repeatingType="null" value="null-opt"
+ styleClass="normalAttr">
+ [Nothing]
+ </netui:selectOption>
+ </netui:select>
+ <p><netui:button>Submit</netui:button></p>
+ </netui:form>
+ </netui:body>
+</netui:html>
]]></source>
+ <p> The <code><netui:select></code> defines the <code>dataSource</code>,
+ <code>defaultValue</code>, and an <code>optionsDataSource</code>. These may
+ all be used to add values to the displayed options. In addition, the "null"
+ option is also set because the <code>nullable</code> attribute is set to <code>true</code>.
+ These are the four sources of options. The <code>repeater</code> attribute is set
+ to <code>true</code>. For this reason, the body of the select will be repeated
+ for each option to be rendered. Finally, the order of the options is specified
+ using the <code>repeatingOrder</code> attribute. This is a comma separated list
+ of the stage names from the table above. In this case, the order of the option
+ will be "null", "default, "option" and the "dataSource" will not be displayed.
+ </p>
+ <source>
+<netui:select dataSource="pageFlow.results" defaultValue="default Value"
+ optionsDataSource="${pageFlow.opts}" repeater="true"
+ <strong>repeatingOrder="null, default, option"</strong> nullable="true">
+ </source>
+ <p> The example uses JSTL logic tags to control the evaluation of expressions for each of the
+ stages. To include the JSTL core use the following tag library declaration in the JSP.
+ </p>
+ <source>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+ </source>
+ <p>The body of the <code><netui:select></code> will be evaluted once for each
+ option to be rendered. In the body, we use the JSTL <code>if</code> tag to control
+ the evalutation of each option. This is done to prevent expression evaluation errors
+ when the JSP EL expressions are being evalated for each case. In the <code>container</code>
+ implicit object, the current stage name is exposed within the <code>metadata</code>. There
+ is a boolean property for each stage that is true only when options for that stage are being
+ generated. These boolean properties are <code>optionStage</code>, <code>defaultStage</code>,
+ <code>dataSourceStage</code>, and <code>nullStage</code>.
+ </p>
+ <source>
+<c:if test="${container.metadata.optionStage}">
+ <netui:selectOption repeatingType="option"
+ value="${container.item.optionValue}" styleClass="normalAttr">
+ ${container.item.name}
+ </netui:selectOption>
+</c:if>
+<c:if test="${container.metadata.defaultStage}">
+ <netui:selectOption repeatingType="default"
+ value="${container.item}" styleClass="normalAttr">
+ ${container.item}
+ </netui:selectOption>
+</c:if>
+<netui:selectOption repeatingType="null" value="null-opt"
+ styleClass="normalAttr">
+ [Nothing]
+</netui:selectOption>
+ </source>
+ <p>
+ The following JSTL <code>if</code> tag will only all the code within the tag to
+ be evaluated when the <code>optionsDataSource</code> is being evaluated. This allows
+ the expressions used to set the properties to be evaluated against a known type and allows
+ other stages to use different types.
+ </p>
+ <source>
+<c:if test="${container.metadata.optionStage}">
+ ...
+</c:if>
+ </source>
+ <p> Within the JSTL <code>if</code> tag, there is a <code><netui:selectOption</code>.
+ The option must identify which stage is being run; this is done by
+ setting the <code>repeatingType</code> attribute to the stage name. The rest of the
+ values are set using the <code>container</code> implicit object. This is set to
+ each item defined for that stage. In this case, it will iterate over the
+ <code>optionsDataSource</code>.
+ </p>
+ <source>
+<netui:selectOption <strong>repeatingType="option"</strong>
+ value="${container.item.optionValue}" styleClass="normalAttr">
+ ${container.item.name}
+</netui:selectOption>
+ </source>
+ <p> The option for the nullable value does not contain any expressions and therefore
+ does not appear inside a JSTL <code>if</code> tag. It will only render and option
+ when the stage becomes <code>null</code> and will be ignored in for all other options.
+ </p>
+ <source>
+<netui:selectOption repeatingType="null" value="null-opt"
+ styleClass="normalAttr">
+ [Nothing]
+</netui:selectOption>
+ </source>
+ <p><strong>Controller.jpf</strong></p>
+ <source>
+package select;
+
+import org.apache.beehive.netui.pageflow.PageFlowController;
+import org.apache.beehive.netui.pageflow.Forward;
+import org.apache.beehive.netui.pageflow.annotations.Jpf;
+
+@Jpf.Controller(
+ simpleActions={
+ @Jpf.SimpleAction(name="begin", path="index.jsp")
+ },
+ multipartHandler=Jpf.MultipartHandler.memory
+)
+public class Controller extends PageFlowController
+{
+ private Options[] opts;
+ private String results;
+
+ public Options[] getOpts()
+ {
+ return opts;
+ }
+
+ public void setOpts(Options[] opts)
+ {
+ this.opts = opts;
+ }
+
+ public String getResults()
+ {
+ return results;
+ }
+ public void setResults(String value)
+ {
+ this.results = value;
+ }
+
+ protected void onCreate()
+ {
+ // initialize the opts
+ opts = new Options[3];
+ opts[0] = new Options("Option One","opt-1");
+ opts[1] = new Options("Option Two","opt-2");
+ opts[2] = new Options("Option Three","opt-3");
+ }
+
+ @Jpf.Action(
+ forwards = {
+ @Jpf.Forward(
+ name = "index",
+ path = "Results.jsp")
+ })
+ protected Forward post()
+ {
+ return new Forward("index");
+ }
+
+ public static class Options implements java.io.Serializable {
+ private String _name;
+ private String _optionValue;
+
+ public Options(String name, String value) {
+ _name = name;
+ _optionValue = value;
+ }
+
+ public void setName(String name) {
+ _name = name;
+ }
+ public String getName() {
+ return _name;
+ }
+
+ public void setOptionValue(String optionValue) {
+ _optionValue = optionValue;
+ }
+ public String getOptionValue() {
+ return _optionValue;
+ }
+ }
+}
+ </source>
+ <p>The page flow controller is a simple controller that contains the properties
+ exposing the options and a property that will be set when the form is posted.
+ The options are build in the <code>onCreate</code> method. For the
+ <code>optionsDataSource</code> each options is defined through an instance
+ of the <code>Options</code> class.
+ </p>
</section>
</section>
</body>
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatCheckBox.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatCheckBox.png?rev=265563&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatCheckBox.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatRadioButton.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatRadioButton.png?rev=265563&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/repeatRadioButton.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream