You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@click.apache.org by aa...@apache.org on 2010/06/20 13:00:22 UTC
svn commit: r956344 - in /click/trunk/click/examples:
src/org/apache/click/examples/control/FieldSeparator.java
src/org/apache/click/examples/page/control/FieldSeparatorDemo.java
webapp/assets/css/separator.css webapp/control/field-separator-demo.htm
Author: aadrian
Date: Sun Jun 20 11:00:21 2010
New Revision: 956344
URL: http://svn.apache.org/viewvc?rev=956344&view=rev
Log:
improve FieldSeparator example layout.
Modified:
click/trunk/click/examples/src/org/apache/click/examples/control/FieldSeparator.java
click/trunk/click/examples/src/org/apache/click/examples/page/control/FieldSeparatorDemo.java
click/trunk/click/examples/webapp/assets/css/separator.css
click/trunk/click/examples/webapp/control/field-separator-demo.htm
Modified: click/trunk/click/examples/src/org/apache/click/examples/control/FieldSeparator.java
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/src/org/apache/click/examples/control/FieldSeparator.java?rev=956344&r1=956343&r2=956344&view=diff
==============================================================================
--- click/trunk/click/examples/src/org/apache/click/examples/control/FieldSeparator.java (original)
+++ click/trunk/click/examples/src/org/apache/click/examples/control/FieldSeparator.java Sun Jun 20 11:00:21 2010
@@ -9,24 +9,49 @@ import org.apache.click.util.ClickUtils;
import java.util.List;
/**
- * FieldSeparator is a component derived from a FieldSet that acts as a visual separator
- * having a label/legend too. This component is practical in forms where a FieldSet would
- * not align correctly the fields due to variable label width between the groups.<p/>
- *
- * @see FieldSeparatorDemo
- *
+ * <tt>FieldSeparator</tt> is a component derived from a <tt>FieldSet</tt> that acts as a visual separator that
+ * can have a "legend" too. <p/>
+ * This component is practical in forms where such a visual representation is required, or
+ * where a <tt>FieldSet</tt> would not auto-align correctly all the fields (despite tweaking the CSS), e.g. due
+ * to variable label widths between the groups, common in:
+ * <ul>
+ * <li>i18n forms - where tweaking the width for one language, would break the width for another</li>
+ * <li>dynamic forms - where there's no a priori knowledge about the label</li>
+ * </ul>
+ * or simply where the user doesn't want to manually handle this alignment problem, but let Click do
+ * the job.
*/
public class FieldSeparator extends FieldSet {
+
+ // Constructors -----------------------------------------------------------
+
+ /**
+ * Create a FieldSeparator with the given name. <p/>
+ * The legend for this separator will be be inferred from the name.
+ *
+ * @param name the field separator name element value
+ */
public FieldSeparator(String name) {
super(name);
addStyleClass("fieldSeparator");
}
+ /**
+ * Create a FieldSeparator with the given name and legend.
+ *
+ * @param name the field separator name
+ * @param legend the field separator legend element value
+ */
public FieldSeparator(String name, String legend) {
super(name, legend);
addStyleClass("fieldSeparator");
}
+ /**
+ * Create a FieldSeparator with no name defined.
+ * <p/>
+ * <b>Please note</b> the control's name must be defined before it is valid.
+ */
public FieldSeparator() {
super();
addStyleClass("fieldSeparator");
Modified: click/trunk/click/examples/src/org/apache/click/examples/page/control/FieldSeparatorDemo.java
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/src/org/apache/click/examples/page/control/FieldSeparatorDemo.java?rev=956344&r1=956343&r2=956344&view=diff
==============================================================================
--- click/trunk/click/examples/src/org/apache/click/examples/page/control/FieldSeparatorDemo.java (original)
+++ click/trunk/click/examples/src/org/apache/click/examples/page/control/FieldSeparatorDemo.java Sun Jun 20 11:00:21 2010
@@ -10,20 +10,49 @@ import org.apache.click.util.Bindable;
import org.apache.click.util.ContainerUtils;
/**
- * Provides a form FieldSet usage as Separator example.
+ * Provides a FieldSeparator usage example vs the classical FieldSet usage.
+ *
+ * @see org.apache.click.examples.control.FieldSeparator
+ * @see org.apache.click.control.FieldSet
*/
public class FieldSeparatorDemo extends BorderPage {
private static final long serialVersionUID = 1L;
- @Bindable protected Form classicForm = new Form();
@Bindable protected Form newForm = new Form();
+ @Bindable protected Form classicForm = new Form();
public FieldSeparatorDemo() {
- // field set based form
+ // a separator based form
+ makeSeparatorForm();
+
+ // a field set based form
makeFieldSetForm();
+ }
- // separator based form
- makeSeparatorForm();
+ private void makeSeparatorForm() {
+ newForm.setLabelAlign(Form.ALIGN_RIGHT);
+ newForm.setButtonAlign(Form.ALIGN_RIGHT);
+ FieldSeparator contactSeparator = new FieldSeparator("contactDetails");
+ newForm.add(contactSeparator); // unlike the FieldSet, we just add the separator to the Form
+ TextField name = new TextField("name", "Name", 30);
+ newForm.add(name); // without adding the fields to it.
+ EmailField email = new EmailField("email");
+ newForm.add(email);
+
+ FieldSeparator feedbackSeparator = new FieldSeparator("feedbackDetails");
+ newForm.add(feedbackSeparator);
+ TextArea comment = new TextArea("Comment");
+ newForm.add(comment);
+
+ Checkbox inform = new Checkbox("inform","Yes, I agree!");
+ newForm.add(inform);
+
+ // Separator without a "legend": much like a HR element but with a consistent style with the other separators.
+ FieldSeparator separator = new FieldSeparator("separator","");
+ newForm.add(separator);
+
+ newForm.add(new Submit("ok", " OK ", this, "onOkClick1"));
+ newForm.add(new PageSubmit("cancel", HomePage.class));
}
private void makeFieldSetForm() {
@@ -31,7 +60,7 @@ public class FieldSeparatorDemo extends
classicForm.setButtonAlign(Form.ALIGN_RIGHT);
FieldSet contactFieldSet = new FieldSet("contactDetails");
classicForm.add(contactFieldSet);
- TextField name = new TextField("name");
+ TextField name = new TextField("name", "Name", 30);
contactFieldSet.add(name);
EmailField email = new EmailField("email");
contactFieldSet.add(email);
@@ -43,47 +72,22 @@ public class FieldSeparatorDemo extends
Checkbox inform = new Checkbox("inform", "Yes, I agree!");
feedbackFieldSet.add(inform);
- classicForm.add(new Submit("ok", " OK ", this, "onOkClick1"));
+ classicForm.add(new Submit("ok", " OK ", this, "onOkClick2"));
classicForm.add(new PageSubmit("cancel", HomePage.class));
}
- private void makeSeparatorForm() {
- newForm.setLabelAlign(Form.ALIGN_RIGHT);
- newForm.setButtonAlign(Form.ALIGN_RIGHT);
- FieldSeparator contactFieldSet = new FieldSeparator("contactDetails");
- newForm.add(contactFieldSet);
- TextField name = new TextField("name");
- newForm.add(name);
- EmailField email = new EmailField("email");
- newForm.add(email);
-
- FieldSeparator feedbackFieldSet = new FieldSeparator("feedbackDetails");
- newForm.add(feedbackFieldSet);
- TextArea comment = new TextArea("Comment");
- newForm.add(comment);
-
- Checkbox inform = new Checkbox("inform","Yes, I agree!");
- newForm.add(inform);
-
- FieldSeparator sepo = new FieldSeparator("separator","");
- newForm.add(sepo);
-
- newForm.add(new Submit("ok", " OK ", this, "onOkClick2"));
- newForm.add(new PageSubmit("cancel", HomePage.class));
- }
-
public boolean onOkClick1(){
- if(classicForm.isValid()){
- for (Field field : ContainerUtils.getInputFields(classicForm)) {
+ if(newForm.isValid()){
+ for (Field field : ContainerUtils.getInputFields(newForm)) {
System.out.println(field.getName() + "=" + field.getValue());
- }
+ }
}
return true;
}
public boolean onOkClick2(){
- if(newForm.isValid()){
- for (Field field : ContainerUtils.getInputFields(newForm)) {
+ if(classicForm.isValid()){
+ for (Field field : ContainerUtils.getInputFields(classicForm)) {
System.out.println(field.getName() + "=" + field.getValue());
}
}
Modified: click/trunk/click/examples/webapp/assets/css/separator.css
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/assets/css/separator.css?rev=956344&r1=956343&r2=956344&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/assets/css/separator.css (original)
+++ click/trunk/click/examples/webapp/assets/css/separator.css Sun Jun 20 11:00:21 2010
@@ -24,5 +24,5 @@
border-bottom:0;
border-left:0;
border-right:0;
- margin-top:1em;
+ margin-top:.5em;
}
\ No newline at end of file
Modified: click/trunk/click/examples/webapp/control/field-separator-demo.htm
URL: http://svn.apache.org/viewvc/click/trunk/click/examples/webapp/control/field-separator-demo.htm?rev=956344&r1=956343&r2=956344&view=diff
==============================================================================
--- click/trunk/click/examples/webapp/control/field-separator-demo.htm (original)
+++ click/trunk/click/examples/webapp/control/field-separator-demo.htm Sun Jun 20 11:00:21 2010
@@ -20,12 +20,22 @@
td.box {
padding-left: 2em;
padding-right: 2em;
+ vertical-align:top;
}
</style>
-<p>FieldSet vs FieldSeparator usage:</p>
+<p>The <tt><a target="_blank" href="$context/javadoc/org/apache/click/examples/control/FieldSeparator.html">
+FieldSeparator</a></tt> allows a visual separation of groups of fields, as an alternative to using the <tt>FieldSet</tt>.
+</p>
<table>
<tr>
- <td class="box" style="border-right: solid 3px #d3d3d3;">$classicForm</td>
- <td class="box">$newForm</td>
+ <td class="box">
+ <h3>FieldSeparator Usage</h3>
+ $newForm
+ </td>
+ <td class="box" width="100" style="text-align:center;"><h3>vs</h3></td>
+ <td class="box">
+ <h3>Classical FieldSet Usage</h3>
+ $classicForm
+ </td>
</tr>
</table>
\ No newline at end of file