JDeveloper 10g and JavaServer Faces: HighPerformance UIs on the Web

1
JDeveloper 10g andJavaServer FacesHigh-Performa
nce UIs on the Web

• Avrom Roy-Faderman
• Senior Programmer
• May, 2006

2
Agenda

• A Brief History of Java Web Apps
• JavaServer Faces
• ADF Faces
• QA

3
A Brief History of Java Web Apps

• Productivity and Maintainability
• Capabilities and Performance

4
Servlets

• Java classes executed on the server in response
  to HTTP requests
• Originally used to output HTML
• This use required extensive and awkward Java
  coding

5
JSP Model 1

• Files closely resembling HTML except for
• Some specialized tags
• Scriptlets embedded bits of Java code
• Compiled into Servlets
• HTML portions outputted directly into generated
  HTML
• Specialized tags run bits of Java
• Scriptlets run directly

6
Problems with JSP Model 1

• Hard to Change Page Flow
• Mix of Java (sometimes extensive Java) and Tags
  on Same Page

7
Model 2 Architectures

• Separate out View and Controller
• View renders UI
• Controller handles page flow and responds to user
  requests
• No hardcoded links in view
• Generally no procedural code in view

8
A Brief History of Java Web Apps

• Productivity and Maintainability
• Capabilities and Performance

9
Thick Client vs. Web The Past

• Requires customized client
• Large downloads
• High-interactivity
• High-performance

• Runs in unmodified web browser
• Small downloads
• Low-interactivity
• Low-performance

Server
Server
10
Web 2.0

• Still run in unmodified browser
• Relatively small download size
• Much more interactive than traditional web apps
• Much higher-performance than traditional web apps

11
Agenda

• A Brief History of Java Web Apps
• JavaServer Faces
• ADF Faces
• QA

12
JavaServer Faces

• The J2EE standard Model 2 Web Applicaton
  Architecture
• Special tag libraries for JSPs/JSPX documents
• Html
• Core
• Separate controller

13
JavaServer Faces

• JSF JSP and Components
• Page Flow
• Managed Beans

14
Simple JSF JSP Code

• ltbodygt
• lthformgt
• lthselectOneMenu id"color"
• required"true"gt
• ltfselectItem itemLabel"Red"
• itemValue"red" /gt
• ltfselectItem itemLabel"Green"
• itemValue"green" /gt
• lt/hselectOneMenugt
• lt/hformgt
• lt/bodygt

15
JSF JSP/JSPX and the Component Palette
16
JavaServer Faces

• JSF JSP and Components
• Page Flow
• Managed Beans

17
The JSF Controller Page Flow

• All page flow information mainained in
  faces-config.xml
• JDeveloper has graphical representations of page
  flow

18
JSF Page Flow and the Component Palette
19
JSF Navigation Cases

• Navigation cases referenced in JSF JSP/JSPX pages
• Converted into destination by controller

lthcommandLink action"goHome"gtGo
home! lt/hcommandLinkgt
20
JavaServer Faces

• JSF JSP and Components
• Page Flow
• Managed Beans

21
Managed Beans

• The JSF Controller can be configured to
  automatically create and manage Java objects
• Controller or view can access managed
  properties on these objects
• Scoping
• Application
• Session
• Request

22
Accessing Managed Properties JSP

• JSP Expression Language
• Syntax beanName.propertyName
• Can even have nested properties
  beanName.property1.property2
• Use these expressions as attributes for tags

lthoutputText value"homeBean.mainLabel /gt
23
Managed Bean Classes

• Each managed bean has a class that you can edit
• Constructor runs at the beginning of the
  application/request/session
• Methods that allow you to access managed
  properties
• Put complex logic in here instead of putting it
  in the view

24
Managed Bean Example
lthoutputText value"homeBean.mainLabel /gt
public class NavigationBean public
NavigationBean() if / some condition /
setMainLabel("Red") else
setMainLabel("Green") / /
25
Conditional Page Flow

• Instead of referring to a JSF navigation case,
  refer to a function that returns one.

lthcommandLink action"homeBean.nextAction"gtGo
on! lt/hcommandLinkgt
public String nextAction() if / some
condition / return("goStatus") else
return("goOrder")
26
Agenda

• A Brief History of Java Web Apps
• JavaServer Faces
• ADF Faces
• QA

27
ADF Faces

• Oracle ADF
• The ADF Binding Filter
• Partial Page Refresh

28
ADF and MVC

• Oracle ADF is a framework based on MVC
  architecture

View (Web and Wireless Clients)
View and Controller (Desktop Clients)
Controller (Web and Wireless Clients)
Model
Business Services
29
ADF and MVC

• Oracle ADF is a framework based on MVC
  architecture

ADF Faces Components
ADF Swing
ADF Binding Filter
ADF Data Bindings
ADF Business Components
30
ADF Faces

• Oracle ADF
• The ADF Binding Filter
• Partial Page Refresh

31
ADF Binding Filter

• Runs with each HTTP request
• Sets up a Struts managed bean, bindings,
  containing all ADF data bindings

ltafinputText value"bindings.EmpName.inputVal
ue /gt
ADF Data Bindings
Database
Business Service
32
The Data Control Palette
33
ADF Faces

• Oracle ADF
• The ADF Binding Filter
• Partial Page Refresh

34
Traditional Web 1.0 Cycle
35
Component Trees

• You can think of a JSP/JSPX document as being a
  tree of components

ltafhbodygt ltafformgt ltafselectOneMenu
id"color"
required"true"gt ltafselectItem
itemLabel"Red"
itemValue"red" /gt ltafselectItem
itemLabel"Green"
itemValue"green" /gt lt/afselectOneMenugt
lt/afformgt lt/afhbodygt
36
Partial Page Refresh

• Use Javascript to submit a form at times other
  than when a user presses a button or link
• On server, re-render only a portion of component
  tree
• Download only the appropriate fragment of HTML

37
Partial Page RefreshHow It Works
Server
38
Web Cycle with PPR
39
ADF Faces and PPR

• Many components always use PPR
• Table sorting
• Table pagination
• Expandable tables and menus
• Almost all components can use PPR
• Requires some manual work

40
Simple PPR Example
ltafinputText id"myTextField"
autoSubmit"true" partialSubmit"true"
/gt ... ltafoutputText id"myTextOutput"
value"homeBean.calculatedVal"
partialTriggers"myTextField" /gt
41
A Few Words about AJAX

• Asynchronous
• Javascript
• And
• XML

• PPR is an important part of Web 2.0
• But PPR, by itself, isnt truly asynchronous
• ADF Faces (and regular JSF) supports full AJAX,
  but really only in that it supports Javascript

42
Q A