Post on 19-May-2015
description
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 class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
}
}
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
this.
}
} Ctrl Space
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
this.
}
}
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
this.getB
}
}
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
this.getBookingView1Impl()
}
}
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
? = this.getBookingView1Impl()
}
} Ctrl Space
x 1
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
this.getB
}
} Ctrl Space
x 1
Ctrl Space
x 2
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
this.getB
}
}
public class AppModuleImpl extends ApplicationModuleImpl {
public BookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); }
public void doSomething() {
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
JEE Application Server
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
JEE Application Server
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
DEMO
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