GWT-Bootstrap3中 组件开发文档（二）

6. 表单

类型	图样	备注
表单		提交按钮位置，属性均可以设定；

// 建立一个表单 NavbarForm navbarForm = new NavbarForm(); // 建立一个输入框 Input input = new Input(InputType.TEXT); // 建立一个提交按钮 InputButton submitButton = new InputButton(TypeAttrType.SUBMIT); submitButton.setType(ButtonType.SUCCESS); navbarForm.add(input); navbarForm.add(submitButton);

类型	图样	备注
水平排列的表单

// 新建一个Form Form form = new Form(); form.setType(FormType.HORIZONTAL); panel.setMarginLeft(20); //新建一个FormGroup, 存放 邮箱地址 FormGroup formGroup1 = new FormGroup(); // 定义一个标签 Label label1 = new Label(LabelType.SUCCESS,"邮箱地址: "); //定义输入框 Input input1 = new Input(InputType.EMAIL); input1.setText("请输入邮箱"); // 定义一个列 元素，存放标签 Column column10 = new Column(ColumnSize.SM_1); column10.add(label1); // 定义一个列 元素，存放输入框 Column column11 = new Column(ColumnSize.SM_8); column11.add(input1); // 添加到formGroup中 formGroup1.add(column10); formGroup1.add(column11); //新建一个FormGroup，存放 password FormGroup formGroup2 = new FormGroup(); Label label2 = new Label(LabelType.DANGER,"邮箱密码: "); Input input2 = new Input(InputType.PASSWORD); Column column20 = new Column(ColumnSize.SM_1); column20.add(label2); Column column21 = new Column(ColumnSize.SM_8); column21.add(input2); formGroup2.add(column20); formGroup2.add(column21); //新建一个FormGroup,存放文件上传按钮 FormGroup formGroup3 = new FormGroup(); Label label3 = new Label(LabelType.PRIMARY,"上传文件: "); Input input3 = new Input(InputType.FILE); Column column30 = new Column(ColumnSize.SM_1); column30.add(label3); Column column31 = new Column(ColumnSize.SM_8); column31.add(input3); formGroup3.add(column30); formGroup3.add(column31); // 新建一个复选框 FormGroup formGroup4 = new FormGroup(); Column column40 = new Column(ColumnSize.SM_10); CheckBox checkBox = new CheckBox(); Label label = new Label("Remember me"); checkBox.add(label); column40.add(checkBox); formGroup4.add(column40); //添加一个提交按钮 CheckableInputButton submitButton = new CheckableInputButton(TypeAttrType.SUBMIT); submitButton.setText("submit"); form.add(formGroup1); form.add(formGroup2); form.add(formGroup3); form.add(formGroup4); form.add(submitButton);

类型	图样	备注
标准表单控件		输入框 ： 包括大部分表单控件、文本输入域控件； 文本域：支持多行文本的表单控件 多选和单选框 内联单选和多选框

// 输入框 Input input1 = new Input(InputType.TEXT); input1.setText("输入框，包括大部分表单控件、文本输入域控件，还支持 " + "Emai,Date，Number,Password等输入类型"); //文本域 TextArea textArea = new TextArea(); textArea.setText("文本域，支持多行文本的表单控件"); //多选框 CheckBox checkBox1 = new CheckBox("这是多选框"); CheckBox checkBox2 = new CheckBox("这是多选框，但无法选中"); checkBox2.setEnabled(false); //单选框 Radio radio = new Radio("Radio"); Radio radioButton1 = new Radio("单选框1"); Radio radioButton2 = new Radio("单选框2"); //内联单选 和 内联多选 InlineCheckBox inlineCheckBox1 = new InlineCheckBox("1"); InlineCheckBox inlineCheckBox2 = new InlineCheckBox("2"); InlineCheckBox inlineCheckBox3 = new InlineCheckBox("3"); InlineRadio inlineRadio1 = new InlineRadio("1"); InlineRadio inlineRadio2 = new InlineRadio("2"); InlineRadio inlineRadio3 = new InlineRadio("3"); // 新建一个ListBox ListBox listBox = new ListBox(); listBox.setSize("200px", "30px"); // 设置下拉列表大小 // 添加列表元素 listBox.addItem("listBox1"); listBox.addItem("listBox2"); listBox.addItem("listBox3"); listBox.addItem("listBox4");

