click-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aadr...@apache.org
Subject 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
Date Sun, 20 Jun 2010 11:00:22 GMT
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



Mime
View raw message