adf gold nuggets (oracle open world 2011)

GOLD NUGGETS IN ORACLE ADF (FACES)

Lucas Jellema – AMIS (Nieuwegein, The Netherlands)

ADF EMG Community Day - Oracle Open World 2011

OVERVIEW

• IDE favorites• Fool’s Gold• UI (tw)Highlights• The Whole Wide World

WHAT IS A GOLD NUGGET?

• Unexpected benefit• Underused, overlooked feature

– Small – frequently useful– Huge – unexplored concept or area of

infrastructure• Potentially useful to large community

– Not too much a niche option

NUGGET CLOUD

Refresh after insert

Gro

ovy

so aDF

JHeadstartPPR

DVT

Decoupled D

evelopment &

ReuseTaskFlow

, Region, UIShell, D

eclarative Components, AD

F Library, …

active rowkey prepareSession

Java/JEE

Fusion Applications

EMG and wider community

OraFormsFaces

Popup

Change Persistence

Auto

Sug

gest P

anelCollection

ADFContext

OPSS/ADF Security

Tree S

ele

ct

VO Updateable Lookup

Multi Browser Supportserver event & listener

List

valid

ato

r

FormatString

Sele

nium

Hot Reload

Cust

omiza

tion

PanelDashboard

Programmatic VO

Bean Data Control

setPropertyListener

Activ

e D

ata

Serv

ice fo

r Push

Rich

Tab

le

Web

Logi

c Se

rver

EL

Save Points

Page Template

Skin editor

ADF IN LARRY’S KEYNOTE ON ORACLE OPEN WORLD 2009 AND 2010

FUSION APPLICATIONS – BIGGEST PROOF POINT IN THE WORLD

ADF POWERS THE USER INTERFACE OF ALMOST ANY ORACLE PRODUCT

ADF POWERS THE USER INTERFACE OF ALMOST ANY ORACLE PRODUCT (2)

THE TABLE

• ADF Faces Rich Table (& Panel Collection)– Displays ADF Model data bound collection, bean

array, List, ResultSet, RowSet and more – Dynamic Table Configuration & Change Persistence

• Rearrange, resize, hide/show columns, freeze columns

– Post-load or Lazy Data Fetch– Fetch data rows upon scroll– Filter & Sort– Read-Only and Click-to-edit– [single or multiple] Row and Column Selection– Header, Footer, Column Grouping, DetailStamp– Many, many predefined facets– Export data set, Email & Print mode

ACTIVE ROW KEY

• Property on table that is ‘click to edit’• EL expression that resolves to the primary

key of the row that should be displayed as editable– Table will scroll that row into view

"SMART" COMPLETION INSIGHT

Ctrl-Space (x 2)

public class AppModuleImpl extends ApplicationModuleImpl {

public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }

}



public void doSomething() {

}

}




this.

}

} Ctrl Space




this.

}

}




this.getB

}

}




this.getBookingView1Impl()

}

}




? = this.getBookingView1Impl()

}

} Ctrl Space

x 1




this.getB

}

} Ctrl Space

x 1

Ctrl Space

x 2




this.getB

}

}




BookingsViewImpl bookingsView = this.getBookingsView1();

}

}

JDEVELOPER GO TO SHORTCUTS

• Go to Class: CTRL -

• Go to File: CTRL ALT -

• Find usages: CTRL ALT u – For class, method,

EO and VO Attribute, …

MORE BEST SHORT CUTS…

• CTRL Shift Space: parameter insight• CTRL = : list of recently opened files• CTRL Space: completion insight• CTRL Space (2x): declaration insert• CTRL /: selection commented• CTRL Shift C:

copy file path toClipboard

• Alt Home : selectfile in ‘tree’

DATA VISUALIZATION

THE RIGHT MOUSE CLICK

• ContextMenu client listener and Popup (menu and window)

POPUP MAGIC

EXAMPLE: ADDING FANCY BALLOON HELP• Create a popup with a noteWindow child

to contain the fancy help content

• Add a showPopupBehavior tag to the inputText that we want to add the help to

