RichFaces第一例

marshan

浏览: 497478 次
性别:
来自: 北京

最近访客更多访客>>

chenyanfei

Joe192

wx65251206

清风抚月

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

richfaces JSF Bean Servlet JavaEE

学习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>

效果：

分享到：

richface 皮肤 | 线程池的实现

2009-12-29 14:30
浏览 1665
评论(4)
论坛回复 / 浏览 (4 / 6486)
分类:编程语言
查看更多

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 写道

在加上seam么吧。。

1 楼 may_cauc 2009-12-29

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论