Using GWT Menu Widget with UiBinder Templates

Ok, we know how the MenuBar and the MenuItems are working normally but what about if I want to use them into my UiBinder Template. First step will be to create the UiBinder Template with MenuBar and the MenuItems you which. After you finish this step you should assign the ui:field to your MenuItem (s). This will allow us to attach the commands. After you finish your UiBinder should look similar to this:

 1 <g:MenuBar title="Account" ui:field="menuBar" animationEnabled="true" autoOpen="true">
 2     <g:MenuItem text="Home" ui:field="btnHome"/>
 3     <g:MenuItem text="Profile" ui:field="btnProfile"/>
 4     <g:MenuItem text="Account" ui:field="btnAccount">
 5     <g:MenuBar vertical="true">
 6         <g:MenuItem text="Settings" ui:field="btnSettings"/>
 7         <g:MenuItem text="Logout" ui:field="btnLogout"/>
 8     </g:MenuBar>
 9     </g:MenuItem>
10 </g:MenuBar>
11 

The next step will be to go inside your class into which you bind your template and add the fields, if there are not already there. If you use the Eclipse GWT plugin this will be done automatically. It looks like this:

 1     @UiField
 2     MenuItem btnHome;
 3     @UiField
 4     MenuItem btnProfile;
 5     @UiField
 6     MenuItem btnAccount;
 7     @UiField
 8     MenuItem btnSettings;
 9     @UiField
10     MenuItem btnLogout;
11 

Now you have to create several Commands which you can then attach to the buttons:

 

 1     Command cmdBtnHome = new Command() {
 2         public void execute() {
 3             Window.alert("You selected a Home item!");
 4         }
 5     };
 6 
 7     Command cmdBtnProfile = new Command() {
 8         public void execute() {
 9             Window.alert("You selected a Profile item!");
10         }
11     };
12 
13     Command cmdBtnSettings = new Command() {
14         public void execute() {
15             Window.alert("You selected a Settings item!");
16         }
17     };
18 
19     Command cmdBtnLogout = new Command() {
20         public void execute() {
21             Window.alert("You selected a Logout item!");
22         }
23     };
24 

The last step will be to set the commands to the MenuItem’s, to know which menu item was clicked, you can do it like this:

1         btnHome.setCommand(cmdBtnHome);
2         btnProfile.setCommand(cmdBtnProfile);
3         btnSettings.setCommand(cmdBtnSettings);
4         btnLogout.setCommand(cmdBtnLogout);
5 

And here now again with some screenshots:

If you click on Home you will fire the cmdBtnHome Command which will show the message “You select a Home item”.

cheers!