ImageButton以gwt [英] ImageButton in gwt

问题描述

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

任何人都可以帮助我实现这个目标。

解决方案

如果你需要一个带圆角的按钮，那么有很多选择：

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

创建一个扩展Composite的新小部件。小部件应该包装FlexTable。在同一行使用3个单元格。将标签添加到中心单元格，并在您的小部件上提供get和set方法以获取文本并将其设置为内部标签。标签会自动调整大小，迫使表格单元变大。将相应的处理程序添加到FlexTable小部件。我建议你使用这些事件来添加或删除样式到适当的单元格，并在样式表中定义背景图像。 你可以创建自己的小部件。这要求您生成自己的HTML等，这些HTML可能无法在每个浏览器中立即使用。我建议先尝试选项1或2.

I have to create a image button in gwt which uses three images(left side image,center stretch image and right image).Left side images and right images having rounded corners.Center Image wants to be stretched depends on button title size.Created ImageButton should have all the functionalities of Button.

Can anyone help me in how to achieve this.

解决方案

If you need a button with rounded corners then there are a number of options:

1. Create a new widget that extends the DecoratorPanel to create the rounded corners. The DecoratorPanel will result in a table (HTML). You'll probably want to replace the standard images. Look at the standard.css that GWT provides to find the styles that define those images, then override those styles in your custom stylesheet (look for the CSS class ".gwt-DecoratorPanel"). In the widget, add a Label widget to display the button text and provide get and set methods on your widget to get and set text to the internal label. The label will resize automatically forcing the table cell to grow bigger.

2. Create a new widget that extends Composite. The widget should wrap a FlexTable. Use 3 cells on the same row. Add a Label to the center cell and provide get and set methods on your widget to get and set text to the internal label. The label will resize automatically forcing the table cell to grow bigger. Add the appropriate handlers to the FlexTable widget. I suggest you use those events to add or remove styles to the appropriate cells and define the background images in a stylesheet.

3. You could create your own widget. This requires that you generate your own HTML etc. which may not immediately work in every browser. I recommend trying option 1 or 2 first.

这篇关于ImageButton以gwt的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！