1. FlowPanel 普通容器
1 //普通的容器,使用HTML默认的布局行为 2 FlowPanel flowPanel = new FlowPanel(); 3 flowPanel.add(new Label("flowPanel")); 4 flowPanel.add(new Label("flowPanel")); 5 6 for(int i = 0;i < 10;i++){ 7 flowPanel.add(new RadioButton("test",String.valueOf(i))); 8 };
2. HorizontalPanel 元素水平排列的容器
1 //元素水平排列的容器 2 HorizontalPanel horizontalPanel = new HorizontalPanel(); 3 horizontalPanel.add(new Label("horizontalPanel")); 4 5 for(int i = 0;i < 10;i++){ 6 horizontalPanel.add(new RadioButton("test1",String.valueOf(i))); 7 };
3. VerticalPanel 元素垂直排列的容器
1 //元素垂直排列的容器 2 VerticalPanel verticalPanel = new VerticalPanel(); 3 verticalPanel.add(new Label("VerticalPanel")); 4 5 for(int i = 0;i < 10;i++){ 6 verticalPanel.add(new RadioButton("test2",String.valueOf(i))); 7 }; 8 rootPanel.add(verticalPanel);
4. FlexTable 弹性表格
1 //弹性表格 2 FlexTable flexTable = new FlexTable(); 3 4 //设置单元格的外边距 5 flexTable.setCellSpacing(10); 6 //设置单元格的内边距 7 flexTable.setCellPadding(2); 8 //设置单元格的边框粗细 9 flexTable.setBorderWidth(2); 10 11 //获取单元格格式编辑器 12 FlexTable.FlexCellFormatter flexCellFormatter = flexTable.getFlexCellFormatter(); 13 14 flexTable.setWidget(0,0,new Button("点击")); 15 //设置合并列的数量 16 flexCellFormatter.setColSpan(0,0,2); 17 //设置合并行的数量 18 flexCellFormatter.setWidth(0,0,"500px"); 19 20 //给单元格添加元素 21 flexTable.setWidget(1,0,new Button("点击")); 22 flexTable.setWidget(1,1,new Button("点击")); 23 flexTable.setWidget(2,0,new Button("点击")); 24 flexTable.setWidget(2,1,new Button("点击")); 25 26 flexTable.setWidget(0,1,new Button("点击")); 27 flexCellFormatter.setRowSpan(0,1,3); 28 flexCellFormatter.setWidth(0,1,"200px");
5. Grid 网格
1 //grid网格,需要设置初始大小 2 Grid grid = new Grid(2,2); 3 4 grid.setWidget(0,0,new HTML("你好")); 5 grid.setWidget(1,1,new HTML("结束"));
6. DeckPanel
1 //实现类似于在同一个位置进行切换的效果 2 DeckPanel deckPanel = new DeckPanel(); 3 4 deckPanel.setSize("300px","200px"); 5 deckPanel.add(new Label("标签1")); 6 deckPanel.add(new Label("标签2")); 7 deckPanel.add(new Label("标签3")); 8 //根据索引来显示对应的Widget,按照添加的顺序来 9 deckPanel.showWidget(0); 10 HorizontalPanel horizontalPanel1 = new HorizontalPanel(); 11 12 Button button = new Button("显示标签1"); 13 Button button1 = new Button("显示标签2"); 14 Button button2 = new Button("显示标签3"); 15 16 button.addClickHandler(new ClickHandler() { 17 @Override 18 public void onClick(ClickEvent event) { 19 //显示对应位置 20 deckPanel.showWidget(0); 21 } 22 }); 23 button1.addClickHandler(new ClickHandler() { 24 @Override 25 public void onClick(ClickEvent event) { 26 deckPanel.showWidget(1); 27 } 28 }); 29 button2.addClickHandler(new ClickHandler() { 30 @Override 31 public void onClick(ClickEvent event) { 32 deckPanel.showWidget(2); 33 } 34 }); 35 horizontalPanel1.add(button); 36 horizontalPanel1.add(button1); 37 horizontalPanel1.add(button2);
7. HtmlPanel html容器
1 //html容器 2 String htmlStr = "<div style=‘color:red‘>测试</div>"; 3 HTMLPanel htmlPanel = new HTMLPanel(htmlStr); 4 5 rootPanel.add(htmlPanel);
8. Composite 用于封装自定义的组件
1 //封装好的组件 2 private static class MyLabel extends Composite{ 3 private Label label; 4 5 public MyLabel() { 6 } 7 8 public MyLabel(String value) { 9 label = new Label(value); 10 11 //必要操作,包装你所用到的部件 12 initWidget(label); 13 } 14 15 } 16 17 //Composite用于包装部件来隐藏原有构建的方法。 18 MyLabel myLabel = new MyLabel("okok");
9. SimplePanel 简单容器
1 //简单容器,只允许有一个子元素 2 SimplePanel simplePanel = new SimplePanel(); 3 simplePanel.setHeight("50px"); 4 simplePanel.add(new Label("ok"));
10. ScrollPanel 显示滚动条的容器
1 //会显示滚动条的容器,只允许有一个子元素 2 ScrollPanel scrollPanel = new ScrollPanel(); 3 scrollPanel.setSize("300px","100px"); 4 FlowPanel flowPanel1 = new FlowPanel(); 5 6 flowPanel1.add(new HTML("<div style=‘width:200px;height:200px;background:red‘></div>")); 7 flowPanel1.add(new HTML("<div style=‘width:200px;height:200px;background:blue‘></div>")); 8 scrollPanel.add(flowPanel1);
11. FocusPanel 内容可聚焦容器
1 //内容可聚焦,并添加捕获鼠标和键盘事件 2 FocusPanel focusPanel = new FocusPanel(); 3 4 focusPanel.add(new Label("点击")); 5 focusPanel.addClickHandler(new ClickHandler() { 6 @Override 7 public void onClick(ClickEvent event) { 8 Window.alert("点击"); 9 } 10 });
12. FormPanel 表单容器
1 //表单容器 2 FormPanel formPanel = new FormPanel(); 3 ArrayList<String> formCombines = new ArrayList<>(Arrays.asList("编号","姓名","年龄")); 4 ArrayList<UIObject> formObjects = new ArrayList<>(Arrays.asList(new TextBox(),new TextBox(),new TextBox())); 5 VerticalPanel verticalPanel1 = new VerticalPanel(); 6 7 for(int i = 0;i < (formCombines.size() == formObjects.size() ? formCombines.size() : 0);i++){ 8 HorizontalPanel horizontalPanel2 = new HorizontalPanel();; 9 10 horizontalPanel2.add(new Label(formCombines.get(i))); 11 horizontalPanel2.add((Widget) formObjects.get(i)); 12 13 verticalPanel1.add(horizontalPanel2); 14 } 15 formPanel.add(verticalPanel1);