ウィジェットが非常に単純な場合にのみ、UiBinderでウィジェットを使用します。たとえば、に2つのウィジェットを追加しているだけですPanel。CSSが関係している場合は、スタイルの操作がはるかに簡単なので、常にUiBinderを使用します。
ウィジェットはUiBinderXMLに変換されません。すべてのGWTコードは、DOM要素を追加および操作するJavaScriptになるため、すべてがテンプレートシステムではなく、実行可能言語に変換されます。
私はたくさんのUiBinderスニペットを書いています。私はあなたがウェブ全体で見つけることができる抽象化と構成についての良い規則に従うようにしています。
GWTフリーのプレゼンターのテストはJUnitを使用すると非常に迅速かつ簡単であるのに対し、GWTテストはオーバーヘッドがはるかに多く、速度がはるかに遅いため、重要なロジックがある場合はMVPパターンが必須です。
関心の分離、CSSファイルの圧縮とバンドル、および通常のHTMLページでCSSを配置する理由と同じ他の多くの理由から、CSSファイルのスタイルをできるだけ多く維持するのが好きです。ページ上ではなく、別のファイルに直接。
私はGWTデザイナーを使用しません。私はいつも、UIコードジェネレーターによって通常吐き出されるクレイジーなジャンクよりもクリーンなコードを好む。
99％のComposite確率で、UiBinderを使用しているか、に何かを追加しているため、ウィジェットが拡張されますPanel。Compositeウィジェットが1つしかない場合でも、1つのウィジェットをに拡張して追加する方が簡単SimplePanelです。DOMを作成するためにをWidget呼び出す必要があるため、拡張することはめったにありませんが、通常はsを見つけます。これは、sに追加でき、sよりも簡単に操作できます。Document.get().createFooElement()ElementWidgetPanelElement
ウィジェットの作成方法
各ウィジェットは、を拡張するインターフェースを実装しますIsWidget。を使用したい人は誰でもWidget、基礎となるクラスではなく、インターフェースに依存する必要があります。これは、JSNIを使用しない単一の抽象化を示します。
ウィジェットが非常に単純な場合、Compositeインターフェイスを拡張および実装する単一のクラスがあります。ウィジェットは非常にシンプルで、にいくつかのアイテムを追加するか、PanelUiBinderを使用します。
ウィジェットにテストしたい重要なロジックがある場合は、MVPパターンを使用します。ウィジェットの「パブリック」インターフェースを実装するプレゼンタークラスIsWidget、プレゼンターが依存する拡張ビューインターフェース、およびビューインターフェースを実装するビューウィジェットがあります。
ウィジェットに単一の「パブリック」インターフェイスを使用する利点はComposite、ロジックが複雑になった場合に、単一クラスでのインターフェイスの実装からMVPの使用に変更でき、ウィジェットを使用する人がまったく変更する必要がないことです。
私はGinを使用して、すべてのインターフェースと実装を相互に接続しています。
例
これはいくつかのコードで最もよく説明されます。複数のページで使用したいグラフがあるとしましょう。そのため、再利用可能なウィジェットを作成することにしました。RPC応答を表示する前に処理することには、重要なロジックがいくつかあるので、徹底的に単体テストを行いたいと思います。私はこのようなもので行きます：
public interface FinancialChart extends IsWidget {
void setTickerSymbol(String tickerSymbol);
}
class FinancialChartPresenter extends Composite implements FinancialChart {
private final FinancialChartView view;
private final DataServiceAsync service;
@Inject(FinancialChartView view, DataServiceAsync service) {
this.view = view;
this.service = service;
}
@Override public Widget asWidget() {
return view.asWidget();
}
@Override public void setTickerSymbol(String tickerSymbol) {
service.getData(tickerSymbol, new AsyncCallback<FinancialData>() {
@Override public void onFailure(Throwable t) {
// handle error
}
@Override public void onSuccess(FinancialData data) {
SimpleData simpleData = // do some parsing with presentation-specific
// logic, e.g. make dramatic increases or decreases in price have a
// a different color so they stand out. End up with something simple
// that's essentially some (x, y) points that the dumb view can plot
// along with a label and color for each point.
view.drawGraph(simpleData);
}
}
}
interface FinancialChartView extends IsWidget {
void drawGraph(SimpleData simpleData);
}
class FinancialChartWidget extends Composite implements FinancialChartView {
@Override public void drawGraph(SimpleData simpleData) {
// plot the points on a chart. set labels. etc.
}
}
class SomethingWithFinancialChartWidget extends Composite
implements SomethingWithFinancialChart {
interface Binder extends UiBinder<Widget, SomethingWithFinancialChartWidget> {}
@UiField(provided = true) final FinancialChart chart;
@Inject SomethingWithFinancialChartWidget(Binder binder, FinancialChart chart) {
this.chart = chart;
initWidget(binder.createAndBindUi(this));
}
}
// In SomethingWithFinancialChartWidget.ui.xml
<ui:HTMLPanel>
<!-- lots of stuff -->
<mynamespace:FinancialChart ui:field="chart" />
<!-- lots more stuff -->
</ui:HTMLPanel>
class MyPackagesGinModule extends AbstractGinModule {
@Override protected void configure() {
bind(FinancialChart.class).to(FinancialChartPresenter.class);
bind(FinancialChartView.class).to(FinancialChartWidget.class);
}
}
FinancialViewPresenterこれにより、非常に低速なGWTテストケースの一部としてブラウザーで実行する必要があるJSNIを必要とするGWT依存関係がないため、非常に単純で徹底的かつ高速なJUnitテストを作成できます。モックを作成できますFinancialChartView。
ここで注意すべきことの1つは、はインターフェイスにSomethingWithFinancialChartWidget依存しているFinancialChartため、単なるインターフェイスであるため、そのオブジェクトをインスタンス化できないことです。そのため、はのJavaコードのようにchart設定されます。Ginは、インターフェイスから具象クラスへのバインディングを設定して、のコンストラクターに実装を提供できるようにします。次に、設定により、UiBinderに必要なオブジェクトが提供されます。@UiField(provided = true)SomethingWithFinancialChartWidgetFinancialChart@InjectSomethingWithFinancialChartWidgetthis.chart
FinancialChartMVPのすべてのインターフェイスと実装用に作成されるファイルは多数ありますが、プレゼンターの単体テストが簡単になり、この例ではトップレベルのインターフェイスの実装方法を変更できるため、抽象化は絶対に価値があります。たとえば、クライアントを変更する必要なしに、単一のCompositeクラスからMVPに変更します。
GWTテストなど、実装の詳細があまり明確ではない場合や、私が見落としたものがあると確信しているので、コメントを投稿してください。回答を編集して更新し、明確にすることができます。