GWT常用小部件(1)

基本部件

1         //标签
2         Label label = new Label("label");
3         //html
4         HTML html = new HTML("<div style='width:100px;height:100px;background:red'></div>");
5         //图片
6         Image image = new Image("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3561051001,3911111764&fm=26&gp=0.jpg");
7         //锚点，a
8         Anchor anchor = new Anchor("前往百度","http://www.baidu.com");

表单部件

 1         //按钮
 2         Button button = new Button("button");
 3         //按下放开之后自动弹起
 4         PushButton pushButton = new PushButton("弹起","按下");
 5         //需要手动切换状态
 6         ToggleButton toggleButton = new ToggleButton("弹起","按下");
 7         //复选框
 8         CheckBox checkBox = new CheckBox("男");
 9         //单选框
10         RadioButton radioButton = new RadioButton("sex","男");
11         RadioButton radioButton1 = new RadioButton("sex","女");
12         //下拉列表
13         ListBox listBox = new ListBox();
14         listBox.addItem("start");
15         listBox.addItem("mid");
16         listBox.addItem("end");
17         //提示输入框
18         //提示内容
19         MultiWordSuggestOracle suggestOracle = new MultiWordSuggestOracle();
20         suggestOracle.add("start");
21         suggestOracle.add("sta");
22         suggestOracle.add("mid");
23         suggestOracle.add("end");
24         //输入框
25         SuggestBox suggestBox = new SuggestBox(suggestOracle);
26         //文本输入框
27         TextBox textBox = new TextBox();
28         //密码输入框
29         PasswordTextBox passwordTextBox = new PasswordTextBox();
30         //多行文本输入框
31         TextArea textArea = new TextArea();
32         //富文本输入框
33         RichTextArea richTextArea = new RichTextArea();
34         //文件上传标签
35         FileUpload fileUpload = new FileUpload();
36         //隐藏域
37         Hidden hidden = new Hidden();

复杂部件

1. 简单树部件

 1         //树组件
 2         Tree tree = new Tree();
 3         //TreeItem是作为根节点的，可以有多个根节点
 4         TreeItem treeItem = new TreeItem(new HTML("根节点"));
 5         TreeItem treeItem2 = new TreeItem(new HTML("根节点2"));
 6         //将根节点添加到树上
 7         tree.addItem(treeItem);
 8         tree.addItem(treeItem2);
 9         //可以给树添加选中事件
10         tree.addSelectionHandler(new SelectionHandler<TreeItem>() {
11             private boolean flag = false;
12             private String preText = null;
13 
14             @Override
15             public void onSelection(SelectionEvent<TreeItem> event) {
16                 event.getSelectedItem().setText("被选中");
17             }
18         });
19         //为根节点添加子节点
20         TreeItem treeItem1 = new TreeItem(new HTML("子节点d"));
21         treeItem1.addItem(new HTML("子节点2"));
22         treeItem.addItem(treeItem1);
23         treeItem2.addItem(new HTML("子节点3"));

2. 下拉菜单

 1         //下拉菜单
 2         MenuBar menuBar = new MenuBar(true);
 3         //可以为节点添加事件
 4         menuBar.addItem("项目1", false, new Command() {
 5             @Override
 6             public void execute() {
 7                 Window.alert("点击项目1");
 8             }
 9         });
10         //添加节点之间的分隔符
11         menuBar.addSeparator(new MenuItemSeparator());
12         menuBar.addItem(new MenuItem(new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml("项目2")));
13         MenuBar menuBar1 = new MenuBar(true);
14         menuBar1.addItem(new MenuItem(new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml("项目2")));
15         menuBar1.addItem(new MenuItem(new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml("项目2")));
16         menuBar1.addItem(new MenuItem(new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml("项目2")));
17         //实现多级菜单
18         menuBar.addItem("菜单1",false,menuBar1);
19         menuBar.setWidth("60px");
20         rootPanel.add(menuBar);

3. 时间选择器

