深入浅出GWT（一）——基础篇之表单设计

前言
GXT只是GWT基础上的升级，所以这里所说的GWT包含了GXT，也就是升级版的GWT。
GWT的最小单位并不是表单，甚至有时候并不需要以表单为单位处理数据，但表单依然是GWT开发中不可或缺的一个单元，我们习惯性的将一个表单里的数据放在一起进行处理。例如图书管理里面新增一个书，我们习惯性的将这本书的所有信息放在一个表单里面，然后将这个表单里面的数据一次性保存下来。当然，由于需求的需要，你也可以在点击保存的时候或者在点击保存之前对这些数据分开进行处理。
总而言之，GWT处理数据并不依赖表单为单位，但这些数据的输入输出需要表单作为平台。
下面结合例子对各个基础组件一一进行描述。


一、前台处理技术之表单基础组件
（一） LabelField-->文字域

1、举例
LabelField titleLabel = new LabelField(“投票标题（限512字以内）: ”);  

2、使用说明
相当于文字说明，常用于下列基础组件之前的文字描述。


（二）TextField-->文本框
1、举例：新增一个文本框，让用户输入投票的标题。代码如下：
TextField<String> ballotTitle = new TextField<String>();
ballotTitle.setWidth(215);
ballotTitle.setAllowBlank(false);
ballotTitle.setValue(ballotData.getBallot_title());
ballotTitle.getMessages().setBlankText(SID.LANG.ballot_BallotInfoAddDialog_BlankLimit());   
ballotTitle.setMaxLength(512);
ballotTitle.getMessages().setMaxLengthText(“投票标题最大长度为512字！”);
// ballotTitle.setRegex("^[1-9][0-9]*$");
// ballotTitle.getMessages().setRegexText("请正确输入正整数！");
// ballotTitle.setLabelStyle(IReadConstants.FORM_LABEL_BOLD_STYLE);
ballotTitle.setEnabled(true);
ballotTitle.setEditable(true);
ballotTitle.setReadOnly(false);

2、使用说明：
（1）用new TextField<String>()的方式生成一个文本框。
（2）setWidth(int width)-->设置文本框宽度。
（3）setAllowBlank(boolean allowBlank)-->设置是否可空。
（4）getMessages().setBlankText(String arg0)-->若文本框为空且setAllowBlank设置为true时的提示信息。
（5）setValue(String value)-->设置文本框的值。通常编辑的时候要用到。
（6）setMaxLength(int maxLength)-->设置文本框值的最大长度。
（7）getMessages().setMaxLengthText(Sring arg0)-->若超过设置的最大长度时的提示语。
（8）setRegex(String regex)-->设置正则表达式校验。
（9）getMessages().setRegexText(String arg0)-->若违反正则表达式时的提示语。
（10）setLabelStyle(String labelStyle)-->设置文字风格。常和setFieldLabel(String arg0)搭配使用，否则设置无效。
（11）setEnabled(boolean disabled)-->是否置灰。
（12）setEditable(boolean editabled)-->是否可编辑。
（13）setReadOnly(boolean)-->设置是否只读属性。
Note：以上最常用的属性值要视情况是否需要设置。



（三）DateField-->时间控件（yyyy-MM-dd）

1、举例：新增一个时间控件，让用户选择时间。代码如下：
DateField getBeginDate = new DateField();
// getBeginDate.setLabelStyle(IReadConstants.FORM_LABEL_BOLD_STYLE);
getBeginDate.setWidth(90);
getBeginDate.getPropertyEditor().setFormat(DateTimeFormat.getFormat("yyyy-MM-dd"));
getBeginDate.setEnabled(true);
getBeginDate.setAllowBlank(false);
getBeginDate.setEditable(false);
getBeginDate.setValue(ballotData.getStartDate());
getBeginDate.getMessages().setBlankText(SID.LANG.ballot_BallotInfoAddDialog_BlankLimit());

2、使用说明
（1）用new DateField()的方式生成一个时间控件
（2）getPropertyEditor().setFormat(DateTimeFormat format)-->设置日期控件的显示格式。
（3）其它用法请参TextField使用说明。
Note：若时间控件只能显示yyyy-MM-dd，那么需要时分秒时就要配合ComboBox组件使用（下面详细讲解）。



