GWT - Widget MenuBar

Introdução

o MenuBarwidget representa um widget de barra de menu padrão. Uma barra de menu pode conter qualquer número de itens de menu, cada um dos quais pode disparar um Comando ou abrir uma barra de menu em cascata.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.client.ui.MenuBar classe -

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

Regras de estilo CSS

As seguintes regras de estilo CSS padrão serão aplicadas a todo o widget MenuBar. Você pode substituí-lo de acordo com seus requisitos.

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

Construtores de classe

Sr. Não. Construtor e descrição
1

MenuBar()

Cria uma barra de menu horizontal vazia.
2

MenuBar(boolean vertical)

Cria uma barra de menu vazia.
3

MenuBar(boolean vertical, MenuBar.MenuBarImages images)

Descontinuada. substituído por MenuBar (booleano, recursos)
4

MenuBar(boolean vertical, MenuBar.Resources resources)

Cria uma barra de menu vazia que usa o ClientBundle especificado para imagens de menu.
5

MenuBar(MenuBar.MenuBarImages images)

Descontinuada. substituído por MenuBar (Recursos)
6

MenuBar(MenuBar.Resources resources)

Cria uma barra de menu horizontal vazia que usa o ClientBundle especificado para imagens de menu.

Métodos de aula

Sr. Não. Nome e descrição da função
1

HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler)

Adiciona um manipulador CloseEvent.
2

MenuItem addItem(MenuItem item)

Adiciona um item de menu à barra.
3

MenuItem addItem(SafeHtml html, Command cmd)

Adiciona um item de menu à barra que contém SafeHtml, que irá disparar o comando fornecido quando for selecionado.
4

MenuItem addItem(SafeHtml html, MenuBar popup)

Adiciona um item de menu à barra, que abrirá o menu especificado quando for selecionado.
5

MenuItem addItem(java.lang.String text, boolean asHTML, Command cmd)

Adiciona um item de menu à barra, que irá disparar o comando fornecido quando for selecionado.
6

MenuItem addItem(java.lang.String text, boolean asHTML, MenuBar popup)

Adiciona um item de menu à barra, que abrirá o menu especificado quando for selecionado.
7

MenuItem addItem(java.lang.String text, Command cmd)

Adiciona um item de menu à barra, que irá disparar o comando fornecido quando for selecionado.
8

MenuItem addItem(java.lang.String text, MenuBar popup)

Adiciona um item de menu à barra, que abrirá o menu especificado quando for selecionado.
9

MenuItemSeparator addSeparator()

Adiciona uma linha fina ao MenuBar para separar seções de MenuItems.
10

MenuItemSeparator addSeparator(MenuItemSeparator separator)

Adiciona uma linha fina ao MenuBar para separar seções de MenuItems.
11

void clearItems()

Remove todos os itens de menu desta barra de menus.
12

void closeAllChildren(boolean focus)

Fecha este menu e todos os pop-ups do menu filho.
13

void focus()

Dê foco a este MenuBar.
14

boolean getAutoOpen()

Obtém se os menus filho desta barra de menu serão abertos quando o mouse for movido sobre ela.
15

int getItemIndex(MenuItem item)

Obtenha o índice de um MenuItem.
16

protected java.util.List getItems()

Retorna uma lista contendo os objetos MenuItem na barra de menus.
17

protected MenuItem getSelectedItem()

Retorna o MenuItem atualmente selecionado (realçado) pelo usuário.
18

int getSeparatorIndex(MenuItemSeparator item)

Obtenha o índice de um MenuItemSeparator.
19

MenuItem insertItem(MenuItem item, int beforeIndex)

Adiciona um item de menu à barra em um índice específico.
20

MenuItemSeparator insertSeparator(int beforeIndex)

Adiciona uma linha fina ao MenuBar para separar seções de MenuItems no índice especificado.
21

MenuItemSeparator insertSeparator(MenuItemSeparator separator, int beforeIndex)

Adiciona uma linha fina ao MenuBar para separar seções de MenuItems no índice especificado.
22

boolean isAnimationEnabled()

Retorna verdadeiro se as animações estiverem habilitadas, falso caso contrário.
23

boolean isFocusOnHoverEnabled()

Verifique se este widget roubará ou não o foco do teclado quando o mouse passar sobre ele.
24

void moveSelectionDown()

Move a seleção do menu para o próximo item.
25

void moveSelectionUp()

Move a seleção do menu para o item anterior.
26

void onBrowserEvent(Event event)

Disparado sempre que um evento do navegador é recebido.
27

protected void onDetach()

Este método é chamado quando um widget é desanexado do documento do navegador.
28

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afetados: -item # = o MenuItem no índice especificado.
29

void onPopupClosed(PopupPanel sender, boolean autoClosed)

Descontinuada. Use addCloseHandler (CloseHandler) em vez disso
30

void removeItem(MenuItem item)

Remove o item de menu especificado da barra.
31

void removeSeparator(MenuItemSeparator separator)

Remove o MenuItemSeparator especificado da barra.
32

void selectItem(MenuItem item)

Selecione o determinado MenuItem, que deve ser um filho direto deste MenuBar.
33

void setAnimationEnabled(boolean enable)

Ative ou desative as animações.
34

void setAutoOpen(boolean autoOpen)

Define se os menus filhos desta barra de menu serão abertos quando o mouse for movido sobre ela.
35

void setFocusOnHoverEnabled(boolean enabled)

Habilite ou desabilite o foco automático quando o mouse passa sobre a Barra de Menu.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

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

  • java.lang.Object

Exemplo do widget MenuBar

Este exemplo o levará por etapas simples para mostrar o uso de um widget MenuBar no GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau Descrição
1 Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3 Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do módulo modificado src/com.tutorialspoint/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.tutorialspoint.client.HelloWorld'/>

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

</module>

A seguir está o conteúdo do arquivo de folha de estilo modificado 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;
}

A seguir está o conteúdo do arquivo host HTML modificado 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do widget MenuBar.

package com.tutorialspoint.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);
   }	
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

Selecionando qualquer valor na barra de menu, aparecerá uma mensagem de alerta mostrando o valor selecionado.