adf view and controller
DESCRIPTION
ADF View and ControllerTRANSCRIPT
![Page 1: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/1.jpg)
Primjer
Employees i count(*)
![Page 2: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/2.jpg)
ADF View and Controller
![Page 3: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/3.jpg)
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
![Page 4: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/4.jpg)
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.
![Page 5: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/5.jpg)
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.
![Page 6: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/6.jpg)
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).
![Page 7: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/7.jpg)
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.
![Page 8: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/8.jpg)
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.
![Page 9: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/9.jpg)
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.
![Page 10: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/10.jpg)
JSF Snippet
![Page 11: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/11.jpg)
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
![Page 12: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/12.jpg)
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
![Page 13: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/13.jpg)
Some ADF Faces Components
![Page 14: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/14.jpg)
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
![Page 15: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/15.jpg)
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
![Page 16: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/16.jpg)
AJAX Interactions –
A Calculated Field
![Page 17: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/17.jpg)
Hello Worldwide Web:
Your First JSF in
JDeveloper
![Page 18: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/18.jpg)
The Result
![Page 19: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/19.jpg)
JSF Code Snippet
![Page 20: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/20.jpg)
JSF Communication Process
![Page 21: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/21.jpg)
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
![Page 22: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/22.jpg)
JSF Files
![Page 23: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/23.jpg)
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)
![Page 24: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/24.jpg)
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
![Page 25: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/25.jpg)
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
![Page 26: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/26.jpg)
web.xml Snippet
![Page 27: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/27.jpg)
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
![Page 28: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/28.jpg)
Code View of Navigation Rules
![Page 29: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/29.jpg)
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
![Page 30: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/30.jpg)
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
![Page 31: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/31.jpg)
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
![Page 32: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/32.jpg)
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
![Page 33: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/33.jpg)
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
![Page 34: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/34.jpg)
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
![Page 35: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/35.jpg)
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
![Page 36: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/36.jpg)
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)
![Page 37: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/37.jpg)
Backing Bean Snippet
Imports and private variables for each component
![Page 38: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/38.jpg)
Backing Bean Snippet (continued)
• Getters and setters for each component
• Other contents: validation code
![Page 39: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/39.jpg)
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)
![Page 40: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/40.jpg)
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())
![Page 41: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/41.jpg)
Message Bundle Snippet
![Page 42: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/42.jpg)
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
![Page 43: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/43.jpg)
ADF Faces Rich Client
![Page 44: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/44.jpg)
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
![Page 45: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/45.jpg)
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”
![Page 46: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/46.jpg)
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
![Page 47: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/47.jpg)
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
![Page 48: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/48.jpg)
Deep Dive Into af:table
• Column grouping
• Row highlighting
• Column moving
• Export to Excel
• Detach option
• Column sorting & filtering
![Page 49: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/49.jpg)
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
![Page 50: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/50.jpg)
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
![Page 51: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/51.jpg)
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)
![Page 52: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/52.jpg)
AJAX Interactions – Total Pay
![Page 53: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/53.jpg)
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
![Page 54: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/54.jpg)
• 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
![Page 55: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/55.jpg)
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
![Page 56: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/56.jpg)
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
![Page 57: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/57.jpg)
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
![Page 58: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/58.jpg)
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
![Page 59: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/59.jpg)
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
![Page 60: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/60.jpg)
More Perfect Layout Tips
• Design page fragments, not separate pages
• Use Quick Start Layouts when creating the page or template
![Page 61: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/61.jpg)
• Most are on the Common Components page
of the Component Palette
Atomic Components
![Page 62: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/62.jpg)
Some Atomic Components
![Page 63: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/63.jpg)
af:selectManyShuttle
• Single component for multiple-selection list
– Checkmark selection or
– Double click or
– Select and click arrow buttons
![Page 64: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/64.jpg)
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
![Page 65: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/65.jpg)
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
![Page 66: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/66.jpg)
Drag and Drop
• The value from Drag Source will be copied into
Drag Target
![Page 67: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/67.jpg)
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
![Page 68: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/68.jpg)
Some DVT Components
![Page 69: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/69.jpg)
Some Rich Features
• Rich by nature
• Connect to data
– Drop from theData Controlpanel to the page
• Select from a multitude of
styles
![Page 70: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/70.jpg)
More Rich Features
• Specify data usage
• Control visual aspects usingproperties
![Page 71: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/71.jpg)
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
![Page 72: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/72.jpg)
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
![Page 73: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/73.jpg)
Another Visual Aspects Property
• StyleClass
– Equivalent to the HTML class property
– Apply existing style sheet selectors
– Can apply more than one to a component
![Page 74: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/74.jpg)
Visual Component Guide
• JDev Help Center (help system)– Search for “enhanced tag doc”; also one for DVT
![Page 75: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/75.jpg)
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.
![Page 76: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/76.jpg)
• 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
![Page 77: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/77.jpg)
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
![Page 78: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/78.jpg)
Task Flow Code
![Page 79: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/79.jpg)
Sample ADF Controller
Development
![Page 80: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/80.jpg)
![Page 81: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/81.jpg)
![Page 82: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/82.jpg)
![Page 83: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/83.jpg)
![Page 84: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/84.jpg)
Control flow
![Page 85: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/85.jpg)
Task flow key conncepts
![Page 86: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/86.jpg)
![Page 87: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/87.jpg)
![Page 88: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/88.jpg)
![Page 89: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/89.jpg)
![Page 90: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/90.jpg)
![Page 91: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/91.jpg)
Exception handling
![Page 92: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/92.jpg)
![Page 93: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/93.jpg)
![Page 94: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/94.jpg)
![Page 95: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/95.jpg)
![Page 96: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/96.jpg)
Bounded taskflow
• templating
![Page 97: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/97.jpg)
sinhronizacija
![Page 98: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/98.jpg)
![Page 99: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/99.jpg)
![Page 100: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/100.jpg)
![Page 101: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/101.jpg)
![Page 102: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/102.jpg)
![Page 103: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/103.jpg)
![Page 104: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/104.jpg)
![Page 105: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/105.jpg)
![Page 106: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/106.jpg)
![Page 107: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/107.jpg)
![Page 108: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/108.jpg)
![Page 109: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/109.jpg)
![Page 110: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/110.jpg)
![Page 111: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/111.jpg)
![Page 112: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/112.jpg)
![Page 113: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/113.jpg)
![Page 114: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/114.jpg)
![Page 115: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/115.jpg)
![Page 116: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/116.jpg)
![Page 117: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/117.jpg)
![Page 118: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/118.jpg)
![Page 119: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/119.jpg)
![Page 120: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/120.jpg)
![Page 121: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/121.jpg)
![Page 122: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/122.jpg)
![Page 123: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/123.jpg)
Dialog
![Page 124: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/124.jpg)
![Page 125: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/125.jpg)
![Page 126: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/126.jpg)
![Page 127: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/127.jpg)
![Page 128: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/128.jpg)
![Page 129: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/129.jpg)
![Page 130: ADF View and Controller](https://reader033.vdocuments.net/reader033/viewer/2022042509/557212ba497959fc0b90ceb0/html5/thumbnails/130.jpg)