（四）TextArea-->文本域
1、举例：新增一个文本域，让用户输入文本内容。代码如下：
TextArea content = new TextArea();
content.setHeight(300);
content.setWidth(480);

2、使用说明
（1）当输入的内容较多时可以考虑用TextArea，用new TextArea()的方式生成一个文本域。
（2）setHeight(int height)-->设置文本框的高。
（3）setWidth(int width)-->设置文本框的宽。
（4）其它常见的属性设置请参TextField使用说明。



（五）ComboBox与ListStore-->下拉列表
1、举例：页面编辑系统/标签库管理/高级查询/页面类型下拉列表。代码如下：
// ListStore
ListStore<State> pageType = new ListStore<State>();
pageType.add(LableData.getPageTypeStates());

// ComboBox
ComboBox<State> pageTypeComboBox = new ComboBox<State>();
pageTypeComboBox.setEmptyText("---------请选择---------");
pageTypeComboBox.setEditable(false);
pageTypeComboBox.setDisplayField("name");
pageTypeComboBox.setValueField("id");
pageTypeComboBox.setWidth(150);
pageTypeComboBox.setStore(pageType);

// LableData.getPageTypeStates()
public static List<State> getPageTypeStates()
{
    List<State> states = new ArrayList<State>();
    states.add(new State("1", "创建页面"));
    states.add(new State("2", "引用页面"));
    return states;
}

2、使用说明：
（1）ListStore-->下拉列表的下拉菜单项。
（2）setDisplayField(String displayField)-->下拉菜单显示的值。
（3）setValueField(String valueField)-->下拉菜单实际的值。
（4）setEmptyText(String emptyText)-->设置下拉菜单的空文本项。
（5）setStore(ListStore<State> store)-->设置下拉列表的下拉菜单项。
Notes：
<1> setDisplayField与setValueField的值与State中的值对应。
<2> 比较常见的用法还有时分秒的下拉列表，不同的是编辑的时候要获取数据库中保存的值，所以它就要多设置一个属性，如设置小时的下拉列表：
// ListStore
ListStore<HourModel> hourList = new ListStore<HourModel>();
hourList.add(PageManageData.getHour());
// ComboBox
ComboBox<HourModel> hour = new ComboBox<HourModel>();
hour.setLabelStyle(IReadConstants.FORM_LABEL_BOLD_STYLE);
hour.setDisplayField("hour");
hour.setWidth(40);
hour.setMinListWidth(40);
hour.setStore(hourList);
hour.setEditable(false);
hour.setSelection(PageManageData.getHour());
// 新增的时候设置默认值，编辑的时候将0到9之间的值前面添加一个0
if (!isEmpty(ballotData.getHour()))
{
    hour.setValue(PageManageData.getHourModelByID(ballotData.getHour()));
               
    if (ballotData.getHour().length() == 1)
    {
        hour.setValue(PageManageData.getHourModelByID("0" + ballotData.getHour()));
    }
}
else
{
    hour.setValue(PageManageData.getHourModelByID("00"));
}



（六）RadioGroup与Radio-->单选框组件，Radio是单选框的选项单元
1、举例：新增一个单选框组件，拥有两个选项单元：是和否。代码如下：
Radio radio = new Radio();
radio.setBoxLabel("是");
           
Radio radio2 = new Radio();
radio2.setBoxLabel("否");
           
// 将radio加入到group中
RadioGroup radioGroup = new RadioGroup();
radioGroup.setFieldLabel("是否显示图片");
radioGroup.add(radio);
radioGroup.add(radio2);
radio.setName(name);
// radio.setValue(!value);
// radio2.setValue(value);
           
2、使用说明：
（1）Radio是单选框的选项单元，需要多少个选项就添加都少个Radio
（2）setBoxLabel(String boxLabel)-->设置选项单元的文字描述
（3）setFieldLabel(String fieldLabel-->设置单选框组件的文字描述
（4）add(Radio field)-->添加选项单元
（5）setName(String name)-->设置HTML的属性名，若只有两个选项只需要设置一个即可。
（6）setValue(Boolean value)-->在编辑数据的时候需要用到赋值



（七）CheckBoxGroup与CheckBox-->复选框，CheckBox是复选框的选项单元
1、举例：内容管理/新闻发布管理/新增/位置。代码如下：
CheckBoxGroup checkBoxGroup = new CheckBoxGroup();
checkBoxGroup.setFieldLabel("位置：");

CheckBox isTopCB = new CheckBox();
isTopCB.setId("0");
isTopCB.setBoxLabel("分类置顶");
// isTopCB.setValue(true);

CheckBox isInMainPageCB = new CheckBox();
isInMainPageCB.setId("1");
isInMainPageCB.setBoxLabel("首页显示");
// isInMainPageCB.setValue(true);

checkBoxGroup.add(isTopCB);
checkBoxGroup.add(isInMainPageCB);

2、使用说明：
（1）setFieldLabel(String fieldLabel)-->设置复选框的文字描述
（2）setId(String id)-->设置选项单元的id标识
（3）setBoxLabel(String boxLabel)-->设置选项单元的文字描述
Note：复选框的数据需要一些特殊处理，这个在下一篇总结《深入浅出GWT（二）--基础篇之表单数据处理》详细描述。

二、前台处理技术之表单基础布局
（一）HorizontalPanel-->水平面板
1、举例：
LabelField titleLabel = new LabelField("投票标题:");
TextField<String> ballotTitle = new TextField<String>();
HorizontalPanel titlePanel = new HorizontalPanel();
titlePanel.setSpacing(10);
titlePanel.setHorizontalAlign(HorizontalAlignment.LEFT);
titlePanel.add(titleLabel);
titlePanel.add(ballotTitle);

2、使用说明：
（1）setSpacing(int spacing)-->设置面板的空间。
（2）setHorizontalAlign(horizontalAlignment horizontalAlign)-->设置面板的位置。
（3）add(Widget widget)-->添加组件。添加的所有组件都是放在同一行的。


（二）VerticalPanel-->垂直面板
1、举例：
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);
vp.add(titleLabel);

2、使用说明：
（1）setSpacing(int spacing)-->设置面板的空间。
（2）setHorizontalAlign(horizontalAlignment horizontalAlign)-->设置面板的位置。
（3）add(Widget widget)-->添加组件。添加的所有组件都是放在同一垂直面板的。
Note:水平面板和垂直面板之间可以任意嵌套。


（三）FieldSet-->域，即可以将基础组件都封装在域里面
1、举例：
FieldSet ballotOtherSet = new FieldSet();
ballotOtherSet.setHeading("投票标题（必填）、投票数（必填）设置");            
ballotOtherSet.setWidth(450);

// 域的布局
TableLayout otherLayout = new TableLayout();
otherLayout.setCellSpacing(10);
ballotOtherSet.setLayout(otherLayout);

ballotOtherSet.add(titlePanel);        // 投票标题
ballotOtherSet.add(perPanel);          // 每人每天可投票的选项项数
ballotOtherSet.add(totalPanel);        // 每个选项每人的总投票数
ballotOtherSet.add(optionLimitPanel);  // 每个选项每人每天的投票数

2、使用说明：
（1）setHeading(String heading)-->设置域的头
（2）setWidth(int width)-->设置域的宽
（3）setLayout(Layout layout)-->设置域的布局
（4）setCellSpacing(int cellSpacing)-->设置布局单元的空间
（5）add(Widget widget)-->添加组件到域里面

Note：FieldSet并不是非要不可，要视情况而定，可以将表单项类似的项放在一个域里面。这样显得简洁美观。


（四）FormPanel-->form表单
1、举例：
FormPanel form = createCommFormPanel(100);
form.setHeight(500);
form.add(ballotOtherSet);

2、使用说明：以上三种基础布局可以任意嵌套地添加到FormPanel里面，也可以直接添加基础组件，总之，设计出能让用户满意的表单界面是我们的宗旨。

（五）ContentPanel-->内容面板：页面布局的时候经常用到此面板。详见《深入浅出GWT（三）——基础篇之页面布局》

评论

1 楼 wenqiang06ky 2010-06-09  

说明：关于GWT的总结后期还有至少4到5篇，
望有相同工作经验或者正在学习或研究此技术的同学们不吝赐教