GWT - Widget de barra de menús

Introducción

los MenuBarwidget representa un widget de barra de menú estándar. Una barra de menú puede contener cualquier número de elementos de menú, cada uno de los cuales puede activar un comando o abrir una barra de menú en cascada.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.MenuBar clase -

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

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todos los widgets de la barra de menús. Puede anularlo según sus 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 {}

Constructores de clases

No Señor. Constructor y descripción
1

MenuBar()

Crea una barra de menú horizontal vacía.
2

MenuBar(boolean vertical)

Crea una barra de menú vacía.
3

MenuBar(boolean vertical, MenuBar.MenuBarImages images)

Obsoleto. reemplazado por MenuBar (booleano, Recursos)
4

MenuBar(boolean vertical, MenuBar.Resources resources)

Crea una barra de menú vacía que usa el ClientBundle especificado para las imágenes del menú.
5

MenuBar(MenuBar.MenuBarImages images)

Obsoleto. reemplazado por MenuBar (Recursos)
6

MenuBar(MenuBar.Resources resources)

Crea una barra de menú horizontal vacía que utiliza el ClientBundle especificado para las imágenes de menú.

Métodos de clase

No Señor. Nombre y descripción de la función
1

HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler)

Agrega un controlador CloseEvent.
2

MenuItem addItem(MenuItem item)

Agrega un elemento de menú a la barra.
3

MenuItem addItem(SafeHtml html, Command cmd)

Agrega un elemento de menú a la barra que contiene SafeHtml, que activará el comando dado cuando se seleccione.
4

MenuItem addItem(SafeHtml html, MenuBar popup)

Agrega un elemento de menú a la barra, que abrirá el menú especificado cuando se seleccione.
5

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

Agrega un elemento de menú a la barra, que activará el comando dado cuando se seleccione.
6

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

Agrega un elemento de menú a la barra, que abrirá el menú especificado cuando se seleccione.
7

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

Agrega un elemento de menú a la barra, que activará el comando dado cuando se seleccione.
8

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

Agrega un elemento de menú a la barra, que abrirá el menú especificado cuando se seleccione.
9

MenuItemSeparator addSeparator()

Agrega una línea delgada a MenuBar para separar secciones de MenuItems.
10

MenuItemSeparator addSeparator(MenuItemSeparator separator)

Agrega una línea delgada a MenuBar para separar secciones de MenuItems.
11

void clearItems()

Elimina todos los elementos del menú de esta barra de menús.
12

void closeAllChildren(boolean focus)

Cierra este menú y todas las ventanas emergentes del menú secundario.
13

void focus()

Dale foco a esta barra de menú.
14

boolean getAutoOpen()

Obtiene si los menús secundarios de esta barra de menús se abrirán cuando se mueva el mouse sobre ella.
15

int getItemIndex(MenuItem item)

Obtenga el índice de un MenuItem.
dieciséis

protected java.util.List getItems()

Devuelve una lista que contiene los objetos MenuItem en la barra de menú.
17

protected MenuItem getSelectedItem()

Devuelve el elemento de menú seleccionado (resaltado) actualmente por el usuario.
18

int getSeparatorIndex(MenuItemSeparator item)

Obtenga el índice de un MenuItemSeparator.
19

MenuItem insertItem(MenuItem item, int beforeIndex)

Agrega un elemento de menú a la barra en un índice específico.
20

MenuItemSeparator insertSeparator(int beforeIndex)

Agrega una línea delgada a MenuBar para separar secciones de MenuItems en el índice especificado.
21

MenuItemSeparator insertSeparator(MenuItemSeparator separator, int beforeIndex)

Agrega una línea delgada a MenuBar para separar secciones de MenuItems en el índice especificado.
22

boolean isAnimationEnabled()

Devuelve verdadero si las animaciones están habilitadas, falso si no.
23

boolean isFocusOnHoverEnabled()

Compruebe si este widget robará el foco del teclado cuando el mouse pase sobre él.
24

void moveSelectionDown()

Mueve la selección del menú al siguiente elemento.
25

void moveSelectionUp()

Mueve la selección del menú al elemento anterior.
26

void onBrowserEvent(Event event)

Se activa cada vez que se recibe un evento del navegador.
27

protected void onDetach()

Este método se llama cuando un widget se separa del documento del navegador.
28

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afectados: -item # = MenuItem en el índice especificado.
29

void onPopupClosed(PopupPanel sender, boolean autoClosed)

Obsoleto. Utilice addCloseHandler (CloseHandler) en su lugar
30

void removeItem(MenuItem item)

Elimina el elemento de menú especificado de la barra.
31

void removeSeparator(MenuItemSeparator separator)

Elimina el MenuItemSeparator especificado de la barra.
32

void selectItem(MenuItem item)

Seleccione el elemento de menú dado, que debe ser un elemento secundario directo de esta barra de menú.
33

void setAnimationEnabled(boolean enable)

Habilita o deshabilita animaciones.
34

void setAutoOpen(boolean autoOpen)

Establece si los menús secundarios de esta barra de menú se abrirán cuando se mueva el mouse sobre ella.
35

void setFocusOnHoverEnabled(boolean enabled)

Habilita o deshabilita el enfoque automático cuando el mouse pasa sobre la barra de menú.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

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

  • java.lang.Object

Ejemplo de widget MenuBar

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget de barra de menús en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso Descripción
1 Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de 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 continuación se muestra el contenido del archivo de hoja 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 continuación se muestra el contenido del archivo de 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del 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);
   }	
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

Al seleccionar cualquier valor en la barra de menú, aparecerá un mensaje de alerta que muestra el valor seleccionado.