GWT: menu in UiBinder

Question

I would like to implement a menu ( MenuBar , MenuItem ) using a declarative approach through UiBinder in GWT 2.0.

I had two problems:

• Is there a way to add MenuItemSeparators to a .ui.xml file? So far, I only managed to add the MenuBar- and MenuItem tags to the file.

• Using @UiHandler , GWT writes the template code for the event for me. For the menu I need to write commands. How am I supposed to do this using the UiBinder approach? Is there a command tag to place in a .ui.xml file? Should I write template code for command handlers?

Thank you for thinking about these issues!

Answer 1

I agree, if you try to put MenuItemSeparator in, it will complain, stating that only MenuItem can be a child when GWT tries to create a widget. Since this is not currently supported, I suggest you request this as a future improvement to the GWT team.

In the meantime, you can add the separator programmatically and add the command as follows: XML file:

 <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 file:

 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()); } } 

Elsewhere in my code, I implemented a HistoryListener to catch any changes, i.e.

 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 ... } 

Answer 2

For (1), JavaDoc says:

Use in UiBinder Templates MenuBar elements in UiBinder template files can have a vertical logical attribute (which is false by default) and can contain only MenuItem elements as child elements. MenuItems may contain HTML and MenuBars.

For example:

  <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> 

Taking a hint at the words "only MenuItem elements as children", I assume that MenuItemSeparator is not supported

Answer 3

Here is an example of my solution that seems to work very well with 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"); } }); 

All in all, not so bad.

Answer 4

I know this question is OLD, but I continue to run into this question on my Google search engines, so I thought it would be important to note that although I have not seen it documented yet, I used:

<g: MenuItemSeparator />

succeeded in my uibinder template. The gwt eclipse plugin gives me a red error marker, but MenuItemSeparator compiles and displays normally. I am using gwt 2.1.

Just thought that someone might be interested to know.

Unfortunately, I have not yet seen a solution for No. 2, but I hope that they will give us something soon.

Answer 5

In the ui.xml file, ui.xml can add the menuItemSeparator file. Below is an example with a separator and submenu on the official GWT-API page.

Answer 6

Well, I think I found a way to implement this. (This is the solution if you want to declare a delimiter inside the * .ui.xml file.)

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> 

It is so simple. This will add a separator between the menu items.

Hooray!