ImageButton in gwt

Question

我必须在gwt中使用三个图像（左侧图像，中央拉伸图像和右侧图像）创建图像按钮。左侧图像和右侧图像具有圆角。中心图像要拉伸取决于按钮标题size.Created ImageButton应具有Button的所有功能。

任何人都可以帮助我如何做到这一点。

Answer 1

如果您需要带圆角的按钮，然后有多种选择：

1. 创建一个扩展DecoratorPanel创建圆角的新的widget。 DecoratorPanel将产生一个表格（HTML）。您可能会想要替换标准图像。看看GWT提供的standard.css来找到定义这些图像的样式，然后覆盖自定义样式表中的样式（查找CSS类“.gwt-DecoratorPanel”）。在小部件中，添加一个Label小部件以显示按钮文本，并在小部件上提供get和set方法以获取文本并将其设置为内部标签。标签会自动调整大小，迫使表格单元变大。

2. 创建一个扩展Composite的新小部件。小部件应该包装FlexTable。在同一行使用3个单元格。将标签添加到中心单元格，并在您的小部件上提供get和set方法以获取文本并将其设置为内部标签。标签会自动调整大小，迫使表格单元变大。将相应的处理程序添加到FlexTable小部件。我建议你使用这些事件来添加或删除样式到合适的单元格，并在样式表中定义背景图像。

3. 您可以创建自己的小部件。这要求您生成自己的HTML等，这些HTML可能无法在每个浏览器中立即使用。我建议先尝试选项1或2。

Answer 2

如果您可以限制按钮的最大宽度，那么您可能只能使用一个精灵图像。我们编写了一个CssButton类（扩展Button）作为GWT Portlets框架的一部分，该框架使用单个背景图像精灵创建四舍五入的按钮。该代码使用CSS裁剪来根据按钮的宽度从精灵中选择正确的背景图像。

主要优点是它扩展了普通的GWT按钮，并且只使用DOM中的单个BUTTON元素（轻量级）。缺点是按钮的最大宽度限于精灵中最宽的按钮图像。

它还处理所有使用相同精灵的翻转和点击效果。

如果您想进一步了解，代码位于GWT Portlets存储库中。