J2EE Web Development

Karsten Schulz Terp-Nielsen Nordic Solution Manager, FMW Oracle Denmark

Agenda

 J2EE Web Application Technologies – Motivation to Web Development    Web Development with JSF Application Developer Framework (ADF) ADF Faces

J2EE Web Application Development Technologies

  

Java Servlet 2.4 (JSR 154) JavaServer Pages 2.0 (JSR 245) JavaServer Pages Standard Tag Library (JSR 52)



JavaServer Faces 1.2 (JSR 252)

Motivation to Web Development

Model 1 Architecture

    Browser access JSP pages – JSPs access JavaBeans that represent model Control de-centralized – current page display, determined next page to display Complex navigation requires use of scriplet code – Blurs the line between presentation and navigation code and making reuse difficult Not a model to use in practice - maintenance difficult and does not scale well

Motivation to Web Development

Model 1 Architecture

Model 1 Decentralized controller - in each JSP page

Motivation to Web Development

Model 1 Architecture No MVC - Statically Linked Pages

Servlet/ JSP Servlet/ JSP Servlet/ JSP Web Server Servlet/ JSP

Motivation to Web Development

Model-View-Controller ~ Model 2

 Introduces a controller servlet – – Controller Servlet handle the data access and navigational flow JSPs handle presentation  Controller centralizes the logic for dispatching requests to the next view based on the request URL, input parameters, and application state  Controller also handles view selection, which decouples JSP pages and servlets from one another

Motivation to Web Development

Model-View-Controller ~ Model 2 HTTP Response HTTP Request Controller Servlet State Change

User Actions

JSP

View Selection

State Query Change Notification View JavaBean Enterprise JavaBean Model JDBC

Motivation to Web Development

Model-View-Controller ~ Model 2 Applying MVC to a Page Flow

Web Server Servlet/JSP Controller

What is JavaServer Faces?

      Standard J2EE Web UI framework Developed through Java Community Process (JCP) as JSR-127, JSR-252 Nickname: Faces Started: May 2001 First release: March 2004 Oracle is a primary contributor

JavaServer Faces (JSF)

Overview – Role of Faces

   Focus on components, not markup Automatic event and state handling Designed to be leveraged by tools

Goal is to simplify J2EE web application development

JavaServer Faces (JSF)

Overview - Evolution

 JSF is a natural evolution of J2EE Web development

JSTL

Custom Tag Libraries JavaServer Pages Servlet API

Again, too low level … Finally, a comprehensive, standard API for J2EE Easier but … scriptlets Too low level …

JavaServer Faces (JSF)

Overview - JSF Architecture

HTML Browser

HTML render kit

Page Backend Code Phone/ PDA

WML render kit

Page

JavaServer Faces (JSF)

Overview - JSF Architecture

 Abstracts away from HTTP –

Developers don’t need to understand request-response cycle

 Abstracts away from HTML – –

Developers work with components, not markup Developers don’t need to decode requests

JavaServer Faces (JSF)

Overview - JSF Architecture

A typical JSF application consists of:  JSP pages containing UI Components encapsulated in JSP tag libraries: Core, HTML  A Navigation Model specified in the faces config.xml

 A set of Managed Beans which facilitate the UI logic of the application

JavaServer Faces (JSF)

Patterns

  JSF builds on the following patterns – MVC (Model View Controller) – – Observer Front Controller JSF addresses both – View : in terms of UIComponents – –

Focus

Controller : in terms of the Front Controller Model : in terms of Managed Beans – UIComponent model objects – NOT in terms of Business Model objects

JavaServer Faces (JSF)

Patterns – JSF implementation of MVC

JavaServer Faces (JSF)

UIComponents

JSF UI Components  Basic building blocks of a JSF application  Can represent simple to complex User Interface components ranging from a button or input field to a databound table.

 Can be associated to Model data objects through Value Binding  UI Components use helper objects: validators, converters, listeners/events

JavaServer Faces (JSF)

UIComponents - Examples

JavaServer Faces (JSF)

UIComponents

 Can be associated to Model data objects using an expression language (EL) that is similar to the JSP 2.0 EL (Value Binding) – – Instead of using ${...} constructs, the JSF EL prefers the #{...} syntax so that it can be used with both JSP 1.2 and JSP 2.0

This also allows JSF to evaluate (and reevaluate) the expressions any time is necessary, instead of letting the JSP container control the evaluation of the expressions

JavaServer Faces (JSF)

UIComponents - Binding UI Components to Model Data

UI Components and Value Binding to a Managed Bean

login.jsp

