Oracle ADF Faces(adfFaces)提供了丰富的UI组件,可以简化你的web应用开发.可以通过学习示例代码来理解adfFaces的使用,示例代码包.

 adfFaces定义了一个API和一套基本的标签来构建基于web的用户接口,它基于JSF框架,扩展了UI组件.本文将展示如何在现有的JSF应用中使用adfFaces所提供的UI组件.

 首先,要运行示例代码,最低环境要求为J2SE 1.4,Servlet 2.3,JSP 1.2,JSF 1.1,ADF Faces EA13,JSTL 1.0,支持JDBC的数据库或者Oracle Toplink.

 本文将基于另外一篇文章介绍的例子,在此例子基础上用adfFaces替换JSF接口来实现数据的访问.之前的例子可以参见链接.

 和JSF类似,adfFaces也提供了一个开放的API供你的JAVA类使用,两个JSP标签库(HTML & CORE)供页面使用.另外,adfFaces也包括一系列的资源(图片,js,css)以供UI组件内部使用.

 下载资源包,将adf-faces-api-ea13.jar, adf-faces-impl-ea13.jar和share-1_1_18.jar拷贝到你的web项目lib库中(一般是WEB-INF\lib\),解压adf-faces-install-ea13.zip(包括了图片,js和css)到你的web应用相应目录.

 服务端web.xml的配置:

<servlet>
    <servlet-name>FacesServlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
</servlet-mapping>

...

<filter>
    <filter-name>AdfFacesFilter</filter-name>
    <filter-class>
        oracle.adf.view.faces.webapp.AdfFacesFilter
    </filter-class>
</filter>
<!-- regist the FaceServlet to adfFaces -->
<filter-mapping>
    <filter-name>AdfFacesFilter</filter-name>
    <servlet-name>FacesServlet</servlet-name>
</filter-mapping>

 新建adf-faces-config.xml,在此描述符制定额外的参数

<?xml version="1.0"?>
<adf-faces-config 
        xmlns="http://xmlns.oracle.com/adf/view/faces/config">
    <debug-output>true</debug-output>
    <accessibility-mode>
        #{prefs.proxy.accessibilityMode}
    </accessibility-mode>
    <look-and-feel>
        #{prefs.proxy.lookAndFeel}
    </look-and-feel>
</adf-faces-config>

遵循如下步骤修改你现有的jsp页面

1. 导入adfFaces标签库

a) 核心库包含UI组件,按钮,输入框,列表,菜单,表格,树,面板等等

<%@ taglib prefix="af" uri="http://xmlns.oracle.com/adf/faces/EA13" %>

b) HTML库包含了HTML元素标签
<%@ taglib prefix="afh" uri="http://xmlns.oracle.com/adf/faces/EA13/html" %>


2.使用adfFaces的HTML标签<afh:html>,<afh:head>和<afh:body>


<%@ taglib prefix="af" 
    uri="http://xmlns.oracle.com/adf/faces/EA13" %>
<%@ taglib prefix="afh" 
    uri="http://xmlns.oracle.com/adf/faces/EA13/html" %>

<f:view>

    <f:loadBundle var="labels" basename="..."/>

    <afh:html>
        <afh:head title="#{labels...}"/>
        <afh:body>
            ...
        </afh:body>
    </afh:html>

</f:view>

3. 重命名原有的jsf标签和属性

adfFaces提供了一套与标准jsf类似的标签,并且扩展了不少额外的标签供使用,两者可以混合使用,但为了统一的代码风格建议使用同样的标签,如下面的JSF

<h:outputLabel for="email"
    value="#{labels.email}"/>
<h:message for="email" styleClass="message"/><br>
<h:inputText id="email" required="true"
        validator="#{subscriber.emailValidator}"
        value="#{subscriber.email}"
        size="40" maxlength="80">
    <f:validateLength minimum="1" maximum="80"/>
</h:inputText>

可以转换成

<af:inputText id="email" required="true"
        validator="#{subscriber.emailValidator}"
        label="#{labels.email}"
        value="#{subscriber.email}"
        columns="40" maximumLength="80">
    <f:validateLength minimum="1" maximum="80"/>
</af:inputText>

其中的<af:inputText>通过属性rows和secret的设置,能够用来显示单行,多行,密码输入

<af:inputText id="password" secret="true" required="true"
        label="#{labels.password}"
        value="#{subscriber.password}"
        columns="10" maximumLength="20">
    <f:validateLength minimum="6" maximum="20"/>
</af:inputText>


使用adfFaces的panel标签,此标签可以用来快速实现多种面板组合,在此不做详细介绍.