跟我一起學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最小系統。