JDeveloper 10g View Layer Alternatives

— JSP and UIX

Peter KoletzkeTechnical Director & Principal Instructor

2

At Least We Have a Path

EVERY man spins a web of light circles And hangs this web in the skyOr finds it hung, already for him, Written as a path for him to travel.

— Carl Sandburg (1878-1967), Webs

3

Survey

• Java development– 1-2 years?– 3-9 years?– More than 9 years?

• JDeveloper– 1-2 years?– More than 2 years?

• JSP?

• UIX?

4

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.

5

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

ControllerView

Code to access data

User interface

code

What happens when user interacts with UI; page flow

6

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 ADF DescriptionModel Model 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 View JSP and UIX fit hereController Controller Currently, the integrated technology is Struts.

ViewView

ControllerController

ModelModel

Struts

ADF UIX

Swing visual aspect JSP

Swing model

ADF Bindings

ADF Data Controls

Java Local ClientWeb Client

Swing event

handlers

ADF JClient

ADF Architecture

Business ServicesBusiness Services

ADF Business Components

EJB Session Beans

Web Services Java Classes

8

• 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

ViewView

ADF UIX

Swing visual aspect JSP

Swing model

Java Local ClientWeb Client

Swing event

handlers

ADF JClient

9

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

10

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

11

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

12

Agenda

• The View Layer and JDeveloper

• JSP Architecture and Development

• UIX Architecture and Development

• Conclusions

13

What is JSP?• 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

It’s an adjective

14

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)

15

JSP Runtime1. 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 issent back to the browser

16

JSP Calling SequenceWeb Tier JVMBrowser

Deptapp.jsp

HTML tags

JSP tags

Deptapp.java

Deptapp.classHTML

HTTP

one time compile

17

A Simple JSP Example

<%@ page contentType="text/html; charset=WINDOWS-1252"%><HTML><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>

Java/JSP-specific tags

18

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

19

Agenda

• The View Layer and JDeveloper

• JSP Architecture and Development

• UIX Architecture and Development

• Conclusions

20

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

21

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

22

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

23

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

24

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 file2. The web server sends the request to the UIX

servlet3. The UIX servlet interprets the XML tags, and

assembles data base for the UI controls4. The XML file is translated into HTML

and sent to the browser

25

UIX Calling SequenceWeb Tier JVMBrowser

HTML

HTTPUIX Servlet

Deptapp.uix

XML tags

26

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

27

UIX Component Example

• XML code defines the HTML tag attributes • UIX servlet renders this as an HTML table

containing links and images

<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>

28

Example Page Areas

• Various pre-defined areas

Page header Global buttons

Data component

area

Tabs and navigation

Page footer

29

UIX in JDeveloper 10g• Wizards

– Start with template– Start without template – Roll your own template

• Various code-generating tools– Structure Window– Data Control Palette– Component Palette– Property Inspector– Struts Page Flow Diagram– UIX Visual Editor– UIX Preview– XML Editor

Specific to UIX and XML

Same as JSP

Demo

30

Agenda

• The View Layer and JDeveloper

• JSP Architecture and Development

• UIX Architecture and Development

• Conclusions

31

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

32

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

33

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

34

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

35

DesignerHandbook

DesignerHandbook

DeveloperAdvancedForms & Reports

DeveloperAdvancedForms & Reports

JDeveloper 3HandbookJDeveloper 3Handbook

ORACLE9iJDeveloperHandbook

• 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

http://www.quovera.com

Books co-authored with Dr. Paul Dorsey Personal web site:

http://ourworld.compuserve.com/ homepages/Peter_Koletzke

ORACLEJDeveloper 10gHandbook

Also co-authoredwith Avrom Roy-Faderman