GWT教程
 GWT Tree组件 GWT DatePicker组件 

GWT MenuBar组件

GWT MenuBar组件 介绍

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

GWT Tree组件 声明

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

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

CSS 样式规则

以下默认 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 {}

GWT MenuBar组件 构造方法

构造方法 描述
MenuBar() 创建一个空的水平菜单栏。
MenuBar(boolean vertical) 创建一个空的菜单栏。
MenuBar(boolean vertical, MenuBar.MenuBarImages images) 已弃用。替换为 MenuBar(boolean, Resources)
MenuBar(boolean vertical, MenuBar.Resources resources) 创建一个空的菜单栏，它使用指定的 ClientBundle 作为菜单图像。
MenuBar(MenuBar.MenuBarImages images) 已弃用。由 MenuBar(Resources) 取代
MenuBar(MenuBar.Resources resources) 创建一个空的水平菜单栏，将指定的 ClientBundle 用于菜单图像。

GWT MenuBar组件 方法

方法 描述
HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler) 添加 CloseEvent 处理程序。
MenuItem addItem(MenuItem item) 将菜单项添加到栏。
MenuItem addItem(SafeHtml html, Command cmd) 将一个菜单项添加到包含 SafeHtml 的栏中，当它被选中时将触发给定的命令。
MenuItem addItem(SafeHtml html, MenuBar popup) 将菜单项添加到栏，当它被选中时将打开指定的菜单。
MenuItem addItem(java.lang.String text, boolean asHTML, Command cmd) 向栏添加一个菜单项，当它被选中时将触发给定的命令。
MenuItem addItem(java.lang.String text, boolean asHTML, MenuBar popup) 将菜单项添加到栏，当它被选中时将打开指定的菜单。
MenuItem addItem(java.lang.String text, Command cmd) 向栏添加一个菜单项，当它被选中时将触发给定的命令。
MenuItem addItem(java.lang.String text, MenuBar popup) 将菜单项添加到栏，当它被选中时将打开指定的菜单。
MenuItemSeparator addSeparator() 向 MenuBar 添加一条细线以分隔 MenuItem 的各个部分。
MenuItemSeparator addSeparator(MenuItemSeparator separator) 向 MenuBar 添加一条细线以分隔 MenuItem 的各个部分。
void clearItems() 从此菜单栏中删除所有菜单项。
void closeAllChildren(boolean focus) 关闭此菜单和所有子菜单弹出窗口。
jvoid focus() 给这个 MenuBar 焦点。
boolean getAutoOpen() 获取当鼠标移到该菜单栏上时是否会打开该菜单栏的子菜单。
int getItemIndex(MenuItem item) 获取 MenuItem 的索引。
protected java.util.List getItems() 返回包含菜单栏中 MenuItem 对象的列表。
protected MenuItem getSelectedItem() 返回用户当前选择（突出显示）的 MenuItem。
int getSeparatorIndex(MenuItemSeparator item) 获取 MenuItemSeparator 的索引。
MenuItem insertItem(MenuItem item, int beforeIndex) 将菜单项添加到特定索引处的栏。
MenuItemSeparator insertSeparator(int beforeIndex) 向 MenuBar 添加一条细线，以分隔指定索引处的 MenuItem 部分。
MenuItemSeparator insertSeparator(MenuItemSeparator separator, int beforeIndex) 向 MenuBar 添加一条细线，以分隔指定索引处的 MenuItem 部分。
boolean isAnimationEnabled() 如果启用动画，则返回 true，否则返回 false。
boolean isFocusOnHoverEnabled() 当鼠标悬停在它上面时，检查这个小部件是否会窃取键盘焦点。
void moveSelectionDown() 将菜单选择向下移动到下一项。
void moveSelectionUp() 将菜单选择向上移动到上一项。
void onBrowserEvent(Event event) 每当接收到浏览器事件时触发。
protected void onDetach() 当小部件从浏览器的文档中分离时调用此方法。
protected void onEnsureDebugId(java.lang.String baseID) 受影响的元素： -item# = 指定索引处的 MenuItem。
void onPopupClosed(PopupPanel sender, boolean autoClosed) 已弃用。改用 addCloseHandler(CloseHandler)
void removeItem(MenuItem item) 从栏中删除指定的菜单项。
void removeSeparator(MenuItemSeparator separator) 从栏中移除指定的 MenuItemSeparator。
void selectItem(MenuItem item) 选择给定的 MenuItem，它必须是此 MenuBar 的直接子项。
void setAnimationEnabled(boolean enable) 启用或禁用动画。
void setAutoOpen(boolean autoOpen) 设置当鼠标移到该菜单栏上时是否打开该菜单栏的子菜单。
void setFocusOnHoverEnabled(boolean enabled) 当鼠标悬停在 MenuBar 上时启用或禁用自动聚焦。

GWT MenuBar组件 示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

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


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改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;
}

3）修改HelloWorld.html

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

4）HelloWorld.java

package com.yiidian.helloWorld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
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 Tree组件 GWT DatePicker组件 

热门文章

优秀文章

全部教程