GWT - Widget MenuBar

introduction

le MenuBarwidget représente un widget de barre de menu standard. Une barre de menus peut contenir n'importe quel nombre d'éléments de menu, dont chacun peut soit déclencher une commande, soit ouvrir une barre de menus en cascade.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.MenuBar classe -

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

Règles de style CSS

Les règles de style CSS par défaut suivantes seront appliquées à tous les widgets MenuBar. Vous pouvez le remplacer selon vos besoins.

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

Constructeurs de classe

N ° Sr. Constructeur et description
1

MenuBar()

Crée une barre de menus horizontale vide.
2

MenuBar(boolean vertical)

Crée une barre de menus vide.
3

MenuBar(boolean vertical, MenuBar.MenuBarImages images)

Obsolète. remplacé par MenuBar (booléen, Resources)
4

MenuBar(boolean vertical, MenuBar.Resources resources)

Crée une barre de menus vide qui utilise le ClientBundle spécifié pour les images de menu.
5

MenuBar(MenuBar.MenuBarImages images)

Obsolète. remplacé par MenuBar (Resources)
6

MenuBar(MenuBar.Resources resources)

Crée une barre de menus horizontale vide qui utilise le ClientBundle spécifié pour les images de menu.

Méthodes de classe

N ° Sr. Nom et description de la fonction
1

HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler)

Ajoute un gestionnaire CloseEvent.
2

MenuItem addItem(MenuItem item)

Ajoute un élément de menu à la barre.
3

MenuItem addItem(SafeHtml html, Command cmd)

Ajoute un élément de menu à la barre contenant SafeHtml, qui déclenchera la commande donnée lorsqu'elle sera sélectionnée.
4

MenuItem addItem(SafeHtml html, MenuBar popup)

Ajoute un élément de menu à la barre, qui ouvrira le menu spécifié lorsqu'il est sélectionné.
5

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

Ajoute un élément de menu à la barre, qui déclenchera la commande donnée lorsqu'elle sera sélectionnée.
6

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

Ajoute un élément de menu à la barre, qui ouvrira le menu spécifié lorsqu'il est sélectionné.
sept

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

Ajoute un élément de menu à la barre, qui déclenchera la commande donnée lorsqu'elle sera sélectionnée.
8

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

Ajoute un élément de menu à la barre, qui ouvrira le menu spécifié lorsqu'il est sélectionné.
9

MenuItemSeparator addSeparator()

Ajoute une ligne fine au MenuBar pour séparer les sections de MenuItems.
dix

MenuItemSeparator addSeparator(MenuItemSeparator separator)

Ajoute une ligne fine au MenuBar pour séparer les sections de MenuItems.
11

void clearItems()

Supprime tous les éléments de menu de cette barre de menus.
12

void closeAllChildren(boolean focus)

Ferme ce menu et toutes les fenêtres contextuelles du menu enfant.
13

void focus()

Donnez à ce focus MenuBar.
14

boolean getAutoOpen()

Obtient si les menus enfants de cette barre de menus s'ouvriront lorsque la souris sera déplacée dessus.
15

int getItemIndex(MenuItem item)

Obtenez l'index d'un MenuItem.
16

protected java.util.List getItems()

Renvoie une liste contenant les objets MenuItem dans la barre de menus.
17

protected MenuItem getSelectedItem()

Renvoie le MenuItem actuellement sélectionné (mis en surbrillance) par l'utilisateur.
18

int getSeparatorIndex(MenuItemSeparator item)

Obtenez l'index d'un MenuItemSeparator.
19

MenuItem insertItem(MenuItem item, int beforeIndex)

Ajoute un élément de menu à la barre à un index spécifique.
20

MenuItemSeparator insertSeparator(int beforeIndex)

Ajoute une ligne fine au MenuBar pour séparer les sections de MenuItems à l'index spécifié.
21

MenuItemSeparator insertSeparator(MenuItemSeparator separator, int beforeIndex)

Ajoute une ligne fine au MenuBar pour séparer les sections de MenuItems à l'index spécifié.
22

boolean isAnimationEnabled()

Renvoie true si les animations sont activées, false sinon.
23

boolean isFocusOnHoverEnabled()

Vérifiez si ce widget volera le focus du clavier lorsque la souris le survolera.
24

void moveSelectionDown()

Déplace la sélection de menu vers l'élément suivant.
25

void moveSelectionUp()

Déplace la sélection de menu jusqu'à l'élément précédent.
26

void onBrowserEvent(Event event)

Lancé chaque fois qu'un événement de navigateur est reçu.
27

protected void onDetach()

Cette méthode est appelée lorsqu'un widget est détaché du document du navigateur.
28

protected void onEnsureDebugId(java.lang.String baseID)

Éléments concernés: -item # = l'élément MenuItem à l'index spécifié.
29

void onPopupClosed(PopupPanel sender, boolean autoClosed)

Obsolète. Utilisez plutôt addCloseHandler (CloseHandler)
30

void removeItem(MenuItem item)

Supprime l'élément de menu spécifié de la barre.
31

void removeSeparator(MenuItemSeparator separator)

Supprime le MenuItemSeparator spécifié de la barre.
32

void selectItem(MenuItem item)

Sélectionnez le MenuItem donné, qui doit être un enfant direct de ce MenuBar.
33

void setAnimationEnabled(boolean enable)

Activez ou désactivez les animations.
34

void setAutoOpen(boolean autoOpen)

Définit si les menus enfants de cette barre de menus s'ouvriront lorsque la souris sera déplacée dessus.
35

void setFocusOnHoverEnabled(boolean enabled)

Activez ou désactivez la mise au point automatique lorsque la souris survole la barre de menus.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

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

  • java.lang.Object

Exemple de widget MenuBar

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget MenuBar dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui illustrera l'utilisation du 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);
   }	
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -

La sélection d'une valeur dans la barre de menus fera apparaître un message d'alerte indiquant la valeur sélectionnée.