GWT 布局面板与 CSS 布局答案

【问题标题】：GWT layout panels vs. CSS layoutGWT 布局面板与 CSS 布局
【发布时间】：2011-02-07 23:21:00
【问题描述】：

我阅读了一篇题为“Tags First GWT”的文章，其中作者建议使用 GWT 进行事件处理，使用 CSS 进行布局。我只是不知道 GWT 的跨浏览器兼容性优势是否超过了纯 CSS 布局提供的灵活性。

GWT

GWT 2.0 有一些时髦的布局面板，但要让它们正确调整大小，您确实需要从根面板向下构建整个面板包含树。这似乎是一个全有或全无的事情。

CSS

您也可以使用 CSS 来布局应用程序，我倾向于这样做，如果只是为了证明我购买了几本宣传“语义标记”福音的书籍是合理的。缺点可能是跨浏览器不兼容，我尚未确定其普遍性。

走哪条路？

你的意见是什么？跨浏览器问题是否已经足够糟糕和普遍，以至于值得放弃我的 CSS 书籍并使用 GWT 布局面板进行构建？

【问题讨论】：

你说的css布局是指w3.org/TR/2009/WD-css3-layout-20090402吗？
不具体。我的意思是整个 CSS 技术，用于浮动、定位、调整大小、流动、覆盖和使用 HTML 事物进行抖动。

标签： css web-applications gwt

【解决方案1】：

跨浏览器问题已经够糟糕了，需要在某种框架中寻求缓解，尤其是如果您不是真正的前端设计师/开发人员。但我还不会放弃 CSS 书籍。当框架的抽象开始泄漏时，它可以帮助您了解幕后的情况，以及您可以做些什么。

Google 自己说：“您也不仅限于预制的小部件。您可以使用浏览器的 DOM 和 JavaScript 做的任何事情都可以在 GWT 中完成，包括与手写的 JavaScript 交互。”大概包括样式，如果你知道怎么做的话（如果你已经阅读并理解了所有这些 CSS 书籍，你就会知道）。

【讨论】：

没错，你可以在 GWT 中做任何事情。这都是一个简单的编程问题。但是我学会了这种整洁的负边距浮动 CSS 技术，你知道吗？啊，我不知道。

【解决方案2】：

我同意作者的建议——客户端逻辑使用 GWT，但仍然使用 HTML 和 CSS 进行展示。

新的 UI Binder 和声明式 UI 模式实际上鼓励您编写 HTML 和 CSS。它对设计师来说更容易，并使您的代码可维护。您可能想阅读GWT HTML layout conventions on SO - 它解释了如何混合 Widgets 和 plain-html/css 以获得两个世界的优势。

UI Binder 使用<ui:style> 使使用 CSS 变得很容易。使用<ui:style>，您可以生成特定于该文件的 CSS。 GWT 将自动混淆和优化您的 CSS。另外，如果你拼错了 css 类名，它会给你一个编译时错误（这很好），而不是你在部署页面时发现它。

在<ui:style> 中，您可以放置任何有效的CSS。 UIBinder 还可以包含全局样式表。此外，CSS 中的背景图像可以自动组合成 sprites/data:uris 以提高性能。

要了解更多信息，我建议阅读UI Binder Guide，然后关注联系人示例应用程序。这是一个很好的开始方式。

另外，我建议使用MVP pattern 来设计您的 GWT 应用程序。有几篇关于它的好文章，GWT Contacts Sample 应用程序是学习它的好方法。

【讨论】：

在 UI Binder 中使用
更新了我的帖子。