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存儲庫中。