KEMBAR78
Rich Web Interfaces with JSF2 - An Introduction | PDF
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

Rich Web Interfaces with JSF2 - An Introduction

  • 1.
    Rich Web Interfaces withJSF2 An Introduction ! Eduardo Mendonça November 2013 http://www.slideshare.net/eduardo_mendonca/rich-web-interfaces-with-jsf2-an-introduction
  • 2.
    It all beganwith HTML…
  • 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!
  • 5.
  • 6.
    Servlet … @WebServlet("/HelloWorldServlet") public class HelloWorldServletextends 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") publicclass 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 WorldJSF</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 HelloWorldBeanimplements 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.
  • 13.
    What is JSF? • AJava 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.
  • 15.
  • 16.
  • 17.
  • 18.