Introduction toJSF

32
Introduction to JSF

TAGS:

description

Understand the basic concepts of Java Server Faces (JSF) Technology. by Serhiy Veryovka

Transcript of Introduction toJSF

Page 1: Introduction toJSF

Introduction toJSF

Page 2: Introduction toJSF

Objective

Understand the basic concepts of Java Server Faces (JSF) Technology.

Page 3: Introduction toJSF

Agenda

1. What is JSF and why JSF?2. Architecture Overview3. UI Component Model4. Summary of new features in JSF 25. Development Steps

Page 4: Introduction toJSF

JSF (JavaServer Faces) Framework Is…

A server side user interface component framework for Java technology-based web

applications

F-35 JSF Joint Strike Fighter

Page 5: Introduction toJSF

Ok, but what JSF really is?

A specification and reference implementation for a web application development framework

• Components• Events• Validators & converters• Navigation• Back-end-data integration• Localization• Error Handling

Page 6: Introduction toJSF

But why JSF?

• Standard• Huge vendor and industry support• MVC for web applications• Clean separation of roles• Easy to use• Extendable Component and Rendering

architecture• Support for client device independence

Page 7: Introduction toJSF

Agenda

1. What is JSF and why JSF?2. Architecture Overview3. UI Component Model4. Summary of new features in JSF 25. Development Steps

Page 8: Introduction toJSF

JSF Architecture

AppBackend

FrontCtrl

HTMLRenderer

kit

WMLRenderer

kit

DesktopBrowser

Phone

JSF Page

JSF Page

HTML

Server

WML

Page 9: Introduction toJSF

Request Processing Lifecycle Phases

RestoreView

ApplyRequestValues

ProcessValidations

Request

UpdateModel Values

InvokeApplication

RenderResponse

Response

Component tree retrieved

• Submitted form values stored in component

• Component values are converted

Component valuesvalidated

Component valuesbound to backing bean

• Events handled• Methods invoked• Navigation calculated

Component values are updated from backing bean properties

System-level phase

Application-level phase

Page 10: Introduction toJSF

Agenda

1. What is JSF and why JSF?2. Architecture Overview3. UI Component Model4. Summary of new features in JSF 25. Development Steps

Page 11: Introduction toJSF

User Interface Component Model

• UI components• Event handling model• Conversion and Validation model• Rendering model• Page navigation support

Page 12: Introduction toJSF

UI Components

• UIComponent/UIComponentBase– Base class for all user interface components

• Standard UIComponent Subclasses– UICommand, UIForm, UIOutput– UIGraphic, UIInput, UIPanel, UIParameter– UISelectBoolean, UISelectMany, UISelectOne

• Example <h:inputText id="Key" value="#{message.key}" required="true"

rendered="#{resBean.editModeRow}"/>

Page 13: Introduction toJSF

Validators

• Validators – pluggable validation on UIInput values• JSF provides implementation for common classes

(String reg. exp. validator, decimal range validator etc.)• Can apply one or more per component• Easy to create custom validators

• Implement interface and • public void validate(FacesContext context, UIComponent

component, Object value) throws ValidatorException;

• Example <h:inputText value="#{message.key}" required="true" rendered="#{resBean.editModeRow}“>

<f:validateLength maximum="15" minimum="6"/></h:inputText>

Page 14: Introduction toJSF

Converters

• Converters – pluggable conversion mechanism• JSF provides implementation for common classes

(Integer, Date etc.)• Easy to create custom converters• Implement interface and

• Output: Object to String• Input: String to Object

• Example <h:inputText id="Key" value="#{testBean.today}"

converter=“CustomDateConverter"/>

Page 15: Introduction toJSF

Events and Listeners

• Standard events and listeners• ActionEvent—UICommand component activated by

the user• ValueChangedEvent—UIInput component whose

value was just changed• System events• Possibility to work with PhaseEvents and

PhaseListeners• Global and component system events -

UIComponent.subscribeToEvent() or <f:event> tag.

Page 16: Introduction toJSF

Navigation Model

• Application developer responsibility• Defined in Application configuration file (faces-

config.xml)• Or implicitly (since JSF 2.0)

• Navigation rules• Determine which page to go• Navigation case

Page 17: Introduction toJSF

Navigation Model Sample

<navigation-rule><from-view-id>/wizard/item.jsp</from-view-id><navigation-case><from-outcome>wizardIndex</from-outcome><to-view-id>/wizerd/start.jsp</to-view-id></navigation-case><navigation-case><from-outcome>goBack</from-outcome><to-view-id>/wizard/cat3.jsp</to-view-id></navigation-case>

</navigation-rule>

Page 18: Introduction toJSF

Agenda

1. What is JSF and why JSF?2. Architecture Overview3. UI Component Model4. Summary of new features in JSF 25. Development Steps

Page 19: Introduction toJSF

What’s new?

