MenuBar

介绍 (Introduction)

MenuBar小部件代表标准菜单栏小部件。 菜单栏可以包含任意数量的菜单项，每个菜单项可以触发命令或打开级联菜单栏。

Class 声明 (Class Declaration)

以下是com.google.gwt.user.client.ui.MenuBar类的声明 -

public class MenuBar
   extends Widget
      implements PopupListener, HasAnimation, 
	     HasCloseHandlers<PopupPanel>

CSS样式规则 (CSS Style Rules)

以下默认CSS样式规则将应用于所有MenuBar小部件。 您可以根据自己的要求覆盖它。

.gwt-MenuBar {}
.gwt-MenuBar-horizontal {}
.gwt-MenuBar-vertical{}
.gwt-MenuBar .gwt-MenuItem {}
.gwt-MenuBar .gwt-MenuItem-selected {}
.gwt-MenuBar .gwt-MenuItemSeparator {}
.gwt-MenuBar .gwt-MenuItemSeparator .menuSeparatorInner {}
.gwt-MenuBarPopup .menuPopupTopLeft {}
.gwt-MenuBarPopup .menuPopupTopLeftInner {}
.gwt-MenuBarPopup .menuPopupTopCenter {}
.gwt-MenuBarPopup .menuPopupTopCenterInner {}
.gwt-MenuBarPopup .menuPopupTopRight {}
.gwt-MenuBarPopup .menuPopupTopRightInner {}
.gwt-MenuBarPopup .menuPopupMiddleLeft {}
.gwt-MenuBarPopup .menuPopupMiddleLeftInner {}
.gwt-MenuBarPopup .menuPopupMiddleCenter {}
.gwt-MenuBarPopup .menuPopupMiddleCenterInner {}
.gwt-MenuBarPopup .menuPopupMiddleRight {}
.gwt-MenuBarPopup .menuPopupMiddleRightInner {}
.gwt-MenuBarPopup .menuPopupBottomLeft {}
.gwt-MenuBarPopup .menuPopupBottomLeftInner {}
.gwt-MenuBarPopup .menuPopupBottomCenter {}
.gwt-MenuBarPopup .menuPopupBottomCenterInner {}
.gwt-MenuBarPopup .menuPopupBottomRight {}
.gwt-MenuBarPopup .menuPopupBottomRightInner {}

类构造函数 (Class Constructors)

Class Methods

方法继承 (Methods Inherited)

该类继承以下类中的方法 -

• com.google.gwt.user.client.ui.UIObject

• com.google.gwt.user.client.ui.Widget

• java.lang.Object

MenuBar Widget示例

此示例将指导您完成在GWT中显示MenuBar Widget的使用的简单步骤。 按照以下步骤更新我们在GWT - Create Application的GWT应用程序GWT - Create Application章节 -

以下是修改后的模块描述符src/com.

<?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.
.client.HelloWorld'/>
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

以下是修改后的样式表文件war/HelloWorld.css 。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}
h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   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: #E3E8F3;
}
.gwt-MenuBar-horizontal {
   background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
   border: 1px solid #e0e0e0;
}
.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 #ccc;
   background: white;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
   width: 1px;
   height: 1px;
   background: white; 
}
.gwt-MenuBar-vertical {
   margin-top: 0px;
   margin-left: 0px;
   background: white;
}
.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 #ccc;
   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;
}

以下是修改后的HTML主机文件war/HelloWorld.html 。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   <body>
      <h1>MenuBar Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

让我们有以下Java文件src/com.

package com.
.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("100px");
      menu.setAnimationEnabled(true);
      // Create the file menu
      MenuBar fileMenu = new MenuBar(true);
      fileMenu.setAnimationEnabled(true);
      fileMenu.addItem("New", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("New");
         }
      });
      fileMenu.addItem("Open", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("Open");
         }
      });
      fileMenu.addSeparator();
      fileMenu.addItem("Exit", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("Exit");
         }
      });
      // Create the edit menu
      MenuBar editMenu = new MenuBar(true);
      editMenu.setAnimationEnabled(true);
      editMenu.addItem("Undo", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("Undo");
         }
      });
      editMenu.addItem("Redo", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("Redo");
         }
      });	   
      editMenu.addItem("Cut", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("Cut");
         }
      });	    
      editMenu.addItem("Copy", new Command() {
         @Override
         public void execute() {
            showSelectedMenuItem("Copy");
         }
      });
      editMenu.addItem("Paste", new Command() {
      @Override
         public void execute() {
            showSelectedMenuItem("Paste");
         }
      });
      menu.addItem(new MenuItem("File", fileMenu));
      menu.addSeparator();
      menu.addItem(new MenuItem("Edit", editMenu));
      //add the menu to the root panel
      RootPanel.get("gwtContainer").add(menu);
   }	
}

一旦准备好完成所有更改，让我们像在GWT - 创建应用程序章节中那样在开发模式下编译和运行应用程序 。 如果您的应用程序一切正常，这将产生以下结果 -

选择菜单栏中的任何值，将弹出显示所选值的警报消息。