GWT - Widget MenuBar

introduzione

Il MenuBarwidget rappresenta un widget della barra dei menu standard. Una barra dei menu può contenere un numero qualsiasi di voci di menu, ognuna delle quali può attivare un comando o aprire una barra dei menu a cascata.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.MenuBar classe -

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

Regole di stile CSS

Le seguenti regole di stile CSS predefinite verranno applicate a tutto il widget MenuBar. Puoi sovrascriverlo secondo le tue esigenze.

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

Costruttori di classi

Sr.No. Costruttore e descrizione
1

MenuBar()

Crea una barra dei menu orizzontale vuota.
2

MenuBar(boolean vertical)

Crea una barra dei menu vuota.
3

MenuBar(boolean vertical, MenuBar.MenuBarImages images)

Deprecato. sostituito da MenuBar (booleano, risorse)
4

MenuBar(boolean vertical, MenuBar.Resources resources)

Crea una barra dei menu vuota che utilizza il ClientBundle specificato per le immagini dei menu.
5

MenuBar(MenuBar.MenuBarImages images)

Deprecato. sostituito da MenuBar (Risorse)
6

MenuBar(MenuBar.Resources resources)

Crea una barra dei menu orizzontale vuota che utilizza il ClientBundle specificato per le immagini dei menu.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler)

Aggiunge un gestore CloseEvent.
2

MenuItem addItem(MenuItem item)

Aggiunge una voce di menu alla barra.
3

MenuItem addItem(SafeHtml html, Command cmd)

Aggiunge una voce di menu alla barra contenente SafeHtml, che attiverà il comando dato quando viene selezionato.
4

MenuItem addItem(SafeHtml html, MenuBar popup)

Aggiunge una voce di menu alla barra, che aprirà il menu specificato quando viene selezionato.
5

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

Aggiunge una voce di menu alla barra, che attiverà il comando dato quando viene selezionato.
6

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

Aggiunge una voce di menu alla barra, che aprirà il menu specificato quando viene selezionato.
7

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

Aggiunge una voce di menu alla barra, che attiverà il comando dato quando viene selezionato.
8

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

Aggiunge una voce di menu alla barra, che aprirà il menu specificato quando viene selezionato.
9

MenuItemSeparator addSeparator()

Aggiunge una linea sottile a MenuBar per separare sezioni di MenuItems.
10

MenuItemSeparator addSeparator(MenuItemSeparator separator)

Aggiunge una linea sottile a MenuBar per separare sezioni di MenuItems.
11

void clearItems()

Rimuove tutte le voci di menu da questa barra dei menu.
12

void closeAllChildren(boolean focus)

Chiude questo menu e tutti i popup del menu figlio.
13

void focus()

Dare fuoco a questo MenuBar.
14

boolean getAutoOpen()

Ottiene se i menu figlio di questa barra dei menu si apriranno quando il mouse viene spostato su di essa.
15

int getItemIndex(MenuItem item)

Ottieni l'indice di un MenuItem.
16

protected java.util.List getItems()

Restituisce un elenco contenente gli oggetti MenuItem nella barra dei menu.
17

protected MenuItem getSelectedItem()

Restituisce l'oggetto MenuItem attualmente selezionato (evidenziato) dall'utente.
18

int getSeparatorIndex(MenuItemSeparator item)

Ottieni l'indice di un MenuItemSeparator.
19

MenuItem insertItem(MenuItem item, int beforeIndex)

Aggiunge una voce di menu alla barra in un indice specifico.
20

MenuItemSeparator insertSeparator(int beforeIndex)

Aggiunge una linea sottile a MenuBar per separare sezioni di MenuItems in corrispondenza dell'indice specificato.
21

MenuItemSeparator insertSeparator(MenuItemSeparator separator, int beforeIndex)

Aggiunge una linea sottile a MenuBar per separare sezioni di MenuItems in corrispondenza dell'indice specificato.
22

boolean isAnimationEnabled()

Restituisce true se le animazioni sono abilitate, false in caso contrario.
23

boolean isFocusOnHoverEnabled()

Controlla se questo widget ruberà o meno il focus della tastiera quando il mouse vi passa sopra.
24

void moveSelectionDown()

Sposta la selezione del menu verso il basso alla voce successiva.
25

void moveSelectionUp()

Sposta la selezione del menu fino alla voce precedente.
26

void onBrowserEvent(Event event)

Attivato ogni volta che viene ricevuto un evento del browser.
27

protected void onDetach()

Questo metodo viene chiamato quando un widget viene scollegato dal documento del browser.
28

protected void onEnsureDebugId(java.lang.String baseID)

Elementi interessati: -item # = il MenuItem all'indice specificato.
29

void onPopupClosed(PopupPanel sender, boolean autoClosed)

Deprecato. Utilizzare invece addCloseHandler (CloseHandler)
30

void removeItem(MenuItem item)

Rimuove la voce di menu specificata dalla barra.
31

void removeSeparator(MenuItemSeparator separator)

Rimuove l'oggetto MenuItemSeparator specificato dalla barra.
32

void selectItem(MenuItem item)

Seleziona il MenuItem specificato, che deve essere un figlio diretto di questo MenuBar.
33

void setAnimationEnabled(boolean enable)

Abilita o disabilita le animazioni.
34

void setAutoOpen(boolean autoOpen)

Imposta se i menu secondari di questa barra dei menu si apriranno quando il mouse viene spostato su di essa.
35

void setFocusOnHoverEnabled(boolean enabled)

Abilita o disabilita la messa a fuoco automatica quando il mouse passa sopra la MenuBar.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

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

  • java.lang.Object

Esempio di widget MenuBar

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget MenuBar in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2 Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni invariato il resto dei file.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'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 volta che sei pronto con tutte le modifiche fatte, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

Selezionando qualsiasi valore nella barra dei menu, verrà visualizzato un messaggio di avviso che mostra il valore selezionato.