Examples of org.apache.click.control.Form

org.apache.click.control.Form

gnl.org">OGNL library. To use nested objects in your form, simply specify the object path as the Field name. Note in the object path you exclude the root object, so the path customer.address.state is specified as address.state.

For example:

 // The customer.address.state field TextField stateField = new TextField("address.state"); form.add(stateField); .. // Loads the customer address state into the form stateField Customer customer = getCustomer(); form.copyFrom(customer); .. // Copies form stateField value into the customer address state Customer customer = new Customer(); form.copyTo(customer);

When populating an object from a form post Click will automatically create any null nested objects so their properties can be set. To do this Click uses the no-args constructor of the nested objects class.

{@link #copyTo(Object)} and {@link #copyFrom(Object)} also supportsjava.util.Map as an argument. Examples of using java.util.Map are shown in the respective method descriptions.

Form Validation

The Form control supports automatic field validation. By default when a POST request is made the form will validate the field values. To disable automatic validation set {@link #setValidate(boolean)} to false.

Form also provides a {@link #validate()} method where subclasses can providecustom cross-field validation.

File Upload Validation

The Form's {@link #validateFileUpload()} provides validation for multipartrequests (multipart requests are used for uploading files from the browser). The {@link #validateFileUpload()} method checks that files being uploaded do not exceed the{@link org.apache.click.service.CommonsFileUploadService#sizeMax maximum request size}or the {@link org.apache.click.service.CommonsFileUploadService#fileSizeMax maximum file size}.

Note: if the maximum request size or maximum file size is exceeded, the request is deemed invalid ( {@link #hasPostError hasPostError}will return true), and no further processing is performed on the form or fields. Instead the form will display the appropriate error message for the invalid request. See {@link #validateFileUpload()} for details of the error message properties.

JavaScript Validation

The Form control also supports client side JavaScript validation. By default JavaScript validation is not enabled. To enable JavaScript validation set {@link #setJavaScriptValidation(boolean)} to true. For example:

 Form form = new Form("form"); form.setJavaScriptValidation(true); // Add form fields .. form.add(new Submit("ok", " OK ", this, "onOkClicked"); Submit cancel = new Submit("cancel", "Cancel", this, "onCancelClicked"); cancel.setCancelJavaScriptValidation(true); addControl(form);

Please note in that is this example the cancel submit button has {@link Submit#setCancelJavaScriptValidation(boolean)} set to true. Thisprevents JavaScript form validation being performed when the cancel button is clicked.

CSS and JavaScript resources

The Form control makes use of the following resources (which Click automatically deploys to the application directory, /click):

click/control.css
click/control.js

To import these files and any form control imports simply reference the variables $headElements and $jsElements in the page template. For example:

 <html> <head> $headElements </head> <body> $form $jsElements </body> </html>

Form Layout

The Form control supports rendering using automatic and manual layout techniques.

Auto Layout

If you include a form variable in your template the form will be automatically laid out and rendered. Auto layout, form and field rendering options include:

{@link #buttonAlign}	button alignment: `["left", "center", "right"]`
{@link #buttonStyle}	button <td> "style" attribute value
{@link #columns}	number of form table columns, the default value number is 1
{@link #errorsAlign}	validation error messages alignment: `["left", "center", "right"]`
{@link #errorsPosition}	validation error messages position: `["top", "middle", "bottom"]`
{@link #errorsStyle}	errors <td> "style" attribute value
{@link #fieldStyle}	field <td> "style" attribute value
{@link #labelAlign}	field label alignment: `["left", "center", "right"]`
{@link #labelsPosition}	label position relative to field: `["left", "top"]`
{@link #labelStyle}	label <td> "style" attribute value
click/control.css	control CSS styles, automatically deployed to the `click` web directory
/click-control.properties	form and field messages and HTML, located under classpath

Manual Layout

You can also manually layout the Form in the page template specifying the fields using the named field notation:

 $form. {@link #getFields fields}.usernameField

Whenever including your own Form markup in a page template or Velocity macro always specify:

method - the form submission method ["post" | "get"]
name - the name of your form, important when using JavaScript
action - directs the Page where the form should be submitted to
form_name - include a hidden field which specifies the {@link #name} of the Form

The hidden field is used by Click to determine which form was posted on a page which may contain multiple forms.

Alternatively you can use the Form {@link #startTag()} and {@link #endTag()}methods to render this information.

An example of a manually layed out Login form is provided below:

 $form.startTag() <table style="margin: 1em;"> #if ($form.error) <tr> <td colspan="2" style="color: red;"> $form.error </td> </tr> #end #if ($form.fields.usernameField.error) <tr> <td colspan="2" style="color: red;"> $form.fields.usernameField.error </td> </tr> #end #if ($form.fields.passwordField.error) <tr> <td colspan="2" style="color: red;"> $form.fields.passwordField.error </td> </tr> #end <tr> <td> Username: </td> <td> $form.fields.usernameField </td> </tr> <tr> <td> Password: </td> <td> $form.fields.passwordField </td> </tr> <tr> <td> $form.fields.okSubmit $form.fields.cancelSubmit </td> </tr> </table> $form.endTag()

As you can see in this example most of the code and markup is generic and could be reused. This is where Velocity Macros come in.

Velocity Macros

Velocity Macros (velocimacros) are a great way to encapsulate customized forms.

To create a generic form layout you can use the Form {@link #getFieldList()} and{@link #getButtonList()} properties within a Velocity macro. If you want toaccess all Form Controls from within a Velocity template or macro use {@link #getControls()}.

The example below provides a generic writeForm() macro which you could use through out an application. This Velocity macro code would be contained in a macro file, e.g. macro.vm.

 #* Custom Form Macro Code *# #macro( writeForm[$form] ) $form.startTag() <table width="100%"> #if ($form.error) <tr> <td colspan="2" style="color: red;"> $form.error </td> </tr> #end #foreach ($field in $form.fieldList) #if (!$field.hidden) #if (!$field.valid) <tr> <td colspan="2"> $field.error </td> </tr> #end <tr> <td> $field.label: </td><td> $field </td> </tr> #end #end <tr> <td colspan="2"> #foreach ($button in $form.buttonList) $button &nbsp; #end </td> </tr> </table> $form.endTag() #end

You would then call this macro in your Page template passing it your form object:

 #writeForm($form)

At render time Velocity will execute the macro using the given form and render the results to the response output stream.

Configuring Macros

To configure your application to use your macros you can:

Put your macros if a file called macro.vm in your applications root directory.
Put your macros in the auto deployed click/VM_global_macro.vm file.
Create a custom named macro file and reference it in a WEB-INF/velocity.properties file under the property named velocimacro.library.

Preventing Accidental Form Posts

Users may accidentally make multiple form submissions by refreshing a page or by pressing the back button.

To prevent multiple form posts from page refreshes use the Post Redirect pattern. With this pattern once the user has posted a form you redirect to another page. If the user then presses the refresh button, they will making a GET request on the current page. Please see the Redirect After Post article for more information on this topic.

To prevent multiple form posts from use of the browser back button use one of the Form {@link #onSubmitCheck(org.apache.click.Page,String)} methods. For example:

 public class Purchase extends Page { .. public boolean onSecurityCheck() { return form.onSubmitCheck(this, "/invalid-submit.html"); } }

The form submit check methods store a special token in the users session and in a hidden field in the form to ensure a form post isn't replayed.

See also the W3C HTML reference: FORM @see Field @see Submit


        Panel panel1 = new Panel("panel1", "panel/tabbed/panel1.htm");
        tabbedPanel.add(panel1);


        Panel panel2 = new Panel("panel2", "panel/tabbed/form-panel2.htm");
        Form form = new Form("form");
        panel2.add(form);


        // PLEASE NOTE: Form is addedd to the second Panel(at index 1), so when it
        // posts to the server it needs to send the index of it's own Panel so that the
        // TabbedPanel activates that Panel actives Panel at index 1. If we don't
        // cater for this, the form post will be handled by the Panel at index 0


        // When TabbedPanel detects the request Parameter 'tabPanelIndex', it
        // switches to the Panel at the given index.
        // we add a HiddenField called 'tabPanelIndex' set to index 1.
        //
        int tabIndex = 1;
        form.add(new HiddenField("tabPanelIndex", tabIndex));


        final TextField field = new TextField("name", "Enter your name");
        form.add(field);
        Submit submit = new Submit("go");
        submit.setActionListener(new ActionListener() {


            public boolean onAction(Control source) {
                addModel("msg", "Hi " + field.getValue() + ". Your form has been saved!");
                return true;
            }
        });
        form.add(submit);
        panel2.setLabel("The Second Panel");
        tabbedPanel.add(panel2);


        Panel panel3 = new Panel("panel3", "panel/tabbed/table-panel3.htm");
        Table table = new Table("table");

View Full Code Here


    public void demo1() {
        // Create a submit link.
        final SubmitLink submitLink = new SubmitLink("save");


        Form form = new Form("demo1");
        addControl(form);


        FieldSet fieldSet = new FieldSet("fieldSet");
        form.add(fieldSet);


        fieldSet.add(new TextField("name"));


        // Add the submit link to the fieldSet
        fieldSet.add(submitLink);

View Full Code Here


    public void demo2() {
        // Create a submit link which includes parameters.
        final SubmitLink paramLink = new SubmitLink("paramLink");


        Form form = new Form("demo2");
        addControl(form);


        FieldSet fieldSet = new FieldSet("fieldSet");
        form.add(fieldSet);


        fieldSet.add(new TextField("name"));


        // Add some parameters to the parametrized submit link
        paramLink.setValue("myValue");

View Full Code Here


    public void demo4() {
        // Create a submit link
        final SubmitLink confirmationLink = new SubmitLink("confirmationLink");


        Form form = new Form("demo4");
        addControl(form);


        FieldSet fieldSet = new FieldSet("fieldSet");
        form.add(fieldSet);


        fieldSet.add(new TextField("name"));


        // Add the submit link to the FieldSet
        fieldSet.add(confirmationLink);


        // Set custom JavaScript for the onclick event. The confirmSubmit function
        // is defined in the page template -> submit-link-demo.htm
        String clickEvent = "return confirmSubmit(this, '" + form.getId() + "', 'Are you sure?');";
        confirmationLink.setOnClick(clickEvent);


        // The Parametrized SubmitLink action listener
        confirmationLink.setActionListener(new ActionListener() {

View Full Code Here


    private static final long serialVersionUID = 1L;


    public ControlHeadDemo() {


        Form form = new Form("form");


        StarRating rating = new StarRating("rating", 5, 2);
        form.add(rating);


        form.add(new Submit("save"));


        addControl(form);
    }

View Full Code Here

     * Sanity checks for ClickUtils.copyFormToObject.
     */
    public void testCopyFormToObject() {


      // set up the form
        Form form = new Form("sample");
        
        TextField idField = new TextField("id");
        form.add(idField);


        FieldSet fieldset = new FieldSet("fieldset");
        form.add(fieldset);


        TextField nameField = new TextField("name");
        fieldset.add(nameField);


        TextField dateField = new TextField("dateOfBirth");
        fieldset.add(dateField);
        
        TextField intField = new TextField("int");
        form.add(intField);


        TextField doubleField = new TextField("double");
        form.add(doubleField);
               
        Checkbox checkBox = new Checkbox("boolean");
        form.add(checkBox);  
        
        TextField telephoneField = new TextField("telephone");
        form.add(telephoneField);
        
        HiddenField hidden = new HiddenField("hidden", String.class);
        form.add(hidden);
        
        // Populate fields
        idField.setValueObject(ID);
        nameField.setValue(NAME);
        dateField.setValueObject(DATE_OF_BIRTH);
        intField.setValue(String.valueOf(INT));
        doubleField.setValue(String.valueOf(DOUBLE));
        checkBox.setChecked(BOOLEAN);
        telephoneField.setValue(TELEPHONE);


        // copy form to object
        SampleObject sampleObject = new SampleObject();
        ClickUtils.copyFormToObject(form, sampleObject, true);


        // has the object been configured correctly?
        assertEquals(new Integer(idField.getValue()), sampleObject.getId());
        assertEquals(nameField.getValue(), sampleObject.getName());
        
        //NOTE the dateField was NOT copied to the sampleObject's Date property.
        //Use org.apache.click.extras.control.DateField in the extras project, to 
        //copy a Date property.
        assertEquals(null, sampleObject.getDateOfBirth());
        assertEquals(telephoneField.getValueObject().toString(), sampleObject.getTelephone());
        assertTrue(sampleObject.getInt() == new Integer(intField.getValue()).intValue());
        assertTrue(sampleObject.getDouble() == new Double(doubleField.getValue()).doubleValue());
        assertTrue(sampleObject.isBoolean() == checkBox.isChecked());
        
        // Test object path copying
        
        User user = new User();
        user.setAddress(new Address());
        user.getAddress().setState(new State());
        
        form = new Form();
        TextField codeField = new TextField("address.state.code");
        codeField.setValue("NSW");
        form.add(codeField);
        form.copyTo(user, true);
        assertEquals("NSW", user.getAddress().getState().getCode());
    }

View Full Code Here

    /**
     * Sanity checks for ClickUtils.copyObjectToForm.
     */
    public void testCopyObjectToForm() {
        // set up the form
        Form form = new Form("sample");
        
        TextField idField = new TextField("id");
        form.add(idField);


        FieldSet fieldset = new FieldSet("fieldset");
        form.add(fieldset);


        TextField nameField = new TextField("name");
        fieldset.add(nameField);
        
        TextField dateField = new TextField("dateOfBirth");
        fieldset.add(dateField); 
        
        TextField intField = new TextField("int");
        form.add(intField);
                
        TextField doubleField = new TextField("double");
        form.add(doubleField);
               
        Checkbox checkBox = new Checkbox("boolean");
        form.add(checkBox);
        
        HiddenField hidden = new HiddenField("hidden", String.class);
        form.add(hidden);
        
        // Populate object
        SampleObject sampleObject = new SampleObject();
        sampleObject.setId(ID);
        sampleObject.setName(NAME);
        sampleObject.setDateOfBirth(DATE_OF_BIRTH);
        sampleObject.setInt(INT);
        sampleObject.setDouble(DOUBLE);
        sampleObject.setBoolean(BOOLEAN);


        // copy object to form
        ClickUtils.copyObjectToForm(sampleObject, form, true);


        // has the form been configured correctly?
        assertEquals(sampleObject.getId(), new Integer(idField.getValue()));
        assertEquals(sampleObject.getName(), nameField.getValue());
        assertEquals(sampleObject.getDateOfBirth().toString(), dateField.getValue());
        assertTrue(sampleObject.getInt() == new Integer(intField.getValue()).intValue());
        assertTrue(sampleObject.getDouble() == new Double(doubleField.getValue()).doubleValue());
        assertTrue(sampleObject.isBoolean() == checkBox.isChecked());


        // Test object path copying


        User user = new User();
        user.setAddress(new Address());
        user.getAddress().setState(new State());
        user.getAddress().getState().setCode("NSW");
        
        form = new Form();
        TextField codeField = new TextField("address.state.code");
        form.add(codeField);
        form.copyFrom(user, true);
        assertEquals("NSW", codeField.getValueObject());
        
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("name", "malcolm");
        form = new Form();
        TextField nameField2 = new TextField("name");
        form.add(nameField2);
        form.copyFrom(map, true);
        assertEquals("malcolm", nameField2.getValue());
    }

View Full Code Here

        map.put("age", age);
        map.put("address.street", street);
        map.put("address.state.code", stateCode);


        // Setup the form and fields
        Form form = new Form("form");
        TextField idField = new TextField("id");
        form.add(idField);


        // Create fieldset
        FieldSet fieldset = new FieldSet("fieldset");
        form.add(fieldset);
        TextField nameField = new TextField("name");
        fieldset.add(nameField);


        TextField ageField = new TextField("age");
        form.add(ageField);
        TextField streetField = new TextField("address.street");
        form.add(streetField);
        TextField stateCodeField = new TextField("address.state.code");
        form.add(stateCodeField);


        // Copy the map values into the fields
        form.copyFrom(map, true);


        // Test that values were copied
        assertEquals(id, new Integer(idField.getValue()));
        assertEquals(name, nameField.getValue());
        assertEquals(age, new Integer(ageField.getValue()));

View Full Code Here

        map.put("age", null);
        map.put("address.street", null);
        map.put("address.state.code", null);


        // Setup the form and fields with initial values
        Form form = new Form("form");
        TextField idField = new TextField("id");
        idField.setValue(id.toString());
        form.add(idField);
        
        // Create fieldset
        FieldSet fieldset = new FieldSet("fieldset");
        form.add(fieldset);
        TextField nameField = new TextField("name");
        nameField.setValue(name);
        fieldset.add(nameField);
        
        TextField ageField = new TextField("age");
        ageField.setValue(age.toString());        
        form.add(ageField);
        TextField streetField = new TextField("address.street");
        streetField.setValue(street);
        form.add(streetField);
        TextField stateCodeField = new TextField("address.state.code");
        stateCodeField.setValue(stateCode);
        form.add(stateCodeField);


        // Copy the fields values back into the map
        form.copyTo(map, true);


        // Test that values were copied
        String copiedId = map.get("id").toString();
        assertEquals(id, new Integer(copiedId));
        assertEquals(name, map.get("name"));

View Full Code Here

        final String lineOne = "55 Dunkley Avenue";
        final String code = "NSW";
        final boolean active = false;
        final Boolean registered = Boolean.TRUE;
        
        Form form = new Form();
        
        TextField idField = new TextField("address.id");
        form.add(idField);
        TextField lineOneField = new TextField("address.lineOne");
        lineOneField.setValue(lineOne);
        form.add(lineOneField);
        Checkbox activeField = new Checkbox("address.active");
        activeField.setChecked(active);
        form.add(activeField);
        Checkbox registeredField = new Checkbox("address.registered");
        registeredField.setValueObject(registered);
        form.add(registeredField);
        TextField codeField = new TextField("address.state.code");
        codeField.setValue(code);
        form.add(codeField);
        
        User user = new User();        
        form.copyTo(user, true);
        
        assertNull(user.getAddress().getId());
        assertEquals(lineOne, user.getAddress().getLineOne());        
        assertEquals(active, user.getAddress().isActive()); 
        assertEquals(registered, user.getAddress().isRegistered());

View Full Code Here

0 1 2 3 4 5 6 7 8 9

TOP

Related Classes of org.apache.click.control.Form

org.apache.click.Context

org.apache.click.Control

org.apache.click.element.CssImport

org.apache.click.element.JsImport

org.apache.click.examples.page.control.SubmitLinkDemo

org.apache.click.examples.page.form.FormProperties

org.apache.click.examples.page.general.ControlHeadDemo

org.apache.click.examples.page.panel.StatefulTabbedPanelDemo

org.apache.click.examples.page.panel.TabbedPanelWithControls

org.apache.click.examples.page.tree.AdvancedTreePage

All source code are property of their respective owners. Java is a trademark of Sun Microsystems, Inc and owned by ORACLE Inc. Contact coftware#gmail.com.