Login – A “ managed bean ” userid, password with fields:

JavaServer Faces (JSF)

UIComponents - Binding a button to an Action

A Command UI Component bound to an “action”

login.jsp

loginAction – A method from the Login managed bean.

Returns String: “ failure ” or something else or “ success ”

JSF Architecture

Renderer UI Component Expr. Language

   UIComponent is rendered through Renderer class Expression Language Value Binding is used to access managed bean also know as a "backing bean" Managed bean accesses J2EE persistence layer

JSF Page Managed bean

J2EE Persistence Layer / JDBC

RDBMS

JavaServer Faces (JSF)

JSF Lifecycle – FacesContext

 The FacesContext holds all contextual information necessary for processing a request and generating a reponse – – – – – Message Queue Current Component Tree Application configuration objects Life-Cycle flow control methods External Context (Typical Servlet container environment)

JavaServer Faces (JSF)

JSF Lifecycle - highlevel

1.

2.

3.

4.

5.

6.

When the user clicks the button, the Web browser sends the form data to the server The JSF framework convert and validates the form data The JSF framework returns the form to the user if there are any errors Otherwise, the valid form data is stored into the properties of the managed bean And JSF calls the action method that is bound to the clicked button JSF uses the outcome returned by the action method to determine what page should be displayed next

JavaServer Faces (JSF)

JSF Lifecycle – simple version

JSF LIFECYCLE

Client / Browser (Re)constitute Component Tree Apply Request Values Process Events, Validators Render Response Invoke Application Logic Update Model Values

JavaServer Faces (JSF)

JSF Lifecycle – more detailed version

JavaServer Faces (JSF)

JSF Lifecycle – Restore View Phase Label Submit ViewRoot UIForm

•

Register Event Listeners

•

Register Validators

•

Get/Set Appropriate RenderKit

•

Get/Set Locale UIInput UIGraphics UIOutput UICommand FacesContext

JavaServer Faces (JSF)

JSF Lifecycle – Apply Request Values Phase Update Component Tree with request values by issuing processDecodes() Registered Converters are called here Eventual errors are queued in the message queue of Faces Context ViewRoot UIForm During the process of updating Component values, Events may be queued either by UIComponents or associated Renders UIInput Any errors, call to renderResponse() -> Render Response Phase UIGraphics UIOutput FacesContext Event Queue Msg Queue UICommand After updating the component tree eventually queued events will be processed if designated for this phase

JavaServer Faces (JSF)

JSF Lifecycle – Process Validations Phase Make sure the Component Tree validates itself by issuing processValidates() ViewRoot Associated Validators are called here Eventual errors are queued in the message queue of Faces Context UIForm During the process of validating Component values, Events may be queued either by validators, UIComponents or associated Renders UIInput Any errors, call to renderResponse() -> Render Response Phase UIGraphics UIOutput FacesContext Event Queue Msg Queue UICommand After validating the component tree eventually queued events will be processed if designated for this phase

JavaServer Faces (JSF)

JSF Lifecycle – Update Model Values Phase Make sure the Component Tree updates itself with the backing model by issuing processUpdates() ViewRoot Eventual errors are queued in the message queue of Faces Context UIForm During the process of validating Component values, Events may be queued either by UIComponents or associated Renders UIInput Any errors, call to renderResponse() -> Render Response Phase UIGraphics UIOutput FacesContext Event Queue Msg Queue UICommand After updating the component Backing model eventually queued events will be processed if designated for this phase

JavaServer Faces (JSF)

JSF Lifecycle – Invoke Application Phase Make sure to process any ActionEvents that have been previously queued ViewRoot processApplication() UIForm All ActionEvents are processed here exception for those who have been marked immediate= ” true ” They are processed in the end of the Apply Request Values phase as we don ’ t want to have validations etc. executed UIInput UIGraphics FacesContext Event Queue Msg Queue ViewRoot UIOutput UICommand The default ActionListener passes the string returned from the action method to the JSF Default NavigationHandler which sets the ViewRoot according to Navigation rule

JavaServer Faces (JSF)

JSF Lifecycle – Render Response Phase Render the Component Tree by issuing encode() ViewRoot Registered Converters are called here to encode the type as a string UIForm UIInput UIGraphics UIOutput UICommand FacesContext Event Queue Msg Queue ViewRoot The state of the current Component Tree Is saved wither i request or in session

Demonstration

Develop a simple login Web Application based on JSF 1.

Layout pageflow 2.

3.

Define command action method for login button Define back button on failure page

Oracle ADF

