0

画面上に非常に多くの小さな小さなセクションがあるGWTでレイアウトを設計したかったのです。基本的に、左側のメニュー、ヘッダー、フッター、メインコンテンツ領域があり、ユーザーが見たくない場合に備えて、ユーザーが閉じることができる多くのサブセクションがあります。その後、残りのコンテンツセクションは自動的に調整されます。GWTプラットフォームを使用しています。DockLayoutPanelがこれに適しているかどうかは疑問です。なぜなら、もっと柔軟でなければならないからです。それを除けば、良いレイアウトの例は得られませんでした。GWTここに画像の説明を入力してくださいパネルを使用してこれを実現できますか、それともモジュールhtmlファイルのdivを使用して手動で実行する必要がありますか？

ドラフトレイアウトの下にあります。どのパネルから始めたらいいのか本当に混乱しています…。親切なアドバイス。

4

2 に答える 2

2

それを達成する方法は何百万もあります。私はあなたに私の意見を述べ、なぜ私がこのようにするのかを説明しようとします。

まず第一に、ほとんどのWebサイトと同様に、上部のヘッダー（または2つ）と左側のメニューが必要なようです。DockLayoutPanelはこれを非常にうまく行うことができるので、最初にそれを使用します。ちなみに、レイアウトにフッターを追加することを検討してください（申し訳ありませんが、ほとんどのアプリにフッターがあると思っています）...

次に、左側に2つの小さなパネル（ツリーStr1と2）とコンテンツ領域があります。これらをどの程度柔軟にするかに応じて、さまざまな構造が必要になります。

たとえば、左側に2つだけでなく、潜在的に多くのTree Strが必要であり、コンテンツ領域はあまり変更されないとします。DockLayoutPanelのWest領域にVerticalPanelを追加します（2つのTree Strが含まれる可能性があります）。

DockLayoutPanelのメイン領域に、中央領域を表すVerticalPanelを追加します。このVerticalPanelは、適切なサイズにする必要があります（おそらく、幅、高さ= 100％）。

VerticalPanel 2行（Horizo​​ntalPanels）に追加します。

これで、コンテンツ領域1を最初の行に追加し、他の行を行2に追加できます。

さて、コードに話させてください：

public Panel getMainPanel() {
    DockLayoutPanel mainPanel = new DockLayoutPanel(Unit.PX);
    mainPanel.setSize("500px", "500px");

    VerticalPanel leftPanel = new VerticalPanel();

    Label treeStr1 = new Label("Tree Str1");
    treeStr1.setSize("100%", "100px");
    Label treeStr2 = new Label("Tree Str2");
    treeStr1.setSize("100%", "200px");

    leftPanel.add(treeStr1);
    leftPanel.add(treeStr2);

    VerticalPanel centralArea = new VerticalPanel();
    centralArea.setSize("100%", "100%");
    centralArea.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    centralArea.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    centralArea.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);

    HorizontalPanel row1 = new HorizontalPanel();
    row1.setWidth("90%");
    HorizontalPanel row2 = new HorizontalPanel();
    row2.setWidth("90%");
    row2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    row2.getElement().getStyle().setBorderColor("red");
    row2.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);

    centralArea.add(row1);
    centralArea.add(row2);

    HTML ca1 = new HTML("Content Area 1");
    ca1.setSize("100%", "100px");
    ca1.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    HTML ca2 = new HTML("Content Area 2");
    ca2.setSize("60%", "60px");
    ca2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    HTML ca3 = new HTML("Content Area 3");
    ca3.setSize("30%", "60px");
    ca3.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);

    row1.add(ca1);
    row2.add(ca2);
    row2.add(ca3);

    mainPanel.addNorth(new HTML(
            "<h1>This is your header, create a Widget instead of this</h1>"), 150);
    mainPanel.addNorth(new HTML(
            "<h2>Some more user options</h2>"), 60);
    mainPanel.addWest(leftPanel, 150);
    mainPanel.add(centralArea);
    return mainPanel;
}

これらの領域のいずれかが本当に柔軟でなければならない場合は、GWTのFlexTableを試してください！

于 2012-06-12T09:07:27.907 に答える
1

HTMLを使用してページレイアウトを設計し、その上にGWTウィジェットを追加できます。

HTML：divwithを作成し、 id="treeStr2"cssを使用します

GWT：RootPanel.get("treeStr2").add(your widget);

于 2012-06-14T07:44:52.847 に答える