jdeveloper 10g and javaserver faces: high-performance uis on the web avrom roy-faderman senior...

42
JDeveloper 10g and JavaServer Faces: High-Performance UIs on the Web Avrom Roy-Faderman Senior Programmer May, 2006

Upload: hollie-dana-greer

Post on 29-Dec-2015

226 views

Category:

Documents


0 download

TRANSCRIPT

JDeveloper 10g andJavaServer Faces:

High-Performance UIs on the Web

Avrom Roy-FadermanSenior Programmer

May, 2006

Agenda

• A Brief History of Java Web Apps

• JavaServer Faces• ADF Faces• Q&A

A Brief History of Java Web Apps

• Productivity and Maintainability• Capabilities and Performance

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

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

Problems with JSP Model 1

• Hard to Change Page Flow• Mix of Java (sometimes

extensive Java) and Tags on Same Page

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

A Brief History of Java Web Apps

• Productivity and Maintainability• Capabilities and Performance

“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

ServerServer

“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

Agenda

• A Brief History of Java Web Apps

• JavaServer Faces• ADF Faces• Q&A

JavaServer Faces

• The J2EE standard Model 2 Web Applicaton Architecture

• Special tag libraries for JSPs/JSPX documents Html Core

• Separate controller

JavaServer Faces

• JSF JSP and Components• Page Flow• Managed Beans

Simple JSF JSP Code

<body>

<h:form>

<h:selectOneMenu id="color"

required="true">

<f:selectItem itemLabel="Red"

itemValue="red" />

<f:selectItem itemLabel="Green"

itemValue="green" />

</h:selectOneMenu>

</h:form>

</body>

JSF JSP/JSPX and the Component Palette

JavaServer Faces

• JSF JSP and Components• Page Flow• Managed Beans

The JSF Controller: Page Flow

• All page flow information mainained in faces-config.xml

• JDeveloper has graphical representations of page flow

JSF Page Flow and the Component Palette

JSF Navigation Cases

• Navigation cases referenced in JSF JSP/JSPX pages

• Converted into destination by controller

<h:commandLink action="goHome">Go home!

</h:commandLink>

JavaServer Faces

• JSF JSP and Components• Page Flow• Managed Beans

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

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

<h:outputText value="#{homeBean.mainLabel} />

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

Managed Bean Example

<h:outputText value="#{homeBean.mainLabel} />

public class NavigationBean { public NavigationBean() { if /* some condition */ { setMainLabel("Red"); } else { setMainLabel("Green"); } } /* … */}

Conditional Page Flow

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

<h:commandLink action="#{homeBean.nextAction}">Go on!

</h:commandLink> public String nextAction() { if /* some condition */ { return("goStatus"); } else { return("goOrder"); }}

Agenda

• A Brief History of Java Web Apps

• JavaServer Faces• ADF Faces• Q&A

ADF Faces

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

ADF and MVC

Business Services

View (Web and Wireless Clients)

View and Controller (Desktop Clients)

Model

Controller (Web and Wireless Clients)

• Oracle ADF is a framework based on MVC architecture

ADF and MVC

ADF Business Components

ADF Faces Components

ADF Swing

ADF Data Bindings

ADF Binding Filter

• Oracle ADF is a framework based on MVC architecture

ADF Faces

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

ADF Binding Filter

• Runs with each HTTP request• Sets up a Struts managed bean,

“bindings”, containing all ADF data bindings

<af:inputText value="#{bindings.EmpName.inputValue} />

Database

ADF Data Bindings

Business Service

The Data Control Palette

ADF Faces

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

Traditional “Web 1.0 Cycle”

Requestsubmittedto server

Pagedownloaded

to user

User fillsout form

Serverrenders

page

User clicksbutton or link

Component Trees

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

<afh:body>

<af:form>

<af:selectOneMenu id="color"

required="true">

<af:selectItem itemLabel="Red"

itemValue="red" />

<af:selectItem itemLabel="Green"

itemValue="green" />

</af:selectOneMenu>

</af:form>

</afh:body>

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

Partial Page Refresh—How It Works

Server

Web Cycle with PPR

Requestsubmittedto server

Componentsdownloaded

to user

Usermanipulatescomponent

Serverrenders

components

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

Simple PPR Example

<af:inputText id="myTextField" autoSubmit="true" partialSubmit="true" />

...

<af:outputText id="myTextOutput" value="#{homeBean.calculatedVal}" partialTriggers="myTextField" />

A Few Words about AJAX

AsynchronousJavascriptAndXML• PPR is an important part of

“Web 2.0” But PPR, by itself, isn’t truly asynchronous ADF Faces (and regular JSF) “supports” full AJAX,

but really only in that it supports Javascript

Q & A