Java 在 GWT 应用程序中外部化 HTML 的最佳方法？

best way to externalize HTML in GWT apps?

提问by Limbic System

What's the best way to externalize large quantities of HTMLin a GWT app? We have a rather complicated GWT app of about 30 "pages"; each page has a sort of guide at the bottom that is several paragraphs of HTML markup. I'd like to externalize the HTML so that it can remain as "unescaped" as possible.

在 GWT 应用程序中外部化大量 HTML的最佳方法是什么？我们有一个相当复杂的 GWT 应用程序，大约有 30 个“页面”；每个页面的底部都有一种指南，它是几段 HTML 标记。我想将 HTML 外部化，以便它尽可能保持“未转义”。

I know and understand how to use property filesin GWT; that's certainly better than embedding the content in Java classes, but still kind of ugly for HTML (you need to backslashify everything, as well as escape quotes, etc.)

我知道并了解如何在 GWT 中使用属性文件；这当然比将内容嵌入到 Java 类中要好，但对于 HTML 来说仍然有点难看（您需要对所有内容进行反斜杠化，以及转义引号等）

Normally this is the kind of thing you would put in a JSP, but I don't see any equivalent to that in GWT. I'm considering just writing a widget that will simply fetch the content from html files on the server and then add the text to an HTML widget. But it seems there ought to be a simpler way.

通常这是你会放在 JSP 中的那种东西，但我没有看到任何等同于 GWT 的东西。我正在考虑编写一个小部件，它可以简单地从服务器上的 html 文件中获取内容，然后将文本添加到一个 HTML 小部件中。但似乎应该有更简单的方法。

采纳答案by Boris Pavlovi?

You can use some templating mechanism. Try FreeMarkeror Velocitytemplates. You'll be having your HTML in files that will be retrieved by templating libraries. These files can be named with proper extensions, e.g. .html, .css, .js obsearvable on their own.

您可以使用一些模板机制。试试FreeMarker或Velocity模板。您将在模板库检索的文件中使用 HTML。这些文件可以用适当的扩展名命名，例如 .html、.css、.js 可单独观察。

回答by Steve Reed

You could try implementing a Generatorto load external HTML from a file at compile time and build a class that emits it. There doesn't seem to be too much help online for creating generators but here's a post to the GWT group that might get you started: GWT group on groups.google.com.

您可以尝试实现 aGenerator在编译时从文件加载外部 HTML 并构建一个发出它的类。似乎没有太多关于创建生成器的在线帮助，但这里有一篇 GWT 组的帖子可能会让您入门：groups.google.com 上的 GWT 组。

回答by IgorM

I was doing similar research and, so far, I see that the best way to approach this problem is via the DeclarativeUI or UriBind. Unfortunately it still in incubator, so we need to work around the problem.

我正在做类似的研究，到目前为止，我发现解决这个问题的最好方法是通过DeclarativeUI 或 UriBind。不幸的是它仍然在孵化器中，所以我们需要解决这个问题。

I solve it in couple of different ways:

我用几种不同的方式解决它：

1. Active overlay, i.e.: you create your standard HTML/CSS and inject the GET code via <script>tag. Everywhere you need to access an element from GWT code you write something like this:

   RootPanel.get("element-name").setVisible(false);
   

2. You write your code 100% GWT and then, if a big HTML chunk is needed, you bring it to the client either via IFRAME or via AJAX and then inject it via HTML panel like this:

   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. 活动覆盖，即：您创建标准的 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);
   

回答by Miguel Ping

I'd say you load the external html through a Frame.

我会说你通过Frame加载外部 html 。

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

You can arrange some convention or lookup for the getCurrentPageHelp() to return the appropriate path (eg: /manuals/myPage/help.html)

您可以为getCurrentPageHelp()安排一些约定或查找以返回适当的路径（例如：/manuals/myPage/help.html）

Here's an exampleof frame in action.

这是一个框架在行动的例子。

回答by David Robbins

Not knowing GWT, but can't you define and anchor div tag in your app html then perform a get against the HTML files that you need, and append to the div? How different would this be from a micro-template?