FUSION APPS – ‘UI DESIGN PATTERN’

EXPRESSION LANGUAGE

• IoC: Injection of Value and Listener into page

• Dynamic, context sensitive behavior• Extension points

– Custom Functions invoked from EL– Integration of Spring Beans– Custom EL Resolver

• To resolve values from property files, ….

#{user.settings['NAME']}

EXTEND EL TO SUPPORT CUSTOM FUNCTIONS WITH MULTIPLE PARAMETERS

• Create the static methods that implement the custom EL functions

• Configure <function> elements in a custom tag library descriptor

• Associate the tag library to the JSF page• Use the function in expressions such as:

NO CODING QUICK START ADF - LEVERAGING BEST PRACTICES & UNIFORM UI PATTERNS

EVEN MORE DECLARATIVE ADF DEVELOPMENT – WITH JHEADSTART

PROGRAMMATIC CROSS TIER INTERACTION

Web Browser

JEE Application Server

Client

Server (middle tier)

Database

JavaScript Components

ComponentsBeans & Objects

activeOutputText

Active DataModel

activeOutputText

push

serverListener

Bean

Load JSON, CSS, Image, XML, JSRequest

data orPush message

push (DB QRCN)

Object

clientListener

componentuser action

serverListener

partial page

refresh

partialSubmit autoSubmit

JavaScript Function

Queue Custom Event

componentcomponent

manipulate

pollsetPropertyListener

userorprogrammaticaction

add JS toexecute (ERKS) add

componentsas partial target

ERKS ‘ppr script’

partial triggers, added targets

actionListener, valueChangeListener,

…Listener

componentcomponent

prop

erty

chan

ge

Full pagereload

CLIENT SERVER INTERACTIONS VV.

USE SETPROPERTYLISTENER TO PUSH DATA TO THE SERVER

• The setPropertyListener will pass from value to the to target when type event occurs on parent

– A very simple way to inform the server about an event and the data associated with the event

– Supported types: action, focus, poll, query, rangeChange, selection, sort, rowDisclosure, valueChange and many more

<af:image id="removeFromSetImage“ source="/images/removeFromSet.png“ shortDesc="Remove from Shopping Basket"/> <af:setPropertyListener from="#{item}“ to="#{shoppingBasket.itemToRemove}" type="action"/></af:commandLink>

SERVERLISTENER FOR CUSTOM AJAX (BACKGROUND CLIENT TO SERVER PUSH)

• A serverListener associates a server side method with a client side custom event– This allows JavaScript functions

to call a server side method by queuing an event

– A custom event carries a payload

ADF ACTIVE DATA SERVICE – SERVER PUSH TO CLIENT• Push: server sends messages to client• ADF Active Data Service enables UI

components to be ‘automatically refreshed’ when server side events occur

• Active UI Components include Table, Image, OutputText, DVT Components– Based on BAM Data Control– Based on Custom Beans

that extend ActiveAdapter• Nudge: push-to-refresh• Note: client-2-client push

can easily be implementedas client-to-server-followed-by-server-to-client push

Web Browser


AUTO-PPR FOR IMMEDIATE REFRESH OF DATA BOUND COMPONENTS

• To have ADF automatically refresh data bound components when underlying value binding has changed its value

• Set changeEventPolicy=ppr on iterator– Refresh as piggy back on any request cycle– No partialTriggers attribute required!

CROSS TIER PUSH

Web Browser

RDBMS


trg

job

servlet

activeOT

evt lsnrCache

refresher

table

PUSH TO THE LIMIT – RICH AND PRO-ACTIVE USER INTERFACES WITH ADF

Session Plug – Session Plug – Session Plug – Session Pl

Wednesday, 5-6 PM, Mariott Marquis, Golden Gate A Oracle Open World 2011

THE “HISTORY” FEATURE IN JDEVELOPER• Quick comparison of file with previous states

– Can leverage Source Code Control system (Subversion, CVS) but also maintains local file history

– The compare feature is ‘XML aware’• Revert to a previous state of a file

