跟我一起学MiniOA:第一章 1.4 Richfaces控件(连载)

　　本小节内容请参见Richfaces Demo，它的介绍更直观、权威、详细。Richfaces演示地址http://livedemo.exadel.com/richfaces-demo/richface s/modalPanel.jsf。下载地址：http://code.google.com/p/minioa/downloads/list
　　Richfaces Demo安装
　　MiniOA的程序结构尽量保持与Richfaces Demo一致，所以我们直接在它的基础上修改。
　　将richfaces-demo-jsf2-3.3.3.Final-tomcat6复制一份到别处，然后重命名成MiniOA。
　　删除文件夹css、images、scripts下的内容，删除文件夹META-INF、richfaces。
　　新建文件夹jsp、modules、mail、upload，
　　删除文件夹templates下的内容，新建文件夹default，在default下新建文件main.xhtml。
　　文件夹WEB-INF下，保留components.xml、faces-config.xml、web.xml，保留classes下的components.properties和hibernate.cfg.xml，其它删除，清空src文件夹，保留文件夹lib及其所有jar包，这些包将来可能用得上。
　　修改文件web.xml中
　　＜context-param＞
　　＜param-name＞org.ajax4jsf.SKIN＜/param-name＞
　　＜param-value＞#{skinBean.skin}＜/param-value＞
　　＜/context-param＞
　　为
　　＜context-param＞
　　＜param-name＞org.ajax4jsf.SKIN＜/param-name＞
　　＜param-value＞blueSky＜/param-value＞
　　＜/context-param＞
　　除了blueSky，你还可以填laguna、glassX、darkX、classic、ruby、wine、deepMarine、emeraldTown、sakura、plain等皮肤或样式。
　　修改
　　＜context-param＞
　　＜param-name＞facelets.REFRESH_PERIOD＜/param-name＞
　　＜param-value＞2＜/param-value＞
　　＜/context-param＞
　　为
　　＜context-param＞
　　＜param-name＞facelets.FACELETS_REFRESH_PERIOD＜/param-name＞
　　＜param-value＞2＜/param-value＞
　　＜/context-param＞
　　修改faces-config.xml的内容为
　　＜?xml version="1.0"?＞
　　＜faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
　　xmlns:xi="http://www.w3.org/2001/XInclude"
　　xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan ce" xsi:schemaLocation="http://java.sun.com/xml/ns/jav aee http://java.sun.com/xml/ns/javaee/web-facesconfig_ 1_2.xsd"＞
　　＜application＞
　　＜navigation-handler＞org.richfaces.ui.application.StateNavigationHandle r＜/navigation-handler＞
　　＜el-resolver＞org.richfaces.el.StateELResolver＜/el-resolver＞
　　＜locale-config＞
　　＜default-locale＞en＜/default-locale＞
　　＜supported-locale＞en＜/supported-locale＞
　　＜/locale-config＞
　　＜/application＞
　　＜/faces-config＞
　　其他的内容都可以删除。
　　修改welcome.xml文件
　　＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd"＞
　　＜html xmlns="http://www.w3.org/1999/xhtml"
　　xmlns:ui="http://java.sun.com/jsf/facelets"
　　xmlns:h="http://java.sun.com/jsf/html"
　　xmlns:f="http://java.sun.com/jsf/core"
　　xmlns:rich="http://richfaces.org/rich"＞
　　＜ui:composition template="/templates/default/main.xhtml"＞
　　＜ui:define name="title"＞MiniOA＜/ui:define＞
　　＜ui:define name="body"＞
　　＜p＞我们从现在开始讲解MiniOA，这是一个选项卡的例子＜/p＞
　　＜rich:tabPanel headerAlignment="left" switchType="client"＞
　　＜rich:tab label="选项卡1"＞
　　Here is tab #1
　　＜/rich:tab＞
　　＜rich:tab label="选项卡2"＞
　　Here is tab #2
　　＜/rich:tab＞
　　＜rich:tab label="选项卡3"＞
　　Here is tab #3
　　＜/rich:tab＞
　　＜/rich:tabPanel＞
　　＜/ui:define＞
　　＜/ui:composition＞
　　＜/html＞
　　修改templates\default\main.xhtml为
　　＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd"＞
　　＜html xmlns="http://www.w3.org/1999/xhtml"
　　xmlns:ui="http://java.sun.com/jsf/facelets"
　　xmlns:h="http://java.sun.com/jsf/html"
　　xmlns:f="http://java.sun.com/jsf/core"
　　xmlns:a4j="http://richfaces.org/a4j"
　　xmlns:rich="http://richfaces.org/rich"＞
　　＜head＞
　　＜meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/＞
　　＜title＞
　　＜ui:insert name="title"/＞
　　＜/title＞
　　＜script＞
　　A4J.AJAX.onExpired = function(loc, expiredMsg){
　　if(window.confirm(expiredMsg)){
　　return loc;
　　} else {
　　return false;
　　}
　　}
　　＜/script＞
　　＜/head＞
　　＜body＞
　　＜ui:insert name="body"＞Body＜/ui:insert＞
　　＜/body＞
　　＜/html＞
　　在浏览器输入http://localhost:8080/MiniOA/
　　如果系统提示错误
　　Invalid byte 2 of 2-byte UTF-8 sequence.
　　原因是我在welcome.xhtml文件中输入了中文，我们需要welcome.xhtml的编码由ASCII修改成UTF-8，用记事本转换即可。
　　Xhtml中的标签是区分大小写的。
　　The prefix "rich" for element "rich:tabPanel" is not bound.提示你需要定义rich标签，xmlns:rich=http://richfaces.org/rich。
　　你可能按照本节课一步一步的操作，很容易实现目标，但这并不是我所期望的，有的时候遇到一些意想不到的错误更能加深印象。
　　至此，我们构建了Richfaces最小系统。