Click framework 导言(二)

congpeixue

浏览: 269540 次
性别:
来自: ...

最近访客更多访客>>

stephen2015

tanglong8848

FTF372746926

cnhj352

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Click Framework

框架

Simple Form

表单和字段同样是Click框架中经常使用的控件。
下面的SimpleForm 提供了这些控件的一个简单应用。
在下面的例子代码中，我们在表单中添加一个textfield字段和一个submit按钮，同时
设置一个方法作为表单的控件监听器。
注意：在本例中page的public类型的form字段被自动的添加到控件列表中。

public class SimpleForm extends Page {

    public Form form = new Form();
    public String msg;

    // ------------------------------------------------------------ Constructor

    public SimpleForm() {
        form.add(new TextField("name", true));
        form.add(new Submit("OK"));

        form.setListener(this, "onSubmit");
    }

    // --------------------------------------------------------- Event Handlers

    /**
     * 处理表单的提交事件
     */
    public boolean onSubmit() {
        if (form.isValid()) {
            msg = "Your name is " + form.getFieldValue("name");
        }
        return true;
    }
}

然后我们新建SimpleForm 的模板 simple-form.htm。 Click会自动地把simple-form.htm
模板和SimpleForm 类关联起来。

<html>
<head>
$cssImports
</head>
<body>
  
$form
  
#if ($msg)
  <div id="msgDiv"> $msg </div>
#end
    
</body>
</html> 
$jsImports

当SimpleForm page被第一次请求的时候， $form 对象将自动地在页面上显示出来。

这里要说明的是，如果用户没有输入用户名就点击了Ok按钮来提交表单。 ClickServlet
将生成一个新的SimpleForm实例并处理表单控件，表单控件处理时发现该字段不合法，
所以onsubmit()方法简单的返回一个true。之后，表单将显示验证错误信息。

在提交和验证的时候表单将自动的维护输入的数据的状态。

现在如果用户输入了名字并点击了OK按钮，表单将被验证通过并通过onSubmit()将msg信息
添加到Pages模型中。页面将显示如下:
Your name is John Masters

Advanced Form Example

AdvancedForm Page将提供一个使用表单的高级的例子，使用form、 field和fieldSet。
首先我们让AdvancedForm 在他的构造方法中生成一个Form。Form的Select列表
在页面的onInit()方法中被组装。此时，要求page依赖的所有资源应该是有效的。

在本例中， page的public类型的form字段被自动地添加到控件列表中。

public class AdvancedForm extends Page {

    public Form form = new Form();
    public String msg;

    private Select investmentSelect = new Select("investment");

    // ------------------------------------------------------------ Constructor

    public AdvancedForm() {
        FieldSet fieldSet = new FieldSet("Customer");
        form.add(fieldSet);

        TextField nameField = new TextField("name", true);
        nameField.setMinLength(5);
        nameField.setFocus(true);
        fieldSet.add(nameField);

        fieldSet.add(new EmailField("email", true));

        fieldSet.add(investmentSelect);

        fieldSet.add(new DateField("dateJoined", true));
        fieldSet.add(new Checkbox("active"));

        form.add(new Submit("ok", " OK ", this, "onOkClicked"));
        form.add(new Submit("cancel", this, "onCancelClicked"));
    }

    // --------------------------------------------------------- Event Handlers

    /**
     * @see Page#onInit()
     */
    public void onInit() {
        CustomerService customerService = getCustomerService();
        investmentSelect.add(Option.EMPTY_OPTION);
        investmentSelect.addAll(customerService.getInvestmentCatetories());
    }

    /**
     * 处理Ok 按钮的Click事件
     *
     * @return true
     */
    public boolean onOkClicked() {
        if (form.isValid()) {
            Customer customer = new Customer();
            form.copyTo(customer);

            getCustomerService().saveCustomer(customer);

            form.clearValues();

            msg = "A new customer record has been created.";
        }
        return true;
    }

    /**
     * Handle the Cancel button click event.
     *
     * @return false
     */
    public boolean onCancelClicked() {
        setRedirect(HomePage.class);
        return false;
    }
}

新建AdvancedForm 的对应的模板advanced-form.htm， Click 会自动地将advanced-form.htm 模板与AdvancedForm 类关联起来。

<html>
<head>
$cssImports
</head>
<body>

#if ($msg)
  <div id="msgDiv"> $msg </div>
#end
  
$form
    
</body>
</html> 
$jsImports

当AdvancedForm 第一次请求页面的时候， $form 对象对显示出来。

在本例中，当Ok按钮被点击的时候onOkClicked()被调用。如果表单是有效的，一个新的
customer 对象被创建并使用form的copyto()方法将表单字段的值拷贝到customer对象中去。之后， customer 对象被保存，表单字段值被清空， info信息被显示给用户。

Form Layout

上面我们使用了表单控件来生成html表单和字段。对快速构建页面这是一个很
好的特点。表单控件也提供了一些布局属性。参见后面的章节。