java - 在 GWT 中布局元素的最佳方式是什么？

Question

在 GWT 小部件中指定元素位置的最佳做法是什么？

假设您有一项任务:在页面布局中放置一组小部件。你会用什么来按某种顺序放置所有按钮和输入？

1. 带有表格/div 的标准 HTML 标记 + 用于定位的 CSS 样式
2. GWT 小部件:面板、网格、表格 + 用于定位的 CSS 样式
3. GWT 小部件:面板、网格、表格及其用于定位的 native 属性

如果是 2 或 3 - 您将使用什么来复制具有 colspans、固定宽度列和填充的标准 HTML 表格？

附言 UIBinder 和 XML 标记。 GWT 2.4

---

我的看法: GWT 的最大优点之一是能够防止程序员编写 HTML 标记并为界面添加跨浏览器支持。我们不应该放弃这些要点，所以最好选择 p.3 并尝试仅将 CSS 用于装饰 - 即颜色、字体等。

另一种观点: 将任何样式置于内联是个坏主意。通过在 XML 标记中指定小部件的属性，我们确实做到了这一点。 此外，GWT 没有足够的小部件来生成正常的布局。例如，您需要创建一个具有 collspans 和固定列宽的简单表格。你会怎么做？看起来您必须将几个 Horizo​​ntalPanels 嵌入到 VerticalPanels 中，在每个面板中指定宽度/高度，并由此生成一篇很棒的 XML 论文。

---

那你怎么看？

Answer 1

GWT 生成可怕的、可怕的、不好的、非常糟糕的 HTML。这只是我的意见，其他人会不同意。但我每天都使用 GWT，无限嵌套的 div 和表格足以让新手 Web 开发人员哭泣。而且它的所有样式都是内联的，所以如果你想用外部样式表应用或覆盖它们，你最终会得到 !important 的森林声明。

但是，它确实会生成非常可爱的 JavaScript。作为曾经不得不维护和开发极其复杂的 DHTML 元素并为 IE 5.5 及更高版本提供支持的人 -- 手动 -- 我不得不承认，这是 GWT 最好的部分。

诚然，我是一名 DHTML 纯粹主义者，在我成为软件开发人员之前很久就一直是一名网络开发人员。我个人认为 HTML 应该只负责结构，CSS 应该提供样式，而 JavaScript 应该提供其他功能，三者应该完全分开。 GWT 在最后一部分 —— JavaScript —— 相当出色，但它生成的 HTML 冒犯了我的敏感度，并且至少比它必须的复杂十倍。但话又说回来，大多数生成的代码都是。 (考虑在 MS Word 中创建的网站或从 WYSIWYG 风格的编辑器生成的 HTML。)

鉴于复杂的基于 Web 的应用程序——以及对滚动 Ruby on Rails 应用程序的限制——我很乐意使用 GWT。但我的应用程序几乎是 FlowPanel 的集合s(编译成 HTML <div> s)和 GWT 生成的 Javascript，上面有我自己的 CSS。因此，在 OP 提出的情况下，我会使用 FlowPanel，添加元素(例如 GWT 表单元素)，应用任何服务器端逻辑，然后使用外部 CSS 进行样式设置。

在查看 GWT 时，您可能需要考虑以后是否需要重新设计您的应用程序，或者是否希望让设计师或其他非程序员创建模板/样式/CSS 以在其上应用。如果出现这种情况，您在设计 GWT 应用程序时要非常小心，不要应用样式而是应用类和 ID。

同时作为测试旁注:如果您计划使用 Selenium 进行 UI 测试，您将真的想要将 id 卡在东西上。来自生成的 HTML 的 xpath 实际上是不可用的，并且长度可以延伸到数百个字符。

话虽这么说，但我很想听听其他人的经历，尤其是当他们与我的经历不同时。

tl;dr 版本:

1. GWT 生成的 HTML 对于嵌套表格和多层嵌套相当糟糕 <div> s(超过必要的)
2. GWT 不生成 CSS 样式表，而是将所有样式置于内联状态。这使得使用外部样式表变得乏味和困难。
3. GWT 在跨浏览器 Javascript 方面表现出色。
4. 默认情况下，GWT 不会将 id 附加到元素，因此如果您打算使用像 Selenium 这样的工具，则必须手动添加自己的 id，否则将面临前所未有的超长 xpath。