adf view and controller
DESCRIPTION
ADF View and ControllerTRANSCRIPT
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