Gwt-menubar-widget

提供：Dev Guides
移動先:案内、検索

GWT-メニューバーウィジェット

前書き

*MenuBar* ウィジェットは、標準のメニューバーウィジェットを表します。 メニューバーには、任意の数のメニュー項目を含めることができます。各メニュー項目は、コマンドを起動するか、カスケードメニューバーを開くことができます。

クラス宣言

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

クラスコンストラクター

Sr.No. Constructor & Description
1

MenuBar()

空の水平メニューバーを作成します。

2

MenuBar(boolean vertical)

空のメニューバーを作成します。

3

MenuBar(boolean vertical, MenuBar.MenuBarImages images)

廃止予定です。 MenuBar（boolean、Resources）に置き換えられました

4

MenuBar(boolean vertical, MenuBar.Resources resources)

指定されたClientBundleをメニュー画像に使用する空のメニューバーを作成します。

5

MenuBar(MenuBar.MenuBarImages images)

廃止予定です。 MenuBar（Resources）に置き換えられました

6

MenuBar(MenuBar.Resources resources)

メニュー画像に指定されたClientBundleを使用する空の水平メニューバーを作成します。

クラスメソッド

Sr.No. Function name & Description
1

HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler)

CloseEventハンドラーを追加します。

2

MenuItem addItem(MenuItem item)

メニュー項目をバーに追加します。

3

MenuItem addItem(SafeHtml html, Command cmd)

SafeHtmlを含むバーにメニュー項目を追加します。選択されたコマンドを実行します。

4

MenuItem addItem(SafeHtml html, MenuBar popup)

メニュー項目をバーに追加します。メニュー項目が選択されると、指定されたメニューが開きます。

5

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

メニュー項目をバーに追加します。メニュー項目が選択されると、指定されたコマンドが実行されます。

6

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

メニュー項目をバーに追加します。メニュー項目が選択されると、指定されたメニューが開きます。

7

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

メニュー項目をバーに追加します。メニュー項目が選択されると、指定されたコマンドが実行されます。

8

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

メニュー項目をバーに追加します。メニュー項目が選択されると、指定されたメニューが開きます。

9

MenuItemSeparator addSeparator()

MenuBarに細い線を追加して、MenuItemsのセクションを分離します。

10

MenuItemSeparator addSeparator(MenuItemSeparator separator)

MenuBarに細い線を追加して、MenuItemsのセクションを分離します。

11

void clearItems()

このメニューバーからすべてのメニュー項目を削除します。

12

void closeAllChildren(boolean focus)

このメニューとすべての子メニューのポップアップを閉じます。

13

void focus()

このメニューバーにフォーカスを与えます。

14

boolean getAutoOpen()

マウスが上に移動したときにこのメニューバーの子メニューが開くかどうかを取得します。

15

int getItemIndex(MenuItem item)

MenuItemのインデックスを取得します。

16

protected java.util.List getItems()

メニューバーのMenuItemオブジェクトを含むリストを返します。

17

protected MenuItem getSelectedItem()

ユーザーが現在選択（強調表示）しているMenuItemを返します。

18

int getSeparatorIndex(MenuItemSeparator item)

MenuItemSeparatorのインデックスを取得します。

19

MenuItem insertItem(MenuItem item, int beforeIndex)

メニュー項目を特定のインデックスのバーに追加します。

20

MenuItemSeparator insertSeparator(int beforeIndex)

MenuBarに細い線を追加して、指定したインデックスでMenuItemsのセクションを区切ります。

21

MenuItemSeparator insertSeparator(MenuItemSeparator separator, int beforeIndex)

MenuBarに細い線を追加して、指定したインデックスでMenuItemsのセクションを区切ります。

22

boolean isAnimationEnabled()

アニメーションが有効な場合はtrue、有効でない場合はfalseを返します。

23

boolean isFocusOnHoverEnabled()

このウィジェットがマウスをホバーしたときにキーボードフォーカスを奪うかどうかを確認します。

24

void moveSelectionDown()

メニュー選択を次の項目に移動します。

25

void moveSelectionUp()

メニュー選択を前の項目に移動します。

26

void onBrowserEvent(Event event)

ブラウザイベントが受信されるたびに発生します。

27

protected void onDetach()

このメソッドは、ウィジェットがブラウザのドキュメントから切り離されるときに呼び出されます。

28

protected void onEnsureDebugId(java.lang.String baseID)

影響を受ける要素：-item＃=指定されたインデックスのMenuItem。

29

void onPopupClosed(PopupPanel sender, boolean autoClosed)

廃止予定です。 代わりにaddCloseHandler（CloseHandler）を使用してください

30

void removeItem(MenuItem item)

指定されたメニュー項目をバーから削除します。

31

void removeSeparator(MenuItemSeparator separator)

指定されたMenuItemSeparatorをバーから削除します。

32

void selectItem(MenuItem item)

指定されたMenuItemを選択します。これは、このMenuBarの直接の子でなければなりません。

33

void setAnimationEnabled(boolean enable)

アニメーションを有効または無効にします。

34

void setAutoOpen(boolean autoOpen)

このメニューバーの上にマウスを移動したときに、このメニューバーの子メニューを開くかどうかを設定します。

35

void setFocusOnHoverEnabled(boolean enabled)

マウスがMenuBarの上に移動したときのオートフォーカスを有効または無効にします。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

  • com.google.gwt.user.client.ui.UIObject
  • com.google.gwt.user.client.ui.Widget
  • java.lang.Object

MenuBarウィジェットの例

この例では、GWTでMenuBarウィジェットの使用方法を示す簡単な手順を紹介します。 次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step Description
1 Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.client.HelloWorld'/>

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

</module>

以下は、変更されたスタイルシートファイル 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;
}

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。 

<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>

MenuBarウィジェットの使用法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を以下に示します。 

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

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。 すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT MenuBarウィジェット

メニューバーで任意の値を選択すると、選択した値を示す警告メッセージがポップアップ表示されます。

「https://www.finddevguides.com/index.php?title=Gwt-menubar-widget&oldid=14887」から取得
Powered by MediaWiki