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

最新推荐文章于 2023-06-11 22:31:14 发布

墨者侠客sbw

最新推荐文章于 2023-06-11 22:31:14 发布

阅读量2.7k

点赞数

文章标签：重构 bootstrap GWt

本文链接：https://blog.csdn.net/u010419967/article/details/38486755

版权

最近要对公司项目重构，需要使用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 和

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属性，此处同样可以设置；另外可以设置下拉菜单中选项是否可以选中，或者添加分割线等等；

类型

图样

备注

之前的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进行整合；可以设置其展开菜单方向；

类型

图样

备注

分裂式按钮下拉菜单

主要是需要建立两个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 尺寸大小；

类型

图样

备注

基本输入框

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

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

可以设置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中获取图片方式随后更新；

类型

图样

备注

图片

获取图片的方法是参照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);