相关内容

返回首页

RichFaces 4 概述。第二部分 – 皮肤机制

发布者    |      

回到本系列

短暂的假期后，我计划花更多的时间在这个文章系列上。如果你还没有看过前面的帖子——这个系列是从Ajax 请求排队文章开始的。而当前的一篇（休息得很好后开始很容易 :) ）将与我们的皮肤机制相关，这个机制在4.x版本中进行了重构。主要的设计原因

  • 3.3.x版本的基于XML的私有xcss样式表格式
  • JSF 2提供了资源API，我们应该重用它而不是提供我们自己的

概述

从主要概念的角度来看，没有任何改变——仍然是那个熟悉的3级方案

  • 皮肤属性文件，其中包含有限数量的属性，这些属性在不同的组件的样式表中重复使用。
  • 组件的样式表，其中包含基于皮肤参数和额外特定属性的预定义类。这些预定义类旨在由最终开发人员使用，以便在视图中对使用它们的所有组件进行批量更改。
  • 所有组件部分都可在组件上使用的类属性。它们允许在视图中自定义具体的组件，使其与其他类似的组件看起来不同。

注意：如果你不熟悉这些基本原理，但只是从4.x版本开始评估RichFaces——只需查看3.3.3最终版本参考指南。其中对它们进行了很好的描述。

3.3.x版本的使用问题

主要问题在于我们用于开发的xcss样式表格式。看看RichFaces 3.3.3的简单面板样式表

<?xml version="1.0" encoding="UTF-8"?>
<f:template xmlns:f='http:/jsf.exadel.com/template'
   xmlns:u='http:/jsf.exadel.com/template/util' 
   xmlns="http://www.w3.org/1999/xhtml" >
 	<u:selector name=".rich-panel">
		<u:style name="background-color" skin="generalBackgroundColor" />
		<u:style name="border-color" 	 skin="panelBorderColor" />
	</u:selector>
	<u:selector name=".rich-panel-header">
		<u:style name="background-image" >
    	    <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>
		</u:style>
		…
	</u:selector>
… more selectors
	<f:verbatim>
		<![CDATA[
		.rich-panel{
			border-width: 1px;
			border-style: solid;
			padding : 1px;
		}
… more classes   
	</f:verbatim>
</f:template>

首先——它不是我们熟知的CSS。这是开发人员和设计师的主要问题，他们必须学习新格式才能成功地在组件开发过程中处理xcss文件。第二个问题是——IDE对该格式一无所知——因此文件不能方便地在那里进行编辑。

新的样式表定义方法

但我们不能仅仅为了CSS而改变我们的样式表。原因很简单。首先——我们需要它们基于我们的皮肤属性，并且允许EL表达式在其中。你可以这样说，JSF已经允许EL在CSS中.. 这是真的。但是它在那里是可配置的，可以关闭。但我们不能允许它，因为皮肤是RichFaces的核心功能，组件非常依赖于这个功能。因此，我们实施了新的ECSS（扩展CSS样式表）建议，现在样式表看起来像标准的CSS文件，但里面包含EL表达式。

让我们看看相同面板样式表，但来自4.0.0.M1

.rf-panel{
	background-color:'#{richSkin.generalBackgroundColor}';
	color:'#{richSkin.panelBorderColor}';
	border-width:1px;
	border-style:solid;
	padding:1px;
}
   
.rf-panel-header{
background-image:"url(#{resource['org.richfaces.renderkit.html.GradientA']})";
}
… other classes

现在看起来好多了，可以被那些正在实施皮肤的人轻松阅读。另外，在CSS编辑器中打开它应该可以正常显示，并允许使用扩展编辑选项，就像标准的CSS一样。

如何加载自定义ecss样式表

对于那些阅读了大量关于新JSF 2功能的博客条目的人来说，没有什么新东西。你仍然需要使用与页面中的 h:outputStyleSheet 相同的资源包含

<h:outputStylesheet name="panel.ecss"/>

或者使用 ResourceDependency 注解为你的类

@ResourceDependency(name = "panel.ecss")
假设资源放置在资源文件夹的根目录。

其他更改和我们的下一步计划

在RichFaces 3.3.2和3.3.3版本中，我们做了很好的工作，消除了不必要的预定义样式类，这使得HTML代码增长到50%，对于像表格和树这样的复杂组件。这当然是一个好结果。但在4.x中，我们又增加了一个小的改进。我们定义了 CSS类命名约定，目的是进一步减少它们，从而在结果中产生更少的HTML代码。

对我们来说的下一步重大步骤 是推迟java2d缓冲图像的使用，这导致RichFaces与Google应用引擎不兼容。这可以在我们的 Jira 中跟踪，并且我们的论坛上总是欢迎提问！

我在此路上的下一步是什么

本系列将继续 以描述已经移植到4.x代码库的主要组件。我预计每周将有一篇文章，并将尽我所能帮助您开始使用RichFaces 4进行开发！

此外 - 我被邀请审查Packt Publishing的 JSF 2.0 Cookbook，我非常乐意接受。所以我会很快发布我的评论。

返回顶部