• Facelets View Declaration Language• Annotation based configuration• Standardized Ajax• Implicit Navigation• Scopes (conversation, view, flash, custom)• Composite Components• Bean Validation Support• Error Handling• more - resource loading, improved GET support, behaviors,

tree visiting, system events and many more (out of scope)

Page 20: Introduction toJSF

Facelets, Annotations, Scopes

• Facelets are used by default instead of JSP.• Annotation based configuration• @ManagedBean, @...Scoped, @FacesConverter,

@FacesValidator etc.• New scopes• View – state is preserved for the view (URL).• Conversation and Flash.• Custom

Page 21: Introduction toJSF

Standardized Ajax

• Two ways to use• JavaScript API - jsf.ajax.request()• f:ajax tag

• Examples<h:selectOneMenu value="#{dynamicProperties.targetClass}" >

<f:ajax event="change" execute="@form" render="@form" /><f:selectItems value="#{dynamicProperties.targetClasses}" />

</h:selectOneMenu>

<h:commandButton value="Count"onclick="jsf.ajax.request(this.id, event, {execute: this.id, render: 'out1'}); return false;"/>

Page 22: Introduction toJSF

Composite Components

• Define<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite"><h:head></h:head><h:body>

<composite:interface> <composite:attribute name="who"/></composite:interface>

<composite:implementation><h:outputText value="Hello, #{cc.attrs.who}!"/>

</composite:implementation> </h:body></html>

• Use<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html" xmlns:greet="http://java.sun.com/jsf/composite/greet">

<greet:hello who="World"/> </html>

Page 23: Introduction toJSF

Navigation, Bean Validation Support, Error Handling

• Implicit Navigation.1. check for explicit navigation rules2. checks to whether the action outcome corresponds to a

view id. If yes navigate to view.

• Bean Validation Support• OOTB JSR 303 support (@NotNull, @Length, etc.)

• Error Handling• ExceptionHandler API for “global” or “central” exception

handling activities

Page 24: Introduction toJSF

Agenda

1. What is JSF and why JSF?2. Architecture Overview3. UI Component Model4. Summary of new features in JSF 25. Development Steps

Page 25: Introduction toJSF

Steps in Development Process

1. Develop model objects which hold the data2. Register model objects (managed bean) in

faces-config.xml or use annotations3. Create Pages using UI component and core

tags4. Define Page Navigation in faces-config.xml or

use implicit navigation5. Configure web.xml

Page 26: Introduction toJSF

Step 1:Develop model Objects(Managed Bean)

• The model (M) in MVC• A regular JavaBeans with read/write properties• May contain application methods and event

handlers• Use to hold data from a UI (page)• Creation and lifetime is managed by JSF runtime• application, session, request

• JSF keeps the bean's data in sync with the UI• data binding by means of EL

Page 27: Introduction toJSF

Step 2:Register model objects@ManagedBean(name = "appPreferences")@RequestScopedpublic class AppPreferences {

@ManagedProperty("#{persistenceThemeManager}")private ThemeManager themeManager;

private String theme;

// getters and setterspublic List<SelectItem> getThemesSelectItems() …

public void saveTheme() {themeManager.saveTenantTheme(selectedTheme);

}}

Register this class as a request scoped managed bean

Action handler

Model’s data

Page 28: Introduction toJSF

Step 3: Create JSF Page

Page 29: Introduction toJSF

Binding UI to Managed Bean

<h:inputText value="#{userEditBean.firstName}" required="true" />

