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标签,此标签可以用来快速实现多种面板组合,在此不做详细介绍.
