srcmini本文概述
外观
外观是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文件后, 它将产生以下输出。
输出
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 |
ECSS文件
ECSS文件用于为换肤过程添加额外的功能。 ECSS文件是CSS文件, 它使用表达式语言(EL)将样式与皮肤属性连接起来。
以下示例包含面板及其主体的样式。
.rf-p-b{ font-size:'#{a4jSkin.generalSizeFont}'; color:'#{a4jSkin.generalTextColor}'; font-family:'#{a4jSkin.generalFamilyFont}'; padding:10px; }
评论前必须登录！
注册