click-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sa...@apache.org
Subject svn commit: r733062 - in /incubator/click/trunk/click/examples: src/org/apache/click/examples/control/html/cssform/ src/org/apache/click/examples/control/html/list/ src/org/apache/click/examples/page/form/ webapp/assets/css/ webapp/assets/images/ webap...
Date Fri, 09 Jan 2009 15:34:01 GMT
Author: sabob
Date: Fri Jan  9 07:34:00 2009
New Revision: 733062

URL: http://svn.apache.org/viewvc?rev=733062&view=rev
Log:
Rewrote the "Custom Form Layout" example, because SitePoint Terms and Conditions isn't corporate
friendly.

Added:
    incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/CssForm.java
    incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/VerticalFieldSet.java
Removed:
    incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/ContactDetailsForm.java
    incubator/click/trunk/click/examples/webapp/assets/css/fieldset-styling-ie.css
    incubator/click/trunk/click/examples/webapp/form/another-border.htm
Modified:
    incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/list/HtmlList.java
    incubator/click/trunk/click/examples/src/org/apache/click/examples/page/form/ContactDetailsPage.java
    incubator/click/trunk/click/examples/webapp/assets/css/cssform.css
    incubator/click/trunk/click/examples/webapp/assets/images/star.gif
    incubator/click/trunk/click/examples/webapp/form/contact-details.htm

Added: incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/CssForm.java
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/CssForm.java?rev=733062&view=auto
==============================================================================
--- incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/CssForm.java
(added)
+++ incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/CssForm.java
Fri Jan  9 07:34:00 2009
@@ -0,0 +1,51 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.apache.click.examples.control.html.cssform;
+
+import org.apache.click.extras.control.HtmlForm;
+import org.apache.click.util.ClickUtils;
+import org.apache.click.util.HtmlStringBuffer;
+
+/**
+ * A custom Form that adds the Html import, "cssform.css", to the page.
+ *
+ * @author Bob Schellink
+ */
+public class CssForm extends HtmlForm {
+
+    // ---------------------------------------------------- Public Constructors
+
+    public CssForm(String name) {
+        super(name);
+    }
+
+    // --------------------------------------------------------- Public Methods
+
+    public String getHtmlImports() {
+        HtmlStringBuffer buffer = new HtmlStringBuffer(512);
+
+        // Include the Form default imports
+        buffer.append(super.getHtmlImports());
+
+        // Include CSS for ContactDetailsForm
+        String imports = "<link type=\"text/css\" rel=\"stylesheet\" href=\"{0}/assets/css/cssform{1}.css\"/>\n";
+        buffer.append(ClickUtils.createHtmlImport(imports, getContext()));
+        return buffer.toString();
+    }
+}

Added: incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/VerticalFieldSet.java
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/VerticalFieldSet.java?rev=733062&view=auto
==============================================================================
--- incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/VerticalFieldSet.java
(added)
+++ incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/cssform/VerticalFieldSet.java
Fri Jan  9 07:34:00 2009
@@ -0,0 +1,81 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.apache.click.examples.control.html.cssform;
+
+import org.apache.click.Control;
+import org.apache.click.control.Field;
+import org.apache.click.examples.control.html.FeedbackBorder;
+import org.apache.click.examples.control.html.FieldLabel;
+import org.apache.click.examples.control.html.list.HtmlList;
+import org.apache.click.examples.control.html.list.ListItem;
+import org.apache.click.extras.control.HtmlFieldSet;
+
+/**
+ * A custom FieldSet that renders its fields vertically using an HtmlList
+ * instance.
+ */
+public class VerticalFieldSet extends HtmlFieldSet {
+
+    // -------------------------------------------------------------- Variables
+
+    private HtmlList htmlList = new HtmlList();
+
+    // ---------------------------------------------------- Public Constructors
+
+    public VerticalFieldSet(String name) {
+        super(name);
+        add(htmlList);
+    }
+
+    // --------------------------------------------------------- Public Methods
+
+    public Control insert(Control control, int index) {
+        if (!(control instanceof HtmlList)) {
+            throw new IllegalArgumentException("only HtmlLists can be added to CssFieldSet.");
+        }
+        return super.insert(control, index);
+    }
+
+    public Field add(Field field) {
+        return add(field, null);
+    }
+
+    public Field add(Field field, String labelStr) {
+        ListItem item = new ListItem();
+        htmlList.add(item);
+
+        field.setAttribute("class", "text");
+        FieldLabel label = null;
+        if (labelStr != null) {
+            label = new FieldLabel(field, labelStr);
+        } else {
+            label = new FieldLabel(field);
+        }
+        item.add(label);
+
+        FeedbackBorder border = new FeedbackBorder();
+        border.add(field);
+        item.add(border);
+        return field;
+    }
+
+    public HtmlList getHtmlList() {
+        return htmlList;
+    }
+}

Modified: incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/list/HtmlList.java
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/list/HtmlList.java?rev=733062&r1=733061&r2=733062&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/list/HtmlList.java
(original)
+++ incubator/click/trunk/click/examples/src/org/apache/click/examples/control/html/list/HtmlList.java
Fri Jan  9 07:34:00 2009
@@ -18,6 +18,7 @@
  */
 package org.apache.click.examples.control.html.list;
 
