GXT之旅：第二章：GXT组件(7)——Button和Tooltip

ToggleButton

Button控件对于大家来说并不陌生，也就不专门介绍了。下面要特殊的介绍一下ToggleButton。他是Button的子类，他就像一个开关，有“按下”和“未按下”两种状态。同时呢，我们可以给ToggleButton进行分组，使用setToggleGroup(String toggleGroup)就可以实现。分组后的ToggleButton不管如何点击其中某个按钮，都会只有一个按钮显示被“按下”的状态。

添加一个Link feed button

我们要在RssNavigationPanel组件上，添加一个“Link feed” button。其作用是，通过点击此按钮，显示一个表单，用户可以通过此表单录入一个RSS的URl。当然如果像取消对表单的录入，通常我们得加入一个cancel button来关闭此表单。但是我们现在要使用ToggleButton来实现“Link feed” button的功能——通过两种开关状态，控制表单的显示与否。

接下来，我们进一步定制RssNavigationPanel component——添加ToggleButton

• 在RssNavigationPanel 类的构造函数里，新建一个ToggleButton

final ToggleButton btnLinkFeed = new ToggleButton("Link feed");

• 在RSSReader.css文件里，加入合适的css样式来设置此button的图标。

.link-feed {
	background: url("gxt/images/icons/feed_link.png") no-repeat center left
		!important;
}

• 让btnLinkFeed 应用此css样式

btnLinkFeed.setIconStyle("link-feed");

• 设置btnLinkFeed在RssNavigationPanel容器里水平居左

setButtonAlign(HorizontalAlignment.LEFT);

• 最后，要把btnLinkFeed添加到RssNavigationPanel容器显示出来。

addButton(btnLinkFeed);

• 运行程序，预期效果如下：

Tooltip

自然情况下，我们会让一个button的label的内容很简洁。一般的用户就会通过label明白此button是做什么的。但是还是有些用户无法通过图片和label来明白此button 是用来做什么的，那么我们就需要使用Tooltip。

Tooltip可以被添加在一个button或其他的components上。当鼠标经过此component上时，Tooltip就会显示出来，给用户更多的信息。

接下来，给刚刚添加的Link feed button添加一个Tooltip。

• 同样还是在RssNavigationPanel类的构造函数里，添加如下的代码。
  

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

• 要注意的是ToolTipConfig 是另外之用ToolTip——可以支持标题和内容。
• 设置btnLinkFeed的ToolTip，除了使用ToolTipConfig 之外，当然还支持String类型

btnLinkFeed.setToolTip(linkFeedToolTipConfig);

• 预期效果如下：