Notes On ADF Faces
May 22, 2006
You XU, CN B
For internal use – confidential -Strictly Confidential Siemens PSE (Nanjing) Co., Ltd.
What`s what on ADF Framework
Oracle ADF is a comprehensive productivity layer for J2EE
developers. It simplifies building applications as a set of business
services with Web, Wireless, and Rich Client interfaces.
(See the next page for detailed figure)
2 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
ADF Framework and ADF Faces
This
is
ADF
Faces
3 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
What`s ADF Faces
ADF Faces is the Oracle Application Development Framework (ADF)
view technology based on JavaServer Faces (JSF). (JSR-127)
At a glance
Like Swing!!
4 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Why ADF Faces
Standards
Standard JavaServer Faces components.
Rich set of user interface components
Platform independence
High interactivity
PPR (Partial page Rendering) Ajax technologies.
Internationalization and accessibility support
ADF Faces user interface components have built-in support for
internationalization and accessibility
Multi-client support
PDAs, Telnet, IM, and mobile
5 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Overview (1, 2, 3)
One skin
In the following slides
Two tag libraries
ADF Faces HTML (afh)
http://xmlns.oracle.com/adf/faces/html
10 Components, direct HTML tag like table, frame, etc.
ADF Faces Core (af)
Namespace: http://xmlns.oracle.com/adf/faces
Three configration file
adf-faces-config (accessbility and skin familiy)
adf-faces-skins (encapsulate css to skin)
faces-config (managed bean, navigation, all the application) VIP
6 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Installation and deployment
Add JSF and MyFaces. adfshare.jar
Register the ADF Faces filter in your WEB-INF/web.xml :
<filter>
<filter-name>adfFaces</filter-name>
<filter-class>oracle.adf.view.faces.webapp.AdfFacesFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>adfFaces</filter-name>
<servlet-name>faces</servlet-name>
</filter-mapping>
Adding the following to faces-config.xml:
<application>
<default-render-kit-id> oracle.adf.core </default-render-kit-id> </application>
7 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Installation and Deployment (Cond.)
Register the ResourceServlet
<servlet>
<servlet-name>resources</servlet-name>
<servlet-class>
oracle.adf.view.faces.webapp.ResourceServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
</servlet-mapping>
8 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
How to configure the application (skin)
Configuration
CSS and Skin
<skin>
<id>siemens.desktop</id>
<family>siemens</family>
<render-kit-id>oracle.adf.desktop</render-kit-id>
<style-sheet-name>skins/siemens/siemensSkin.css</style-sheet-name>
</skin>
Write a SIEMENS Skin
Related to styleClass and inlineStyle
Start with .Siemens (thank Guo Jian‘s help)
9 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Backing Bean
Make a Bean to a managed Bean
<managed-bean>
<managed-bean-name>userBean</managed-bean-name>
<managed-bean-class>com.siemens.pse.tms.view.mgmt.UserBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Make managed Bean in use: EL expression
<af:inputText id="username" value="#{userBean.userName}“ />
Note: in JSTL: ${}; in JSF: “#{}“
10 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Navigation
<!-- Search for temperature results by Date -->
<navigation-rule>
<display-name>dateSearch</display-name>
<from-view-id>*</from-view-id>
<!-- User has no search values entered -->
<navigation-case>
<from-outcome>DateSearch</from-outcome>
<to-view-id>/pages/reports/dateSearchResults.jsp</to-view-id>
<redirect />
</navigation-case>
</navigation-rule>
11 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Tiles & Facets
Tile is migrated from Struts
<tiles:insert attribute="maincontent" flush="false" />
In fact, I use this to design the templete.jsp and despite of the
login.jsp, etc.
Facet is everywhere, but in ADF, it is a bit hard to use, because it
lacks of feasibility. (I think)
e.g. In the < af:panelBorder >
supports the following facets: top, bottom, left, right, start, end, innerTop, innerBottom, innerRight, innerStart,
innerLeft, innerEnd
12 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Core Components
Six degrees separation
1. Form
form menuBar
2. Input Output
inputText objectImage objectSpacer outputFormatted outputText
3. Button and Link
commandButton, commandLink,
4. Chooser (Color, Date selectManyShuttle selectOrderShuttle )
5. Formatter
6. Panel, message facet
panelPage message
Common attributes
id, binding, rendered, innerStyle, styleClass
JavaScript: onclick, ondblclick, ...
13 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
HTML Components
Just like the corresponding HTML tags
Also has common attributes
frame, tableLayout rowLayout and cellFormat
14 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
Thank you
for your Attention! 谢谢你！
15 / nn 5/30/07 PSE CN PSE. Intelligent Net Working
