J 2 EE Web Development Karsten Schulz TerpNielsen

J 2 EE Web Development Karsten Schulz Terp-Nielsen Nordic Solution Manager, FMW Oracle Denmark

Agenda Ÿ J 2 EE Web Application Technologies – Motivation to Web Development Ÿ Web Development with JSF Ÿ Application Developer Framework (ADF) Ÿ ADF Faces

J 2 EE Web Application Development Technologies Ÿ Java Servlet 2. 4 (JSR 154) Ÿ Java. Server Pages 2. 0 (JSR 245) Ÿ Java. Server Pages Standard Tag Library (JSR 52) Ÿ Java. Server Faces 1. 2 (JSR 252)

Motivation to Web Development Model 1 Architecture Ÿ Browser access JSP pages – JSPs access Java. Beans 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 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 Controller HTTP Request HTTP Response Servlet User Actions JSP State Change Java. Bean View Selection State Query JDBC Enterprise Java. Bean Change Notification View Model DB Database

Motivation to Web Development Model-View-Controller ~ Model 2 Applying MVC to a Page Flow Web Server Servlet/JSP Controller

What is Java. Server Faces? Ÿ Standard J 2 EE 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

Java. Server 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 J 2 EE web application development

Java. Server Faces (JSF) Overview - Evolution Ÿ JSF is a natural evolution of J 2 EE Web development Java. Server Pages Again, too low level… Finally, a comprehensive, Not standard… standard API for J 2 EE Web applications! Easier but…scriptlets Servlet API Too low level… JSTL Custom Tag Libraries Java. Server Faces

Java. Server Faces (JSF) Overview - JSF Architecture Phone/ PDA HTML render kit Front Controller HTML Browser Page Backend Code WML render kit Page

Java. Server 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

Java. Server 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 facesconfig. xml Ÿ A set of Managed Beans which facilitate the UI logic of the application

Java. Server Faces (JSF) Patterns Ÿ JSF builds on the following patterns – – – MVC (Model View Controller) Observer Front Controller Ÿ JSF addresses both – – – Focus View : in terms of UIComponents Controller: in terms of the Front Controller Model : in terms of Managed Beans – UIComponent model objects – NOT in terms of Business Model objects

Java. Server Faces (JSF) Patterns – JSF implementation of MVC

Java. Server 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

Java. Server Faces (JSF) UIComponents - Examples

Java. Server 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

Java. Server Faces (JSF) UIComponents - Binding UI Components to Model Data UI Components and Value Binding to a Managed Bean <h: Input. Text value=#{Login. userid} /> <h: Input. Secret value=#{Login. password} /> login. jsp Login – A “managed bean” with fields: userid, password

Java. Server Faces (JSF) UIComponents - Binding a button to an Action A Command UI Component bound to an “action” <h: command. Button action="#{Login. login. Action}"/> login. jsp login. Action – A method from the Login managed bean. Returns String: “failure” or “success” or something else

JSF Architecture Renderer UI Component Ÿ 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 J 2 EE persistence layer JSF Page Expr. Language Managed bean J 2 EE Persistence Layer / JDBC RDBMS

Java. Server Faces (JSF) JSF Lifecycle – Faces. Context Ÿ The Faces. Context 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)

Java. Server 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 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

Java. Server Faces (JSF) JSF Lifecycle – simple version JSF LIFECYCLE Client / Browser (Re)constitute Component Tree Render Response Apply Request Values Invoke Application Logic Process Events, Validators Update Model Values

Java. Server Faces (JSF) JSF Lifecycle – more detailed version

Java. Server Faces (JSF) JSF Lifecycle – Restore View Phase View. Root Label Submit UIInput UIForm UIGraphics UIOutput Faces. Context • Register Event Listeners • Register Validators • Get/Set Appropriate Render. Kit • Get/Set Locale UICommand

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

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

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

Java. Server Faces (JSF) JSF Lifecycle – Invoke Application Phase Make sure to process any Action. Events that have been previously queued View. Root process. Application() UIForm UIInput UIGraphics Faces. Context Event Queue Msg Queue View. Root UIOutput All Action. Events 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 UICommand The default Action. Listener passes the string returned from the action method to the JSF Default Navigation. Handler which sets the View. Root according to Navigation rule

Java. Server Faces (JSF) JSF Lifecycle – Render Response Phase Render the Component Tree by issuing View. Root encode() Registered Converters are called here to encode UIForm the type as a string UIInput UIGraphics Faces. Context Event Queue Msg Queue View. Root UIOutput UICommand 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. 2. 3. Layout pageflow Define command action method for login button Define back button on failure page

Oracle ADF Motivation – Challenges building J 2 EE apps Ÿ Building J 2 EE 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 J 2 EE 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 J 2 EE best practices by implementing standard J 2 EE design patterns

Oracle ADF End-to-end J 2 EE Framework Ÿ Implements standard J 2 EE 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 – J 2 EE & 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 J 2 EE Architecture (Simplified) Enterprise Java. Beans ADF Business Components Web Services Java Objects Clients Business Services Database

Oracle ADF No Standard API for Client Binding Enterprise Java. Beans ? ADF Business Components JDBC Web Services Java Objects Clients Business Services Database

Oracle ADF Model Ÿ Data Controls Ÿ Data Binding Ÿ JSR-227: “A Standard Data Binding & Data Business Access Facility for J 2 EE” Component Web Service Top. Link Model EJB Java Class

Oracle ADF Model Architecture Ÿ Data control: describes the values and actions defined by the business service Ÿ Bindings: define how UI Client components use the values and actions in the Bindings data model Data Control Business Service

Oracle 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 L M X Application Payment Plan Mgmt Data Presentation & Manipulation Business Logic View Entity Slow. Paying Customers Customer Bill Late Payments Payment

ADF BC Application View Objects Top Customers Pending Orders Entity Objects Customer Order Application Module 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 Swing / JClient JSP JSF/ADF FACES ADF UIX Controller Struts/JSF ADF Metadata Services ADF Bindings Model ADF Data Control Java Classes JDBC EJB Session Beans Top. Link Queries Java Classes ADF Business Components Service Object EJB Finders EJB Entity Beans Top. Link Mapping View Web Services ADF Business Components Query Object ADF Business Components Entity Object Data Access Persistent Business Objects Business Services

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 page. Flow 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 Ÿ 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 Data. Control Ÿ Business Services provide access to various data sources Renderer UI Component JSF Page Expr. Language ADF “bindings” Object ADF Binding ADF Data. Control Business Service 1 Business Service 2 RDBMS Business Service 3 XML URL WS

Demonstration Develop a more complex Web Application based on ADF Faces 1. 2. 3. 4. Create ADF Business Components model Layout flow Make Edit page Optional: Make Create page