论坛首页 → Web前端技术论坛 →

RichFaces第一例

浏览 6479 次
锁定老帖子 主题：RichFaces第一例
精华帖 (0) :: 良好帖 (0) :: 新手帖 (9) :: 隐藏帖 (0)
作者 正文
  • marshan
  • 等级: 一星会员
  • 性别:
  • 文章: 38
  • 积分: 190
  • 来自: 北京
   发表时间：2009-12-29   最后修改：2009-12-29

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

 

效果：

 

 
返回顶楼
         
  • may_cauc
  • 等级: 初级会员
  • 文章: 89
  • 积分: 60
   发表时间：2009-12-29  
1、赶紧用facelets
2、rchfaces引入的js，cs太大，会严重影响界面的反应速度
3、jsf的数据读取方式（一般至少3次）加上第二点，整个页面的反应有你受的了。
返回顶楼
          回帖地址
0 请登录后投票
  • 木易有峰
  • 等级: 初级会员
  • 性别:
  • 文章: 19
  • 积分: 70
  • 来自: 合肥
   发表时间：2009-12-29  
may_cauc 写道
1、赶紧用facelets
2、rchfaces引入的js，cs太大，会严重影响界面的反应速度
3、jsf的数据读取方式（一般至少3次）加上第二点，整个页面的反应有你受的了。

在加上seam么吧。。
返回顶楼
          回帖地址
0 请登录后投票
  • vieri122
  • 等级: 初级会员
  • 性别:
  • 文章: 324
  • 积分: 0
  • 来自: 北京
   发表时间：2010-01-07  
richfaces2.x的时候用过，不知道3.x效率如何了？？
返回顶楼
          回帖地址
0 请登录后投票
  • marshan
  • 等级: 一星会员
  • 性别:
  • 文章: 38
  • 积分: 190
  • 来自: 北京
   发表时间：2010-01-08  
may_cauc 写道
1、赶紧用facelets
2、rchfaces引入的js，cs太大，会严重影响界面的反应速度
3、jsf的数据读取方式（一般至少3次）加上第二点，整个页面的反应有你受的了。


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

顺便说一句，技术学习过程中，最重要的是心态。单一最求新版本没有意义。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics