4

私はGWTを初めて使用し、次のことを達成しようとしています:

ここに画像の説明を入力

私が作ったコードは次のとおりです。

public class MyWebApp implements EntryPoint {
    // The main container for everything the user sees (the "view")
    private LayoutPanel mainPanel;

    // Simple HTML for the header ("MyWebApp") and subsequent <hr/>
    private SafeHtml header;

    // The three links "Dashboard", "Monitors" and "Help Desk"
    private HorizontalPanel navMenu;

    // The empty content that gets populated when user clicks one of
    // the 3 links.
    private Panel menuContent;

    @Override
    public void onModuleLoad() {
        // The initial fragment contains the header, nav menu and empty "content" div.
        // Each menu/screen then fills out content div.
        initMainPanel();

        RootPanel.get().add(mainPanel);
    }

    private void initMainPanel() {
        SafeHtmlBuilder headerBuilder = new SafeHtmlBuilder();
        navMenu = new HorizontalPanel();

        // Leaving null until user clicks on one of the 3 menus.
        // Then the menu will decide what panel gets injected for
        // this panel.
        menuContent = null;

        // Create the simple HTML for the header.
        headerBuilder.append("<h1>MyWebApp</h1><hr/>");

        // Create the navMenu items.
        Hyperlink dashboardLink, monitorsLink, helpDeskLink;

        // Homepage is http://www.mywebapp.com
        // I want the dashboardLink to inject menuContent and "redirect" user to
        // http://www.mywebapp.com/dashboard
        dashboardLink = new Hyperlink("???", "???");

        // http://www.mywebapp.com/monitors
        monitorsLink = new Hyperlink("???", "???");

        // http://www.mywebapp.com/help-desk
        helpDeskLink = new Hyperlink("???", "???");
        navMenu.add(dashboardLink);
        navMenu.add(monitorsLink);
        navMenu.add(helpDeskLink);

        // Add all widgets to the mainPanel.
        mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));
        mainPanel.add(navMenu);
        mainPanel.add(menuContent);

        // Position and size the widgets (omitted for brevity).
        // mainPanel.setWidgetHorizontalPosition(...);
    }

    private HTML getDashboardMenuContent() {
        return new HTML("This is the dashboard.");
    }

    private HTML getMonitorsMenuContent() {
        return new HTML("These are the monitors.");
    }

    private HTML getHelpDeskMenuContent() {
        return new HTML("This is the help desk.");
    }
}

最も重要なこと：

  • Hyperlinkユーザーがクリックしたときに適切なgetXXXMenuContent()メソッドを呼び出して、それを に追加できるように sを「接続」するにはどうすればよいmenuContentですか?

だけでなく：

  • 私はここで何か間違ったことをしているように感じmainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));ます: - もしそうなら、それは何ですか?!? 安全で (したがって Safe* オブジェクトを使用する)、効率的で、推奨されるプラクティスに準拠し<h1>たシンプルな方法で追加するにはどうすればよいですか?<hr/>
  • ここで実装する必要がありUiBinderますか？もしそうなら、私UiBinderは各メニューのコンテンツまたは全体mainPanel、あるいはその両方に対して を作成しますか?

前もって感謝します！

4

3 に答える 3

2

Hyperlinkウィジェットはナビゲーションをトリガーします。それらのクリックを処理したくない、ナビゲーションを処理したい (これは、 をクリックするHyperlinkか、ブラウザーの戻る/進むボタン、ブックマーク、または他の場所からのリンクを使用することによってトリガーされる可能性があります。Ctrl キーを押しながら a をクリックしHyperlinkて、新しいウィンドウ/タブ– など)

これらのナビゲーション イベントに反応するには、History.addValueChangeHandler;を使用します。アプリケーションの起動時に最初のナビゲーションを処理するには、 History.fireCurrentHistoryState()(もちろんハンドラーを追加した後に) を呼び出します。

詳細: https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsHistory

他の質問を...他の質問に分割する方が良いでしょうが、とにかく答えは次のとおりです。

私はここで何か間違ったことをしているように感じます: mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));- もしそうなら、それは何ですか?!? 安全で (したがって Safe* オブジェクトを使用する)、効率的で、推奨されるプラクティスに準拠し<h1>たシンプルな方法で追加するにはどうすればよいですか?<hr/>

HTMLウィジェットには を受け取るコンストラクターがあるためSafeHtml、 を呼び出す必要はありませんtoString()。
定数のみを使用している場合は、SafeHtmlBuilder;は必要ありません。代わりに使用SafeHtmlUtilsします。しかし、定数は、 があってもなくても多かれ少なかれ安全ではありません。コード内の HTML のすべての出現箇所を見つけやすくし、アプリのセキュリティ レビューを行うのに役立ちます (ちなみに、私たちは HTML を行っているので、 ではなく; もしXML/XHTML のように見せたい場合は、それを使用しますが、ここではごまかしているだけです) 。SafeHtmlSafeHtml<hr><hr/><hr />

ここで実装する必要がありUiBinderますか？もしそうなら、私UiBinderは各メニューのコンテンツまたは全体mainPanel、あるいはその両方に対して を作成しますか?

UiBinder の必要性を感じない場合は、使用する必要はありません。ただし、この場合は何も変更されません。ウィジェット イベントではなく、履歴イベントを処理します。

于 2012-11-07T13:57:11.177 に答える
1

何かのようなもの

dashboardLink.addClickHandler( 
   new ClickHandler() 
   {
       public void onClick( ClickEvent event ) 
       {
           mainPanel.setWidget( getDashboardMenuContent() );
       }
   } );

これHyperlink.addClickHandler(...)は非推奨であり、Anchor.addClickHandler(...)代わりに使用することをお勧めします。

その他の質問について：UIBinderを使用してUIを構築する方がはるかにエレガントで簡単なので、必ず調べてください。ただし、.ui.xmlセットアップの複雑さが増すのを避けるために、最初に「それ」を機能させるようにしてください:-)

乾杯、

于 2012-11-07T12:46:29.987 に答える
0

一つだけ簡単なアドバイスがあります。フレームワークが提供するものを使用します。

HTML ウィジェットは最後の逃避場所です。非常に多くのウィジェットがあるため、コードのほとんどどこにでも html を記述する必要はありません。

したがって、headerBuilder の代わりに、次のコードを使用できます。

Label header = new Label("MyWebApp");
header.setStyleName("headerStyle",true);

外部 Css ファイルでスタイル プロパティを設定し、ベース html ファイルまたは gwt.xml ファイル内に参照を追加できます。それで、それはあなたの質問に答えます mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));

ハイパーリンクに関して。ハイパーリンクを使用することを選択した場合、最も効果的な使用法は、Places and Activities (Web 上の多くの情報) としてよく知られている MVP パターンを使用することです。

代わりにもっと単純なものが必要な場合は、クラスMenuBarとMenuItemクラスでうまくいくはずです。

MenuBar を使用してアプリケーションを制御する方法の例については、こちらを参照してください。他にも多くの方法がありますが、提供されているツールを使用してみませんか?

また、UIBinder 対 Designer/Classes メソッドについては、stackoverflow で広く議論されているため、選択とプログラミングの習熟度/好みの問題が生じます。

于 2012-11-07T12:54:57.190 に答える