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

    本小节内容请参见Richfaces Demo，它的介绍更直观、权威、详细。Richfaces演示地址http://livedemo.exadel.com/richfaces-demo/richfaces/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-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"＞

 ＜application＞
  ＜navigation-handler＞org.richfaces.ui.application.StateNavigationHandler＜/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-transitional.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-transitional.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最小系统。