GXT3：如何实现svg按钮

Question

使用SVG图标比png/gif图标有许多优点。因此，我想实现一个svg按钮类来充当gwt小部件。 GXT 3中是否存在某些内容？或者什么是实现这种小部件的最佳选择？谢谢。

---

更多详细信息：

我需要一个纯粹的可点击的图标SVG行动象一个按钮控件。它需要有鼠标点击处理程序，并能够以三种状态应用不同的CSS：正常，悬停，禁用。我不想要一个带有svg图标的按钮。

Answer 1

在支持它们的浏览器中，SVG可以像使用图像文件（png/jpg/etc）一样使用。 GXT/GWT不应该有所作为，你只需要应用图像。

而不是构建自己的小部件（当然，这是一个选项），您可以使用内置的小部件，可以告诉它使用任何图像或css类（取决于小部件）。

例如，GXT的TextButton有一个setIcon方法，它需要一个ImageResource。通常这些都是在ClientBundle中创建的，但GWT的ClientBundle的代码生成不知道SVG是什么。

ImageResource接口有一个内置于GWT的实现，ImageResourcePrototype，允许您指定所有需要的参数。第二个参数是一个url，一个图像的路径，只要浏览器支持，它就会被渲染。所以，我们需要将要使用的SVG文件放入ImageResourcePrototype中。现在

ImageResource icon = new ImageResourcePrototype("icon", UriUtils.fromSafeConstant("/path/to/my.svg"), 0, 0, 20, 20, false, false); 
    TextButton button = new TextButton("square", icon); 
    RootPanel.get().add(button); 

，你可以只是路过在一个正常的URL做到这一点，但当时我们并不比正常的图像更好，因为我们仍然需要往返于服务器 - 最图标按钮仅一个几kb，但HTTP调用的开销可能很糟糕，所以你的SVG将会一样糟糕。幸运的是，GWT中的所有内置ImageResource已经绑定到应用程序中，因此不需要HTTP调用。事实证明，我们也可以捆绑我们的svg文件，尽管我们需要让它适合浏览器处理它。

将SVG文件放入源代码中，并使用Java语言，我们将制作一个包。我把这个很无聊的图标变成一个名为icon.svg文件：

<svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> 

    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> 
</svg> 

接下来，使用它在我们的应用程序。我创建了一个入口点，只是抓住这个图标并将其放入一个按钮中。我们使用DataResource这里引用该文件从我们的应用程序内部传输数据的URL，但我们需要正确地指定的MIME类型的浏览器，以了解它是图像：

public class SampleIconEntryPoint implements EntryPoint { 
    interface Bundle extends ClientBundle { 
     @Source("icon.svg") 
     @MimeType("image/svg+xml") 
     DataResource icon(); 
    } 

    @Override 
    public void onModuleLoad() { 
     Bundle bundle = GWT.create(Bundle.class); 
     ImageResource icon = new ImageResourcePrototype("icon", bundle.icon().getSafeUri(), 0, 0, 50, 50, false, false); 
     TextButton button = new TextButton("square", icon); 
     RootPanel.get().add(button); 
    } 
} 

---

通过将.svg文件添加到GWT中的ImageResourceGenerator中，可以使这变得更容易，但这不是一个非常常见的用例。

---

好吧，那么SVG对光栅图像有什么作用？对于大图像，很多！因为它们很好地伸展，所以它们可以在相同的细节水平上小得多，但对于小图标，它可能会被击中或错过。更容易改变一些关于它们的细节，但这实际上超出了如何在gwt中使用SVG的问题的范围（请参阅GXT的图表/绘图库以获取大量简单的SVG渲染工具），而且并不经常重要的是按钮上的单个图像。图标图像很小，在这里可以节省几个字节，并且可能不会有效地利用时间 - 此外，SVG在浏览器中渲染的时间比简单得多的图像要多（但同样，对于非常小的图像，差异会很小浏览器）。

---

编辑，试图解决这个问题的编辑，而不是原来的点。

虽然SVG元素几乎是正常的dom元素，但请检查您需要支持哪些浏览器以确保它们能够正常工作。 https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction简要介绍了如何构建元素以更正名称空间，以便浏览器能够正确使用它们。除此之外，它们的行为与GWT中的普通dom元素大致相同。我通常会建议你对待他们像GWT中的普通dom元素，所以你的小部件不应该将处理程序附加到子元素，而只是在每个小部件上正常使用addDomHandler。考虑到svg元素相互重叠的能力（基于dom中的顺序），如果您需要确切了解鼠标是否结束了，则可以考虑其他方法来查看哪些元素位于其他元素之上（尽管对于按钮，这应该不重要）。如上所述，GXT的绘图工具提供了一个DrawComponent类，它可以使用SVG并让您获取发生在每个绘制精灵上的事件，并针对不同的浏览器问题（支持画布，如果可能的话，或者VML，如果需要的话）标准化。