You are on page 1of 130

Primjer

Employees i count(*)

ADF View and Controller

Review: ADF View


A layer of ADF
Web client is one option

Consists of two main areas:


Application Client (Java code running in a runtime session on the client machine) Web Client (Java code running in a runtime session on a remote server with the user interface rendered in a lightweight client such as a web browser).

The code that constructs the user interface


View layer receives data from and updates data to the Model layer, through the Controller layer

ADF View
User interface: The most popular J2EE interface for web applications in recent years has been JavaServer Pages (JSP) files, which are coded in a mixture of HTML and Java tags. Oracle offers an alternative, called ADF UIX (UIX) that defines the page using XML instead of HTML. UIX provides some benefits to JSP pages but it has many similarities. In addition, JavaServer Faces (JSF) provides a nonOracle, Java standard view layer that offers an embedded controller and a rich component set.

JSP
JSP technology is a variation on servlet technology that mixes HTML and Java in the same source file.

The first time a JSP page is accessed, the server process translates it into a Java servlet file (as mentioned before) and compiles that file into bytecode in a .class file.

UIX
UIX code files use a .uix extension and are built with XML syn The use of XML means that the code is interpreted at run time (in contrast with JSP code, which is translated and compiled before it is run).

UIX

The browser issues a URL request to the web server. The web server passes the request to the Web Tier container (JVM), which runs a special servlet, the UIX Servlet that interprets the UIX code file. (Unlike JSP code, no custom servlet is created or compiled from the source code file.

JSF
JavaServer Faces (JSF) is a relatively new Java technology standard which was recently ratified by the Java Community Process (in May 2004) Consisting of tag libraries that you can use inside JSP JSF features the following:
A controller for page flow Rich components (like UIX controls) that build large areas of a page in a certain way (like a scrollable table of records) An event-driven lifecycle for the runtime instance of a page The ability to deploy to different front end devices, such as HTML browsers, WML (wireless) devices, and character-mode telnet sessions. Although this technology is new, it has gained popularity because of its ease-of-use and because of the event model.

JSF

The browser issues a URL as with JSP and UIX. The Web Tier translates and compiles the JSP code and calls a special servlet, the JSF Servlet, to handle the JSF content rendering. This is then assembled and sent as HTML to the browser.

JSF Snippet

JSF Overview
JavaServer Faces
Java EE standard

Simplifies web development


No embedded Java inside tag language High-level tags

XML-like
Start and end tag required Elements, commonly called components Attributes

ADF Faces
Oracle JSF component libraries
Released to MyFaces open source project in Jan. 2006

Trinidad project at myfaces.apache.org


Available in JDeveloper 10.1.3 as ADF Faces In JDeveloper 11g as ADF Faces Rich Client

Implements components available in UIX


Uses JSF mechanisms Adds even more functionality to JSF

Some ADF Faces Components

AJAX
Asynchronous JavaScript and XML
In ADF Faces: Partial Page Rendering (PPR)

Update the page without refreshing the entire page


Smoother user experience

Common Examples
Sorting a results table Scrolling through a results table Expanding a tree control

Using AJAX in ADF Faces RC


Much AJAX in ADF Faces is transparent
Expanding a tree node / scrolling a table Nothing special needs to be done

Explicit AJAX attributes:


partialSubmit Used by command items autoSubmit used by input items / lists etc. partialTriggers all components

Example
Update line total when quantity or price change

AJAX Interactions A Calculated Field

Hello Worldwide Web: Your First JSF in JDeveloper

The Result

JSF Code Snippet

JSF Communication Process

The Steps
1. 2. 3. 4. 5. 6. 7. The browser issues an HTTP request to the web server. The web server determines the application and passes the request to the web container (WLS or OC4J) The web server reads web.xml to determine that this is a JSF JSP. The JSP is translated to a servlet and compiled (the first time it is run) The web server passes the request to the Faces Servlet. The Faces Servlet instantiates a life cycle class, which processes the JSP JSF. The servlet accesses any necessary Model layer code to obtain values from the data source (such as a database). The Faces Servlet then assembles the page and sends it using an HTTP response to the browser

JSF Files

JSF Life Cycle


1. Restore the component tree (hierarchy)
Next time in FacesContext Root tag f:view

2. Apply request values (data from request params) 3. Process validation


conversion validation

4. Update model values (corresponding comp in Model layer) 5. Invoke application (event code) 6. Render response (HTML render kit)

The Files
web.xml used to start FacesServlet, which instantiates and runs the life cycle class faces-config.xml the controller file used to manage page flow Backing bean code for the components on the page Message bundle supplies text for the JSP login.jsp JSF (JSP) source code that is compiled into login.class

web.xml
web.xml web module deployment descriptor
Contains an entry such as this:

Contains the URL pattern used to determine which servlet will take control Contains the servlet name and class file name

web.xml Snippet

faces-config.xml
Standard Java EE file
The application configuration resource file Located in the WEB-INF directory

1. Navigation rules
Define the from page for a page flow
Navigation cases

Define the to page for a page flow

2. Managed bean definitions 3. Render kits (HTML, WML) 4. Converters and validators

Code View of Navigation Rules

Navigation Case Outcome


In addition to the to page, a navigation case is assigned an outcome

Navigation occurs when action property of a button is set to the outcome name

Editing faces-config.xml
JSF Navigation Diagram
Look under WEB-INF Double click the faces-config.xml file in the navigator Use drag and drop to add elements

Backing Beans
These are registered in faces-config.xml:

Backing bean: a Java class file used for code pertaining to a specific page
For example, login.jsp would use a Login.java backing bean

Contain accessors for components on the page and other code for just that page Optional file: only create it if you need to change the logic

Backing Bean Contents


Variables for each component Setters and Getters for each component If JDeveloper created the backing bean it will maintain it
Uses the comment line shown earlier in the facesconfig.xml file Adding a component adds the variable and accessors for that component Deleting a component removes them Renaming a component renames them

Creating the Bean


Create a Java class from the New Gallery
Enter it in faces-config manually

OR from the Create JSF Page dialog


Specify the name in faces-config and the class file name

Alternative for Creating the Backing Bean


Double click an action component (button or link)
These dialogs will set up the Java class and register it in faces-config

Managed Beans or Backing Beans?


A bean (JavaBean) is a Java class file with a standard set of methods Managed bean is a Java class file used to handle operations and data for a resource such as a JSF page Backing bean is a managed bean that supports a specific page The terms managed bean and backing bean are sometimes used interchangeably

About Scope
Values in a bean or a FacesContext variable are cleared out of memory at certain times You can declare a scope for these objects:
request: for the HTTP request/response session: for the users session with the app server (until they log out or time out) application: across client sessions; held in the app server memory

ADF Controller offers additional scopes


pageFlow (accros pages >request <session) View (each new page) backingBean (page fragment)

Backing Bean Snippet

Imports and private variables for each component

Backing Bean Snippet (continued)

Getters and setters for each component Other contents: validation code

Message Bundles
Also called resource bundles Separate properties (text) or Java class file containing labels and messages Linked to the page through expressions on the components Also readable by code in the backing bean Allow for centralization of messages Automated localization and internationalization (language-specifics)

Message Bundles in JDeveloper


Define the message bundle name
Project properties Resource bundle page

Add the message using a dialog


Select Select Text Resource from the pulldown by an applicable component

Refer to the message using Expression Language, for example: #{viewcontrollerBundle.WELCOME_HOME} ResourceBundle.getBundle(login.resources.LoginJS F, messageContext.getViewRoot().getLocale())

Message Bundle Snippet

Summary
JSF evolved to make web development easier Some awareness of the runtime environment and life cycle will help in your first JSF You need to create the JSF JSP file You also need supporting files:
web.xml created automatically to assist in loading pages faces-config.xml the main JSF configuration file Backing beans programmatic code for the page Message bundles centralized text strings for the page

JDeveloper offers many tools to assist


Including frameworks to access the database

ADF Faces Rich Client

In the Beginning Was EBS


E-Business Suite (Oracle Applications) needed a lightweight client interface
Oracle created UIX for this

User Interface XML (Extensible Markup Language)


First supported in JDeveloper 9i

Became ADF UIX in JDeveloper 10g (10.1.2) UIX support dropped out of JDev 10.1.3
Set of components

Tag language (e.g., af:inputText) Used to build UIs (e.g., for web applications)
Concurrent with JSP in the industry Still used in EBS through R12

9i version of UIX, not the 10g version

And UIX Begat ADF Faces


Application Development Framework (ADF) came upon the land
Formalized first in JDeveloper 10g Introduced specific ADF frameworks

ADF Business Components (formerly BC4J) JSF had become a Java standard
Not in the EE editions, but an industry trend

Oracle converted UIX components to the JSF standards


And called it ADF Faces

And ADF Faces Begat ADF Faces RC


Oracle released ADF Faces (non-RC) to open source Apache Project
Called Trinidad (part of MyFaces) myfaces.apache.org/trinidad

Oracle created ADF Faces Rich Client


Introduced in JDeveloper 11g Concurrent with introduction of ADF Controller (task flows)

Oracle used it to build Fusion Applications

Rich == Highly-Interactive
Components built for interactivity
For example, table grid component
Resize columns with drag and drop Reorder columns with drag and drop No page refresh wait when scrolling through rows

Support for pop-ups and dialogs Client-side validation


Property driven For example, formats, ranges, and required Error messages appear next to the component with a problem value

Deep Dive Into af:table

Column grouping Row highlighting Column moving Export to Excel Detach option Column sorting & filtering

Rich == Flexible
Fully declarative AJAX support Built on top of JSF APIs
Deployable on any 1.2 implementation of JSF

Configurable skins
CSS development work A single property applies the skin to all components in the application

Large range of UI items


150+ components (and counting)

Internationalization and accessibility

Rich == Easy To Use


Property-driven components that save development effort Layout components to arrange other components Data Visualization Tools (DVT) components
Lots of functionality with little effort Chart, Gantt, Pivot Table, Map, Hierarchy Viewer, Gauge

Using AJAX in ADF Faces RC


Asynchronous JavaScript and XML Partial Page Rendering (PPR) in ADF Faces
Declarative AJAX

Much AJAX in ADF Faces is transparent


Built into the components Nothing special needs to be done

You can setup non-default AJAX behavior using properties


partialSubmit used by command items autoSubmit used by input items/lists, etc. partialTriggers all components, sets up the viewer (listener)

AJAX Interactions Total Pay

Some Rich Features


Atomic components are the main user interface items Features:
Converters; e.g., number format

Validators; some are built in, e.g., required


Messages appear next to items

AJAX Drag and drop

Layout Container Components


af:panelFormLayout
Stacked components Fields left aligned, prompts right aligned Can define number of columns and rows

af:panelHeaderLayout
Region title Stack components under it

af:panelGroupLayout
Layout components in a row or

More Layout Components


af:panelBorderLayout
Predefined layout areas Uses facets to hold the contents of each area Start, end, top, bottom (and more)

Af:panelStrechLayout
Center area stretches its contents to fill the area

Super-Rich Layout Components


af:panelSplitter
Split pane control Optional: user can move the drag bar
Horizontal or Vertical

af:calendar
MS Outlook style

af:carousel
Good for visual browsing

af:panelAccordian
Also found in MS Outlook

Some Rich Features


Allow for sophisticated layouts
Nest layout components within layout components Virtually limitless possibilities

Facets (sub-components) provide special functionality


For example, relative placement of components regardless of resolution or window size <f:facet> component

Use af:spacer to fine tune placement Hide or display the contents using the layout component properties

PanelFormLayout

Layout fields in rows and columns


Perfect for most input forms

Right justifies prompts Left justifies fields Tab order is down the first column, then across to the second column
Not necessarily intuitive; workaround:
Multiple PFLs in a single vertical PGL Set fieldWidth and labelWidth of the PFLs

Achieving the Perfect Layout


Know your container components
Facets are powerful things

More
af:popup
Drop in an af:dialog or af:window Drop af:showPopupBehavior into an action item (button or menu choice)

af:panelStretchLayout
Expands contained components to fill width Use if another container cuts a component

af:menuBar
Panel Menu Bar Creates menu area, drop in af:menu then af:menuItem

af:panelLabelAndMessage
Provides a prompt for a group of objects FirstName and LastName fields with a prompt of Name Use inside af:panelFormLayout

More Perfect Layout Tips


Design page fragments, not separate pages Use Quick Start Layouts when creating the page or template

Atomic Components

Most are on the Common Components page of the Component Palette

Some Atomic Components

af:selectManyShuttle
Single component for multiple-selection list
Checkmark selection or Double click or Select and click arrow buttons

Tip: Drop Into the Structure Window


Drop on top of container into which you want the component to appear Much more accurate Other options
Click the component after selecting the Structure window node

Other atomic components


Non visual Converters
Af:convertNumber under af:inputText

Validators
Af:validateDateTimeRange, af:validateDoubleRAnge

Miscellaneous Af:forEach, af:pageTemplateDef, af:showPopupBehavior, Drage and drop components

Drag and Drop

The value from Drag Source will be copied into Drag Target

DVT Components
Data Visualization Tools are on the ADF Data Visualizations page Each type has its own panel with components
Gantt Gauge Map Graph Hierarchy Viewer Pivot Table

Some DVT Components

Some Rich Features


Rich by nature Connect to data
Drop from the Data Control panel to the page
Select from a multitude of styles

More Rich Features


Specify data usage

Control visual aspects using properties

Other Rich Features


Drill down capability can be mostly declarative Some elements of the DVT components are mouse-aware
For example, mouse over in the bar graph Displays details about the dana point

Modifying the Visual Aspects


1. Skins
First and foremost get this right BLAF Browser look and feel Time consuming

2.

Properties for each component


ContentStyle
For data inside the component (foreground)

InlineStyle
Set from tab area below it Or just type it in

Another Visual Aspects Property


StyleClass
Equivalent to the HTML class property Apply existing style sheet selectors Can apply more than one to a component

Visual Component Guide

JDev Help Center (help system)


Search for enhanced tag doc; also one for DVT

Summary
UIX begat ADF Faces
ADF Faces RC has a long heritage

ADF Faces RC is pretty rich


High-interactivity, AJAX, skins, popups, dialogs, DVT, dragand-drop

Atomic components are mostly for interaction with users Layout Components provide sophisticated arrangement of components DVTs supply the functionality users often ask for There are many resources for help with learning and using ADF Faces And it is good.

Review: Controller Layer


A layer of ADF
Used only for web client code JSF controller is one option ADF Task Flow Controller is another

Determines which page or task loads next Transfers data from the View to the Model layer

ADF Controller
Supplement to standard JSF Controller functionality
Declares which page to display next

Can be based on a condition Treats part of a page in the same way as a full page in normal JSF work
Only part of a page is rendered, the rest stays put

Speeds up page processing Allows reuse of page parts Allows logic to be added to the flow
For example, conditional display of a page

Task Flow Code

Sample ADF Controller Development

Control flow

Task flow key conncepts

Exception handling

Bounded taskflow
templating

sinhronizacija

Dialog

You might also like