RichFaces外观和主题化 _外观

本文概述

外观
如何添加皮肤？
JSF文件
皮肤参数
ECSS文件

外观外观是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="http://www.srcmini.com/Rich Panel Header"/> < /f:facet> 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. There is given key point description for every topic like : < 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> Here is good description for the frameworks also. I generally use srcmini - A Solution of all Technology for refreshing my concepts. < /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文件后, 它将产生以下输出。
输出

文章图片
2)酒
在此示例中, 我们在应用程序中使用酒皮。
// web.xml

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

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

文章图片
3)默认
// web.xml

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

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

文章图片
我们可以注意到, 每种皮肤都为索引页面提供了新的外观。
皮肤参数下表包含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