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;
}
评论前必须登录！
注册