Your SlideShare is downloading. ×
0
Rich Web Interfaces
with JSF2
An Introduction
!

Eduardo Mendonça
November 2013

http://www.slideshare.net/eduardo_mendonc...
It all began with
HTML…
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN”	
	
	
	
	
"http://www.w3.org/TR/html4/loose.dtd">	
<HTM...
Warning!
Code Ahead…
Servlet
…	
@WebServlet("/HelloWorldServlet")	
public class HelloWorldServlet extends HttpServlet {	
	
…	
	
public void doG...
JSP
<%@ page language=“java"	
	
	
	
contentType="text/html; charset=US-ASCII"	
	
	
	
pageEncoding="US-ASCII"%>	
<%@ page i...
A better JSP…
<%@ page language="java" contentType="text/html; charset=US-ASCII"	
pageEncoding="US-ASCII"%>	
<!DOCTYPE htm...
…needs a Servlet
…	
@WebServlet("/BetterHelloWorldServlet")	
public class BetterHelloWorldServlet extends HttpServlet {	
	...
JSF2
<html lang="en"	
xmlns="http://www.w3.org/1999/xhtml"	
xmlns:h="http://java.sun.com/jsf/html">	
<h:head>	
<title>Hell...
JSF2
…	
@Named("helloBean")	
@RequestScoped	
public class HelloWorldBean implements Serializable {	
	
…	
	
public String g...
OK, is that it?
What is JSF?
•

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


•

Server-side com...
Stack
Component
Libraries
http://showcase.richfaces.org
http://http://www.primefaces.org/showcase/ui/home.jsf
Demo
Rich Web Interfaces with JSF2 - An Introduction
Upcoming SlideShare
Loading in...5
×

Rich Web Interfaces with JSF2 - An Introduction

147

Published on

A very basic introduction to JSF2, with a bit of contextualization on Servlets and JSPs, following a very basic example from HTML to Servlet to JSP to JSF.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
147
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Rich Web Interfaces with JSF2 - An Introduction"

  1. 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. 2. It all began with HTML…
  3. 3. 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!
  4. 4. Warning! Code Ahead…
  5. 5. 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!
  6. 6. 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! ! !
  7. 7. 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>
  8. 8. …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); } … }
  9. 9. 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>
  10. 10. 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
  11. 11. OK, is that it?
  12. 12. 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) 
  13. 13. Stack
  14. 14. Component Libraries
  15. 15. http://showcase.richfaces.org
  16. 16. http://http://www.primefaces.org/showcase/ui/home.jsf
  17. 17. Demo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×