1         //时间选择器
2         DatePicker datePicker = new DatePicker();
3 
4         rootPanel.add(datePicker);

4. 块状树型列表

  1     //标记接口，用于表示叶子节点
  2     private interface FinalCustomer{};
  3 
  4     //实现TreeViewModel
  5     private static class CustomerTreeModel implements TreeViewModel{
  6         private LinkedList<Customer> customers;
  7 
  8         //用于保存节点数据的内部类
  9         private static class Customer{
 10             private LinkedList<Customer> customers;
 11             private String value;
 12 
 13             public Customer() {
 14                 customers = new LinkedList<>();
 15             }
 16 
 17             public Customer(String value) {
 18                 customers = new LinkedList<>();
 19                 this.value = value;
 20             }
 21 
 22             public String getValue() {
 23                 return value;
 24             }
 25 
 26             public void setValue(String value) {
 27                 this.value = value;
 28             }
 29 
 30             public boolean addChild(Customer customer){
 31                 return customers.offer(customer);
 32             }
 33 
 34         }
 35 
 36         private static class FinalCustomerImpl extends Customer implements FinalCustomer{
 37             public FinalCustomerImpl() {
 38                 super();
 39             }
 40 
 41             public FinalCustomerImpl(String value) {
 42                 super(value);
 43             }
 44         }
 45 
 46         public CustomerTreeModel() {
 47             this.customers = new LinkedList<>();
 48             Customer customer = new Customer("父节点");
 49             Customer child = new Customer("子节点");
 50 
 51             customer.addChild(child);
 52             child.addChild(new FinalCustomerImpl("孙节点"));
 53 
 54             this.customers.add(customer);
 55             this.customers.add(new FinalCustomerImpl("第二个节点"));
 56             this.customers.add(new FinalCustomerImpl("第三个节点"));
 57         }
 58 
 59         @Override
 60         public <T> NodeInfo<? extends Customer> getNodeInfo(T value) {
 61             //需要拿来渲染的列表
 62             ListDataProvider listDataProvider = null;
 63 
 64             if(value == null){
 65                 listDataProvider = new ListDataProvider<Customer>(customers.stream().filter(ele->{
 66                     if(ele.equals(value)){
 67                         return false;
 68                     }
 69                     return true;
 70                 }).collect(Collectors.toList()));
 71             }
 72             else{
 73                 listDataProvider = new ListDataProvider<Customer>(((Customer) value).customers.stream().filter(ele->{
 74                     if(ele.equals(value)){
 75                         return false;
 76                     }
 77                     return true;
 78                 }).collect(Collectors.toList()));
 79             }
 80             //节点渲染的模式
 81             Cell<Customer> cell = new AbstractCell<Customer>() {
 82                 @Override
 83                 public void render(Context context, Customer value, SafeHtmlBuilder sb) {
 84                     if(value != null){
 85                         sb.appendHtmlConstant(value.getValue());
 86                     }
 87                 }
 88             };
 89             return new DefaultNodeInfo<Customer>(listDataProvider,cell);
 90         }
 91 
 92         //用于判断是否为叶子节点，只有非叶子节点允许下拉
 93         @Override
 94         public boolean isLeaf(Object value) {
 95             if(value instanceof FinalCustomer){
 96                 return true;
 97             }
 98             return false;
 99         }
100     }
101 
102 //使用代码
103         //块状树形图,需要实现TreeVieModel这个接口
104         TreeViewModel treeViewModel = new CustomerTreeModel();
105         CellTree tree1 = new CellTree(treeViewModel,null);

5. 块状列表

 1         List<String> list = new ArrayList<>(Arrays.asList("第一个","第二个","第三个"));
 2         //块列表，需要传入实现cellList接口的cell，表示每个块的渲染方式，和PrideKey的实现类，表明从列表中取数据的方式.
 3         CellList cellList = new CellList(new AbstractCell<String>() {
 4             @Override
 5             public void render(Context context, String value, SafeHtmlBuilder sb) {
 6                 sb.appendHtmlConstant(value);
 7             }
 8         },
 9                 new ProvidesKey() {
10                     @Override
11                     public Object getKey(Object item) {
12                         return item == null ? null : item;
13                     }
14                 });
15 
16         //设置列表的数据的大小。
17         cellList.setRowCount(list.size(),true);
18         //设置列表数据
19         cellList.setRowData(list);
20         rootPanel.add(cellList);

