GWT MenuBar Widget

Constructors of GWT MenuBar Widget 📑👷‍♀️

We have a total of four constructors of the MenuBar Widget -

Class Methods📝

After learning about the types of constructors used in MenuBar Widget, we will now learn about methods commonly used in GWT MenuBar Widget.

• protected void onDetach(): When a widget is detached from the browser’s document this method is invoked.
   
• MenuItem addItem(SafeHtml, MenuBar m): This method is used for adding new menu items to the menu bar for opening the selected menu item.
   
• MenuItemSeperator addSeparator(): For separating different sections of menu items this method adds a thin line to the MenuBar.
   
• void clearItems(): As the method name suggests this method is used for removing all items from the menu bar.
   
• MenuItem addItem(MenuItem item): For adding new items to the menu bar addItems method is called.
   
• void onBrowserEvent(Event event): Whenever a browser even is received this method is invoked by default.
   
• void selectItem(MenuItem item): Used for selecting given MenuItem, which is the direct child of specified MenuBar.
   
• private updateSubmenuIcon(MenuItem E): Show or hide the icon used for items with a submenu.
   
• protected MenuItem getSelectedItem(): This method returns the currently highlighted MenuItem by the user.

Inherited Methods📝

We have already seen many commonly used methods of the MenuBar Widget. All the methods can not be implemented for every class, so a few methods of this class are inherited by some other classes.

This GWT MenuBar Widget class inherits methods from the following classes −

• com.google.gwt.user.client.ui.UIObject: It is the superclass of all UI (User-Interface) objects. It simply wraps a DOM (Domain Object Model) element, and it cannot receive events.
   
• com.google.gwt.user.client.ui.Widget: It is the base class for the majority of UI objects. The widget class supports receiving events from the browser and adding them to panels.
   
• java.lang.Object: It is the root class of every class. All the objects implement the methods of this object class. 

GWT MenuBar Example

This example will walk you through some basic GWT MenuBar Widget usage procedures.

1. Create a project with the name ‘HelloWorld’ under your package(com.your_email_id)
2. Create files ‘HelloWorld.gwt.xml’, ‘HelloWorld.css’, ‘HelloWorld.html’, and ‘HelloWorld.java’
3. Compile and run the GWT application.
    

Here is what the changed module descriptor contains( src/com.example/ HelloWorld.gwt.xml):

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.codingninjas.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

The changed Style Sheet file ‘HelloWorld.css’ content is listed below:

body {
   text-align: center;
   font-family: verdana, sans-serif;
}


h1 {
   font-size: 2em;
   font-weight: bold;
   color: #3477eb;
   margin: 40px 0px 70px;
   text-align: center;
}


.gwt-MenuBar {
   cursor: default;  
}


.gwt-MenuBar .gwt-MenuItem {
   cursor: default;
   font-family: Arial Unicode MS, Arial, sans-serif;
   font-size: 12px;
}


.gwt-MenuBar .gwt-MenuItem-selected {
   background: #caedca;
}


.gwt-MenuBar-horizontal {
   background: #caedca url(images/hborder.png) repeat-x 0px -2003px;
   border: 1px solid #7d7d7d;
}


.gwt-MenuBar-horizontal .gwt-MenuItem {
   padding: 5px 10px;
   vertical-align: bottom;
   color: #000;
   font-weight: bold;  
}


.gwt-MenuBar-horizontal .gwt-MenuItemSeparator {
   width: 1px;
   padding: 0px;
   margin: 0px;
   border: 0px;
   border-left: 1px solid #7d7d7d;
   background: white;
}


.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
   width: 1px;
   height: 1px;
   background: #e8e6e6 
}


.gwt-MenuBar-vertical {
   margin-top: 0px;
   margin-left: 0px;
   background: #bfbdbd
}


.gwt-MenuBar-vertical table {
   border-collapse: collapse;
}


.gwt-MenuBar-vertical .gwt-MenuItem {
   padding: 2px 40px 2px 1px;
}


.gwt-MenuBar-vertical .gwt-MenuItemSeparator {
   padding: 2px 0px;
}


.gwt-MenuBar-vertical .gwt-MenuItemSeparator .menuSeparatorInner {
   height: 1px;
   padding: 0px;
   border: 0px;
   border-top: 1px solid #e8e6e6;
   overflow: hidden;
}


.gwt-MenuBar-vertical .subMenuIcon {
   padding-right: 4px;
}


.gwt-MenuBar-vertical .subMenuIcon-selected {
   background: #E3E8F3;
}


.gwt-MenuBarPopup {
   margin: 0px 0px 0px 3px;
}


.gwt-MenuBarPopup .menuPopupTopLeftInner {
   width: 5px;
   height: 5px;
   zoom: 1;
}


.gwt-MenuBarPopup .menuPopupTopRightInner {
   width: 8px;
   height: 5px;
   zoom: 1;
}


.gwt-MenuBarPopup .menuPopupBottomLeftInner {
   width: 5px;
   height: 8px;
   zoom: 1;
}


.gwt-MenuBarPopup .menuPopupBottomRightInner {
   width: 8px;
   height: 8px;
   zoom: 1;
}


.gwt-MenuBarPopup .menuPopupTopLeft {
   background: url(images/corner.png) no-repeat 0px -36px;
   -background: url(images/corner_ie6.png) no-repeat 0px -36px;
}


