SlideShare a Scribd company logo
1 of 18
Download to read offline
Rich Web Interfaces
with JSF2
An Introduction
!

Eduardo Mendonça
November 2013

http://www.slideshare.net/eduardo_mendonca/rich-web-interfaces-with-jsf2-an-introduction
It all began with
HTML…
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN”	
	
	
	
	
"http://www.w3.org/TR/html4/loose.dtd">	
<HTML>	
<HEAD><TITLE>Hello World HTML</TITLE></HEAD>	
<BODY>	
<H1>Hello World!</H1>	
<H2>Today is November 14, 2013</H2>	
<H2>The season is Fall!</H2>	
</BODY>	
</HTML>	

!
!

*
Static!
Warning!
Code Ahead…
Servlet
…	
@WebServlet("/HelloWorldServlet")	
public class HelloWorldServlet extends HttpServlet {	
	
…	
	
public void doGet(HttpServletRequest request, HttpServletResponse response)	
	
	
	
throws ServletException, IOException {	
	
	
response.setContentType("text/html");	
	
	
PrintWriter out = response.getWriter();	
	
	
out.println("<HTML>");	
	
	
out.println("<HEAD><TITLE>HelloWorldServlet</TITLE></HEAD>");	
	
	
out.println("<BODY>");	
	
	
out.println("<H1>Hello World!</H1>");	
	
	
out.println("<H2>Today is " + getTodaysDate() + "</H2>");	
	
	
out.println("<H2>The season is " + getTodaysSeason() + "</H2>");	
	
}	
	
	
	
protected String getTodaysDate() {	
	
	
DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy");	
	
	
Date date = new Date();	
	
	
return dateFormat.format(date);	
	
}	
	
	
	
	
protected String getTodaysSeason() {	
	
	
Date date = new Date();	
	
	
return BackEnd.getSeasonAsString(date);	
	
}	
	
…	
}

HTML inside code!
JSP
<%@ page language=“java"	
	
	
	
contentType="text/html; charset=US-ASCII"	
	
	
	
pageEncoding="US-ASCII"%>	
<%@ page import=“ca.mendonca.BackEnd,	
	
	
	
	
java.util.Date,	
	
	
	
	
java.text.DateFormat,	
	
	
	
	
java.text.SimpleDateFormat" %>	
<!DOCTYPE html PUBLIC 	
"-//W3C//DTD HTML 4.01 Transitional//EN”	
	
	
	
	
	
"http://www.w3.org/TR/html4/loose.dtd">	
<HTML>	
<HEAD><TITLE>Hello World JSP</TITLE></HEAD>	
<BODY>	
<H1>Hello World!</H1>	
<%	
	
DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy");	
	
Date date = new Date();	
	
String todaysDate = dateFormat.format(date);	
%>	
<H2>Today is <%=todaysDate%></H2>	
<%	
	
String todaysSeason = BackEnd.getSeasonAsString(date);	
%>	
<H2>The season is <%=todaysSeason%>!</H2>	
</BODY>	
</HTML>	

Code inside HTML!

!
!
A better JSP…
<%@ page language="java" contentType="text/html; charset=US-ASCII"	
pageEncoding="US-ASCII"%>	
<!DOCTYPE html PUBLIC 	
"-//W3C//DTD HTML 4.01 Transitional//EN"	
	
	
	
	
	
	
"http://www.w3.org/TR/html4/loose.dtd">	
<HTML>	
<HEAD><TITLE>Better Hello World JSP</TITLE></HEAD>	
<BODY>	
<H1>Hello World!</H1>	
<H2>Today is ${todaysDate}</H2>	
<H2>The season is ${todaysSeason}!</H2>	
</BODY>	
</HTML>
…needs a Servlet
…	
@WebServlet("/BetterHelloWorldServlet")	
public class BetterHelloWorldServlet extends HttpServlet {	
	
private static final long serialVersionUID = 1L;	
	
…	
	
public void doGet(HttpServletRequest request, HttpServletResponse response)	
	
	
	
throws ServletException, IOException {	
	
	
	
request.setAttribute("todaysDate", getTodaysDate());	
	
	
request.setAttribute("todaysSeason", getTodaysSeason());	
	
	
	
request.getRequestDispatcher("BetterHelloWorld.jsp").forward(request, response);	
	
}	
	
	
	
protected String getTodaysDate() {	
	
	
DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy");	
	
	
Date date = new Date();	
	
	
return dateFormat.format(date);	
	
}	
	
	
	
	
protected String getTodaysSeason() {	
	
	
Date date = new Date();	
	
	
return BackEnd.getSeasonAsString(date);	
	
}	
	
…	
}
JSF2
<html lang="en"	
xmlns="http://www.w3.org/1999/xhtml"	
xmlns:h="http://java.sun.com/jsf/html">	
<h:head>	
<title>Hello World JSF</title>	
</h:head>	
<h:body>	
	