类型	图样	备注

7.分页

类型	图样	备注
默认分页		可以通过设置属性为disable给不能点击的链接、 也可以给当前页设置为active;

Pagination pagination = new Pagination(PaginationSize.NONE); pagination.addPreviousLink(); pagination.add(new AnchorListItem("1")); pagination.add(new AnchorListItem("2")); pagination.add(new AnchorListItem("3")); pagination.add(new AnchorListItem("4")); pagination.add(new AnchorListItem("5")); pagination.addNextLink(); pagination.setMarginLeft(20); // 设置 离窗口左边 距离，同理可以对其位置修改

类型	图样	备注
翻  页		可以将前后页设置为窗口两侧； 可以为前后页按钮添加点击事件处理； 也可以设置禁用状态；

// 新建一个Pager，为其设置 前后页 Pager pager = new Pager(); // 设置上一页，并给其设置图标 pager.setPreviousText("上一页"); pager.setPreviousIcon(IconType.ARROW_LEFT); // 设置下一页，并给其设置图标 pager.setNextText("下一页"); pager.setNextIcon(IconType.ARROW_RIGHT); //设置 前后页标签 分别位于页面两边 pager.setAlignToSides(true); // 为 前后页按钮添加点击事件处理 pager.addPreviousClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("sorry, this is nothing in previous page."); } }); pager.addNextClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Sorry ,this is nothing in Next page."); } });

8.标签

类型	图样	备注
标签		可以设置标签不同类型； 但标签字体大小暂时未实现改变；

// 定义 五个标签，分别设置不同类型 Label label1 = new Label(LabelType.DANGER,"danger"); Label label2 = new Label(LabelType.INFO,"info"); Label label3 = new Label(LabelType.WARNING,"warning"); Label label4 = new Label(LabelType.DEFAULT,"default"); Label label5 = new Label(LabelType.SUCCESS,"Success"); // 设置每个标签 位置，左侧空出一定距离 label1.setMarginLeft(10); label2.setMarginLeft(10); label3.setMarginLeft(10); label4.setMarginLeft(10); label5.setMarginLeft(10);

9.徽章

类型	图样	备注
徽章		给链接、导航等元素添加badge 元素， 可以很醒目的展示新的或未读的信息条目。

Navbar navbar = new Navbar(); // 新建一个徽章 Badge badge = new Badge("24"); navbar.add(new Button("未读消息")); navbar.add(badge); // 添加到navbar中

10.巨幕

类型	图样	备注
巨幕		这是一个轻量、灵活的组件，它能延伸至 整个浏览器视口来展示网站上的关键内容； 巨幕上可以添加 文本，按钮等组件；

//新建一个Jumbotron,存放文本内容 或 其他组件 Jumbotron jumbotron = new Jumbotron(); // 新建一个文本，作为巨幕标题 Heading text = new Heading(HeadingSize.H1); text.setText("Hello World!"); // 标题内容 text.setAlignment(Alignment.LEFT); // 标题位置 // 添加段落 Paragraph paragraph = new Paragraph(); paragraph.setText("This is a simple hero unit," + " a simple jumbotron-style component for " + "calling extra attention to featured content" + " or information."); //新建Button Button button = new Button("Learn More"); button.setType(ButtonType.PRIMARY); jumbotron.add(text); jumbotron.add(paragraph); jumbotron.add(button);

11.页头

类型	图样	备注
页头

	 //新建一个页头
        PageHeader pageHeader = new PageHeader();
        
        pageHeader.setText("Example page header");
        pageHeader.setSubText("Subtext for header");