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，如果需要的話）標準化。