<h1>Hello World!</h1>	
	
	
<h2>Today is #{helloBean.todaysDate} </h2>	
	
	
<h2>The season is #{helloBean.todaysSeason}!</h2>	
</h:body>	
</html>
JSF2
…	
@Named("helloBean")	
@RequestScoped	
public class HelloWorldBean implements Serializable {	
	
…	
	
public String getTodaysDate() {	
	
	
DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy");	
	
	
Date date = new Date();	
	
	
return dateFormat.format(date);	
	
}	 	
	
	
	
public String getTodaysSeason() {	
	
	
Date date = new Date();	
	
	
return BackEnd.getSeasonAsString(date);	
	
}	
}

POJO, yeah!!
Standard Servlet (FacesServlet)!
Standard Lifecycle
OK, is that it?
What is JSF?
•

A Java specification for building component-based
user interfaces for web applications


•

Server-side components


•

Component: look + behaviour


•

High productivity for building rich web interfaces


•

Model-View-Controller (MVC)


•

Part of the JEE 6 Specification (standard framework) 
Stack
Component
Libraries
http://showcase.richfaces.org
http://http://www.primefaces.org/showcase/ui/home.jsf
Demo

More Related Content

What's hot

Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScriptjeresig
 
Designers Guide To jQuery
Designers Guide To jQueryDesigners Guide To jQuery
Designers Guide To jQuerySteve Krueger
 
web design and jQuery introduction in persian
web design and jQuery introduction in persianweb design and jQuery introduction in persian
web design and jQuery introduction in persianAhmad Badpey
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentationMevin Mohan
 
Lecture8 php page control by okello erick
Lecture8 php page control by okello erickLecture8 php page control by okello erick
Lecture8 php page control by okello erickokelloerick
 
faster frontend development with textmate
faster frontend development with textmatefaster frontend development with textmate
faster frontend development with textmateMarc Tobias Kunisch
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
 
16. CodeIgniter stergerea inregistrarilor
16. CodeIgniter stergerea inregistrarilor16. CodeIgniter stergerea inregistrarilor
16. CodeIgniter stergerea inregistrarilorRazvan Raducanu, PhD
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Adrian Olaru
 
Đa Hoa Cương Cao Cấp, Đá granite nhân tạo
Đa Hoa Cương Cao Cấp, Đá granite nhân tạoĐa Hoa Cương Cao Cấp, Đá granite nhân tạo
Đa Hoa Cương Cao Cấp, Đá granite nhân tạoTrong Nguyen
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Ayes Chinmay
 

What's hot (20)

Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScript
 
Designers Guide To jQuery
Designers Guide To jQueryDesigners Guide To jQuery
Designers Guide To jQuery
 
History frame
History frameHistory frame
History frame
 
web design and jQuery introduction in persian
web design and jQuery introduction in persianweb design and jQuery introduction in persian
web design and jQuery introduction in persian
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Lecture8 php page control by okello erick
Lecture8 php page control by okello erickLecture8 php page control by okello erick
Lecture8 php page control by okello erick
 
Java script
Java scriptJava script
Java script
 
Cookies
CookiesCookies
Cookies
 
faster frontend development with textmate
faster frontend development with textmatefaster frontend development with textmate
faster frontend development with textmate
 
JQuery
JQueryJQuery
JQuery
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
One Size Fits All
One Size Fits AllOne Size Fits All
One Size Fits All
 
16. CodeIgniter stergerea inregistrarilor
16. CodeIgniter stergerea inregistrarilor16. CodeIgniter stergerea inregistrarilor
16. CodeIgniter stergerea inregistrarilor
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Php cookies
Php cookiesPhp cookies
Php cookies
 
Remove Quick Reference Section from Cognos
Remove Quick Reference Section from CognosRemove Quick Reference Section from Cognos
Remove Quick Reference Section from Cognos
 
Mi vida - Hefziba
Mi vida - HefzibaMi vida - Hefziba
Mi vida - Hefziba
 
Php sessions
Php sessionsPhp sessions
Php sessions
 
Đa Hoa Cương Cao Cấp, Đá granite nhân tạo
Đa Hoa Cương Cao Cấp, Đá granite nhân tạoĐa Hoa Cương Cao Cấp, Đá granite nhân tạo
Đa Hoa Cương Cao Cấp, Đá granite nhân tạo
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
 

Similar to Rich Web Interfaces with JSF2 - An Introduction

05 status-codes
05 status-codes05 status-codes
05 status-codessnopteck
 
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and ProfitjQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and ProfitDaniel Cousineau
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Vladimir Vorontsov - Splitting, smuggling and cache poisoning come back
Vladimir Vorontsov - Splitting, smuggling and cache poisoning come backVladimir Vorontsov - Splitting, smuggling and cache poisoning come back
Vladimir Vorontsov - Splitting, smuggling and cache poisoning come backDefconRussia
 
10 java script projects full source code
10 java script projects full source code10 java script projects full source code
10 java script projects full source codeLaurence Svekis ✔
 
Zotero Framework Translators
Zotero Framework TranslatorsZotero Framework Translators
Zotero Framework Translatorsadam3smith
 
May 2010 - RestEasy
May 2010 - RestEasyMay 2010 - RestEasy
May 2010 - RestEasyJBug Italy
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)Christian Rokitta
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享Chia Wei Tsai
 
Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web developmentJohannes Brodwall
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobilePablo Garrido
 