Motivation – Challenges building J2EE apps

       Building J2EE applications can be complex.

Development time can be extensive.

Choosing and implementing appropriate design patterns can be overwhelming.

“Do it yourself” applications often repeat existing application code.

A large portion of “do it yourself” code is dedicated to common tasks.

The more code you write, the greater the chance of errors.

An application framework is needed.

Oracle ADF

Introduction

    Reduces the complexity of J2EE development by providing visual and declarative development Increases development productivity – – Less coding, more reuse Focus on the application, not the “plumbing” Provides a flexible and extensible environment by allowing multiple technology choices and development styles Encourages J2EE best practices by implementing standard J2EE design patterns

Oracle ADF

End-to-end J2EE Framework

  Implements standard J2EE best practices Model-View-Controller (MVC) design pattern

Rich Clients Web and Wireless Clients Controller Model Business Services

  Focus on the application, not the “plumbing” Consolidation and evolution of previous frameworks

Oracle ADF

Visual and Declarative Development

    End-to-end Application Development – J2EE & Services Visual – – – WYSIWYG editors UML modelers Structure pane Declarative – – Structure pane Property inspector Code View/Design View Synchronization – – No separate generation step - always synchronized Underlying code always accessible

Oracle ADF

J2EE Architecture (Simplified)

Enterprise JavaBeans ADF Business Components Web Services Java Objects

Clients Business Services Database

Oracle ADF

No Standard API for Client Binding ?

Enterprise JavaBeans ADF Business Components Web Services

JDBC

Java Objects

Clients Business Services Database

Oracle ADF

ADF Model

   Data Controls Data Binding JSR 227: “A Standard Data Binding & Data Access Facility for J2EE”

Business Component Web Service TopLink Model EJB Java Class

Oracle ADF

ADF Model Architecture

 Data control: describes the values and actions defined by the business service  Bindings: define how UI components use the values and actions in the data model

Client Bindings Data Control Business Service

Oracle ADF

ADF Model Architecture

  Decouples client and business service layers Client code contains no references to the business service – – Better design practice Code is more maintainable  Architecture can be extended to add more types of business services

ADF Business Components Simplifies and optimizes O/R mapping Simplifies and optimizes binding of View to logic Deployed either as a Local Model or as a remote Session Facade Flexible Deployment

ADF BC High-level architecture

HTML, Java, and XML Interfaces Task-Based App Service Application Data Presentation & Manipulation View Business Logic Entity Payment Plan Mgmt SlowPaying Customers Customer Bill Late Payments Payment

ADF BC Application View Objects Entity Objects

Top Customers Pending Orders Customer Order

Application Module Customer Ord Database

Start with database tables

Entity objects encapsulate business rules, logic, defaults in a consistent way for a table

View objects encapsulate SQL queries to project, join, filter, order data for external client interaction

Application module defines data model of view object usages for a complete application use case

UI works with the application module as backend business service

As you build new applications, underlying components are reusable

ADF – Productivity With Choice

Rich Client Web / Wireless

JSP JSF/ADF FACES View Struts/JSF Controller Model Java Classes EJB Session Beans Web Services Business Services JDBC TopLink Queries EJB Finders Components Query Object

Data Access

Java Classes EJB Entity Beans TopLink Mapping ADF Business Components

Persistent Business Objects

ADF Faces

       Built on top of JSF APIs A large component set >100 different components Far more advanced and interesting components – Partial-page rendering, etc.

ADF model support out-of-the-box ADF Faces skins (Look and Feel) ADF Databinding (JSR 227) Open Source per January 2006 – http://www.oracle.com/technology/products/jdev/ht docs/faq_adffaces_apache.html

ADF Faces

ADF Faces

 ADF Faces also includes many of the framework features most needed by JSF developers today: – File upload support is integrated at a component level – – – Client-side validation is automatically derived from Validators and Converters for an improved user experience A pageFlow scope makes it easier to pass values from one page to another A new hybrid state saving strategy gives developers the best of both client and server-side state saving

JSF Architecture with ADF

Renderer UI Component Expr. Language

    EL accesses “bindings” object to value bind UI components ADF “bindings” object is set through ADF Filter in web.xml

Bindings object accesses ADF Binding container, which then accesses DataControl Business Services provide access to various data sources

JSF Page ADF “ bindings ” Object Business Service 1 ADF Binding ADF DataControl Business Service 2 Business Service 3 RDBMS XML URL WS

Demonstration

Develop a more complex Web Application based on ADF Faces 1.

Create ADF Business Components model 2.

3.

4.

Layout flow Make Edit page Optional: Make Create page