JDeveloper 10g
View Layer Alternatives
— JSP and UIX
Peter Koletzke
Technical Director &
Principal Instructor
At Least We Have a Path
EVERY man
spins a web
of light circles
And hangs this web in the sky
Or finds it hung,
already for him,
Written as a path
for him to travel.
— Carl Sandburg (1878-1967), Webs
2
Survey
• Java development
– 1-2 years?
– 3-9 years?
– More than 9 years?
• JDeveloper
– 1-2 years?
– More than 2 years?
• JSP?
• UIX?
3
Agenda
• The View Layer and JDeveloper
• JSP Architecture and Development
• UIX Architecture and Development
• Conclusions
Rumor: There is a
good book out on
JDeveloper 10g.
4
Model-View-Controller (MVC)
• A J2EE design pattern for organization of code
• The MVC separation in layers allows you to
replace layers (e.g., a different front-end style)
• Theoretically: provides the ability to separate
layers for development
– E.g., Can develop and test the model layer separately
• Practically: a good goal
Model
User interface
code
View
Code to access data
Controller
What happens when
user interacts
with UI; page flow
5
MVC Development in JDeveloper
• Different areas of JDeveloper support
different layers
– Model – Business Services modelers and editors
– View – Visual editors, Property Inspector
– Controller – Struts Page Flow Diagram
• Oracle Application Development Framework
(ADF) architecture built around MVC
MVC
Model
View
Controller
ADF
Model
Description
Automatic data binding to a business service
(data) source; data controls offer components;
common to all business services
Business Services Code to access database sources; business logic;
persistence; O.R. mapping
View
JSP and UIX fit here
Controller
Currently, the integrated technology is Struts.
6
ADF Architecture
View
Java Local Client
Swing
model
Swing event
handlers
Web Client
Swing visual
aspect
ADF UIX
JSP
ADF JClient
Controller
Struts
Model
ADF Bindings
ADF Data Controls
Business Services
EJB Session
Beans
Web Services
ADF Business
Components
Java Classes
Java Local Client
Swing
model
Swing event
handlers
Swing visual
aspect
View
Web Client
JSP
ADF UIX
ADF JClient
• User interface technologies
– Java local client
•
•
•
•
Java runtime on the client
Part of J2SE (standard edition)
Uses JClient framework to communicate with model layer
Swing contains its own MVC components (Swing Model,
event handlers for Controller, and visual aspects for View)
– Web client
• JavaServer Pages (JSP) technology
– J2EE standard, light-client, tag-based interface
• ADF UIX
– Oracle-specific, XML-based interface used by
E-Business Suite applications
8
JDeveloper ADF Development
Process
1. Create application workspace
2. Create Business Services and Model
layers
3. Create View and Controller layers
4. Test and debug
• Use the same tools for
development regardless of
technology choices
9
JDeveloper Work Areas
• Navigator
– Workspaces and projects
– Files
• Structure Window
– Shows details of selected file
– For UIX and JSP code,
shows the object hierarchy
• Code Editor
– Standard, full-featured editor
• Visual Editor
– Modify layout
10
More JDeveloper Work Areas
• Component Palette
– Drag into the visual or code editors
• Data Control Palette
– Drag into the editors
– Automatic data binding
• Property Inspector
– The usual
• Struts Page Flow
Diagram
– Define and manage
Struts components
11
Agenda
• The View Layer and JDeveloper
• JSP Architecture and Development
• UIX Architecture and Development
• Conclusions
12
What is JSP?
It’s an
adjective
• JavaServer Pages technology
• Defined by Java 2 Platform, Enterprise
Edition (J2EE) specs
• Runs in a Java Virtual Machine (container)
process on a web application server
• Coded in Java tags and HTML tags
• Limited to HTML, thin client controls
13
JSP Features
• It is a mature J2EE standard
– Lots of support from user communities and
vendors
– Lots of prebuilt tag libraries (JSP tags) available
• These ease the burden of coding
• For example, a single control draws an HTML table
containing results from a query
• Coding is standard HTML
– Use any HTML editor for lay out
– Extend with JavaScript and Cascading
Style Sheets (as usual with any HTML)
14
JSP Runtime
1. The client issues a URL request for a
JSP file
2. The web server sends the request to
the JSP runtime (JSP container), a
Java Virtual Machine (JVM) process
3. JSP container translates the file into
Java, compiles the Java file, and runs it
4. The Java file creates HTML that is
sent back to the browser
15
JSP Calling Sequence
Browser
Web Tier JVM
HTTP
Deptapp.jsp
HTML tags
JSP tags
Deptapp.java
HTML
one time
compile
Deptapp.class
16
A Simple JSP Example
<%@ page contentType="text/html;
charset=WINDOWS-1252"%>
Java/JSP<HTML>
specific tags
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=WINDOWS-1252">
<META NAME="GENERATOR" CONTENT="Oracle JDeveloper">
<TITLE>Hello World</TITLE>
</HEAD>
<BODY>
<H2>The following output is from JSP code:</H2><P>
<% out.println("Hello World"); %></P>
</BODY>
</HTML>
17
JSPs in JDeveloper 10g
• No wizard support
• Various code-generating tools shown
earlier
– Structure Window
– Data Control Palette
– Component Palette
– Property Inspector
– Struts Page Flow Diagram
– Visual Editor
– Code Editor
Demo
18
Agenda
• The View Layer and JDeveloper
• JSP Architecture and Development
• UIX Architecture and Development
• Conclusions
19
What is UIX?
• User Interface XML (9i); ADF UIX (10g)
– Code file is written in XML
• Oracle framework for light client applications
– Code libraries
– Documented development method
– Support in JDeveloper
• The main view technology for
E-Business Suite applications
– Developed and used by Oracle Apps
developers for over 4 years
– You can extend apps using UIX
– You can also use it for any application
20
UIX Features
• J2EE compliance
– Shares design principles with
JavaServer Faces (a new addition to JSPs)
• Standardization
– Templates are core design elements
– Look-and-feel (fonts and colors) or “skins”
• Can be changed with one config property
• Solid development support in JDeveloper
– JDev 9i is OK; 10g is much more complete
• Dynamic images
– Tab and button images are generated
at runtime
• Text on image is base on UIX properties
• No maintenance of image files
21
More UIX Features
• Message handling
– Standard message area under tabs
– Error for a field contains link to problem
field
• Rich component set
– Date field with calendar LOV button
– Search component that contains
multi-criteria capability
– Tree element
– Master-Detail (various styles)
– Shuttle control
– Many have prebuilt JavaScript code
– Container tags: stackLayout, borderLayout
22
Featured Feature:
Partial Page Rendering
• Only part of the page updates when you
resubmit
– This makes the user experience smoother
– For example, only table values are refreshed
• Available on several controls
– hGrid, hideShow, hideShowHeader, lovInput,
processing, subTabLayout, and table
• Uses JavaScript iframes internally
– No coding required by the developer
23
UIX Runtime
• Code runs on a web application server (like
JSP code)
– A special process (UIX servlet) runs in an application
server JVM
1. The client issues a URL request for a UIX file
2. The web server sends the request to the UIX
servlet
3. The UIX servlet interprets the XML tags, and
assembles data base for the UI controls
4. The XML file is translated into HTML
and sent to the browser
24
UIX Calling Sequence
Browser
Web Tier JVM
HTTP
UIX Servlet
Deptapp.uix
HTML
XML tags
25
UIX Code
• Arranged in an XML hierarchy
• User interface nodes
– Each describes part of a page
– Page header
• Corporate branding and product branding images
– Global buttons
• Links that appear on each page for navigation to other
application or website
– Tabs and navigation
• Tab control to navigate to another page
– Data component area
• Components that interact with data
– Page footer
• Copyright notice, privacy notice, global links
• UIX “components” coded into the nodes
26
UIX Component Example
<globalButtons>
<globalButtonBar>
<contents>
<globalButton source="images/www_home.gif" text="Home"
destination="#"/>
<globalButton source="images/www_contact.gif" text="Contact Us"
destination="#"/>
<globalButton source="images/www_help.gif" text="Help"
destination="#"/>
</contents>
</globalButtonBar>
</globalButtons>
• XML code defines the HTML tag attributes
• UIX servlet renders this as an HTML table
containing links and images
27
Example Page Areas
Page header
Global buttons
Tabs and navigation
Data component
area
Page footer
• Various pre-defined areas
28
UIX in JDeveloper 10g
• Wizards
– Start with template
– Start without template
– Roll your own template
• Various code-generating tools
–
–
–
–
–
–
–
–
Structure Window
Data Control Palette
Same as
Component Palette
JSP
Property Inspector
Struts Page Flow Diagram
UIX Visual Editor
Specific to
UIX Preview
UIX and XML
XML Editor
Demo
29
Agenda
• The View Layer and JDeveloper
• JSP Architecture and Development
• UIX Architecture and Development
• Conclusions
30
When to Use JSP Technology
• You have existing applications using JSP and
do not want to learn a new technology
• You have pre-existing JSP templates or a
JSP look and feel
– Or, you do not mind developing a look and feel
• You need industry-wide support and
assistance from a large user community
• You have sufficient in-house Java expertise
– JSP pages require more Java coding to customize
controls and behavior
• You need to be 100% J2EE now
31
When to Use UIX Technology
• You need to extend Oracle Apps
– Use JDev 9i’s Oracle Application Framework
(OAF) to assist – 11.5.10
• You have a shop of “traditional” Oracle
developers
– UIX has slicker controls that require less Java
coding
• You want a pre-built look and feel
• You can live with Oracle-centric support and
user communities
• You do not need to be entirely J2EE
– 10.1.3 will be 100% J2EE – extensions to JSF
32
Summary – JSP Pages
• JSP pages are coded in HTML and JSP
tags
• JSP applications run in a JVM on a
web server
– No Java running on the client
– Light client
– Running the JSP page creates a servlet
• J2EE standard, not Oracle-specific
• Extensive support in JDeveloper
– Easy data binding
33
Summary – UIX
• UIX is a powerful framework used for
View layer development
• Rich component set for light-client apps
• XML code
• E-Business Suite applications use it
• Oracle-specific but J2EE-compliant
• Extensive support in JDeveloper
– Also easy data binding
34
Designer
Handbook
Developer
Advanced
Forms & Reports
JDeveloper 3
Handbook
ORACLE9i
JDeveloper
Handbook
ORACLE
JDeveloper 10g
Handbook
Also co-authored
with Avrom Roy-Faderman
 Books co-authored with Dr. Paul Dorsey
 Personal web site:
http://ourworld.compuserve.com/
homepages/Peter_Koletzke
http://www.quovera.com
• Founded in 1995 as Millennia Vision
Corp.
• Profitable for 7+ years without outside
funding
• Consultants each have 10+ years
industry experience
• Strong High-Tech industry background
• 200+ clients/300+ projects
• JDeveloper Partner
• More technical white papers and
presentations on the web site
35