GWT：UiBinder 中的菜单答案

【问题标题】：GWT: Menus in UiBinderGWT：UiBinder 中的菜单
【发布时间】：2011-01-07 15:24:42
【问题描述】：

我想通过 GWT 2.0 中的 UiBinder 使用声明性方法来实现菜单（MenuBar、MenuItem）。

我遇到了两个问题：

有没有办法在 .ui.xml 文件中添加 MenuItemSeparators？所以到目前为止，我只设法将 MenuBar- 和 MenuItem-tags 放入文件。
使用@UiHandler，GWT 为事件编写样板代码我的处理程序。对于菜单，我需要编写命令。我怎么样应该使用 UiBinder 方法来做到这一点？有没有命令标签放入.ui.xml 文件？我必须写样板吗自己的命令处理程序代码？

感谢您考虑这些问题！

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

我同意，如果您尝试将 MenuItemSeparator 放入其中，它会抱怨说当 GWT 尝试创建小部件时只有 MenuItem 可以是孩子。由于目前不支持此功能，我建议您将其作为 GWT 团队未来的增强功能提出请求。

同时，您可以通过编程方式添加分隔符并通过以下方式添加命令： XML 文件：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
    <g:MenuBar ui:field="menuBar">
        <g:MenuItem ui:field="helpMenuItem">Help</g:MenuItem>
        <g:MenuItem ui:field="aboutMenuItem">About</g:MenuItem>
        <g:MenuItem ui:field="siteMapMenuItem">Site Map</g:MenuItem>
    </g:MenuBar>
</g:HTMLPanel>

Java 文件：

public class Menu extends Composite {
...
@UiField MenuBar menuBar;
@UiField MenuItem helpMenuItem;
...
public Menu() {
    initWidget(uiBinder.createAndBindUi(this));
    // insert a separator
    menuBar.insertSeparator(1);
    // attach commands to a menu item
    helpMenuItem.setCommand(new MenuCommand(HistoryToken.Help));
    ...
}  

public class MenuCommand implements Command {
    final HistoryToken historyToken;

    public MenuCommand(HistoryToken historyToken) {
        this.historyToken = historyToken;
    }

    @Override
    public void execute() {
        historyToken.fire();
    }
}  

public enum HistoryToken {
    Help,About,SiteMap;

    public void fire(){
        History.newItem(this.toString());
    }
}

在我的代码的其他地方，我实现了一个 HistoryListener 来捕获任何更改，即

class HistoryManager implements ValueChangeHandler<String> {
    // 1. get token
    // 2. change it into a HistoryToken
    // 3. perform switch statement 
    // 4. change contents based upon HistoryToken found
...
}

【讨论】：

【解决方案2】：

对于 (1) JavaDoc 说：

在 UiBinder 模板中使用 UiBinder 模板文件中的 MenuBar 元素可以有一个垂直布尔属性（默认为 false），并且可能只有 MenuItem 元素作为子元素。 MenuItems 可能包含 HTML 和 MenuBars。

例如：