不知道 GWT，但你不能在你的应用 html 中定义和锚定 div 标签，然后对你需要的 HTML 文件执行 get 并附加到 div 吗？这与微模板有何不同？

UPDATE:

更新：

I just found this nice jQuery plugin in an answer to another StackOverflowquestion.

我刚刚在另一个StackOverflow问题的答案中发现了这个不错的 jQuery 插件。

回答by harmanjd

You can use servlets with jsps for the html parts of the page and still include the javascript needed to run the gwt app on the page.

您可以将 servlet 与 jsps 用于页面的 html 部分，并且仍然包含在页面上运行 gwt 应用程序所需的 javascript。

回答by Alexander Kosenkov

Why not to use good-old IFRAME? Just create an iFrame where you wish to put a hint and change its location when GWT 'page' changes.

为什么不使用老式 IFRAME？只需创建一个 iFrame，您希望在其中放置提示并在 GWT“页面”更改时更改其位置。

Advantages:

好处：

• Hits are stored in separate maintainable HTML files of any structure
• AJAX-style loading with no coding at allon server side
• If needed, application could still interact with loaded info

• 命中存储在任何结构的单独可维护 HTML 文件中
• AJAX 风格的加载，在服务器端完全没有编码
• 如果需要，应用程序仍然可以与加载的信息交互

Disadvantages:

缺点：

• Each hint file should have link to shared CSS for common look-and-feel
• Hard to internationalize

• 每个提示文件都应具有指向共享 CSS 的链接，以实现通用外观
• 难以国际化

To make this approach a bit better, you might handle loading errors and redirect to default language/topic on 404 errors. So, search priority will be like that:

为了使这种方法更好一点，您可以处理加载错误并在 404 错误时重定向到默认语言/主题。因此，搜索优先级将是这样的：

1. Current topic for current language
2. Current topic for default language
3. Default topic for current language
4. Default error page

1. 当前语言的当前主题
2. 默认语言的当前主题
3. 当前语言的默认主题
4. 默认错误页面

I think it's quite easy to create such GWT component to incorporate iFrame interactions

我认为创建这样的 GWT 组件来合并 iFrame 交互非常容易

回答by Tomer

GWT 2.0, when released, should have a ClientBundle, which probably tackles this need.

GWT 2.0 发布后，应该有一个 ClientBundle，它可能会解决这个需求。

回答by David Tinker

The GWT Portlets framework (http://code.google.com/p/gwtportlets/) includes a WebAppContentPortlet. This serves up any content from your web app (static HTML, JSPs etc.). You can put it on a page with additional functionality in other Portlets and everything is fetched with a single async call when the page loads.

GWT Portlets 框架 ( http://code.google.com/p/gwtportlets/) 包括一个 WebAppContentPortlet。这会提供来自您的 Web 应用程序的任何内容（静态 HTML、JSP 等）。您可以将它放在具有其他 Portlet 中的附加功能的页面上，并且在页面加载时通过单个异步调用获取所有内容。

Have a look at the source for WebAppContentPortlet and WebAppContentDataProvider to see how it is done or try using the framework itself. Here are the relevant bits of source:

查看 WebAppContentPortlet 和 WebAppContentDataProvider 的源代码以了解它是如何完成的或尝试使用框架本身。以下是相关的源代码：

WebAppContentPortlet (client side)

WebAppContentPortlet（客户端）

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

WebAppContentDataProvider (server side):

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)";
}

回答by Steve Armstrong

I'm not sure I understand your question, but I'm going to assume you've factored out this common summary into it's own widget. If so, the problem is that you don't like the ugly way of embedding HTML into the Java code.

我不确定我是否理解您的问题，但我假设您已经将这个通用摘要分解为它自己的小部件。如果是这样，问题在于您不喜欢将 HTML 嵌入 Java 代码的丑陋方式。

GWT 2.0 has UiBinder, which allows you to define the GUI in raw HTMLish template, and you can inject values into the template from the Java world. Read through the dev guideand it gives a pretty good outline.

GWT 2.0 具有UiBinder，它允许您在原始 HTMLish 模板中定义 GUI，并且您可以将值从 Java 世界注入模板。通读开发指南，它给出了一个很好的大纲。