GWT CSSResrouces - 有什么优势或最好的方法

Question

嘿，我正在开发一个 GWT 应用程序，现在面临 CSS 部分。我在官方网站上阅读了很多有关此主题的内容，但仍然有一些问题，希望有人能给我提示。

• 当我使用 CSSResource 时，CSS 样式将被编译到代码中 - 对吗？因此，如果不重新编译应用程序，就不可能更改它。但我想做的是让样式可以从“外部”编辑。
• 既然您不能在不再次编译应用程序的情况下更改颜色或图像，那么这个 CSSResource 是做什么用的呢？
• 使用 CSS 的最佳方法是什么，因为有几种方法（.css 文件、CSSResource、ui.xml 中的样式）可以做到这一点？

我现在的想法是，我只使用普通的 CSS 文件来处理所有“可更改”的内容并将此文件添加到头部，因为我看不到这个 CSSResource 东西的优点。希望有人能帮助我。谢谢。

Answer 1

这完全取决于您使用 CSS 的方式 - 如果您需要应用一些小的更改，请首先在 Firebug/类似工具中“实时”测试它们。在设计阶段（当您还没有最终确定如何设计应用程序样式时），您可能希望使用普通 CSS 文件，但一旦总体样式明确，您应该切换到 ClientBundle/ CSSResource。

为什么？让我通过写一些关于 的想法来回答CssResource 文档中列出的目标 a> 页面：

• 主要

  • 与非 GWT 感知的 CSS 解析器的兼容性（即任何扩展都应该是有效的 CSS 语法）
    这并不意味着如果您只是在浏览器中显示样式表就一定有意义 - 意思是，我们只想使用有效的CSS语法，而不是一些对其他解析器来说是乱码的语法糖 - 可能并不那么重要从您的角度来看（尽管因此您不需要更改现有样式的语法）
  • 语法验证 - 非常重要的一点，恕我直言。你会得到诸如检查丢失（可能拼写错误）的 CSS 类、语法错误等内容 - 必须通过某些浏览器特定的开发工具（Firebug）（通常是痛苦的）来追踪这些内容。在这里，您可以在编译期间尽早发现这些错误（或者在 Google Eclipse 插件的帮助下更快）。
  • 缩小 - 这不是您常规的缩小，您还可以获得选择器 和 属性合并。另请参阅下一点。
  • 利用 GWT 编译器 - 如果未使用 CSS 类（GWT 编译器可以做出这样的区分，因为它具有整个应用程序的概述），它被修剪并且不包含在编译的代码中。有多少次您发现一些设计更改后留下的 CSS 类？这就解决了这个问题（另请参阅 CSS 模块化点）
  • 针对不同浏览器的不同 CSS ，自动 - 由于以这种方式生成的 CSS 包含在您的 JS 代码中，因此它可以（并且已经）针对目标浏览器进行了优化 - 无需在每个排列中包含冗长的 IE hack！
  • 内容的静态评估< /strong> - 之前已经提到过

  
  

• Secondary

  • 基本 CSS 模块化
    • 通过依赖注入 API 风格 - 您可以根据需要注入 CssResources（例如，以方便在应用程序中自定义主题）
    • 小部件仅在需要时才可以注入自己的 CSS - 这是我最喜欢的一点之一，尽管一开始我没有看到它的重要性 - 你划分你的（通常）巨大的、整体的 CSS文件分成小模块，每个使用 UiBinder 的 Widget 都有一个模块（内部又使用 CssResource），另外可能还有一个用于应用程序范围样式的全局 CssResource。这会产生更干净、更容易维护的 CSS 样式（至少根据我的经验）。这也意味着，如果您的代码不使用该特定的 Widget（可能是因为您使用了 ocde 分割并且尚未加载），您将不会下载这些样式。
  • BiDi（Janus 样式） ?) - 双向文本支持，尚未使用，但文档看起来很有希望:)
  • CSS 图片条 - 自动图像精灵< /a> 一代——我还能说什么？ ;)

  
  

  • “改进 CSS”
    
    
    
    • 常量 - 我一直怀念CSS规范中的这个功能 - 当你改变你的原色时，你必须找到&在整个文件中替换它（可能会导致一些错误，您想要在某些地方使用旧颜色） - 恕我直言，通过引入常量（通过有效的 CSS 语法和，没有任何运行时损失）
    • 简单表达式 - 你应该浏览文档以了解其中的可能性，非常酷的东西

• Tertiary

  • 运行时操作 (StyleElement. setEnabled() 处理许多情况） - 在样式表注入时（在运行时），会评估一些值 - 这允许换肤等。
  • 编译时类名检查 (Java/CSS) - 已经提到了这样做的（明显的）好处
  • 混淆 - 这也非常酷，GWT 编译器可以安全地混淆 CssResources 中的所有样式，因为它具有整个应用程序的概述 - 因此，名称冲突是不可能的。这意味着您可以使用长（但不能太长;)）有意义的类名，而不必担心这将如何影响应用程序的大小 - 它都会被混淆为漂亮的短（甚至 1-2 个字符长），随机字符串。这还使您能够在两个 Widget 中定义 .warning 样式，并且编译器将理解这两种样式位于不同的命名空间（不同的 Widget）中，因此应该进行不同的处理（即，混淆为不同的样式）。名称）。

---

关于样式注入

类 StyleInjector 允许在运行时注入样式。此外，CssResource 允许（至少根据文档，我还没有尝试过）运行时替换。例如，当您注入包含以下内容的 CssResource 时：

@eval userBackground com.module.UserPreferences.getUserBackground();
div {
  background: userBackground;
}

userBackground 将被评估并注入（而不是 常量，在运行时解析）。