`
yinlongfei
  • 浏览: 155246 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态改变RichFaces的皮肤

阅读更多
动态改变RichFaces的皮肤
关键字: skin
给RichFaces设置一个皮肤很简单,只要在web.xml文件中写以下这一段就可以了:



Xml代码
<context-param> 
  <param-name>org.richfaces.SKIN</param-name> 
  <param-value>ruby</param-value> 
</context-param> 

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

但是,有时候你也许会要在程序运行的时候去动态改变RichFaces的皮肤。甚至你可能会想让每个用户保存自己喜欢的皮肤。那该怎么做呢?



首先,我们需要将硬编码到web.xml中的皮肤设置改变为一个EL表达式:

Xml代码
<context-param> 
  <param-name>org.richfaces.SKIN</param-name> 
  <param-value>#{skinBean.skin}</param-value> 
</context-param> 

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>#{skinBean.skin}</param-value>
</context-param>

skinBean是一个JSF managed Bean,类似这样:

Java代码
public class SkinBean {  
   
   private String skin;  
   
   public String getSkin() {  
    return skin;  
   }  
   public void setSkin(String skin) {  
    this.skin = skin;  
   }  


public class SkinBean {

   private String skin;

   public String getSkin() {
return skin;
   }
   public void setSkin(String skin) {
this.skin = skin;
   }
}

当然,你需要在JSF的配置文件里面注册一下这个Bean:

Xml代码
<managed-bean> 
  <managed-bean-name>skinBean</managed-bean-name> 
  <managed-bean-class>demo.SkinBean</managed-bean-class> 
  <managed-bean-scope>session</managed-bean-scope> 
  <managed-property> 
   <property-name>skin</property-name> 
   <value>ruby</value> 
  </managed-property> 
</managed-bean> 

<managed-bean>
  <managed-bean-name>skinBean</managed-bean-name>
  <managed-bean-class>demo.SkinBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
  <managed-property>
   <property-name>skin</property-name>
   <value>ruby</value>
  </managed-property>
</managed-bean>

我们会想要设置一个默认的皮肤,同时我们需要将这个Bean的声明周期为Session。之所以不放到request中,是因为如果放到request中,那么每次请求到达的时候,都会去刷新并将皮肤恢复成默认的,而我们希望看到的效果是,用户每次登录的整个过程,皮肤是一直不变的(除非用户主动去改变它)。



通过下面的页面,我们立刻就能看到效果了。

Xml代码
<h:form> 
   <rich:panel header="I can change skins" style="width: 300px"> 
    <h:panelGrid columns="2"> 
       <h:selectOneListbox id="select" value="#{skinBean.skin}" onchange="submit()"> 
        <f:selectItem itemLabel="plain" itemValue="plain" /> 
        <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /> 
        <f:selectItem itemLabel="blueSky" itemValue="blueSky" /> 
        <f:selectItem itemLabel="wine" itemValue="wine" /> 
        <f:selectItem itemLabel="japanCherry" itemValue="japanCherry" /> 
        <f:selectItem itemLabel="ruby" itemValue="ruby" /> 
        <f:selectItem itemLabel="classic" itemValue="classic" /> 
        <f:selectItem itemLabel="laguna" itemValue="laguna" /> 
        <f:selectItem itemLabel="deepMarine" itemValue="deepMarine" /> 
       </h:selectOneListbox> 
           <rich:tabPanel> 
        <rich:tab label="Tab 1">Tabs also change color</rich:tab> 
        <rich:tab label="Tab 2">...</rich:tab> 
       </rich:tabPanel> 
        </h:panelGrid> 
   </rich:panel> 
</h:form> 

<h:form>
   <rich:panel header="I can change skins" style="width: 300px">
<h:panelGrid columns="2">
   <h:selectOneListbox id="select" value="#{skinBean.skin}" onchange="submit()">
<f:selectItem itemLabel="plain" itemValue="plain" />
<f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" />
<f:selectItem itemLabel="blueSky" itemValue="blueSky" />
<f:selectItem itemLabel="wine" itemValue="wine" />
<f:selectItem itemLabel="japanCherry" itemValue="japanCherry" />
<f:selectItem itemLabel="ruby" itemValue="ruby" />
<f:selectItem itemLabel="classic" itemValue="classic" />
<f:selectItem itemLabel="laguna" itemValue="laguna" />
<f:selectItem itemLabel="deepMarine" itemValue="deepMarine" />
   </h:selectOneListbox>
           <rich:tabPanel>
<rich:tab label="Tab 1">Tabs also change color</rich:tab>
<rich:tab label="Tab 2">...</rich:tab>
   </rich:tabPanel>
        </h:panelGrid>
   </rich:panel>
</h:form>

这里放一个tab组件,其实是为了让你看到外观上的改变效果的,没有功能上的实际作用。你还可以放几个其他组件上去,看看效果的变化。



如果你想要学习如何编写自己的皮肤,请参考这篇文章XXX(稍后放出:)



其他你可以尝试一下的,就是改变一下标准组件的样式,我们的例子中为h:selectOneListbox:

Xml代码
<context-param> 
   <param-name>org.richfaces.CONTROL_SKINNING</param-name> 
   <param-value>enable</param-value> 
</context-param> 


声明:此博客从http://feidaodalian.iteye.com/blog/434971转载过来的
分享到:
评论

相关推荐

    RichFaces 3.3 帮助文档(英文)

    - **运行时更改皮肤:** 讲解了如何在应用程序运行期间动态切换皮肤。 - **标准控件皮肤化:** 展示了如何为RichFaces的标准控件应用皮肤。 - **客户端脚本扩展皮肤支持:** 介绍了如何使用客户端脚本来增强皮肤...

    richfaces3.2用户手册的pdf版

    RichFaces 3.2 是一款强大的框架,提供了丰富的组件库以及可定制化的皮肤支持,它旨在简化Web应用程序的开发过程,尤其在JavaServer Faces (JSF) 技术的基础上增加了对AJAX的支持,使得开发者能够构建出更为交互式的...

    richfaces4.0所需jar包

    在RichFaces中,这个库可能用于解析和应用组件的样式,或者进行动态样式修改,以实现更灵活的界面定制。 5. **richfaces-core-api-4.0.0.Final.jar**:这是RichFaces核心API的库,定义了与RichFaces框架交互的接口...

    richfaces参考文档

    - **皮肤定制**:修改 CSS 样式文件,调整组件外观。 ### 总结 "richfaces参考文档"是学习和掌握 RichFaces 的宝贵资料,它覆盖了从基础概念到高级特性的全方位内容。通过深入阅读并实践其中的示例,开发者能够...

    richfaces-3.0.0

    4. **皮肤和主题:** RichFaces 允许自定义皮肤和主题,以满足不同应用的视觉需求。 5. **生命周期管理:** JSF 有自己的一套生命周期,包括初始化、应用请求值、处理验证、应用业务逻辑和渲染响应。RichFaces 集成...

    richfaces demo code

    4. **皮肤与主题**:RichFaces支持皮肤和主题的概念,允许开发者通过简单的CSS更改来改变整个应用的外观,从而实现品牌一致性或满足不同用户需求。 5. **国际化与本地化**:RichFaces支持多语言环境,方便开发者为...

    richfaces-ui-3.2.2.GA(API文档英文版)

    5. **皮肤和主题** - RichFaces 支持自定义皮肤和主题,允许开发者根据需求改变组件的外观和样式。 6. **事件处理** - RichFaces 提供了丰富的事件模型,允许开发者监听和响应用户操作或系统事件。 7. **集成与扩展*...

    richfaces组件说明文档及使用实例

    RichFaces提供了多种皮肤和主题,允许开发者轻松改变应用的外观。例如,可以通过设置`skin`属性更改组件的视觉样式。 4. **事件处理**: RichFaces扩展了JSF的事件模型,提供了服务器端和客户端的自定义事件处理...

    richfacesDemo

    3. **皮肤和主题示例**:演示如何改变RichFaces组件的外观,以适应不同的设计风格。 4. **自定义组件示例**:如果需要扩展或定制RichFaces的默认组件,该项目可能会包含一个自定义组件的实现。 5. **事件处理和...

    RichFaces3.4

    1. **Web 应用程序描述符参数**:通过修改 web.xml 文件来调整 RichFaces 的行为,例如设置 Ajax 请求处理策略等。 2. **Sun JSF RI**:在使用 Sun 提供的 JSF 实现时,可能需要进行额外的配置以确保与 RichFaces ...

    richfaces_reference.pdf

    ### RichFaces框架知识点详解 ...- **皮肤支持**:介绍如何使用内置的皮肤文件来改变界面样式,并支持在运行时更改皮肤。 - **标准控件**:提供了一系列常用控件及其使用方法,帮助开发者快速构建交互式界面。

    richfaces的jar包+demo

    3. **皮肤和主题**:RichFaces支持自定义皮肤和主题,开发者可以根据项目需求轻松改变组件的外观和风格。 4. **事件处理**:RichFaces提供了丰富的事件模型,允许开发者监听和处理用户操作,如点击、选择、验证等。...

    Richfaces get started

    3. **皮肤的动态切换**:除了静态配置皮肤外,还可以通过 JavaScript 或者 Ajax 动态改变皮肤。 4. **皮肤样式文件**:每个皮肤都有一组相关的 CSS 文件,用于控制组件的外观。开发人员可以自定义这些文件来满足特定...

    RichFaces文档-中文

    - **集成JSF生命周期**:RichFaces完全融入JSF的生命周期,支持在Ajax请求中执行动作和值改变侦听器,以及服务器端的验证和转换。 - **Ajax增强现有JSF应用**:框架提供了Core Ajax和UI两个组件库。Core库可将Ajax...

    使用richfaces 实现tree

    7. **样式和皮肤**:RichFaces提供了多种预定义的皮肤,可以通过设置`skin`属性来改变树的外观。也可以自定义CSS样式来进一步定制。 8. **异步加载**:如果树的数据量很大,可以使用异步加载(懒加载)技术,只在...

    richfaces_reference的相关文档

    在Java Web开发领域,RichFaces以其丰富的组件库和强大的皮肤支持而闻名,为开发者提供了一种构建动态、响应迅速的Web应用程序的有效途径。本文旨在全面解析RichFaces框架的核心概念、技术要求及应用场景,帮助初学...

Global site tag (gtag.js) - Google Analytics