SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
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
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
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
 

Kürzlich hochgeladen (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
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
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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...
 

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