学习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}" οnchange="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>
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
