深入浅出GWT及布局.docx

深入浅出GWT（一）基础篇之表单设计 GXT只是GWT基础上的升级，所以这里所说的GWT包含了GXT，也就是升级版的GWT。 GWT的最小单位并不是表单，甚至有时候并不需要以表单为单位处理数据，但表单依然是GWT开发中不可或缺的一个单元，我们习惯性的将一个表单里的数据放在一起进行处理。例如图书管理里面新增一个书，我们习惯性的将这本书的所有信息放在一个表单里面，然后将这个表单里面的数据一次性保存下来。当然，由于需求的需要，你也可以在点击保存的时候或者在点击保存之前对这些数据分开进行处理。 总而言之，GWT处理数据并不依赖表单为单位，但这些数据的输入输出需要表单作为平台。 下面结合例子对各个基础组件一一进行描述。 一、前台处理技术之表单基础组件 （一） LabelField-文字域 1、举例 LabelField titleLabel = new LabelField(“投票标题（限512字以内）: ”); 2、使用说明 相当于文字说明，常用于下列基础组件之前的文字描述。 （二）TextField-文本框 1、举例：新增一个文本框，让用户输入投票的标题。代码如下： TextField ballotTitle = new TextField(); 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-90-9*$); / ballotTitle.getMessages().setRegexText(请正确输入正整数！); / ballotTitle.setLabelStyle(IReadConstants.FORM_LABEL_BOLD_STYLE); ballotTitle.setEnabled(true); ballotTitle.setEditable(true); ballotTitle.setReadOnly(false); 2、使用说明： （1）用new TextField()的方式生成一个文本框。 （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 pageType = new ListStore(); pageType.add(LableData.getPageTypeStates(); / ComboBox ComboBox pageTypeComboBox = new ComboBox(); pageTypeComboBox.setEmptyText(-请选择-); pageTypeComboBox.setEditable(false); pageTypeComboBox.setDisplayField(name); pageTypeComboBox.setValueField(id); pageTypeComboBox.setWidth(150); pageTypeComboBox.setStore(pageType); / LableData.getPageTypeStates() public static List getPageTypeStates() List states = new ArrayList(); 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 store)-设置下拉列表的下拉菜单项。 Notes： setDisplayField与setValueField的值与State中的值对应。 比较常见的用法还有时分秒的下拉列表，不同的是编辑的时候要获取数据库中保存的值，所以它就要多设置一个属性，如设置小时的下拉列表： / ListStore ListStore hourList = new ListStore(); hourList.add(PageManageData.getHour(); / ComboBox ComboBox hour = new ComboBox(); 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 ballotTitle = new TextField(); 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-内容面板：页面布局的时候经常用到此面板前言 表单处理实际上就是对表单组件的输入输出的数据的处理。常见的表单数据的输入（新增或修改）输出（查询或修改）载体是TextField、DateField、TextArea、comboBox、RadioGroup、CheckBoxGroup。下面对这几种组件的数据处理一一进行阐述。 声明：请结合深入浅出GWT（一）基础篇之表单设计中对应的例子。 一、TextField-文本框数据处理 1、 输入处理：获取TextField输入的值比较简单，调用getValue()方法就可以了。 举例-获取投票标题的值代码如下： String ballot_title = ballotTitle.getValue().trim； 2、输出处理：输出TextField的值也很简单，调用setValue(String value)方法就可以了。 举例-输出投票标题的值代码如下： ballotTitle.setValue(ballotData.getBallot_title(); 说明： (1) ballotData是一个模型，封装了投票的所有属性，从数据库中查出的值保存到这个模型中，方便处理数据。 (2) getBallot_title()获取投票标题的值。 二、DateField-时间组件数据处理 1、输入处理：获取DateField的值有两种方法即getValue()和getRawValue()，前者获取的是Date类型的值，后者获取的是String类型的值，在做校验时需要用到Date的值，例如经常会用到与当前时间进行比较等，做数据处理的时候（例如拼接时分秒或者设定特殊的时间格式等）用String类型就比较方便。 举例-获得投票的开始时间代码如下： (1)Date sendStartDate = getBeginDate.getValue(); (2)String sendStartDateString = getBeginDate.getRawValue(); 2、输出处理：与之对应的是setValue(Date value)和setRawValue(String value)。 举例-输出投票的开始日期 (1)getBeginDate.setValue(ballotData.getStartDate(); (2)getBeginDate.setRawValue(ballotData.getStartDateString(); 三、TextArea-文本域数据处理 文本域与文本框的数据输入输出方式是一样的，具体处理方式请参上面的TextField。 四、ComboBox-下拉列表数据处理 1、输入处理：获取ComboBox的数据需要注意，下拉列表存的什么值，获取的就是什么值。 举例-获取页面类型下拉列表所选择的值： ComboBox pageTypeComboBox = new ComboBox(); State state = pageTypeComboBox.getValue(); State封装的是自己想要的各种属性，获取到State就相当于获取到了自己所想要的各种属性值。 一般想要的是菜单项的ID，那么String id = state.get(id); 2、输出处理：调用setValue(Object o)方法。 举例-设置数据库保存的页面下拉列表的值，代码如下： bookNewsState.setValue(state); 五、RadioGroup-单选框组件数据处理 分析，单选框选中的话值为true，反之为false，一般我会把单选框组件所选中的值保存在一个属性里面，这样的话我们只需要分别标识各个单选框单元的值就行了，例如有三个单选框单元radio1、radio2、radio3，分别标记为字符串类型的1、2、3，选中了那个保存数据的时候就储存相应的值。 1、输入处理：调用对应的单选框单元Radio的getValue()值，若为true，保存相应的值，举例如下： String value = 1; boolean value1 = radio1.getVaule; boolean value2 = radio2.getVaule; boolean value3 = radio3.getVaule; if (value2) value = 2; e