GXT之旅：第五章：高级Components(4)——Menus

Menu component

• Menu是一个非常灵活的component，他可以显示一组菜单，创建的大致代码如下：

Menu contextMenu = new Menu();
contextMenu.add(new MenuItem("Option 1"));
contextMenu.add(new MenuItem("Option 2"));
contextMenu.add(new MenuItem("Option 3"));
Label label = new Label("Menu appears here");
contextMenu.show(label);

• 当然一个Menu可以被添加到一个Button上，来作为该Button的额外选项：

Menu contextMenu = new Menu();
contextMenu.add(new MenuItem("Option 1"));
contextMenu.add(new MenuItem("Option 2"));
contextMenu.add(new MenuItem("Option 3"));
Button button = new Button("Menu");
button.setMenu(contextMenu);

• 当一个Menu有很多的Item，可以设置允许最大的高度（setMaxHeight），让其超出的部分是可卷动的
  

Menu contextMenu = new Menu();
for (int i = 1; i < 100; i++) {
contextMenu.add(new MenuItem("Option " + i));
}
contextMenu.setMaxHeight(200);
Button button = new Button("Menu");
button.setMenu(contextMenu);

MenuBar component

• 创建的Menu不单单可以添加到Button上，也可以添加到MenuBar 上。多组Menu添加到MenuBar上，就很像左面程序的菜单。但是Menu创建之后，不能直接添加到MenuBar上，需要包装成MenuBarItem

Menu menu1 = new Menu();
menu1.add(new MenuItem("Option 1"));
menu1.add(new MenuItem("Option 2"));
menu1.add(new MenuItem("Option 3"));
Menu menu2 = new Menu();
menu2.add(new MenuItem("Option 4"));
menu2.add(new MenuItem("Option 5"));
menu2.add(new MenuItem("Option 6"));
MenuBar menuBar = new MenuBar();
menuBar.add(new MenuBarItem("Menu 1", menu1));
menuBar.add(new MenuBarItem("Menu 2", menu2));
viewport.add(menuBar);

MenuItem component

• 下面详细介绍一个MenuItem：Menu就可以看成一个容器，用来包装MenuItem，具体的显示效果还是通过MenuItem来设置的——text，icon等

Menu menu1 = new Menu();
menu1.add(new MenuItem("Option 1",Resources.ICONS.page()));
menu1.add(new MenuItem("Option 2",Resources.ICONS.page()));
menu1.add(new MenuItem("Option 3",Resources.ICONS.page()));

• 一个Menu可以被设置成另外一个Menu的子集，通过MenuItem的setSubMenu方法

Menu menu1 = new Menu();
menu1.add(new MenuItem("Option 1",Resources.ICONS.page()));
menu1.add(new MenuItem("Option 2",Resources.ICONS.page()));
Menu menu2 = new Menu();
menu2.add(new MenuItem("Option 4"));
menu2.add(new MenuItem("Option 5"));
menu2.add(new MenuItem("Option 6"));
MenuItem miOption3 = new MenuItem("Option 3");
miOption3.setSubMenu(menu2);
menu1.add(miOption3);

CheckMenuItem component

CheckMenuItem继承了MenuItem，其功能是可以让menu的items被选中。

• 通过CheckMenuItem生成的Menu，代码如下：

Menu menu = new Menu();
menu.add(new CheckMenuItem("Option 1"));
menu.add(new CheckMenuItem("Option 2"));
menu.add(new CheckMenuItem("Option 3"));
MenuBar menuBar = new MenuBar();
menuBar.add(new MenuBarItem("Menu", menu));

• 当然对于多选组件来说，当然支持分组。CheckMenuItem可以通过setGroup方法进行分组，但是分组后的CheckMenuItem，则编程单选组件了。

MenuEvent

某个MenuItem被选中时，就会触发MenuEvent事件。就像一个Button被选中的时候，会触发ButtonEvent。

MenuItem可以添加SelectionListener监听选中事件。

MenuItem menuItem = new MenuItem("Option1");
menuItem.addSelectionListener(new SelectionListener<MenuEvent>(){
@Override
public void componentSelected(MenuEvent ce) {
//Action goes here
}
});

目前为止，在我们RSSReader项目里面，RssNavigationPanel组件里添加了两个buttons——Create feed 和Link feed。接下来我们要使用MenuBar替换他们，让这两个buttons呈现在一组菜单里面。因此我们期待的页面效果如下：

• 修改后的RssNavigationPanel类构造函数如下：

	public RssNavigationPanel() {
		setHeading("Navigation");
		setLayout(new FitLayout());

		Menu menu = new Menu();
		//Create feed
		final MenuItem miCreateFeed = new MenuItem("Create feed");
		miCreateFeed.setIconStyle("create-feed");
		ToolTipConfig createNewToolTipConfig = new ToolTipConfig();
		createNewToolTipConfig.setTitle("Create a new RSS feed");
		createNewToolTipConfig
		.setText("Creates a new RSS feed");
		miCreateFeed.setToolTip(createNewToolTipConfig);
		miCreateFeed.addSelectionListener(new
				SelectionListener<MenuEvent>() {
			@Override
			public void componentSelected(MenuEvent me) {
				createNewFeedWindow();
			}
		});
		menu.add(miCreateFeed);

		//Link feed
		final MenuItem miLinkFeed = new MenuItem("Link feed");
		miLinkFeed.setIconStyle("link-feed");
		ToolTipConfig linkFeedToolTipConfig = new ToolTipConfig();
		linkFeedToolTipConfig.setTitle("Link to existing RSS feed");
		linkFeedToolTipConfig
		.setText("Allows you to enter the URL of an existing RSS feed you would like to link to");
		miLinkFeed.setToolTip(linkFeedToolTipConfig);
		final LinkFeedPopup addFeedPopup = new LinkFeedPopup();
		addFeedPopup.setConstrainViewport(true);
		miLinkFeed.addSelectionListener(new SelectionListener<MenuEvent>()
				{
			@Override
			public void componentSelected(MenuEvent me) {
				addFeedPopup.show(miLinkFeed.getElement(), "tl-bl?");
			}
				});
		menu.add(miLinkFeed);

		//menuBar
		MenuBar menuBar = new MenuBar();
		MenuBarItem menuBarItem = new MenuBarItem("Add feed", menu);
		menuBar.add(menuBarItem);
		setTopComponent(menuBar);
		
		add(new FeedList());
	}