`

RichFaces第一例

    博客分类：
  • web
richfacesJSFBeanServletJavaEE 
阅读更多

学习JSF和RichFaces一周了，总结以一个小例子为介，分别试验动态皮肤，calendar控件和effect效果。

 

首先建立web工程，引入必须包jsf1.2,jtsl1.1,richfaces3.3。

因为richfaces3.x不支持jsf2.0因此，本例使用jsf1.2。蓝线是三个包组的分割。其中richfaces的前3个包为可选包，是扩展皮肤的实现包。

 

编辑richfaces配置文件，将本例使用的两个MBean配置进去。

faces-config.xml:

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="1.2" 
              xmlns="http://java.sun.com/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

    <managed-bean>
        <managed-bean-name>skinBean</managed-bean-name>
        <managed-bean-class>mars.jsf.test.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>dateBean</managed-bean-name>
        <managed-bean-class>mars.jsf.test.DateBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>

</faces-config>

 

编辑web工程配置，加入richfaces的注册。

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <!--richfaces动态皮肤-->
    <context-param>
        <param-name>org.richfaces.SKIN</param-name>
        <param-value>#{skinBean.skin}</param-value>
    </context-param>        
    
    <context-param>        
        <param-name>org.richfaces.CONTROL_SKINNING</param-name>        
        <param-value>enable</param-value>        
    </context-param>    
    
    <!--richfaces Ajax-->
    <filter>         
        <display-name>RichFaces Filter</display-name>         
        <filter-name>richfaces</filter-name>         
        <filter-class>org.ajax4jsf.Filter</filter-class>         
    </filter> 
        
    <filter-mapping>         
        <filter-name>richfaces</filter-name>         
        <servlet-name>Faces Servlet</servlet-name>        
        <dispatcher>REQUEST</dispatcher>        
        <dispatcher>FORWARD</dispatcher>        
        <dispatcher>INCLUDE</dispatcher>        
    </filter-mapping>
    
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    
    <session-config>
        <session-timeout>30</session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/welcomeJSF.jsp</welcome-file>
    </welcome-file-list>
</web-app>

 

MBean代码：

package mars.jsf.test;

/**
 *
 * @author luh
 */
public class SkinBean {

    private String skin;

    public String getSkin() {
        return skin;
    }

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


package mars.jsf.test;
import java.util.Date;

/**
 *
 * @author luh
 */
public class DateBean {
private Date choosed=new Date();

    public Date getChoosed() {
        return choosed;
    }

    public void setChoosed(Date choosed) {
        this.choosed = choosed;
    }
}

 

jsf页面的实现:

<%-- 
    Document   : first
    Created on : Dec 29, 2009, 1:12:57 PM
    Author     : luh
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .box {
                background-color: #FFF;
                height:100px;
                width: 200px;
                text-align:center;
            }
            .cell {
                height:120px;
                width: 220px;
                vertical-align:top;

            }

        </style>
        <title>JSF First Testing</title>
    </head>
    <body>
        <f:view>
            <h:form>
                <rich:panel header="I can change skins" style="width: 350px">
                    <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="deepMarine" itemValue="deepMarine" />
                            <f:selectItem itemLabel="_laguna" itemValue="laguna" />
                            <f:selectItem itemLabel="_darkX" itemValue="darkX" />
                            <f:selectItem itemLabel="_glassX" itemValue="glassX" />
                        </h:selectOneListbox>

                        <a4j:outputPanel ajaxRendered="true" title="calendar">
                            <rich:calendar id="mydate" popup="true" value="#{dateBean.choosed}"
                                           preloadDateRangeBegin="#{dateBean.choosed}"
                                           preloadDateRangeEnd="#{dateBean.choosed}"
                                           currentDate="#{dateBean.choosed}"
                                           cellWidth="25px"
                                           cellHeight="25px"
                                           datePattern="MM/dd/yyyy"></rich:calendar>
                        </a4j:outputPanel>
                    </h:panelGrid>
                </rich:panel>
            </h:form>
            
            http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?c=effect
            <h:panelGrid columns="3" columnClasses="cell, cell, cell">
                <rich:panel id="fadebox" styleClass="box">
                    <f:facet name="header">Fade Effect</f:facet>
                    <rich:effect event="onclick" type="Fade" />
                    <rich:effect event="onclick"  for="fadebox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="bdbox" styleClass="box">
                    <f:facet name="header">BlindDown Effect</f:facet>
                    <rich:effect event="onclick" type="BlindDown" params="duration:0.8" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="bubox" styleClass="box">
                    <f:facet name="header">BlindUp Effect</f:facet>
                    <rich:effect event="onclick" type="BlindUp" params="duration:0.8" />
                    <rich:effect event="onclick"  for="bubox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="opacitybox" styleClass="box">
                    <f:facet name="header">Opacity Effect</f:facet>
                    <rich:effect event="onclick" type="Opacity" params="duration:0.8, from:1.0, to:0.1" />
                    <rich:effect event="onclick"  for="opacitybox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="switchbox" styleClass="box">
                    <f:facet name="header">SwitchOff Effect</f:facet>
                    <rich:effect event="onclick" type="SwitchOff" params="duration:0.8" />
                    <rich:effect event="onclick"  for="switchbox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="dobox" styleClass="box">
                    <f:facet name="header">DropOut Effect</f:facet>
                    <rich:effect event="onclick"  type="DropOut" params="duration:0.8" />
                    <rich:effect event="onclick"  for="dobox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="highlightbox" styleClass="box">
                    <f:facet name="header">Highlight Effect</f:facet>
                    <rich:effect event="onclick"  type="Highlight" params="duration:0.8" />
                    <rich:effect event="onclick"  for="highlightbox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="foldbox" styleClass="box">
                    <f:facet name="header">Fold Effect</f:facet>
                    <rich:effect event="onclick"  type="Fold" params="duration:0.8" />
                    <rich:effect event="onclick"  for="foldbox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>

                <rich:panel id="squishbox" styleClass="box">
                    <f:facet name="header">Squish Effect</f:facet>
                    <rich:effect event="onclick"  type="Squish" params="duration:0.8" />
                    <rich:effect event="onclick"  for="squishbox"  type="Appear" params="delay:3.0,duration:0.5" />
                    <h:outputText value="Click to Activate" />
                </rich:panel>
            </h:panelGrid>


        </f:view>
    </body>
</html>

 

效果：

 

 

分享到：
| 线程池的实现
评论
4 楼 marshan 2010-01-08  
may_cauc 写道
1、赶紧用facelets
2、rchfaces引入的js，cs太大，会严重影响界面的反应速度
3、jsf的数据读取方式（一般至少3次）加上第二点，整个页面的反应有你受的了。


JSF2.0的确解决了渲染树遍历问题。目前RichFaces3.x还不支持JSF2.0。作为学习，JSF1.2没有问题。等到RichFaces4出来，我再升级。

顺便说一句，技术学习过程中，最重要的是心态。单一最求新版本没有意义。
3 楼 vieri122 2010-01-07  
richfaces2.x的时候用过，不知道3.x效率如何了？？
2 楼 木易有峰 2009-12-29  
may_cauc 写道
1、赶紧用facelets
2、rchfaces引入的js，cs太大，会严重影响界面的反应速度
3、jsf的数据读取方式（一般至少3次）加上第二点，整个页面的反应有你受的了。

在加上seam么吧。。
1 楼 may_cauc 2009-12-29  
1、赶紧用facelets
2、rchfaces引入的js，cs太大，会严重影响界面的反应速度
3、jsf的数据读取方式（一般至少3次）加上第二点，整个页面的反应有你受的了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Richfaces ShowCase离线包

    **Richfaces ShowCase离线包** 是一个专为开发者设计的资源包，它包含了Richfaces框架的演示示例，能够帮助用户在没有网络连接的情况下也能深入理解和学习Richfaces的功能和用法。这个离线包特别适合那些需要在本地...

    richfaces-ui-3.2.1

    这些库包含了RichFaces的组件库、AJAX引擎、以及其他依赖的库，如JSF API和实现、以及可能的第三方库。开发者在项目中引用这些JARs，就可以在他们的应用中使用RichFaces的功能。 总的来说，RichFaces UI 3.2.1是...

    Richfaces标签

    Richfaces是一个基于JavaServer Faces（JSF）技术的开源框架，提供了一套丰富的用户界面组件库。这些组件不仅具备强大的功能，还能很好地支持AJAX交互，极大地提高了Web应用的用户体验。在本文中，我们将重点介绍几...

    richfaces中文开发文档

    1. **AJAX支持**：RichFaces的核心功能之一是其对Ajax技术的集成，允许开发者创建部分页面更新的应用，提升用户体验，减少不必要的页面刷新。 2. **组件丰富**：提供了一系列预构建的JSF组件，如数据表、日历、图表...

    RichFaces 3.3 帮助文档（英文）

    - **RichFaces框架概述：** RichFaces是一个基于JavaServer Faces（JSF）的开源组件库，提供了大量的富客户端组件以及对皮肤的支持。该文档详细介绍了如何在Web应用中集成并使用RichFaces框架。 - **技术需求：** ...

    RichFaces4.5 JavaApi JSApi

    RichFaces 4.5 是一个强大的JavaServer Faces (JSF) 框架的扩展库，专为构建富互联网应用程序（Rich Internet Applications, RIA）而设计。这个库提供了丰富的组件集，以及对JavaScript（JS）和Java API的支持，使得...

    Richfaces组件使用指南

    RichFaces是一个开源框架，专注于将Ajax功能无缝集成到JavaServer Faces（JSF）应用程序中，无需依赖JavaScript。这个框架充分利用了JSF的生命周期、验证、转换工具以及资源管理功能。它提供的Ajax支持是完全集成到...

    richfaces开发指南（英文版）

    - **下载RichFaces 3.2.0**：开始使用RichFaces的第一步是访问其官方网站下载最新版本的库，本示例使用的是3.2.0版本。 - **安装**：下载后，将库文件添加到你的项目类路径中，或者如果使用Maven或Gradle，可以通过...

    richfaces中文学习教程

    关于richfaces的一些比较好的资料，希望大家看了能有收获

    richfaces标签学习笔记

    RichFaces 是一个功能丰富的 JavaServer Faces (JSF) 框架扩展，它提供了一系列强大的组件和Ajax功能，使得开发人员能够构建高度交互式的Web应用。 首先，让我们来看 `rich:componentControl` 标签。这是一个用于...

    richfaces3.2用户手册的pdf版

    1. **下载RichFaces**：首先需要从官方网站或第三方资源下载RichFaces 相关库文件。 2. **简单JSF应用示例**： - **添加RichFaces 库到项目**：将下载的库文件添加到项目的类路径中。 - **注册RichFaces 到 web....

    richfaces4.0所需jar包

    1. **richfaces-components-ui-4.0.0.Final.jar**：这是RichFaces组件用户界面实现的库。它包含了一系列的JSF组件，如表格、树形视图、滑块、日期选择器等。这些组件提供了丰富的功能和样式，使得开发者能够轻松创建...

    jsf/RichFaces组件

    RichFaces组件简介,复合组件,日期控件,Ajax标签, 轻松实现。RichFaces组件简介,复合组件,日期控件,Ajax标签, 轻松实现。RichFaces组件简介,复合组件,日期控件,Ajax标签, 轻松实现。

    richfaces参考文档

    1. **AJAX 支持**：RichFaces 使用 A4J (Ajax for Java) 技术，允许开发者通过简单的声明式或编程方式实现页面局部更新，减少页面重载，提升响应速度。 2. **组件库**：包括各种富组件，如数据表（DataTable）、...

    richfaces（里面包含JAR包）

    1. **RichFaces概述**：RichFaces是一个强大的JSF组件库，它提供了许多预构建的UI组件，如数据网格、日历、图表、对话框等，增强了用户体验并简化了开发过程。它还支持AJAX技术，使得页面更新无需完全刷新，提升了...

    JBoss_RichFaces_3.3

    - **第一章：入门** ——介绍了RichFaces的基本概念、安装和配置方法，以及如何创建第一个RichFaces应用程序。 - **第二章至第五章：组件详解** ——详细讲解了每个主要组件的功能特性及其使用方法，包括表格、日历...

Magicbox
Global site tag (gtag.js) - Google Analytics