You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@click.apache.org by sa...@apache.org on 2009/01/09 16:34:01 UTC
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...
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; <ul> <li>.
<p/>
-In short the form fields are laid out using a combination of FieldSet and Html List tags; <ol> <li>.
-<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: <ul>.
</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: <ol>
- </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: <li>
+ 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, <ul>, and list item, <li>, 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>