.gwt-MenuBarPopup .menuPopupTopRight {
   background: url(images/corner.png) no-repeat -5px -36px;
   -background: url(images/corner_ie6.png) no-repeat -5px -36px;
}


.gwt-MenuBarPopup .menuPopupBottomLeft {
   background: url(images/corner.png) no-repeat 0px -41px;
   -background: url(images/corner_ie6.png) no-repeat 0px -41px;
}


.gwt-MenuBarPopup .menuPopupBottomRight {
   background: url(images/corner.png) no-repeat -5px -41px;
   -background: url(images/corner_ie6.png) no-repeat -5px -41px;
}


html > body .gwt-MenuBarPopup {
}


* html .gwt-MenuBarPopup .menuPopupTopLeftInner {
   width: 5px;
   height: 5px;
   overflow: hidden;
}


* html .gwt-MenuBarPopup .menuPopupTopRightInner {
   width: 8px;
   height: 5px;
   overflow: hidden;
}


* html .gwt-MenuBarPopup .menuPopupBottomLeftInner {
   width: 5px;
   height: 8px;
   overflow: hidden;
}


* html .gwt-MenuBarPopup .menuPopupBottomRightInner {
   width: 8px;
   height: 8px;
   overflow: hidden;
}

The changed HTML host file ‘HelloWorld.html's’ content is as follows:

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1> Coding Ninjas </h1>
      <h1>Menu Bar Example </h1>
      <div id = "menubarcontainer"></div>
   </body>
</html>

Let's look at the Java file ‘src/com.example/HelloWorld.java’ with the following contents to see how to use the GWT CellBrowser widget.

package com.codingninjas.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItem;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
 private void showSelectedMenuItem(String menuItemName){
      Window.alert("Menu item: "+menuItemName+" selected");
  }
   
  public void onModuleLoad() {
       
      // Create a menu bar
      MenuBar menu = new MenuBar();
      menu.setAutoOpen(true);
      menu.setWidth("200px");
      menu.setAnimationEnabled(true);

      // Create the Shopping menu
      MenuBar Shopping = new MenuBar(true);
      Shopping.setAnimationEnabled(true);

      Shopping.addItem("Laptops", new Command() {
        @Override
        public void execute() {
            showSelectedMenuItem("Laptops");
        }
      });
      
      Shopping.addItem("Cloths", new Command() {
        @Override
        public void execute() {
            showSelectedMenuItem("Cloths");
        }
      });
      
      Shopping.addSeparator();
      Shopping.addItem("Watches", new Command() {
        @Override
        public void execute() {
            showSelectedMenuItem("Watches");
        }
      });

      // Create the Selling menu
      MenuBar Sell = new MenuBar(true);
      Sell.setAnimationEnabled(true);    
      
      Sell.addItem("New", new Command() {
        @Override
        public void execute() {
            showSelectedMenuItem("New");
        }
      });    
      
      Sell.addItem("Old", new Command() {
      @Override
        public void execute() {
            showSelectedMenuItem("Old");
        }
      });

      // Create the profile menu
      MenuBar profile = new MenuBar(true);
      profile.setAnimationEnabled(true);    
      
      profile.addItem("Orders", new Command() {
        @Override
        public void execute() {
            showSelectedMenuItem("Orders");
        }
      });    
      
      profile.addItem("Wishlist", new Command() {
      @Override
        public void execute() {
            showSelectedMenuItem("Wishlist");
        }
      });
     
      profile.addItem("Contact Us", new Command() {
      @Override
        public void execute() {
            showSelectedMenuItem("Contact Us");
        }
      });

      menu.addItem(new MenuItem("Shopping", Shopping));
      menu.addSeparator();
      menu.addItem(new MenuItem("Sell", Sell));
      menu.addSeparator();
      menu.addItem(new MenuItem("Profile", profile));

      // Add the menu to the root panel
      RootPanel.get("menubarcontainer").add(menu);
  } 
}

You can also try this code with Online Java Compiler

Run Code

Output

Frequently Asked Questions

What is GWT?

GWT is a development toolkit used to create and improve sophisticated browser-based apps. 

What is a GWT client?

GWT contains a number of HTTP client classes that simplify making custom HTTP requests to your server and optionally processing a JSON- or XML-formatted response. GWT includes a set of HTTP client classes that allow your application to make generic HTTP requests.

How does the GWT compiler work?

The heart of Google Web Toolkit is a compiler that helps in converting Java sources into JavaScript and transforming your working Java app into an equivalent JavaScript app. 

What are the benefits of GWT?

GWT provides a library of widgets for many tasks required in an application. It also generates browser-specific and optimized JavaScript code. Moreover, using GWT, one can easily integrate with Maven and Junit.

What is the GWT MenuBar Widget?

The MenuBar Widget is used to create any number of menu items, each of which can either open a cascaded menu bar or fire a Command.

Conclusion

In this article, we have covered the GWT MenuBar Widget. We have also discussed its class declaration, constructors, and class and inherited methods.

If you would like to learn more, check out our articles on-

• How to set up GWT environment
• GWT RadioButton
• GWT Composite
   

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, Java Programming, and Operating System, etc. Have a look at the interview experiences and interview bundle for placement preparations. And also, enroll in our courses and refer to the mock test and problems available.

Happy Learning Ninja! 🐱‍👤