GXT之旅：第五章：高级Components(5)——ToolBar

ToolBar component

ToolBar component不是我们传统意义上的buttons 或 menus。

先前我们RSSReader项目，RssNavigationPanel里面的buttons已经被替换成menus，接下来我们要是ToolBar展示更丰富的功能。ToolBar里不单单可以添加butons，而且甚至ComboBox或者Label都可以添加进来。

一个ContentPanel为toolbar提供了顶部或者底部的占位符。为了继续整理RSSReader项目里Create feed 和Link feed两个buttons，我们准备添加一个ToolBar，将他们整合起来。

• 在RssNavigatorPanel类里，新建一个方法initToolbar

private void initToolbar() {

• 在方法的内，首先加入ToolBar的定义

final ToolBar toolbar = new ToolBar();

• 新建一个button——Add feed，用于被添加到toolbar里。
  

final Button btnAddFeed = new Button("Add feed");
btnAddFeed.setIconStyle("create-feed");
ToolTipConfig addFeedToolTipConfig = new ToolTipConfig();
addFeedToolTipConfig.setTitle("Add a new RSS feed");
addFeedToolTipConfig.setText("Adds a new RSS feed");
btnAddFeed.setToolTip(addFeedToolTipConfig);

• 新建一个Menu

Menu menu = new Menu();

• 将Create feed button定义之后，添加到menu里
  

		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 button定义之后，添加到menu里
  

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

• 层层添加，最后使之能显示出来。

                //set menu into button
		btnAddFeed.setMenu(menu);
		//set button into tollbar
		toolbar.add(btnAddFeed);
		//set toolbar into ContentPanel 
		setTopComponent(toolbar);

• 完整的RssNavigationPanel类，如下：

package com.danielvaughan.rssreader.client.components;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.lists.FeedList;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.danielvaughan.rssreader.client.windows.FeedWindow;
import com.danielvaughan.rssreader.shared.model.Feed;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.event.MenuEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.menu.Menu;
import com.extjs.gxt.ui.client.widget.menu.MenuItem;
import com.extjs.gxt.ui.client.widget.tips.ToolTipConfig;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class RssNavigationPanel extends ContentPanel {
	public RssNavigationPanel() {
		setHeading("Navigation");
		setLayout(new FitLayout());
		initToolbar();
		add(new FeedList());
	}

	@Override
	protected void onRender(Element parent, int pos) {
		super.onRender(parent, pos);
		
		
	}
	
	private void createNewFeedWindow() {
		final FeedServiceAsync feedService = Registry
				.get(RSSReaderConstants.FEED_SERVICE);
		feedService.createNewFeed(new AsyncCallback<Feed>() {
			@Override
			public void onFailure(Throwable caught) {
				Info.display("RSSReader", "Unable to create a new feed");
			}

			@Override
			public void onSuccess(Feed feed) {
				final Window newFeedWindow = new FeedWindow(feed);
				newFeedWindow.show();
			}
		});
	}

	private void initToolbar() {
		final ToolBar toolbar = new ToolBar();
		
		//btnAddFeed
		final Button btnAddFeed = new Button("Add feed");
		btnAddFeed.setIconStyle("create-feed");
		ToolTipConfig addFeedToolTipConfig = new ToolTipConfig();
		addFeedToolTipConfig.setTitle("Add a new RSS feed");
		addFeedToolTipConfig.setText("Adds a new RSS feed");
		btnAddFeed.setToolTip(addFeedToolTipConfig);
		//miCreateFeed
		Menu menu = new Menu();
		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);
		//miLinkFeed
		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);
		//set menu into button
		btnAddFeed.setMenu(menu);
		//set button into tollbar
		toolbar.add(btnAddFeed);
		//set toolbar into ContentPanel 
		setTopComponent(toolbar);
	}
}

• 运行效果入下：