MARRYING FORMS AND ADF TOGETHER – MIGRATE WITH (i/o FROM) FORMS TO ADF

• OraFormsFaces leveraging the JavaScript-Applet bridge for two-way event exchange

ADF BC PROPERTIES

Property Inspector

LIBRARY PRIVATE

THE WORLD WIDE ADVANCED DEVELOPERS FAMILY

THE WORLD WIDE ADVANCED DEVELOPERS FAMILY• ADF Enterprise Methodology Group• OTN Discussion Forum• OTN and ADF Resources

– Documentation, samples, tutorials, testimonials, virtual developer days, rea.oracle.com

• Blog-o-sphere• Conferences around the globe

– OOW, ODTUG Kaleidoscope, UKOUG, OBUG, AUSOUG/OAUG/ODTUG 20:20, DOAG, …

• Books and articles– Oracle Press, Packt Publishing, … – Oracle Magazine, ODTUG Technical Journal, …

• Also: Leverage Java/JEE community and resources

JAVA AND JEE

• ADF is a framework on top of Java, JEE and JVM• Anything that is/extends/runs on one of these is

potentially usable with and relevant for ADF• Zillion frameworks and libraries

– iText (PDF), Apache POI (Excel), Jasper Reports, BIRT

– Spring (IoC, AOP, Acegi/Security, Social, ..)– Apache Commons, Google Collections, Joda Time

• Software Engineering– Test (Junit, EasyMock), build (Ant, Maven),

check/QA (FindBugs, CheckStyle, Sonar), • JEE facilities in WLS including JMS, WS* & RS,

JMX… • Dynamic JVM languages: Groovy, Scala, JRuby, …• Java 7 SE and beyond• Java FX?

PREPARE SESSION

• Before any other database communication is performed during the processing of a request …

• ADF BC will execute the prepareSession() method that you can override in ApplicationModuleImpl

• This is the perfect place to– Reset package state– Set application and client info– Set application context

• User details, current session context, view filter conditions(real or poor man VPD)

– Fetch any events published inside the database Database

ADF BCAppMod

CHALLENGE

• Create a Sliding Tile puzzle that tiles up an image in a configurable number of tiles

• Using drag and drop, the user can reassemble the image

THE PANELDASHBOARD COMPONENT• Renders a ‘portal-like’ dashboard – as a grid

of PanelBox-components• Configurable

– number of columns– row height– Collapsible (boxes)

• Supports drag & drop for reorganization– And change persistence to remember (per user)

• Very easy to use

STEPS

• Create Servlet that produces tiles from a JPEG image– Parameters: image name, tile factor, x and y

• Create PanelDashboard with panelBoxes with richImage components– That request their source from the servlet

corresponding to their position in the grid

• Bind the PanelDashboard and dynamically create the panelBox components

• Allow user to set the tile factor and choose the image– Use a Carousel for image selection

EDN

Task UI

SDO Entity

EDN Events

SO ADF

•EDN Events from ADF BC•BAM Data Control•Human Task UI•ADF BC SDO Service•WebService Proxy and Data Control

ADF TO SOA INTERACTIONS IN FAPPS Business LogicView Data

OrchestrationHuman interaction Policy evaluationMonitoring

RulesEngineAssign

Task

TaskComplete

Human WorkflowService

Mediator /BPEL Process

results

factsBusinessActivityMonitoring

Business ServicesADF Business Components

DataBinding

SDO Services

DatabaseSchema

Events

User InterfaceADF Faces components

Web

Cent

er

PROGRAMMATIC VIEW OBJECT

• It walks, talks and looks like a ‘regular’ View Object– (regular being based on Entity Objects or SQL

Query)• But it is entirely fueled by custom written

overridden Java methods – possibly without database connection– A bit like a View with Instead Of trigger – against

a Collection based Table Function and PL/SQL API

• Programmatic View Objects can be used as normal in a Data Control for binding ADF Faces components

• Normal rich declarative ADF BC data binding can be provided to UI developers for data sources such as– WebService, JMS Queue, Memory Grid,

