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