+import java.util.List;
 import org.apache.click.Control;
 import org.apache.click.control.AbstractContainer;
 
@@ -76,4 +77,13 @@
     public boolean isUnorderedList() {
         return listMode == UNORDERED_LIST;
     }
+
+    public ListItem getLast() {
+        List items = getControls();
+        if (items.size() == 0) {
+            throw new IllegalStateException("HtmlList is empty and contains no ListItems.");
+        }
+
+        return (ListItem) items.get(items.size() - 1);
+    }
 }

Modified: incubator/click/trunk/click/examples/src/org/apache/click/examples/page/form/ContactDetailsPage.java
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/src/org/apache/click/examples/page/form/ContactDetailsPage.java?rev=733062&r1=733061&r2=733062&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/src/org/apache/click/examples/page/form/ContactDetailsPage.java
(original)
+++ incubator/click/trunk/click/examples/src/org/apache/click/examples/page/form/ContactDetailsPage.java
Fri Jan  9 07:34:00 2009
@@ -18,28 +18,73 @@
  */
 package org.apache.click.examples.page.form;
 
-import org.apache.click.examples.control.html.cssform.ContactDetailsForm;
+import org.apache.click.control.Radio;
+import org.apache.click.control.RadioGroup;
+import org.apache.click.control.Submit;
+import org.apache.click.control.TextField;
+import org.apache.click.examples.control.TitleSelect;
+import org.apache.click.examples.control.html.cssform.VerticalFieldSet;
+import org.apache.click.examples.control.html.cssform.CssForm;
+import org.apache.click.examples.control.html.list.ListItem;
 import org.apache.click.examples.page.BorderPage;
+import org.apache.click.extras.control.CreditCardField;
+import org.apache.click.extras.control.EmailField;
+import org.apache.click.extras.control.IntegerField;
+import org.apache.click.extras.control.PageSubmit;
 
 /**
- * This page demonstrates how to manually layout a form using Java.
- *
- * The form is laid out as described in the sitepoint
- * article: http://www.sitepoint.com/print/fancy-form-design-css
+ * This page demonstrates how to programmatically layout a form using
+ * custom Controls and CSS.
  *
  * @author Bob Schellink
  */
 public class ContactDetailsPage extends BorderPage {
 
-    private ContactDetailsForm form;
+    private CssForm form;
 
     public void onInit() {
+        // Ensure the super implementation executes
         super.onInit();
-        form = new ContactDetailsForm("form");
-        addControl(form);
-    }
 
-    public String getTemplate() {
-        return "/form/another-border.htm";
+        form = new CssForm("form");
+
+        VerticalFieldSet fieldset = new VerticalFieldSet("contactDetails");
+        fieldset.setLegend("Contact Details");
+
+        fieldset.add(new TitleSelect("title"));
+        fieldset.add(new TextField("firstName")).setRequired(true);
+        fieldset.add(new TextField("middleNames"));
+        fieldset.add(new TextField("lastName")).setRequired(true);
+        fieldset.add(new TextField("contactNumber"));
+        fieldset.add(new EmailField("email"));
+
+        form.add(fieldset);
+
+        fieldset = new VerticalFieldSet("paymentDetails");
+        fieldset.setLegend("Payment Details");
+
+        RadioGroup paymentGroup = new RadioGroup("paymentOption");
+        paymentGroup.add(new Radio("cod", "Cash On Delivery "));
+        paymentGroup.add(new Radio("credit", "Credit Card "));
+        paymentGroup.setVerticalLayout(false);
+        fieldset.add(paymentGroup);
+
+        // Retrieve the paymentGroup's ListItem, and set its CSS class to "radio"
+        ListItem item = (ListItem) fieldset.getHtmlList().getLast();
+        item.setAttribute("class", "radio");
+
+        fieldset.add(new TextField("cardholderName"));
+        fieldset.add(new CreditCardField("cardNumber")).setRequired(true);
+        fieldset.add(new IntegerField("expiry"));
+
+        form.add(fieldset);
+
+        Submit ok = new Submit("ok", "OK");
+        Submit cancel = new PageSubmit("cancel", ContactDetailsPage.class);
+
+        form.add(ok);
+        form.add(cancel);
+
+        addControl(form);
     }
 }

Modified: incubator/click/trunk/click/examples/webapp/assets/css/cssform.css
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/webapp/assets/css/cssform.css?rev=733062&r1=733061&r2=733062&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/webapp/assets/css/cssform.css (original)
+++ incubator/click/trunk/click/examples/webapp/assets/css/cssform.css Fri Jan  9 07:34:00
2009
@@ -1,61 +1,74 @@
 /*
- * This css was adapted from the article: http://www.sitepoint.com/print/fancy-form-design-css
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
  */
-.error {
-    color: red;
-}
 span.required {
     padding-right: 10px;
     background: url(../images/star.gif) no-repeat right top;
 }
