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 05:42:30 UTC
svn commit: r264932 - in
/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs:
netui/tagsFormRepeating.xml netui/tagsJavascript.xml site.xml
Author: dolander
Date: Tue Aug 30 20:41:58 2005
New Revision: 264932
URL: http://svn.apache.org/viewcvs?rev=264932&view=rev
Log:
Added a topic on the repeating HTML tags. There is still a bit of work
left here to document the select.
Added:
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml
Modified:
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsJavascript.xml
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/site.xml
Added: 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=264932&view=auto
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml (added)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsFormRepeating.xml Tue Aug 30 20:41:58 2005
@@ -0,0 +1,283 @@
+<!DOCTYPE document PUBLIC "-//APACHE//DTD Documentation V2.0//EN"
+ "http://forrest.apache.org/dtd/document-v20.dtd">
+<document>
+ <header>
+ <title>NetUI Repeating Form Control Tags</title>
+ </header>
+ <body>
+ <section id="Intro">
+ <title>Introduction</title>
+ <p> The three NetUI group tags offer a repeating modes which 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
+ the options and the <code>value</code> and <code>label</code> when an <code>optionsDataSource</code>
+ is being used.
+ </p>
+ <p> This is an advanced tag topic. For more information on the basic operations of these tags
+ see the <a href="site:pageflow_tag_formControls">NetUI Form Control Tags</a> topic.
+ </p>
+ </section>
+ <section id="GroupTags">
+ <title>CheckBoxGroup and RadioButtonGroup</title>
+ <p>This section demonstrates how to control the markup generated by both a <code><netui:checkBoxGroup></code>
+ and a <code><netui:radioButtonGroup></code>. Both tags have an attribute <code>repeater</code>
+ which when set to <code>true</code> turns the tag into a repeating tag. The tag will then loop
+ over each element found in the <code>optionsDataSource</code> and evaluate the tag's body against the item.
+ Before the body is evaluated, the implicit object <code>container</code> is setup. For more
+ 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
+ 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.
+ </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
+ element to be displayed in the group. Notice that inside the body of the <code>checkBoxGroup</code>
+ 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>
+ also directly binds to a page flow variable. Typically, the <code>dataSource</code>
+ would bind to an <code>actionForm</code> variable.
+ </p>
+ <source><![CDATA[
+<table>
+<caption class="normalAttr">CheckBox Group</caption>
+<tr><td>
+<netui:checkBoxGroup dataSource="pageFlow.results" optionsDataSource="${pageFlow.opts}"
+ repeater="true" >
+ <netui:span styleClass="${container.item.style}" value="${container.item.name}" />
+ <netui:checkBoxOption value="${container.item.optionValue}" />
+</netui:checkBoxGroup>
+</td></tr>
+</table>
+]]></source>
+ <p> The following style information is found in the JSP. These styles affect the
+ presentation of label output. This is done by setting the styles on the
+ <code><netui:span></code> tags that act as the labels for the generated
+ checkboxes.
+ </p>
+ <source><![CDATA[
+<style type="text/css">
+ .normalAttr {color: #cc0099;font-family:Verdana; font-size:8pt;margin:0,0,0,0;}
+ .normal {color: #cc9999;font-family:Verdana; font-size:8pt;margin:0,0,0,0;}
+ .normal2 {color: #00cc99;font-family:Verdana; font-size:8pt;margin:0,0,0,0;}
+ .normal3 {color: #99cc99;font-family:Verdana; font-size:8pt;margin:0,0,0,0;}
+</style>
+]]></source>
+ <p> Below is the page flow controller that supports the example above. In the
+ <code>onCreate</code> method, we initialize the <code>optionsDataSource</code>.
+ In addition, we provide a <code>java.lang.String[]</code> that will recieve the
+ results of posting the form back. Finally, an inner class defines a Java bean
+ that contains the information used by the options.
+ </p>
+ <source>
+package repeating;
+
+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")
+ }
+)
+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[] resultsOne)
+ {
+ this.results = resultsOne;
+ }
+
+ protected void onCreate()
+ {
+ // initialize the opts
+ opts = new Options[3];
+ opts[0] = new Options("Option One","opt-1", "normal");
+ opts[1] = new Options("Option Two","opt-2", "normal2");
+ opts[2] = new Options("Option Three","opt-3", "normal3");
+ }
+
+ /**
+ * @jpf:action
+ * @jpf:forward name="index" path="Results.jsp"
+ */
+ @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;
+ private String _style;
+
+ public Options(String name, String value, String style) {
+ _name = name;
+ _optionValue = value;
+ _style = style;
+ }
+
+ public void setName(String name) {
+ _name = name;
+ }
+ public String getName() {
+ return _name;
+ }
+
+ public void setOptionValue(String optionValue) {
+ _optionValue = optionValue;
+ }
+ public String getOptionValue() {
+ return _optionValue;
+ }
+
+ public void setStyle(String style) {
+ _style = style;
+ }
+ public String getStyle() {
+ return _style;
+ }
+ }
+}
+</source>
+ </section>
+ <section id="RadioButtonGroup">
+ <title>RadioButtonGroup</title>
+ <p> <strong>Note:</strong> This example is very similar to the previous example using the
+ <a href="#CheckBoxGroup">CheckBoxGroup</a>. The only real difference is that the
+ 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.
+ 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>.
+ </p>
+ <source><![CDATA[
+<table width="200pt">
+ <caption class="normalAttr">RadioButton Group</caption>
+ <netui:radioButtonGroup dataSource="pageFlow.results" optionsDataSource="${pageFlow.opts}" repeater="true">
+ <tr align="center"><td align="right" width="25%">
+ <netui:radioButtonOption value="${container.item.optionValue}" /></td>
+ <td align="left"><netui:span styleClass="${container.item.style}" value="${container.item.name}" />
+ </td></tr>
+ </netui:radioButtonGroup>
+</table>
+]]></source>
+ <p> This example can use the same page flow controller as the previous example with one simple
+ modification. A radio button group will post back a single value. By modifying the
+ <code>results</code> property on the page flow controller we convert if from a
+ <code>String[]</code> to just a <code>String</code>.
+ </p>
+ <source>
+ private String results;
+ public String getResults()
+ {
+ return results;
+ }
+ public void setResults(String resultsOne)
+ {
+ this.results = resultsOne;
+ }
+
+ </source>
+ </section>
+ </section>
+ <section id="Select">
+ <title>Select</title>
+ <p> Repeating in a <code><netui:select></code> is much different than repeating in
+ either the <code><netui:checkBoxGroup></code> or <code><netui:radioButtonGroup></code>.
+ There is no layout or style information applied to the individual options because typically
+ they are displayed as a single select box control inside the browser.
+ </p>
+ <p> Repeating in the <code><netui:select></code> enables the developer to control the order
+ of the options and to control the HTML <code><option></code> element is rendered
+ for each type of option. A Select
+ tag actually creates it's options by iterating over multiple sets of data. For each unique
+ <code>value</code> found, an HTML <code><option></code> element is rendered.
+ The following table
+ describes each source of data that can be used to create the output options.
+ </p>
+ <table>
+ <tr><th>Stage Name</th><th>Source property</th><th>Description</th></tr>
+ <tr><td><code>option</code></td><td><code>optionsDataSource</code></td>
+ <td>This is an array of some class. Each element of the array will be output
+ as an option. Typically the class can just be a <code>String</code> or it may be a Java
+ bean.</td></tr>
+ <tr><td><code>default</code></td><td><code>defaultValue</code></td>
+ <td>This is a single value that will be output as an option. This value is always a
+ <code>String</code></td></tr>
+ <tr><td><code>dataSource</code></td><td><code>dataSource</code></td>
+ <td>When the select is rendered, if the variable bound to contains data, it
+ will be added to the options. This value may be a single <code>String</code>
+ or an array of <code>String</code>s.</td></tr>
+ <tr><td><code>null</code></td><td><code>nullableOptionText</code></td>
+ <td>This is a special value that indicates a null value. You must set
+ the <code>nullable</code> attribute to <code>true</code> to enable this.</td></tr>
+ </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>
+ <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>
+ ]]></source>
+ </section>
+ </section>
+ </body>
+</document>
\ No newline at end of file
Modified: beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsJavascript.xml
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsJavascript.xml?rev=264932&r1=264931&r2=264932&view=diff
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsJavascript.xml (original)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/netui/tagsJavascript.xml Tue Aug 30 20:41:58 2005
@@ -49,8 +49,6 @@
should not build dependencies on these values. In some cases, this document describes the details
of these low level features for explination purposes.
</p>
- <p>
- </p>
</section>
<section id="TagsAndAttributes">
<title>JSP Tags and Attribute</title>
Modified: beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/site.xml
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/site.xml?rev=264932&r1=264931&r2=264932&view=diff
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/site.xml (original)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/site.xml Tue Aug 30 20:41:58 2005
@@ -25,7 +25,9 @@
<pageflow_altering label="Altering a Page Flow" href="netui/alteringPageFlow.html"/>
</netuiIntro>
<netuiBasic label="Basic Topics">
- <databinding label="Databinding" href="netui/databinding.html"/>
+ <databinding label="Databinding" href="netui/databinding.html">
+ <databinding_container href="#implicit-objects-netui-container" />
+ </databinding>
<pageflow_valid label="Validation" href="netui/validation.html"/>
<pageflow_jsf label="Java Server Faces" href="netui/jsf.html"/>
</netuiBasic>
@@ -44,6 +46,7 @@
<pageflow_tag_formControls_imagebutton href="#ImageButton" />
</pageflow_tag_formControls>
<pageflow_tag_formControls_example href="netui/tagsFormControlsExample.html"/>
+ <pageflow_tag_repeating label="Repeating Form Controls" href="netui/tagsFormRepeating.html"/>
<pageflow_tag_xhtml label="HTML/XHTML Support" href="netui/tagsXhtml.html">
<pageflow_tagsXhtml_HtmlTag href="#HtmlTag" />
<pageflow_tagsXhtml_BodyTag href="#BodyTag" />