gwt 圆形面板（基于标准的小部件，类似于 DecoratorPanel）答案

【问题标题】：gwt rounded panel (standards based widget akin to DecoratorPanel)gwt 圆形面板（基于标准的小部件，类似于 DecoratorPanel）
【发布时间】：2010-04-06 21:55:35
【问题描述】：

我正在尝试编写一个使用圆角来构图应用程序的应用程序。我找到了一个 package on google code，它有一个 RoundedLinePanel，它似乎可以工作......有点。

我想知道一些事情。这是人们用来在 GWT 中创建带圆角的 div 的东西吗？ release notes 说它已经快一年没有改变了。

此外，我似乎无法设置此 div 的固定高度（setHeight 将其设置在包装 div 上，而不是内部 div）。所以它对我没有用，因为我有一个固定高度的应用程序。

最后，如果有人能提出一种更好的机制来在 GWT 中创建圆角 div，我会全力以赴。

【问题讨论】：

作为“包”的作者，我当然有偏见；-) 但包是用 div 创建圆角的方法。关于您设置高度的问题。您能否详细说明或提交错误报告：code.google.com/p/cobogw/issues/list。如果您有任何其他要求或问题，请随时报告或在此处提及。
嗯，我肯定有很多问题，我应该通过这里提问还是在上面的链接中创建问题？
如果您有 pr/cr 请求，请在链接中进行，因为这样更容易跟踪。
我在问题跟踪器中添加了两个问题（#32 和 #33）。希望有帮助

标签： gwt rounded-corners uibinder

【解决方案1】：

有一种使用 CSS 3 圆角的漂亮方法（因此在 IEhttp://css3please.com/ 以了解所涉及的样式。使用border-radius（或-moz-border-radius 或-webkit-border-radius 属性）相当简单。在 GWT 中，只需将您想要的样式类名称添加到您想要圆角边框的元素中，然后就可以了。当然，在旧版浏览器中支持圆角更难，但你需要这样做吗？

对于旧版浏览器，这要困难得多，具体取决于实际上下文。它总是涉及边界的图像。您必须创建掩盖框边框的图像。有效的是in this answer 描述的技巧。要在 GWT 中使用它，您可以使用 uibinder、htmlelement 或创建自己的小部件。也可以在 here 找到对该技术的更广泛的解释。

【讨论】：

事实上，我目前正在使用border-radius（moz/web 等效项），而（在我的办公室中）一个抱怨是它只适用于Firefox/Webkit。所以是的，我确实需要这样做。

【解决方案2】：

最常见的解决方案，decoratorPanel，在当前版本的 GWT 中已被弃用（例如，如果您将它与 GWT 2.1.1 一起使用，您最终会发现 GWT 所需的 doctype 之间存在大量不兼容问题、decoratorPanel 和 IE，尤其是 IE8)。

所需的 GWT 2.1.1 doctype (!doctype html) 还会禁用 IE8 的流行圆角.htc。

你可以使用CSS3系列的圆角属性来添加类，但是在IE 9之前的版本中是不行的。

JQuery 和其他 javascript 圆角很可能与原生 GWT js 发生冲突，因此我们放弃了这些作为可能的解决方案，尽管我个人没有对这些进行测试。

我们最终不得不使用圆角图像，以便真正兼容跨浏览器并创建一致的外观。

【讨论】：