ADF View and Controller

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 light-weight client such as a web browser).

• The code that constructs theuser interface– View layer receives data from

and updates data to the Model layer, through the Controllerlayer

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 non-Oracle, 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 theentire 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. The browser issues an HTTP request to the web server.

2. The web server determines the application and passes the request to the web container (WLS or OC4J)

3. The web server reads web.xml to determine that this is a JSF JSP.

4. The JSP is translated to a servlet and compiled (the first time it is run)

5. The web server passes the request to the Faces Servlet. The Faces Servlet instantiates a life cycle class, which processes the JSP JSF.

6. The servlet accesses any necessary Model layer code to obtain values from the data source (such as a database).

7. 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 Modellayer)

5. Invoke application (event code)

6. Render response (HTML render kit)

The Files

• web.xml – used to start FacesServlet, whichinstantiates and runs the life cycle class

• faces-config.xml – the controller file used tomanage page flow

• Backing bean – code for the components on thepage

• Message bundle – supplies text for the JSP

• login.jsp – JSF (JSP) source code that is compiledinto 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 willmaintain it

– Uses the comment line shown earlier in the faces-config.xml file

– Adding a component adds the variable and accessorsfor that component

– Deleting a component removes them

– Renaming a component renames them

Creating

the Bean• Create a Java

class from theNew Gallery– Enter it in

faces-configmanually

• OR from theCreate JSF Page dialog– Specify the

name infaces-configand the classfile 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 user’s 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 thecomponents

• 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.LoginJSF”, 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) cameupon 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 JSFstandards– And called it “ADF Faces”

And ADF Faces Begat ADF Faces RC

• Oracle released ADF Faces (non-RC) to opensource 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 allcomponents in the application

• Large range of UI items– 150+ components (and counting)

• Internationalization and accessibility

Rich == Easy To Use

• Property-driven components that savedevelopment effort

• Layout components to arrange othercomponents

• Data Visualization Tools (DVT) components

– Lots of functionality with little effort

– Chart, Gantt, Pivot Table, Map, HierarchyViewer, 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 behaviorusing 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

• 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

Layout Container Components

More Layout Components

• af:panelBorderLayout– Predefined layout

areas

– Uses facets to holdthe contents of eacharea

– Start, end, top, bottom (and more)

• Af:panelStrechLayout– Center area stretches

its contents to fill thearea

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 specialfunctionality– 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 layoutcomponent 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

• Most are on the Common Components page

of the Component Palette

Atomic Components

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 afterselecting theStructure windownode

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 onthe ADF Data Visualizations page

• Each type has its own panel withcomponents

– Gantt

– Gauge

– Map

– Graph

– Hierarchy Viewer

– Pivot Table

Some DVT Components

Some Rich Features

• Rich by nature

• Connect to data

– Drop from theData Controlpanel to the page

• Select from a multitude of

styles

More Rich Features

• Specify data usage

• Control visual aspects usingproperties

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 andfeel

– Time consuming

2. Properties for eachcomponent– ContentStyle

• For data inside thecomponent (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 ofcomponents

• DVTs supply the functionality users often ask for

• There are many resources for help with learning and using ADF Faces

• And it is good.

• A layer of ADF– Used only for web client

code

– JSF controller is one option

– ADF Task Flow Controller is another

• Determines which pageor task loads next

• Transfers data from theView to the Model layer

Review: Controller 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