Document Management System, Email, cross session data, …

• Note: with the evolution of the Bean Data Control, some of the use cases will fade away

THE ROOT OF AJAXSuggestions

AUTO SUGGESTIONS

• User is entering a field– As she types characters,

suggestions can be presented for what the full entry should read• Based on a list of allowable values, based on

previous (popular) entries or anything really– User can pick a suggestion for ‘short-cut typing’

• Auto suggestions can be model-driven (declarative) or custom– And can do things beyond plain list based

suggestions

INTRO

• Google Suggest set off the AJAX hype in anger

• Many implementations for a ‘suggestions’ feature in ADF 10g and 11g have been created– Using custom JavaScript or libraries like

Jquery• With PS1, ADF 11g introduced a native

component for ‘auto suggestions’– The <af:autoSuggestBehavior> component,

to be included in inputText or inputListOfValues orinputComboboxListOfValues

MODEL DRIVEN SUGGESTIONS

• The suggestions can be derived declaratively from List of Values reference on a VO Attribute

• Steps:– On ViewObject

• Create ViewAccessor (for list values)• Create List of Values for Attribute• Link LoV to ViewAccessor

– In Page• Add InputListOfValues component based on

attribute• Add af:autoSuggestBehavior with suggestions

based on List of Values Binding’s suggestedItems

IN PAGE:

CUSTOM SUGGESTIONS

• Auto Suggestions can be provided by managed bean that implements signature: – List getSuggestions( String currentValue)

• And the List returned is really List<SelectItem>

• Potential use cases– Based on some (application wide) cached

collection (of previously entered ?) values– Retrieve values from WebService, file, …– Use common abbreviations, codes

• Country code, airport– Show translations in other languages

STATIC LIST OF COUNTRIES

Suggestions

SUGGESTIONS … OR?

• Suggested Values do not need to be suggestions in a very literal sense– What you see may not be what you get– The SelectItem as a label (WYS) and a value

(ISWYG)• Examples:

– Add words to field instead of replacing value– Perform selected

operation on value– Show an updated

indicator based on the value

PAGE TEMPLATE

• Turns page layout inside out: – the page references the template– the page template determines the overall

structure – the page provides the content for the designated

areas in the template (through the facets)• Can be dynamically, context-sensitively

selected using an EL expression• Can also be used for areas within a page

– With multiple page templates used within the same page

– More an area template than a page template to define UI Design Patterns• Tree-with-Detail-Form, Table-and-Chart, Master-

Form-Detail-Table, Search block-Results table…

USING MULTIPLE PAGE TEMPLATES

• Two templates: mainpage and Table-Form template

OTHER PAGE CONSUMING THE TEMPLATE(S)

CHANGING THE MICRO-TEMPLATE

SUMMARY

• Twinkle, twinkle little stars…– #1 nugget– #2 nugget– #3 nugget

• Don’t give up [too soon]– There is more in ADF than meets the eye– There is a world of Java/JEE to leverage– There is a community to lean on

• Scan release notes and monitor blog-o-sphere for valuable new (and re-discovered) nuggets

• Share! Yes, you too! Your findings are just as valuable.– Participate in EMG and OTN Forum discussions,

write blog articles, present in conferences, …

SESSION PLUGGING

• Tuesday – Reaching Out from PL/SQL (S08625 )10.15-11.15, Mariott Marquis, Salon 7

• Tuesday – (JavaOne) Cross Tier Push Architecture (Don’t call us, we’ll push you) (S24722)4.30-5.15 PM, Hotel Nikko, Monterey I/II

• Wednesday – Push to the Limit: Rich and Proactive User Interfaces with Oracle ADF (S08620)5-6 PM, Mariott Marquis, Golden Gate A

• Thursday – Instant Agility in Oracle Fusion Middleware through Design Time @ Run Time (S08623)4-5 PM, Moscone West – 2020

adf gold nuggets (oracle open world 2011)

Technology

ctrl space x

adf library

completion insightctrl

data visualization

adf powers

lazy data fetchfetch

opened filesctrl space

ctrl alt u