 <g:MenuBar>
   <g:MenuItem>Higgledy
     <g:MenuBar vertical="true">
       <g:MenuItem>able</g:MenuItem>
       <g:MenuItem>baker</g:MenuItem>
       <g:MenuItem>charlie</g:MenuItem>
     </g:MenuBar>
   </g:MenuItem>
   <g:MenuItem>Piggledy
     <g:MenuBar vertical="true">
       <g:MenuItem>foo</g:MenuItem>
       <g:MenuItem>bar</g:MenuItem>
       <g:MenuItem>baz</g:MenuItem>
     </g:MenuBar>
   </g:MenuItem>
   <g:MenuItem><b>Pop!</b>
     <g:MenuBar vertical="true">
       <g:MenuItem>uno</g:MenuItem>
       <g:MenuItem>dos</g:MenuItem>
       <g:MenuItem>tres</g:MenuItem>
     </g:MenuBar>
   </g:MenuItem>
 </g:MenuBar>

从“仅 MenuItem 元素作为子元素”这句话中得到提示，我的猜测是不支持 MenuItemSeparators

【讨论】：

我想知道，因为 Eclipse 插件似乎可以识别 ...

【解决方案3】：

这是我的解决方案示例，它似乎与 GWT 2.4.0 配合得很好。

UiBinder：

<g:MenuBar vertical='true' ui:field='mainMenu'>
    <g:MenuItem ui:field='item1'>Item 1</g:MenuItem>
    <g:MenuItem ui:field='item2'>Item 2</g:MenuItem>
    <g:MenuItemSeparator />
    <g:MenuItem ui:field='sub' enabled='false'>
        Submenu
        <g:MenuBar vertical='true' ui:field='subMenu' />
    </g:MenuItem>
</g:MenuBar>

Java：

@UiField MenuItem item1;
@UiField MenuItem item2;
@UiField MenuBar subMenu;
@UiField MenuItem sub;

...

this.setWidget(uiBinder.createAndBindUi(this));
item1.setCommand(new Command() {
    public void execute() {
        History.newItem("item1");
    }
});

总体来说还不错。

【讨论】：

【解决方案4】：

我知道这个问题已经过时了，但我一直在我的谷歌搜索中遇到这个问题，所以我认为重要的是要注意虽然我还没有在任何地方看到它的文档，但我一直在使用：

在我的 uibinder 模板中成功。 gwt eclipse 插件给了我一个红色的错误标记，但是 MenuItemSeparator 编译并显示正常。我正在使用 gwt 2.1。

只是觉得有人可能有兴趣知道。

很遗憾，我还没有看到 #2 的解决方案 - 但我希望他们能尽快给我们一些东西。

【讨论】：

【解决方案5】：

可以在ui.xml 文件中添加 menuItemSeparator。这是official GWT-API page 中带有分隔符和子菜单的示例。

【讨论】：

它在哪里？此链接未提供答案。

【解决方案6】：

嗯，我想我找到了实现这一点的方法。（如果要在 *.ui.xml 文件中声明分隔符，这是一种解决方案。）

HocusView.java

...
    @UiField MenuBar  menuBar;
    @UiField MenuItem item1;
    @UiField MenuItem item2; 
    @UiField MenuItem item3; 
    @UiField MenuItem item4;   
...

    private static HocusViewUiBinder uiBinder = GWT.create(HocusViewUiBinder.class);

    @UiTemplate("Hocus.ui.xml")
    interface HocusViewUiBinder extends UiBinder<Widget, HocusView>{}

    public HocusView() 
    {
        initWidget(uiBinder.createAndBindUi(this));   
         // Attach commands to menu items
        menuItem1.setScheduledCommand(cmd_menuItem1);
        menuItem2.setScheduledCommand(cmd_menuItem2);
        menuItem3.setScheduledCommand(cmd_menuItem3);
        menuItem4.setScheduledCommand(cmd_menuItem4); 

    }


    Command cmd_menuItem1= new Command(){ 
    @Override
    public void execute() { 
        Window.alert("  Gifts  ");
        }
    };
    Command cmd_menuItem2 = new Command(){ 
        @Override
        public void execute() { 
            Window.alert("  Gifts  ");
        }
    };
    Command cmd_menuItem3 = new Command(){ 
        @Override
        public void execute() { 
            Window.alert("  Gifts  ");
        }
    };  
    Command cmd_menuItem4 = new Command(){ 
        @Override
        public void execute() { 
            Window.alert("  Gifts  ");
        }
    };



    });

HocusView.ui.xml

  <gwt:MenuBar ui:field="menuBar" >  
    <gwt:MenuItem ui:field="menuItem1">Search</gwt:MenuItem> 
     <gwt:MenuItemSeparator></gwt:MenuItemSeparator>
    <gwt:MenuItem ui:field="menuItem2">Ingestion</gwt:MenuItem> 
     <gwt:MenuItemSeparator></gwt:MenuItemSeparator>
    <gwt:MenuItem ui:field="menuItem3">Analysis</gwt:MenuItem> 
     <gwt:MenuItemSeparator></gwt:MenuItemSeparator>
    <gwt:MenuItem ui:field="menuItem4">About</gwt:MenuItem> 
  </gwt:MenuBar>

就这么简单。这将在菜单项之间添加一个分隔符。

干杯！

【讨论】：