6. cellBrowser

  1     //标记接口，用于表示叶子节点
  2     private interface FinalCustomer{};
  3 
  4     //实现TreeViewModel
  5     private static class CustomerTreeModel implements TreeViewModel{
  6         private LinkedList<Customer> customers;
  7 
  8         //用于保存节点数据的内部类
  9         private static class Customer{
 10             private LinkedList<Customer> customers;
 11             private String value;
 12 
 13             public Customer() {
 14                 customers = new LinkedList<>();
 15             }
 16 
 17             public Customer(String value) {
 18                 customers = new LinkedList<>();
 19                 this.value = value;
 20             }
 21 
 22             public String getValue() {
 23                 return value;
 24             }
 25 
 26             public void setValue(String value) {
 27                 this.value = value;
 28             }
 29 
 30             public boolean addChild(Customer customer){
 31                 return customers.offer(customer);
 32             }
 33 
 34         }
 35 
 36         private static class FinalCustomerImpl extends Customer implements FinalCustomer{
 37             public FinalCustomerImpl() {
 38                 super();
 39             }
 40 
 41             public FinalCustomerImpl(String value) {
 42                 super(value);
 43             }
 44         }
 45 
 46         public CustomerTreeModel() {
 47             this.customers = new LinkedList<>();
 48             Customer customer = new Customer("父节点");
 49             Customer child = new Customer("子节点");
 50 
 51             customer.addChild(child);
 52             child.addChild(new FinalCustomerImpl("孙节点"));
 53 
 54             this.customers.add(customer);
 55             this.customers.add(new FinalCustomerImpl("第二个节点"));
 56             this.customers.add(new FinalCustomerImpl("第三个节点"));
 57         }
 58 
 59         @Override
 60         public <T> NodeInfo<? extends Customer> getNodeInfo(final T value) {
 61             //需要拿来渲染的列表
 62             ListDataProvider listDataProvider = null;
 63 
 64             if(value == null){
 65                 listDataProvider = new ListDataProvider<Customer>(customers.stream().filter(ele->{
 66                     if(ele.equals(value)){
 67                         return false;
 68                     }
 69                     return true;
 70                 }).collect(Collectors.toList()));
 71             }
 72             else{
 73                 listDataProvider = new ListDataProvider<Customer>(((Customer) value).customers.stream().filter(ele->{
 74                     if(ele.equals(value)){
 75                         return false;
 76                     }
 77                     return true;
 78                 }).collect(Collectors.toList()));
 79             }
 80             //节点渲染的模式
 81             Cell<Customer> cell = new AbstractCell<Customer>() {
 82                 @Override
 83                 public void render(Context context, Customer value, SafeHtmlBuilder sb) {
 84                     if(value != null){
 85                         sb.appendEscaped(value.getValue());
 86                     }
 87                 }
 88             };
 89             return new DefaultNodeInfo<Customer>(listDataProvider,cell);
 90         }
 91 
 92         //用于判断是否为叶子节点，只有非叶子节点允许下拉
 93         @Override
 94         public boolean isLeaf(Object value) {
 95             if(value instanceof FinalCustomer){
 96                 return true;
 97             }
 98             return false;
 99         }
100     }
101 
102 //使用代码
103 CellBrowser cellBrowser = new CellBrowser(new CustomerTreeModel(),null);
104         cellBrowser.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.ENABLED);
105         cellBrowser.setWidth("1000px");
106         cellBrowser.setHeight("500px");

posted @ 2021-06-21 10:00 一穷三白阅读(152) 评论(0) 收藏举报

刷新页面返回顶部

一穷三白

GWT常用小部件(1)

公告