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

来源：互联网发布：源码免费下载编辑：程序博客网时间：2024/05/16 01:55

最近要对公司项目重构，需要使用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类型为 DROPDOWNButton 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);

类型

图样

备注

基本输入框

在输入框的任意一侧添加额外元素或按钮。

你还可以在输入框的两侧同时添加额外元素。

可以设置InputGroup 尺寸大小；

// 新建一个InputgroupInputGroup 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.导航

类型

图样

备注

 // 新建 NavtabsNavTabs navTabs = new NavTabs();// 新建 多个AnchorListItem，作为导航标签AnchorListItem anchorListItem1 = new AnchorListItem("Tab1");AnchorListItem anchorListItem2 = new AnchorListItem("Tab2");AnchorListItem anchorListItem3 = new AnchorListItem("Tab3");anchorListItem1.setActive(true);  // 设置其为 active stylesanchorListItem2.setActive(false);anchorListItem3.setActive(false);navTabs.add(anchorListItem1);navTabs.add(anchorListItem2);navTabs.add(anchorListItem3);

类型

图样

备注

胶囊式标签页

也可以设置垂直排列

 // 新建一个navPillsNavPills 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);

0 0

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

1.按 钮 类

2.输入框组

3.导航

4. 导航条

5.Brand image

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

1.按钮类