SlideShare uma empresa Scribd logo
1 de 18
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Semelhante a 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
 

Semelhante a 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
 

Último

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 

Último (20)

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 

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