-input.required {
-    border-color: #CC0000;
-    background-color: #FFEEFF;
-}
-td.content{
-    padding-right:40px;
-}
-table {
-    font-size: 90%;
-}
-fieldset li {  
-    float: left;  
-    clear: left;  
-    width: 100%;  
-    padding-bottom: 1em;
-}
-fieldset {  
-    float: left;  
-    clear: both;  
-    width: 100%;  
-    margin: 0 0 1.5em 0;  
-    padding: 0;  
-    border: 1px solid #BFBAB0;  
-    background-color: #F2EFE9;  
-}
-legend {  
-    margin-left: 1em;  
-    padding: 0;  
-    color: #000;  
+
+legend {
     font-weight: bold;
+    color: #000;
+}
+
+fieldset {
+    border: 1px solid #999;
+    background-color: #ddd;
+    margin-bottom: 1em;
+}
+
+fieldset li {
+    padding-bottom: 12px;
 }
-fieldset ol {
+
+fieldset ul {
     margin: 0;
-    padding: 1em 1em 0 1em;
+    padding: 1em 0 0 1em;
     list-style: none;
 }
-fieldset.submit {  
-    float: none;  
-    width: auto;  
-    border-style: none;  
-    padding-left: 12em;  
-    background-color: transparent;
-}
-label {  
-    float: left;  
-    width: 10em;  
+
+fieldset.submit {
+    padding-left: 10px;
+    border-style: none;
+}
+
+label {
+    float: left;
+    width: 100px;
     margin-right: 1em;
 }
-input.text {
-    width: 10.5em;
+
+.radio label {
+    float: none;
+}
+
+input.text, select#form_title {
+    width: 180px;
+}
+
+/* IE only. Fix legend position */
+* html fieldset legend {
+    position: absolute;
+    top: -.6em;
+    left: .2em;
+}
+
+/* IE only. Fix fieldset background bug */
+* html fieldset {
+    position: relative;
 }
\ No newline at end of file

Modified: incubator/click/trunk/click/examples/webapp/assets/images/star.gif
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/webapp/assets/images/star.gif?rev=733062&r1=733061&r2=733062&view=diff
==============================================================================
Binary files - no diff available.

Modified: incubator/click/trunk/click/examples/webapp/form/contact-details.htm
URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/examples/webapp/form/contact-details.htm?rev=733062&r1=733061&r2=733062&view=diff
==============================================================================
--- incubator/click/trunk/click/examples/webapp/form/contact-details.htm (original)
+++ incubator/click/trunk/click/examples/webapp/form/contact-details.htm Fri Jan  9 07:34:00
2009
@@ -17,29 +17,27 @@
    under the License.*#
 -->
 
-This page demonstrates a Java centric approach to manually layout Fields inside a Form.
+This page demonstrates a Java centric approach to programmatically layout Fields inside a
Form.
 <p/>
-The form below is laid out as specified by the article: <a href="http://www.sitepoint.com/print/fancy-form-design-css">http://www.sitepoint.com/print/fancy-form-design-css</a>
+In short the form fields are laid out using a combination of FieldSet and Html List tags;
&lt;ul&gt; &lt;li&gt;.
 <p/>
-In short the form fields are laid out using a combination of FieldSet and Html List tags;
&lt;ol&gt; &lt;li&gt;.
-<p/>
-This demo consists of the following classes: (Note these classes are not part of Click, they
were created specifically for this demo).
+This demo consists of the following components: (Note, although some of these components
+are quite generic, they are not part of Click and were created
+specifically for this demo).
 <ul>
     <li style="padding:0.25em;">
-        <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/cssform/ContactDetailsForm.java"
target="_blank">ContactDetailsForm.java</a>
-        - encapsulates the contact details in a component.
+        <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/cssform/CssForm.java"
target="_blank">CssForm.java</a>
+        - adds the stylesheet <a href="$context/source-viewer.htm?filename=assets/css/cssform.css"
target="_blank">cssform.css</a>
+        to the list of Html imports. This CSS is used to style the form and fields.
     </li>
     <li style="padding:0.25em;">
-        <a href="$context/source-viewer.htm?filename=assets/css/cssform.css" target="_blank">cssform.css</a>
-        - the stylesheet used to layout the fields.
+        <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/cssform/VerticalFieldSet.java"
target="_blank">VerticalFieldSet.java</a>
+        - a custom FieldSet that renders its fields vertically using an HTML List: &lt;ul&gt;.
     </li>
     <li style="padding:0.25em;">
         <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/list/HtmlList.java"
target="_blank">HtmlList.java</a>
-        - a component that mimics an HTML list: &lt;ol&gt;
-    </li>
-    <li style="padding:0.25em;">
-        <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/list/ListItem.java"
target="_blank">ListItem.java</a>
-        - a component that mimics an HTML list item: &lt;li&gt;
+        and <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/list/ListItem.java"
target="_blank">ListItem.java</a>
+        - these components renders an HTML list, &lt;ul&gt;, and list item, &lt;li&gt;,
respectively.
     </li>
     <li style="padding:0.25em;">
         <a href="$context/source-viewer.htm?filename=WEB-INF/classes/org/apache/click/examples/control/html/FeedbackBorder.java"
target="_blank">FeedbackBorder.java</a>



Mime
View raw message