Similar to Rich Web Interfaces with JSF2 - An Introduction (20)

05 status-codes
05 status-codes05 status-codes
05 status-codes
 
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and ProfitjQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Vladimir Vorontsov - Splitting, smuggling and cache poisoning come back
Vladimir Vorontsov - Splitting, smuggling and cache poisoning come backVladimir Vorontsov - Splitting, smuggling and cache poisoning come back
Vladimir Vorontsov - Splitting, smuggling and cache poisoning come back
 
10 java script projects full source code
10 java script projects full source code10 java script projects full source code
10 java script projects full source code
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
React
React React
React
 
Zotero Framework Translators
Zotero Framework TranslatorsZotero Framework Translators
Zotero Framework Translators
 
RESTEasy
RESTEasyRESTEasy
RESTEasy
 
May 2010 - RestEasy
May 2010 - RestEasyMay 2010 - RestEasy
May 2010 - RestEasy
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
5.node js
5.node js5.node js
5.node js
 
KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享KSDG-iSlide App 開發心得分享
KSDG-iSlide App 開發心得分享
 
Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web development
 
Human Talks Riot.js
Human Talks Riot.jsHuman Talks Riot.js
Human Talks Riot.js
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery Mobile
 

Recently uploaded

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 

Recently uploaded (20)

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Rich Web Interfaces with JSF2 - An Introduction

  • 1. Rich Web Interfaces with JSF2 An Introduction ! Eduardo Mendonça November 2013 http://www.slideshare.net/eduardo_mendonca/rich-web-interfaces-with-jsf2-an-introduction
  • 2. It all began with HTML…
  • 3.
  • 4. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD><TITLE>Hello World HTML</TITLE></HEAD> <BODY> <H1>Hello World!</H1> <H2>Today is November 14, 2013</H2> <H2>The season is Fall!</H2> </BODY> </HTML> ! ! * Static!
  • 6. Servlet … @WebServlet("/HelloWorldServlet") public class HelloWorldServlet extends HttpServlet { … public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<HTML>"); out.println("<HEAD><TITLE>HelloWorldServlet</TITLE></HEAD>"); out.println("<BODY>"); out.println("<H1>Hello World!</H1>"); out.println("<H2>Today is " + getTodaysDate() + "</H2>"); out.println("<H2>The season is " + getTodaysSeason() + "</H2>"); } protected String getTodaysDate() { DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy"); Date date = new Date(); return dateFormat.format(date); } protected String getTodaysSeason() { Date date = new Date(); return BackEnd.getSeasonAsString(date); } … } HTML inside code!
  • 7. JSP <%@ page language=“java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%> <%@ page import=“ca.mendonca.BackEnd, java.util.Date, java.text.DateFormat, java.text.SimpleDateFormat" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD><TITLE>Hello World JSP</TITLE></HEAD> <BODY> <H1>Hello World!</H1> <% DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy"); Date date = new Date(); String todaysDate = dateFormat.format(date); %> <H2>Today is <%=todaysDate%></H2> <% String todaysSeason = BackEnd.getSeasonAsString(date); %> <H2>The season is <%=todaysSeason%>!</H2> </BODY> </HTML> Code inside HTML! ! !
  • 8. A better JSP… <%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD><TITLE>Better Hello World JSP</TITLE></HEAD> <BODY> <H1>Hello World!</H1> <H2>Today is ${todaysDate}</H2> <H2>The season is ${todaysSeason}!</H2> </BODY> </HTML>
  • 9. …needs a Servlet … @WebServlet("/BetterHelloWorldServlet") public class BetterHelloWorldServlet extends HttpServlet { private static final long serialVersionUID = 1L; … public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("todaysDate", getTodaysDate()); request.setAttribute("todaysSeason", getTodaysSeason()); request.getRequestDispatcher("BetterHelloWorld.jsp").forward(request, response); } protected String getTodaysDate() { DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy"); Date date = new Date(); return dateFormat.format(date); } protected String getTodaysSeason() { Date date = new Date(); return BackEnd.getSeasonAsString(date); } … }
  • 10. JSF2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>Hello World JSF</title> </h:head> <h:body> <h1>Hello World!</h1> <h2>Today is #{helloBean.todaysDate} </h2> <h2>The season is #{helloBean.todaysSeason}!</h2> </h:body> </html>
  • 11. JSF2 … @Named("helloBean") @RequestScoped public class HelloWorldBean implements Serializable { … public String getTodaysDate() { DateFormat dateFormat = new SimpleDateFormat("MMMMM dd, yyyy"); Date date = new Date(); return dateFormat.format(date); } public String getTodaysSeason() { Date date = new Date(); return BackEnd.getSeasonAsString(date); } } POJO, yeah!! Standard Servlet (FacesServlet)! Standard Lifecycle
  • 12. OK, is that it?
  • 13. What is JSF? • A Java specification for building component-based user interfaces for web applications • Server-side components • Component: look + behaviour • High productivity for building rich web interfaces • Model-View-Controller (MVC) • Part of the JEE 6 Specification (standard framework) 
  • 14. Stack
  • 18. Demo