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

Question

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

• 当我使用CSSResource时,css样式将被编译成代码 - 对吧？因此,如果不重新编译应用程序就无法更改它.但我想做的是让风格从"外部"可编辑.
• 那么这个CSSResource是什么,因为你不能只是在不再编译应用程序的情况下更改颜色或图像？
• 什么是使用CSS的最佳方式,因为有几种方法(.css文件,CSSResource,ui.xml中的样式)可以做到这一点？

我现在的想法是,我只使用普通的CSS文件处理我所有的"可更改"内容并将此文件添加到头部,因为我看不到这个CSSResource的优点.希望有人可以帮助我.谢谢.

Answer 1

这一切都取决于您使用CSS的方式 - 如果您需要应用一些小的更改,首先在Firebug /类似工具中"实时"测试它们.在设计阶段(当您还没有最终确定应用程序样式的视图时),您可能希望使用普通的CSS文件,但只要一般样式澄清,您应该切换到ClientBundle/CssResource.

为什么？让我回答一下,写一些关于CssResource文档页面上列出的目标的想法:

• 主

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

• 次要

  • 基本的CSS模块化
    • 通过依赖注入API样式 - 您可以根据需要注入CssResources(例如,为了方便应用程序中的自定义主题)
    • 小部件只有在需要时才可以注入自己的CSS - 这是我最喜欢的点之一,虽然起初我没有看到它的意义 - 你将你的(通常)庞大的单片CSS文件分成小模块,每个Widget一个使用UiBinder(CssResource内部反过来使用)加上可能是一个全局CssResource用于应用程序范围的样式.这样可以更清晰,更容易维护CSS样式(至少,根据我的经验).这也意味着,如果你的代码没有使用那个特定的Widget(也许是因为你已经使用了ocde拆分并且尚未加载),你将不会下载这些样式.
  • BiDi(Janus风格？) - 双向文本支持,尚未使用它,但文档看起来很有前途:)
  • CSS图像条 - 自动图像精灵生成 - 我还能说什么？;)
  • "改善CSS"
    • 常量 - 我总是在CSS规范中错过了这个功能 - 当你改变主色时,你必须在整个文件中找到并替换它(可能会导致一些错误,你想在某些地方使用旧颜色)) - 通过引入常量(通过有效的CSS语法并且没有任何运行时惩罚),这使得它更直观,恕我直言
    • 简单的表达 - 你应该浏览文档,看看那里的可能性,非常酷的东西

• 第三

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

关于款式注塑

该类StyleInjector允许在运行时注入样式.另外,CssResource允许(至少根据文档,我还没有尝试过)进行运行时替换.例如,当您注入CssResource包含以下内容时:

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

在userBackground将得到评估和注射(而不是常量,它在运行时解决).