个性化阅读
专注于IT技术分析

RichFaces外观和主题化

本文概述


外观

外观是RichFaces的一项功能, 用于为应用程序提供外观。

皮肤与RichFaces框架一起使用, 可以通过设置控件和组件的颜色以及装饰来更改应用程序的外观。

通常, 网页的外观是通过CSS(级联样式表)文件处理的。外观允许我们使用使其成为CSS的高级扩展的工具。它是一组字体和颜色参数的小集合, 可以应用于多种不同的样式。它可以防止CSS文件中的重复任务和重复性。

每个皮肤都有一组皮肤参数, 用于定义主题面板和用户界面的其他元素。这些参数与常规CSS声明一起使用, 并且可以使用JavaServer Faces表达式语言(EL)从CSS内引用这些参数。

可用的皮肤

RichFaces提供了许多可在应用程序中使用的预定义皮肤。我们可以通过在web.xml文件的context参数中指定皮肤名称来使用它。以下是预定义的皮肤:

  • default
  • plain, 不包含任何外观参数, 旨在将RichFaces组件以自己的样式嵌入到现有项目中。
  • 翡翠镇
  • 蓝天
  • 葡萄酒
  • japanCherry
  • Ruby
  • 经典
  • 深海

如何添加皮肤?

我们可以通过在JSF应用程序的web.xml文件中添加以下行来使用外观。

<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>skin_name</param-value>
</context-param>

要了解, 如何在JSF应用程序中实现外观?在这里, 我们创建了一个JSF页面, 并将皮肤应用于该页面。

JSF文件

// index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>RichFaces Skining and Themes</title>
</h:head>
<h:body>
<h:form>
<rich:panel>
<f:facet name="header">
<h:outputText value="Rich Panel Header"/>
</f:facet>
<p>
Yes, I would recommend srcmini , If you are a beginner. 
It provides very clear and point to point approach for each standard concept of Java.
</p>
<p>
There is given key point description for every topic like :
</p>
<ul>
<li>OO Concepts</li>
<li>Abstraction</li>
<li>Inheritance</li>
<li>Interfaces</li>
<li>Encapsulation</li>
<li>Polymorphism</li>
<li>Java Collections</li>
</ul>
<p>
Here is good description for the frameworks also. I generally use srcmini - 
A Solution of all Technology for refreshing my concepts.
</p>

</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

1.红宝石

在此示例中, 我们在应用程序中使用了红宝石皮肤。

// web.xml

<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>ruby</param-value>
</context-param>

运行index.xhtml文件后, 它将产生以下输出。

输出

RichFaces外观和主题化1

2)酒

在此示例中, 我们在应用程序中使用酒皮。

// web.xml

<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>wine</param-value>
</context-param>

运行index.xhtml文件后, 它将产生以下输出。

输出

RichFaces外观和主题化2

3)默认

// web.xml

<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>DEFAULT</param-value>
</context-param>

运行index.xhtml文件后, 它将产生以下输出。

输出

RichFaces外观和主题化3

我们可以注意到, 每种皮肤都为索引页面提供了新的外观。


皮肤参数

下表包含blueSky外观的参数设置。

参数名称 默认值
headerBackgroundColor #BED6F8
headerGradientColor #F2F7FF
headTextColor #000000
headerWeightFont bold
generalBackgroundColor #FFFFFF
generalTextColor #000000
generalSizeFont 11px
generalFamilyFont Arial, Verdana, 无衬线
controlTextColor #000000
controlBackgroundColor #FFFFFF
additionalBackgroundColor #ECF4FE
shadowBackgroundColor #000000
shadowOpacity 1
panelBorderColor #BED6F8
subBorderColor #FFFFFF
calendarWeekBackgroundColor #F5F5F5
calendarHolidaysBackgroundColor #FFEBDA
calendarHolidaysTextColor #FF7800
calendarCurrentBackgroundColor #FF7800
calendarCurrentTextColor #FFEBDA
calendarSpecBackgroundColor #E4F5E2
calendarSpecTextColor #000000
editorBackgroundColor #F1F1F1
editBackgroundColor #FEFFDA
errorColor #FF0000
gradientType plain
tabBackgroundColor #C6DEFF
tabDisabledTextColor #8DB7F3
tableHeaderBackgroundColor #D6E6FB

ECSS文件

ECSS文件用于为换肤过程添加额外的功能。 ECSS文件是CSS文件, 它使用表达式语言(EL)将样式与皮肤属性连接起来。

以下示例包含面板及其主体的样式。

.rf-p-b{
	font-size:'#{a4jSkin.generalSizeFont}';
	color:'#{a4jSkin.generalTextColor}';
	font-family:'#{a4jSkin.generalFamilyFont}';
	padding:10px;
}

赞(0) 打赏
未经允许不得转载:srcmini » RichFaces外观和主题化
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