Felicia Ionescu - Aplicații distribuite

Lucrarea nr. 1 – Aplicații Web în tehnologia JavaEE

1. Tehnologia Servlet

Servlet-ii sunt componente de bază pentru programarea Web in platforma Java, care crează
pagini Web dinamice, ca răspuns la cererile HTTP ale clienților.

1.1 Exemplu – servletul hello2 din JavaEE7TutorialExamples

Servlet-ul web/servlet/hello2 din directorul JavaEE7TutorialExamples primește o cerere a unui

client, extrage parametrul (username) din cerere și construiește pagina de răspuns către client.
Acest exemplu a fost compilat pentru serverul Glassfish. Pentru a-l executa se porne ște mai
întâi serverul cu comanda de context Start (click dreapta pe numele serverului din Services → Servers
→ Glassfish Server.
Pentru execuție parcurgeti următorii pași în NetBeans:
(1) Se deschide proiectul JavaEE7TutorialExamples/web/hello2 cu File → Open Project
(2) În fereastra Projects se expandează nodul hello2 și se văd directoare și fișierele proiectului.
(3) Se deschid în editor fișierele sursă (prin dublu click pe numele fișierului din Projects) și se
studiază codul sursă.
(4) La comanda Run se deploy-ază servlet-ul în serverul GlassFish, se execută și afi șează în
browser documentul generat. Adresa servlet-ului (greeting) este relativă la adresa context-root (hello2),
care este chiar numele proiectului deploy-at. Această proprietate este automat introdusă la creearea
propiectului în fișierul /hello2/WEB_INF/glassfish-web.xml, dacă a fost selectat serverul GlassFish.

Aceeași funcționare a servlet-ului o obținem și direct din browser, folosind adresa de mai sus.
Dacă cererea clientului conține parametrul username, atunci se apelează servlet-ul /response,
care adaugă în document salutul Hello <username>

1
 Felicia Ionescu - Aplicații distribuite

Servlet-ul hello2/greeting redefinește metoda doGet() care creează un formular HTML, citește
parametrul “username” din cerere și, dacă username este diferit de null, apelează servlet-ul
/hello2/response care adaugă un fragment HTML cu mesajul Hello <username>, apoi finalizează
documentul de răspuns și închide fluxul de ieșire.
În formular, comanda Submit (butonul submit) generează tot un mesaj HTTP Get, la aceeași
adresă, deci se reafișează documentul.
Dacă se modifică fișierele sursă, atunci prooiectul trebuie recompilat și re-deploy-at cu
comanda Run → Run Project (hello2) (din toolbar) sau cu una din comenzile de context (click dreapta
pe numele proiectului) Run sau Deploy.
Servlet-ul ramane deploy-at în serverul Glassfish până când este undepoy-at. Faptul că este
deploy-at se vede în tab-ul Applications sub Servers/GlassFish din pagina Services din fereastra
Navigator din NetBeans.

1.2 Creearea unei aplicații Web folosind servlet-i

Pentru crearea unei aplicații (propiect) Web folosind servlet-i în NetBeans se parcurg următorii
pași:
A. Se crează un proiect nou - cu comanda File → New Project
(1) Se alege categoria si tipul proiectului:

2
 Felicia Ionescu - Aplicații distribuite

(2) Se setează numele și locația proiectului:

(3) Se setează serverul și calea către servlet (context path):

3
 Felicia Ionescu - Aplicații distribuite

(4) Nu se adaugă nici-un alt framework și se încheie creearea proiectului:

B. Se adaugă un servlet în proiect - cu comanda New → Servlet din meniul de context (click
dreapta pe numele proiectului helloservlet).
(1) Se alege Categoria și tipul proiectului.
(2) Se setează numele clasei servlet-ului și package-ul acestuia:

4
 Felicia Ionescu - Aplicații distribuite

(3) Se setează configurația servlet-ului:

C. Se completează clasa servlet-ului - adăugând în fișierul MyServlet.java adnotarea:

@WebServlet ("/myservlet")
public class MyServlet extends HttpServlet { ...}
În clasa servletului se adaugă importul clasei javax.servlet.annotation.WebServlet (sau se
admite importul atunci când este propus de wizard-ul NetBeans).
D. Execuție (Run → Run Project(helloservlet) se compilează și se deploy-ază servlet-ul în
serverul GlassFish. Servlet-ul poate fi accesat din browser astfel:

Exerciții suplimentare – Tehnologia Servet:

(1a) Modificați proiectul creeat helloservlet pentru a avea și alte funcții. De exemplu,
modificati servlet-ul astfel încât sa afiseze propriul nume, cam în modul acesta:

(1b) Studiați proiectul Home/JavaEE7TutorialExamples/web/servlet/mood. Deploy-ati servlet-

ul și accesați-l din browser. Modificați filtrul TimeOfTheDay, astfel încât să ob țineti alte comportări
ale servlet-ului (sa afiseze alte dispozitii - moods).
(1c) Studiați proiectul Home/JavaEE7TutorialExamples/web/servlet/fileupload. Deploy-ați
servlet-ul și executați operațiile acestuia. Modificați servlet-ul astfel încât să ofere și alte funcții.

5
 Felicia Ionescu - Aplicații distribuite

2. Tehnologia JavaServer Pages

O pagină JSP este un document text care conţine cod Java; codul Java se converteşte într-un
servlet care construieşte partea dinamică de răspuns şi această parte se combină cu partea statică din
pagina JSP pentru a forma pagina HTML de răspuns către client.
Deși tehnologia JSP este considerată depășită (deprecated) începând cu Java EE 7 și se
recomandă folosirea tehnologiei JavaServer Faces (JSF), totuși vom prezenta câteva exemple, pentru a
urmări mai ușor evoluția aplicațiilor web.
2.1 Crearea unei aplicații Web folosind pagini JSP

Pentru crearea unei aplicații (propiect) Web folosind pagini JSP în NetBeans se parcurg
următorii pași:
A. Se creează un nou proiect - cu comanda File → New Project
(1) Se alege categoria și tipul proiectului:

6
 Felicia Ionescu - Aplicații distribuite

(2) Se stabilește numele și locația proiectului:

(3) Se seteaza serverul și versiunea Java EE:

(4) Nu se adaugă nici un framework și se dă Finish.

Se obține un proiect Web cu un simplu fișier index.html.

7
 Felicia Ionescu - Aplicații distribuite

B. Se adaugă o pagină JSP - cu comanda de context New -> JSP

(1) Se alege Categoria si tipul proiectului.
(2) Se stabilește numele paginii, se alege locația și opțiunea privind sintaxa JSP și se dă Finish:

Pagina JSP creată conține numai un mesaj Hello World și arată astfel:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body> <h1>Hello World!</h1> </body>
</html>
C. Se adaugă o clasa pentru bean-ul StringBean cu comanda de context New -> Java Class
(1) Se selectează Categoria și tipul proiectului
(2) Se seteaza numele si locatia clasei și se dă Finish:

8
 Felicia Ionescu - Aplicații distribuite

Se completează codul clasei în fișierul StringBean.java:

package beans;
public class StringBean {
private String message = "";
public String getMessage() { return(message); }
public void setMessage(String message) {this.message = message;}
}
D. Se completeaza pagina JSP (fișier newjsp.jsp) cu codul pentru numărarea acceselor la
pagină și codul prin care se citește mesajul memorat (cu acțiunea jsp:getProperty) sau se seteaza o
nouă valoare a obiectului (cu jsp:setProperty):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h3>Hello World!</h3>
<%! private int accessCount = 0; %>
Numarul de accesari ale paginii:
<%= ++accessCount %>
<jsp:useBean id="stringBean" class="beans.StringBean" />
<br>Mesajul initial:
<B> <jsp:getProperty name="stringBean"
property="message" /> </br></B>
<jsp:setProperty name="stringBean"
property="message" value="Acesta este mesajul setat!" />
<br>Mesajul dupa setare:
<B> <%= stringBean.getMessage() %>
</B> </br>
</body>
</html>
Pentru execuție, se specifică în browser adresa paginii JSP în contextul proiectului:

9
 Felicia Ionescu - Aplicații distribuite

3. Tehnologia JavaServer Faces

Tehnologia JavaServer Faces (JSF) permite dezvoltarea aplicațiilor Web cu conținut dinamic și
interfață grafică, folosind componente inserate în pagini Web cu ajutorul tag-urilor definite în mai
multe biblioteci.
3.1. Exemplu – hello1 din JavaEE7TutorialExamples
Acest exemplu funcționează aproximativ la fel ca exemplul hello2, cu diferența că este creeat în
tehnologia JSF.
Se deschide proiectul JavaEE7TutorialExamples/web/jsf/hello1 și se executa cu comanda de
context (click dreapta pe numele proiectului) Run sau Deploy. După deploy în serverul GlassFish, se
poate accesa din browser (la adresa http://localhost:8080/hello1/)

La raspuns “you” se obtine:

Studiați părțile componente ale proiectului. Subdirectorul Web Pages conține două pagini Web
în tehnologia Facelets: index.xhtml și response.xhtml, subdirectorul WEB-INF, care conține fișierul de
configurare web.xml și subdirectorul resources, care conține un subdirector images cu fișierul
duke.waving.gif. Subdirectorul Source Packages conține package-ul javaeetutorial.hello1 cu un singur
fișier, Hello.java, care este un bean de suport gestionat de container (bakeing bean).
Pagina index.xhtml conține un formular cu o imagine grafică, un header, un câmp de intrare și
două butoane de comandă.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head> <title>Facelets Hello Greeting</title> </h:head>

10
 Felicia Ionescu - Aplicații distribuite

<h:body>
<h:form>
<h:graphicImage url="#{resource['images:duke.waving.gif']}"
alt="Duke waving his hand"/>
<h2>Hello, my name is Duke. What's yours?</h2>
<h:inputText id="username"
title="My name is: "
value="#{hello.name}"
required="true"
requiredMessage="Error: A name is required."
maxlength="25" />
<p></p>
<h:commandButton id="submit" value="Submit" action="response" />
<h:commandButton id="reset" value="Reset" type="reset" />
</h:form>
<div class="messagecolor">
<h:messages showSummary="true" showDetail="false"
errorStyle="color: #d20005" infoStyle="color: blue"/>
</div>
</h:body>
</html>

În fișierul index.xhtml se remarcă:

 Se folosește JSF HTML Tag Library (cu prefixul h:)
 Valoarea componentei h:inputText se conectează la proprietatea name a bean-ului hello printr-o
expresie EL cu evaluare amânată: <h:inputText...value="#{hello.name}".../>
 Butonul de comandă Submit definește: action=”response”, ceea ce înseamnă că, atunci când
este acționat, va fi afișată pagina response.xhtml, care arată astfel:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head> <title>Facelets Hello Response</title> </h:head>
<h:body>
<h:form>
<h:graphicImage url="#{resource['images:duke.waving.gif']}"
alt="Duke waving his hand"/>
<h2>Hello, #{hello.name}!</h2>
<p></p>
<h:commandButton id="back" value="Back" action="index" />
</h:form>
</h:body>
</html>

La fel ca pagina index.xhtml, pagina response.xhtml folosește biblioteca JSF HTML Tag
Library și afișează proprietatea name a bean-ului hello folosind o expresie EL(Expression Language)
cu evaluare amânată; acțiunea butonului Back duce la revenirea la pag index.xhtml.
Bean-ul hello conține proprietatea name și este definit în fișierul Hello.java astfel:
package javaeetutorial.hello1;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

11
 Felicia Ionescu - Aplicații distribuite

@Named
@RequestScoped
public class Hello {
private String name;
public Hello() { }
public String getName() { return name; }
public void setName(String user_name) { this.name = user_name; }
}
Aplicația este configurată prin fișierul web.xml, pe care NetBeans îl creează automat la creearea
aplicației folosind framework-ul NetBeans.
NetBeans are mai multe posibilități de ajutor pentru dezvoltarea aplicațiilor Java EE. În primul
rând oferă templat-uri pentru diferite categorii și tipuri de aplicații, apoi prezintă posibilitatea de acces
direct din editor la documentația unei clase (Ctrl + Space), posibilită ți de creeare a unor componente
(wizards), de completare cod și importuri, generarea automată a unor fișiere de configurare, în func ție
de tipul aplicației etc. Aceste facilități vor fi prezentate și utilizate în continuare.

3.2. Creearea unei noi aplicații JSF - GhicesteNumarul

Se folosește framework-ul NetBeans 7.4 care oferă suport pentru JSF 2.2 incluzând diferite
automatisme (wizards) pentru editarea paginilor Facelets, editarea fișierului de configurare a facelets
(faces-config.xml), creearea JSF Managed Beans, creearea de componente compuse.
Aplicația trebuie să afișeze o pagină Web în care utilizatorul poate introduce un număr între
două limite date. Dacă numărul nu este cel corect (ales aleatoriu la lansarea sesiunii), se repetă invita ția
de a ghici numărul ales.
Se creează un proiect cu suport JSF astfel:
A. Se creează un nou proiect - cu comanda File → New Project;
Pentru primii 3 pași se procedează la fel ca la proiectul precedent, specificând: (1) Categoria:
Java Web, Projects: Web Application; (2) Project Name: GhicesteNumarul, Project Location:
/NetBeansProjects/JSF, Project Folder: Home/NetBeansProjects/JSF/GhicesteNumarul; (3) Server:
GlassFish Server, Java EE Version: Java EE 7 Web, Context Path: /GhicesteNumarul.
În pasul (4) se adaugă framework-ul JavaServer Faces:

12
 Felicia Ionescu - Aplicații distribuite

In tab-ul Configuration se setează configurarea JSF:

La creearea acestui proiect, NetBeans creează automat fișierul de configurare Web

Pages/WEB_INF/web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout> 30 </session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Se poate modifica fișierul web.xml pentru a avea o cale mai simpla in browser:
<url-pattern>*.xhtml</url-pattern>
......
<welcome-file>index.xhtml</welcome-file>

13
 Felicia Ionescu - Aplicații distribuite

B. Creearea unui JSF Managed Bean folosind Managed Bean Wizard

(1) Se selectează proiectul (GhicesteNumarul), se dă comanda de meniu de context (click
dreapta pe numele proiectului) și se selectează → New → Other; se deschide o fereastră în care se
poate alege Categoria JavaServer Faces, tipul JSF Managed Bean:

(2) În următoarea fereastră se setează numele și locația bean-ului:

14
 Felicia Ionescu - Aplicații distribuite

La comanda Finish din această fereastră, se generează clasa bean-ului în UserBean.java astfel:
package ghicesteNumarul;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class UserBean {
public UserBean() { }

}
(3) Se completează clasa bean-ului cu implementarea interfeței Serializable, initializarea
variabilei numarAles cu o valoare aleatoare și definirea variabilei proprietății numarGhicit.
După aceasta, se folosește wizard-ul de definire a metodelor de acces la proprietatea definită:
click dreapta în editor, se alege Insert Code și apoi metodele Getter și Setter, care adaugă metodele
respective în clasă:

(4) Se adaugă proprietatea raspuns iar metoda getRaspuns() se completează cu codul:

public String getRaspuns() {
if ((numarGhicit != null) && (numarGhicit.compareTo(numarAles) == 0)) {

//invalidare sesiune utilizator

FacesContext context = FacesContext.getCurrentInstance();
HttpSession session =
(HttpSession)context.getExternalContext().getSession(false);
session.invalidate();

return "Da! Ai ghicit!";

} else {return numarGhicit + " nu este corect. Ghiceste din nou!";
}
}
Mai trebuie adăugate importurile:
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;
Pentru a avea acces la documentația unei anumite clase se poate tasta Ctrl + Space, iar pentru
completare importuri se poate tasta Ctrl+Alt+I .

15
 Felicia Ionescu - Aplicații distribuite

Bean-ul UserBean se instanțiază la începutul unei sesiuni și memorează valoarea numărului

ales. Dacă numărul ghicit este cel ales, metoda getRaspuns() returnează mesajul “Da ! Ai ghicit! “ și se
termină sesiunea; dacă numărul ghicit nu este cel ales, se returnează mesajul corespunzător și se
continuă sesiunea.
C. Creearea și completarea paginilor Web și conectarea bean-ului la paginile Web
Se creează pagina raspuns.xhtml astfel: comanda de meniu New → New File deschide o nouă
fereastră în care se setează:
(1) Se setează: Proiectul (GhicesteNumarul), Categoria (JavaServer Faces), Tipul (JSF Page):

(2) Se setează numele și locația fișierului și tipul paginii (Facelet sau JSP):

16
 Felicia Ionescu - Aplicații distribuite

Se obține o pagina raspuns.xhtml (care nu conține nici o componentă, doar marcajele

<h:head> și <h:body>).
În continuare se modifică și se completează paginile index.xhtml și raspuns.xhtml cu
elementele necesare. În ambele pagini, în elementul h:head se modifică titlul.
În index.xhtml, se introduce un formular (h:form) cu un text de invitație, un element text de
intrare (h:inputText) și un buton de comandă (h:commandButton) folosind tag-uri din biblioteca JSF
HTML Tag Library (cu prefix h:). Valoarea elementului h:inputText se conectează la proprietatea
numarGhicit a bean-ului userBean folosind o expresie EL (Expression Language) cu evaluare amânată.
Acțiunea butonului de comandă dirijează navigarea către pagina raspuns.xhtml.
<h:form>
<p><h2> Ghiceste un numar intre 0 si 10: </h2></p>
<h:inputText id=”nrGhicit” size=”2” maxlength=”2”
value=”#{userBean.numarGhicit}” />
<p>
<h:commandButton id=”submit” value=”Trimite” action=”raspuns” />
</p>
</h:form>
În pagina raspuns.xhtml se introduce un formular cu un text de ieșire (h:outputText) și un buton
de comandă. Textul de ieșire se conectează la proprietarea raspuns a bean-ului userBean. Ac țiunea
butonului de comandă direcționează navigarea către pagina index.xhtml.
<h:form>
<h2>
<h:outputText id=”rezultat” value=”#{userBean.raspuns}” />
</h2>
<h:commandButton id=”back” value=”Inapoi” action=”index” />
</h:form>

La comanda Run (din menu) se compilează și deploy-ază aplicația (proiectul selectat -

GhicesteNumarul) și poate fi accesata din browser:

NetBeans oferă suport pentru depanare (https://netbeans.org/kb/docs/web/jsf20-intro.html)

Completați proiectul GhicesteNumarul cu următoarea functionalitate: se completează bean-ul

astfel încât să memoreze proprietățile minimum și maximum pentru limitele numărului care trebuie să
fie ghicit. Aceste proprietăți se inițializează cu diferite valori în bean și se folosesc în index.xhtml
pentru a afișa limitele și pentru a valida valorile introduse de utilizator. Cu aceste modificări, la
execuția aplicației se obține cam așa ceva:

17
 Felicia Ionescu - Aplicații distribuite

Exerciții suplimentare – Tehnologia JSF

(3a) Studiați componentele compuse JSF (din tutorial). Dezvoltați o aplica ție în care crea ți și
vizualizați o componentă compusă. Puteti urmări pașii de execuție din documentația
https://netbeans.org/kb/docs/web/jsf20-support.html (Composite Component Wizard).

(3b) Studiați templat-urile Facelets (din tutorial). Dezvoltați o aplicație în care creeați și utilizați
un template Facelets. Puteti urmări pașii de execuție din documentația https://netbeans.org/kb/
docs/web/jsf20-support.html (Facelets Template Wizard, Facelets Template Client Wizard).

18
 Felicia Ionescu - Aplicații distribuite

Referințe bibliografice - Documentație Java EE și NetBeans:

https://docs.oracle.com/javaee/7/tutorial/
http://docs.oracle.com/cd/E50453_01/doc.80/e50452/toc.htm
https://javaserverfaces.java.net/docs/2.2/
https://netbeans.org/kb/index.html
https://netbeans.org/kb/trails/java-ee.html
https://netbeans.org/kb/docs/javaee/javaee-gettingstarted.html
https://netbeans.org/kb/docs/web/jsf20-intro.html
https://netbeans.org/kb/docs/web/jsf20-support.html
https://netbeans.org/kb/docs/web/jsf20-crud.html
https://netbeans.org/kb/docs/javaee/javaee-entapp-ejb.html

19