@ManagedBean(name = "userEditBean")@SessionScopedpublic class EditUserBean {

public String getFirstName() {…

}

public void setFirstName(String firstName) {…

}

editUser.xhtml

EditUserBean.java

Page 30: Introduction toJSF

Step 4: Define Page Navigation Rules

<navigation-rule><from-view-id>/wizard/item.jsp</from-view-id><navigation-case>

<from-outcome>showPriceRecs</from-outcome>

<to-view-id>/wizard/pricesResult.jsp</to-view-id></navigation-case><navigation-case>

<from-outcome>goBack</from-outcome><to-view-id>/wizard/start.jsp</to-view-id></navigation-case>

</navigation-rule>

<h:commandButton action="goBack" image="../images/back-arrow-small.png"/> <h:commandButton value="Lookup Prices" action="#{multiCategorySelectBackingBean.lookupPrices}"/>

public String lookupPrices() {...

return "showPriceRecs";}

Web Page

Backing Bean

faces-config.xml

Page 31: Introduction toJSF

Step 5: Configure (web.xml)• Add<servlet>

<servlet-name>Faces Servlet</servlet-name><servlet-class>javax.faces.webapp.FacesServlet</servlet-class><load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping><servlet-name>Faces Servlet</servlet-name><url-pattern>*.jsf</url-pattern>

</servlet-mapping>

• May be not necessary with Servlets 3.0 compliant container

Page 32: Introduction toJSF

Questions?


CrowPiwithMineCraftPiEdition · 2 CrowPiwithMineCraftPiEdition-Introduction-MinecraftPiEdition-Introduction-Whatyouwillneed-Introduction-RunningMinecraft-Introduction ...

CrowPiwithMineCraftPiEdition · 2 CrowPiwithMineCraftPiEdition-Introduction-MinecraftPiEdition-Introduction-Whatyouwillneed-Introduction-RunningMinecraft-Introduction ...

Introduction - University of Cambridge · Introduction. Introduction

Introduction - University of Cambridge · Introduction. Introduction

Systems Analysis I introduction I introduction. 2Systems Analysis - Introduction Contents Introduction Introduction 3 classic phases 3 classic phases.

Systems Analysis I introduction I introduction. 2Systems Analysis - Introduction Contents Introduction Introduction 3 classic phases 3 classic phases.

1 Introduction t 1. Introduction to Nanotechnology - UFAMhome.ufam.edu.br/berti/nanomateriais/Introduction to Nanotechnology... · Introduction t 1. Introduction to Nanotechnology

1 Introduction t 1. Introduction to Nanotechnology - UFAMhome.ufam.edu.br/berti/nanomateriais/Introduction to Nanotechnology... · Introduction t 1. Introduction to Nanotechnology

Introduction Introduction Introduction Introduction.

Introduction Introduction Introduction Introduction.

Introduction to Logic Introduction

Introduction to Logic Introduction

Introduction to Elasticsearch and Logstash. - KIT · PDF fileOutline 1 Introduction 2 Logstash Introduction 3 Elasticsearch Introduction 4 Conclusions Introduction Logstash ElasticsearchConclusions

Introduction to Elasticsearch and Logstash. - KIT · PDF fileOutline 1 Introduction 2 Logstash Introduction 3 Elasticsearch Introduction 4 Conclusions Introduction Logstash ElasticsearchConclusions

An Introduction for An Introduction for Introduction for ......An Introduction for An Introduction for Introduction for TeachersTeachersTeachers . exChange, Blackburn Cathedral’s

An Introduction for An Introduction for Introduction for ......An Introduction for An Introduction for Introduction for TeachersTeachersTeachers . exChange, Blackburn Cathedral’s

INTRODUCTIONS (LEADS) Creative introduction Action introduction Dialogue introduction Personal introduction Question introduction Quotation introduction.

INTRODUCTIONS (LEADS) Creative introduction Action introduction Dialogue introduction Personal introduction Question introduction Quotation introduction.

§1.1.1 INTRODUCTION: 1. INTRODUCTION

§1.1.1 INTRODUCTION: 1. INTRODUCTION

1. INTRODUCTION 1.1 Introduction

1. INTRODUCTION 1.1 Introduction

Module: Introduction...Module: Introduction Page: Introduction CC0.1 Introduction Please give a general description and introduction to your organization. Providing electrical, hydraulic

Module: Introduction...Module: Introduction Page: Introduction CC0.1 Introduction Please give a general description and introduction to your organization. Providing electrical, hydraulic

Introduction to Transducers, Introduction to Transducers ... on... · Introduction to Transducers, Introduction to Transducers, Sensors and ActuatorsSensors and Actuators Introduction

Introduction to Transducers, Introduction to Transducers ... on... · Introduction to Transducers, Introduction to Transducers, Sensors and ActuatorsSensors and Actuators Introduction

1. Introduction 10 - therackonline.com€¦ · 1. Introduction 10 - therackonline.com ... Introduction)

1. Introduction 10 - therackonline.com€¦ · 1. Introduction 10 - therackonline.com ... Introduction)

1. INTRODUCTION INTRODUCTION - Deusto

1. INTRODUCTION INTRODUCTION - Deusto

1. INTRODUCTION • INTRODUCTION • EINFÜHRUNG • INLEIDING • INTRODUCCIÓN … · 2016-12-16 · 1. INTRODUCTION • INTRODUCTION • EINFÜHRUNG • INLEIDING • INTRODUCCIÓN

1. INTRODUCTION • INTRODUCTION • EINFÜHRUNG • INLEIDING • INTRODUCCIÓN … · 2016-12-16 · 1. INTRODUCTION • INTRODUCTION • EINFÜHRUNG • INLEIDING • INTRODUCCIÓN

Optimisation des Requêtes. Introduction Introduction.

Optimisation des Requêtes. Introduction Introduction.

Introduction to introduction to introduction to … Optimization

Introduction to introduction to introduction to … Optimization

1. Introduction 1. Introduction 1. Introduction 1 ... · Introduction 1. Introduction 1. Introduction 1. Introduction 6061B0242401. The Phone Screen From the Phone screen, you can

1. Introduction 1. Introduction 1. Introduction 1 ... · Introduction 1. Introduction 1. Introduction 1. Introduction 6061B0242401. The Phone Screen From the Phone screen, you can

Industry introduction Industry introduction Company introduction Company introduction Production introduction Display time time content.

Industry introduction Industry introduction Company introduction Company introduction Production introduction Display time time content.