GWT-Bootstrap3中 组件开发文档（一）
最近要对公司项目重构，需要使用GWT-Bootstrap3中组件开发，之前研究了两星期，整理了一些基础组件的开发文档，在此贴出来，与大家分享，也做个记录；内容中还有些地方没完善，仍在修改中，等修改好会在以后的日志中重新贴上；有不足之处，请各位包含并指出，谢谢！
1.按 钮 类
|
类 型 |
图样 |
备注 |
|---|---|---|
| 按 钮 |
可以对其设置 ：颜色，大小， 图标，点击事件处理 等等； |
//创建不同样式按钮
Button button1 = new Button("Danger"); // 设置 Button 显示名
button1.setIcon(IconType.ALIGN_CENTER); // 设置 Button 图标类型
button1.setType(ButtonType.DANGER); // 设置 Button 类型
button1.setIconPosition(IconPosition.LEFT); //设置 Button 图标显示位置
button1.setSize(ButtonSize.DEFAULT); // 设置 Button 大小
// 按钮添加点击事件处理
button1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("I am a normal button");
}
});
|
|
类型 |
图样 |
备注 |
|---|---|---|
| 按钮组 |
Buttongroup分为两种： ButtonGroup 和 VerticalButtonGroup |
//新建一个Buttongroup,存放多个按钮，水平摆放 ButtonGroup buttonGroup = new ButtonGroup(); buttonGroup.add(button1); buttonGroup.add(button2); // 再建 一个VerticalButtongroup,垂直摆放 VerticalButtonGroup buttonGroup2 = new VerticalButtonGroup(); buttonGroup2.add(button3); buttonGroup2.add(button4); buttonGroup2.add(button5); |
|
类型 |
图样 |
备注 |
|---|---|---|
| 下拉菜单 |
之前的Button属性，此处同样可以设置； 另外可以设置 下拉菜单 中选项是否可以 选中，或者添加分割线等等； |
// 新建一个dropdown，存放dropdownHeader,DropDownMenu
DropDown dropDown = new DropDown();
// 新建一个Button，设置Toggle类型为 DROPDOWN
Button dropDownButton = new Button("DropDown");
dropDownButton.setDataToggle(Toggle.DROPDOWN);
// 新建一个dropdownHeader,可设置其标题
DropDownHeader dropDownHeader = new DropDownHeader();
dropDownHeader.setText("DropDownHeader");
// 建一个DropdownMenu,存放下拉菜单中的内容
DropDownMenu dropDownMenu = new DropDownMenu();
// 建立多个菜单下拉选项
AnchorListItem anchorListItem1 = new AnchorListItem("AnchorListItem1");
AnchorListItem anchorListItem2 = new AnchorListItem("AnchorListItem2");
AnchorListItem anchorListItem3 = new AnchorListItem("AnchorListItem3");
anchorListItem3.setEnabled(false); // 可将其设置为 不可选
dropDownMenu.add(dropDownHeader);
dropDownMenu.add(new Divider()); // 添加 分割线
dropDownMenu.add(anchorListItem1);
dropDownMenu.add(anchorListItem2);
dropDownMenu.add(anchorListItem3);
dropDown.add(dropDownButton);
dropDown.add(dropDownMenu); |
|
类型 |
图样 |
备注 |
|---|---|---|
| 分裂式按钮下拉菜单 |
|
主要 是 需要建立两个Button， 用ButtonGroup进行整合； 可以设置其展开菜单方向； |
ButtonGroup buttonGroup = new ButtonGroup();
Button button1 = new Button("Action");
button1.setType(ButtonType.DANGER);
Button button = new Button();
button.setType(ButtonType.DANGER);
button.setDataToggle(Toggle.DROPDOWN);
DropDownMenu dropDownMenu = new DropDownMenu();
AnchorListItem anchorListItem1 = new AnchorListItem("AnchorListItem1");
AnchorListItem anchorListItem2 = new AnchorListItem("AnchorListItem2");
AnchorListItem anchorListItem3 = new AnchorListItem("AnchorListItem3");
dropDownMenu.add(anchorListItem1);
dropDownMenu.add(anchorListItem2);
dropDownMenu.add(new Divider());
dropDownMenu.add(anchorListItem3);
buttonGroup.add(button1);
buttonGroup.add(button);
buttonGroup.add(dropDownMenu);
buttonGroup.setDropUp(false); //设置true 时，为向上展开菜单 |
|
类型 |
图样 |
备注 |
|---|---|---|
| 两端对齐排列的按钮组 |
主要是 要将每个Button放入ButtonGroup中 |
// 新建 多个Buttongroup
ButtonGroup buttonGroup = new ButtonGroup();
ButtonGroup buttonGroup1 = new ButtonGroup();
ButtonGroup buttonGroup2 = new ButtonGroup();
ButtonGroup buttonGroup3 = new ButtonGroup();
// 设置buttongroup两端对齐
buttonGroup.setJustified(true);
//新建三个Button，设置不同类别,颜色不同
Button button1 = new Button("Primary");
Button button2 = new Button("Danger");
Button button3 = new Button("Warning");
button1.setType(ButtonType.PRIMARY);
button2.setType(ButtonType.DANGER);
button3.setType(ButtonType.WARNING);
//每个Buttongroup中存放一个button
buttonGroup1.add(button1);
buttonGroup2.add(button2);
buttonGroup3.add(button3);
buttonGroup.add(buttonGroup1);
buttonGroup.add(buttonGroup2);
buttonGroup.add(buttonGroup3);
2.输入框组
|
类型 |
图样 |
备注 |
|---|---|---|
| 基本输入框 |
在输入框的任意一侧添加额外元素或按钮。 你还可以在输入框的两侧同时添加额外元素。 可以设置InputGroup 尺寸大小； |
// 新建一个Inputgroup
InputGroup inputGroup = new InputGroup();
// 新建 InputGroupAddon, 可设置其 内容
InputGroupAddon inputGroupAddon = new InputGroupAddon();
inputGroupAddon.setText("Addon");
InputGroupAddon inputGroupAddon2 = new InputGroupAddon();
inputGroupAddon2.setText("Addon2"); // 设置其 内容
Input input = new Input(InputType.TEXT);
input.setText("Username");
inputGroup.add(inputGroupAddon);
inputGroup.add(input);
inputGroup.add(inputGroupAddon2); |
|
类型 |
图样 |
备注 |
|---|---|---|
|
|
关于输入框可以进行重构， 使其能够包含多种不同形 式的输入框 |
waiting for adding ... |
3.导航
|
类型 |
图样 |
备注 |
|---|---|---|
| 标签页 |
|
// 新建 Navtabs
NavTabs navTabs = new NavTabs();
// 新建 多个AnchorListItem，作为导航标签
AnchorListItem anchorListItem1 = new AnchorListItem("Tab1");
AnchorListItem anchorListItem2 = new AnchorListItem("Tab2");
AnchorListItem anchorListItem3 = new AnchorListItem("Tab3");
anchorListItem1.setActive(true); // 设置其为 active styles
anchorListItem2.setActive(false);
anchorListItem3.setActive(false);
navTabs.add(anchorListItem1);
navTabs.add(anchorListItem2);
navTabs.add(anchorListItem3);
|
|
类型 |
图样 |
备注 |
|---|---|---|
| 胶囊式标签页 |
也可以设置垂直排列 |
// 新建一个navPills
NavPills navpills = new NavPills();
navpills.setStacked(false); // 设置true,可以使 标签垂直排列
navpills.setJustified(false);// 设置true,可以使 导航标签两端对齐
// 新建 多个AnchorListItem，作为导航标签
AnchorListItem anchorListItem11 = new AnchorListItem("Tab1");
AnchorListItem anchorListItem12 = new AnchorListItem("Tab2");
AnchorListItem anchorListItem13 = new AnchorListItem("Tab3");
anchorListItem11.setActive(true);
navpills.add(anchorListItem11);
navpills.add(anchorListItem12);
navpills.add(anchorListItem13); |
4. 导航条
|
类型 |
图样 |
备注 |
|---|---|---|
| 默认样式的导航条 |
两个下拉列表 与 其他组件未在同一行， 还在修改中... |
// 建立一个导航条 Navbar
Navbar navbar= new Navbar();
// 建立一个Container容器
Container container = new Container();
container.setFluid(true); // 设置 Container容器为 流体式
// 新建一个 NavbarHeader
NavbarHeader navbarHeader = new NavbarHeader();
// 新建一个navbarToggle
// Toggle toggleDropDown = Toggle.DROPDOWN;
//新建一个navbarBrand 标记
NavbarBrand navbarBrand = new NavbarBrand();
navbarBrand.setHref(""); // 设置链接
navbarBrand.setText("Brand");
// 将导航标志 添加到 导航条头 中
navbarHeader.add(navbarBrand);
// 新建navbarCollapse，存放 链接元素，表单，下拉菜单等
NavbarCollapse navbarCollapse = new NavbarCollapse();
//新建navbarNav，存放 链接元素，下拉菜单
NavbarNav navbarNav = new NavbarNav();
// 新建链接 元素
AnchorListItem Link1 = new AnchorListItem("Link1");
AnchorListItem Link2 = new AnchorListItem("Link2");
Link1.setActive(true); // 设置为 Active状态
Link1.setHref(""); // 设置 链接
Link2.setHref("");
// 构造一个 下拉菜单
DropDown dropDown = new DropDown();
Anchor Link3 = new Anchor(); // 注意 此处选择Anchor
Link3.setText("DropDown");
Link3.setHref("");
Link3.setDataToggle(Toggle.DROPDOWN);
Link3.setIcon(IconType.CARET_DOWN);
Link3.setIconPosition(IconPosition.RIGHT);
DropDownMenu dropDownMenu = new DropDownMenu();
AnchorListItem Link30 = new AnchorListItem("anchorListItem30");
AnchorListItem Link31 = new AnchorListItem("anchorListItem31");
AnchorListItem Link32 = new AnchorListItem("anchorListItem32");
dropDownMenu.add(Link30);
dropDownMenu.add(Link31);
dropDownMenu.add(Link32);
dropDown.add(Link3);
dropDown.add(dropDownMenu);
// 将 两个链接文本 和 下拉菜单链接 添加到navbarNav
navbarNav.add(Link1);
navbarNav.add(Link2);
navbarNav.add(dropDown); // 也许 不应该添加到 navbarNav中
// 新建一个 form 表单
NavbarForm navbarForm = new NavbarForm();
navbarForm.setPull(Pull.LEFT);
FormGroup formGroup = new FormGroup();
Input input = new Input(InputType.TEXT);
input.setPlaceholder("Search");
formGroup.add(input);
CheckableInputButton button = new CheckableInputButton(TypeAttrType.SUBMIT);
button.setType(ButtonType.SUCCESS);
button.setTitle("Submit");
navbarForm.add(formGroup);
navbarForm.add(button);
//新建一个navbarNav, 存放 链接地址，下拉菜单
NavbarNav navbarNav2 = new NavbarNav();
navbarNav2.setPull(Pull.RIGHT);
AnchorListItem Link21 = new AnchorListItem("Link21"); // 链接地址
DropDown dropDown2 = new DropDown();
Anchor anchor = new Anchor();
anchor.setDataToggle(Toggle.DROPDOWN);
anchor.setText("DownDown2");
anchor.setHref("");
anchor.setIcon(IconType.CARET_DOWN);
anchor.setIconPosition(IconPosition.RIGHT);
DropDownMenu dropDownMenu2 = new DropDownMenu();
AnchorListItem Link200 = new AnchorListItem("anchorListItem200");
AnchorListItem Link201 = new AnchorListItem("anchorListItem201");
AnchorListItem Link202 = new AnchorListItem("anchorListItem202");
dropDownMenu2.add(Link200);
dropDownMenu2.add(Link201);
dropDownMenu2.add(Link202);
dropDown2.add(anchor);
dropDown2.add(dropDownMenu2);
navbarNav2.add(Link21);
navbarNav2.add(dropDown2);
// 添加 navbarNav 到导航折叠条 navbarCollapse中
navbarCollapse.add(navbarNav);
navbarCollapse.add(navbarForm);
navbarCollapse.add(navbarNav2);
// 添加 导航头 ，导航折叠条 到 Container容器中
container.add(navbarHeader);
container.add(navbarCollapse);
// 添加Container到导航条中
navbar.add(container);
// 将导航条 方法 基面板中
panel.add(navbar); |
5.Brand image
|
类型 |
图样 |
备注 |
|---|---|---|
| 图片 |
获取图片的方法 是参照GWt中获取的； GWT-Bootstrap3中获取图片方式随后更新； |
Panel panel = new Panel();
Icon icon1 = new Icon(IconType.BOOK);
Image image = images.gwtLogo().createImage();
Image image2 = images.weiNi().createImage();
image2.setAltText("I'm WeiNi.");
panel.add(icon1);
panel.add(image);
panel.add(image2);