ImageButton in gwt

Question

3つの画像（左側の画像、中央のストレッチ画像、右側の画像）を使用するgwtに画像ボタンを作成する必要があります。左側の画像と、丸みを帯びた右側の画像。ボタンのタイトルサイズです。作成されたImageButtonはButtonのすべての機能を持つ必要があります。

これを達成する方法を教えてもらえますか？

Answer 1

あなたは角の丸いボタンが必要な場合は、その後多くのオプションがあります。

1. は、丸みを帯びた角を作成するためにDecoratorPanelを拡張して新しいウィジェットを作成します。 DecoratorPanelはテーブル（HTML）になります。おそらく標準画像を置き換えることになります。これらのイメージを定義するスタイルを見つけるためにGWTが提供するstandard.cssを見て、カスタムスタイルシートのスタイルを上書きします（CSSクラス ".gwt-DecoratorPanel"を探してください）。ウィジェットでは、ラベルウィジェットを追加してボタンテキストを表示し、ウィジェットにgetおよびsetメソッドを提供して、内部ラベルにテキストを取得および設定します。ラベルは自動的にサイズ変更され、テーブルセルのサイズが大きくなります。

2. Compositeを拡張する新しいウィジェットを作成します。ウィジェットはFlexTableをラップする必要があります。同じ行に3つのセルを使用します。中央のセルにラベルを追加し、内部ラベルにテキストを取得したり設定したりするために、ウィジェットのgetおよびsetメソッドを提供します。ラベルは自動的にサイズ変更され、テーブルセルのサイズが大きくなります。 FlexTableウィジェットに適切なハンドラを追加します。これらのイベントを使用して、スタイルを適切なセルに追加または削除し、スタイルシートに背景イメージを定義することをお勧めします。

3. 独自のウィジェットを作成できます。これはあなた自身のHTMLなどを生成する必要があります。これはすべてのブラウザですぐには動作しません。最初にオプション1または2を試してみることをお勧めします。

Answer 2

ボタンの最大幅を制限できる場合は、スプライトイメージを1つだけ使用すると、離れてしまうことがあります。単一の背景イメージスプライトを使用して丸いボタンを作成するGWT Portletsフレームワークの一部としてCssButtonクラス（extendsボタン）を作成しました。このコードでは、CSSのクリッピングを使用して、ボタンの幅に基づいてスプライトから正しい背景イメージを選択します。

主な利点は、通常のGWTボタンを拡張し、DOM（軽量）内の単一のBUTTON要素のみを使用することです。欠点は、ボタンの最大幅がスプライトの最も広いボタン画像に制限されていることです。

また、同じスプライトを使用するロールオーバーとクリックのエフェクトも処理されます。

詳細を見たい場合は、コードはGWTポートレットリポジトリにあります。