web-dev-qa-db-ja.com

GWTアプリでHTMLを外部化する最良の方法は?

GWTアプリで大量のHTMLを外部化するにするための最良の方法は何ですか?約30「ページ」のかなり複雑なGWTアプリがあります。各ページの下部には、HTMLマークアップのいくつかの段落である一種のガイドがあります。 HTMLを外部化して、可能な限り「エスケープされていない」状態を維持できるようにしたいと思います。

GWTでプロパティファイルを使用する方法を知っており、理解しています。これは、コンテンツをJavaクラスに埋め込むよりも確かに優れていますが、HTMLにとっては醜いです(すべてをバックスラッシュ化し、引用符をエスケープする必要があります)。

通常、これはJSPに入れるようなものですですが、GWTに相当するものは見当たりません。サーバー上のhtmlファイルからコンテンツをフェッチしてテキストをHTMLウィジェットに追加するウィジェットを作成することを検討しています。しかし、もっと簡単な方法があるはずです。

19
Limbic System

いくつかのテンプレートメカニズムを使用できます。 FreeMarker または Velocity テンプレートを試してください。ライブラリをテンプレート化することによって取得されるファイルにHTMLを含めることになります。これらのファイルには、適切な拡張子を付けて名前を付けることができます。 .html、.css、.jsはそれ自体で検出可能です。

7
Boris Pavlović

同様の設定でClientBundleを使用しました。パッケージmy.resourcesを作成し、HTMLドキュメントと次のクラスをそこに配置しました。

package my.resources;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.TextResource;

public interface MyHtmlResources extends ClientBundle {
 public static final MyHtmlResources INSTANCE = GWT.create(MyHtmlResources.class);

 @Source("intro.html")
 public TextResource getIntroHtml();

}

次に、GWTクライアントコードから以下を呼び出すことにより、そのファイルのコンテンツを取得します。

HTML htmlPanel = new HTML();
String html = MyHtmlResources.INSTANCE.getIntroHtml().getText();
htmlPanel.setHTML(html);

詳細については、 http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html を参照してください。

22
Futzilogik

GWT 2.0では、 iBinder を使用してこれを行うことができます。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <div>
    Hello, <span ui:field='nameSpan’/>, this is just good ‘ol HTML.
  </div>
</ui:UiBinder>

これらのファイルは、Javaコードとは別に保持され、HTMLとして編集できます。また、GWTウィジェットとの統合も提供されるため、GWTコードからHTML内の要素に簡単にアクセスできます。

5

Frame を介して外部htmlをロードすると思います。

Frame frame = new Frame();
frame.setUrl(GWT.getModuleBase() + getCurrentPageHelp());
add(frame);

getCurrentPageHelp()の規則またはルックアップを調整して、適切なパスを返すことができます(例:/ manuals/myPage/help.html

これが 動作中のフレームです。

5
Miguel Ping

GWT 2.0がリリースされると、ClientBundleが必要になります。これは、おそらくこのニーズに対応します。

3
Tomer

古き良きIFRAMEを使ってみませんか?ヒントを配置するiFrameを作成し、GWTの「ページ」が変更されたときにその場所を変更するだけです。

利点:

  • ヒットは、任意の構造の個別の保守可能なHTMLファイルに保存されます
  • サーバー側でコーディングなしを使用したAJAXスタイルのロード
  • 必要に応じて、アプリケーションはロードされた情報と引き続き対話できます

短所:

  • 各ヒントファイルには、共通のルックアンドフィールのために共有CSSへのリンクが必要です
  • 国際化するのは難しい

このアプローチを少し良くするために、読み込みエラーを処理し、404エラーのデフォルトの言語/トピックにリダイレクトすることができます。したがって、検索の優先度は次のようになります。

  1. 現在の言語の現在のトピック
  2. デフォルト言語の現在のトピック
  3. 現在の言語のデフォルトトピック
  4. デフォルトのエラーページ

IFrameの相互作用を組み込むためにそのようなGWTコンポーネントを作成するのは非常に簡単だと思います

1

GWT Portletsフレームワーク( http://code.google.com/p/gwtportlets/ )にはWebAppContentPortletが含まれています。これにより、Webアプリのコンテンツ(静的HTML、JSPなど)が提供されます。他のポートレットの追加機能を備えたページに配置でき、ページの読み込み時に1回の非同期呼び出しですべてがフェッチされます。

WebAppContentPortletおよびWebAppContentDataProviderのソースを調べて、それがどのように行われるかを確認するか、フレームワーク自体を使用してみてください。ソースの関連ビットは次のとおりです。

WebAppContentPortlet(クライアント側)

((HasHTML)getWidget()).setHTML(html == null ? "<i>Web App Content</i>" : html);

WebAppContentDataProvider(サーバー側):

HttpServletRequest servletRequest = req.getServletRequest();
String path = f.path.startsWith("/") ? f.path : "/" + f.path;
RequestDispatcher rd = servletRequest.getRequestDispatcher(path);
BufferedResponse res = new BufferedResponse(req.getServletResponse());
try {
   rd.include(servletRequest, res);
   res.getWriter().flush();
   f.html = new String(res.toByteArray(), res.getCharacterEncoding());
} catch (Exception e) {
   log.error("Error including '" + path + "': " + e, e);
   f.html = "Error including '" + path +
        "'<br>(see server log for details)";
}
1
David Tinker

Generatorを実装して、コンパイル時にファイルから外部HTMLをロードし、それを発行するクラスを構築してみてください。ジェネレーターを作成するためのオンラインでのヘルプはそれほど多くないようですが、ここにあなたが始めるかもしれないGWTグループへの投稿があります: groups.google.comのGWTグループ

1
Steve Reed

私も同様の調査を行っていましたが、これまでのところ、この問題に取り組む最善の方法は DeclarativeUIまたはUriBind を使用することです。残念ながら、まだインキュベーター内にあるため、問題を回避する必要があります。

私はいくつかの異なる方法でそれを解決します:

  1. アクティブオーバーレイ、つまり、標準のHTML/CSSを作成し、<script>タグを介してGETコードを挿入します。 GWTコードから要素にアクセスする必要がある場合は、次のように記述します。

    RootPanel.get("element-name").setVisible(false);
    
  2. コードを100%GWTで記述し、大きなHTMLチャンクが必要な場合は、IFRAMEまたはAJAX)を介してクライアントに提供し、次のようにHTMLパネルを介して挿入します。

    String html = "<div id='one' "
       + "style='border:3px dotted blue;'>"
       + "</div><div id='two' "
       + "style='border:3px dotted green;'"
       + "></div>";
    HTMLPanel panel = new HTMLPanel(html);
    panel.setSize("200px", "120px");
    panel.addStyleName("demo-panel");
    panel.add(new Button("Do Nothing"), "one");
    panel.add(new TextBox(), "two");
    RootPanel.get("demo").add(panel);
    
1
IgorM

あなたの質問を理解できるかどうかはわかりませんが、この一般的な要約を独自のウィジェットに分解したと仮定します。もしそうなら、問題は、HTMLをJavaコードに埋め込む醜い方法が気に入らないということです。

GWT 2.0にはUiBinderがあり、生のHTML風テンプレートでGUIを定義でき、Java world。 開発ガイド を読んでください。かなり良い概要がわかります。

0
Steve Armstrong
0
amanas

コンパイル時ではなく、実行時に生成およびバインドされたhtmlテンプレートを使用して GWT App を試すことができます。

0
trex

ページのhtml部分にjspsでサーブレットを使用しても、ページでgwtアプリを実行するために必要なJavaScriptを含めることができます。

0
harmanjd