Rich Web Interfaces with JSF2 - An Introduction

Rich Web Interfaces with JSF2An 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")@RequestScopedpublic 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)

Component Libraries

http://showcase.richfaces.org

http://http://www.primefaces.org/showcase/ui/home.jsf

http://http://www.primefaces.org/showcase/ui/home.jsf

Rich Web Interfaces with JSF2 - An Introduction

Technology

Transcript of Rich Web Interfaces with JSF2 - An Introduction