GWTパネルデザインのベストプラクティス

Question

私はGWTの初心者で、Swing/SWTスタイルのインターフェースビルディングにもなっています。私は長い間HTMLを扱ってきましたが、その中にUIを構築する方法を知っています。しかし、私はこれをGWTに翻訳するのに問題があります。私が現在しようとしているのは、左側に4列の見出しとキャプション、右側には入力といくつかのドロップダウン（左側のリストのフィルタ）を持つ簡単なUIです。私はこれをHTMLのモックアップとして作ったが、これをGWTに翻訳するのに問題がある。表の各行には、表内の項目​​を選択するための選択リンクも必要です。

私はUiBinderのことを知っていますが、12月からページがあり、それはまだ出ていないので、実行可能な選択肢のようには見えません。 HTMLをいくつかのGWTコードに変換できればそれが大好きですが、GWTに存在するものは少し高い抽象レベルにあるようです。また、ウィジェットと組み合わせたDOM.createElementを使用することは難しいようです。自分のカスタムパネルを作成します。

Answer 1

トリックやGUIをスイング互いに内側にネストツールキットのレイアウトウィジェットを組み合わせた、としてあなたの意図したレイアウトを視覚化することです。最高レベルのためにHorizontalSplitPanelで

スタート：

はあなたの説明に基づいて、ここにあなたがあなたのGUIを構成するかもしれない方法の高レベルのビューです。左側（表:)

について

はVerticalPanelを作成し、3つのウィジェットを追加し - 次いでヘッダのリテラル画像またはHTML、テーブル自体のための4列のグリッド、別の画像をキャプションの場合はリテラルを使用します。

（あなたがcolspansなどでHTMLテーブルをエミュレートするために探している場合は特に。あなたは左サイドで完全にするために一つの大きな FlexTableで逃げるかもしれないが、代わりに）

分割パネルの左側に、この垂直パネルを追加します。

右側：

VerticalPanelを作成し、必要に応じてヘッダー、ドロップダウン、およびテキスト入力を追加するだけです。 あなたがそれぞれのドロップダウンまたはテキスト入力 の側のラベルがすでに利用可能な非常に良い答えに加えてHorizo​​ntalSplitPanel

Answer 2

あなたが説明していることは、組み込みのパネルを使ってGWTで非常に簡単に利用できるようです。

the GWT showcaseをご覧になり、ソースの表示方法を確認することをおすすめします。

---

GWTとドックパネルのサンプル

DockPanel dock = new DockPanel(); 
dock.setStyleName("cw-DockPanel"); 
dock.setSpacing(4); 
dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER); 

// Add text all around 
dock.add(new HTML(constants.cwDockPanelNorth1()), DockPanel.NORTH); 
dock.add(new HTML(constants.cwDockPanelSouth1()), DockPanel.SOUTH); 
dock.add(new HTML(constants.cwDockPanelEast()), DockPanel.EAST); 
dock.add(new HTML(constants.cwDockPanelWest()), DockPanel.WEST); 
dock.add(new HTML(constants.cwDockPanelNorth2()), DockPanel.NORTH); 
dock.add(new HTML(constants.cwDockPanelSouth2()), DockPanel.SOUTH); 

// Add scrollable text in the center 
HTML contents = new HTML(constants.cwDockPanelCenter()); 
ScrollPanel scroller = new ScrollPanel(contents); 
scroller.setSize("400px", "100px"); 
dock.add(scroller, DockPanel.CENTER); 

Answer 3

の右側に、この右側のサイドパネルを追加したい場合はまた、あなたがグリッドを作成することができます。
をsmartGWTを見てみると、GWTに付属のウィジェットよりも洗練されたウィジェットがたくさん提供されます。彼らのショーケースは、アイデアを探していたり​​、何かを実装するのに問題がある場合にも非常に役に立ちます。

Answer 4

あなたのGWTプロジェクトであなたのHTMLエクスペリエンスを高く使うことができると思います。 また、UIバインダーのために行く必要はありません 間で再生することができます。

レイアウト全体をHTMLでデザインします。静的コンテンツが必要な場所でも、HTMLを使用します。あなたのインタラクティブなウィジェットを置く場所を入れてください。ここからGWTが始まります。 GWTで素敵なウィジェットを作ってください。 RootPanle.get（ "あなたのdiv ID"）までにあなたのHTMLレイアウトをフックします。add（あなたのウィジェット）;

このテクニックは、サンプルプロジェクトでもsdkが付属しています。 Google IO 2010であっても、もっと多くのHTMLの使用を宣伝しています（私の個人的意見..）