L8.

TUTORIAL Eclipse
Java Server Faces: Form Simplu Starter

IDE: Eclipse JEE

Distribution: 2019-09
JDK Open JDK 11
Implementare JSF: JSF 2.2 / Apache MyFaces 2.2.x
Implementare JPA: JPA 2.2 / EclipseLink 2.7.0
Server Web: Apache Tomcat 9.x

SGBD: PostgreSQL 12
Driver JDBC: posgresql-42.x.jdbc
Plan
● 1. Verificare infrastructură necesară
◦ Biblioteci suport: MyFaces
◦ Proiect suport JPA
◦ Server Tomcat
● 2. Creare formular start
◦ Creare sursă de date formular simplu
◦ Creare fişier-pagină gazdă formular simplu
◦ Creare butoane de navigare formular
◦ Creare rubrici formular
◦ Creare butoane tranzacționale formular
◦ 3. Test formular start JSF
1. Verificare infrastructură necesară

● 1.1 Verificare server Apache Tomcat

● 1.2 Creare proiect JSF
● 1.3 Biblioteci suport: MyFaces
● 1.4 Proiect suport JPA
1.1 Instalare server Apache
Tomcat (vezi L7.Tutorial JPA)
● Serverul Apache Tomcat ar trebuie să fie deja configurat din
L7.POO.JPA. Doar în cazul în care Apache Tomcat nu există
pașii de urmat ar fi:
○ Instalare-localizare server Apache Tomcat:
■ Descărcare arhivă-kit apache-tomcat-9.x de pe portal.
■ Dezarhivare kit în directorul-gazdă pentru serverul de aplicaţii
Web Tomcat:
● E:\_Programare2\_apache_tomcat
■ Localizare biblioteci (jars) corespunzătoare JPA în
● E:\_Programare2\_apache_tomcat\lib
○ 2. Adăugare (locație) server Apache Tomcat în contextul
workspace-ului Eclipse.
Localizare biblioteci
JSF/Apache_MyFaces preconfigurate

Biblioteci kit
JSF2/
Apache MyFaces 2.2
1.2 Creare proiect JSF
1. Creare proiect tip DynamicWebProject
● adăugare dependenţă server de aplicaţii web Apache
Tomcat

2. Adăugare referinţă (pentru compilare) faţă de

proiectul JPA de persistenţă
● in [Java Build Path].

3. Adăugare referinţă (pentru distributie/deploy) faţă de

proiectul JPA de persistenţă
● in [Deployment Assembly].
 1. Alegere tip de
proiect Dynamic
WebProject
2. Stabilire nume
proiect
3. Alegere tip de server
Web
4. Stabilire tip de
framework pentru proiect
Web: JSF2

5. Verificare configuraţie:
JSF Facet versiunea 2.2

Proces creare proiect JSF

 7. Bibliotecile suport JSF se
gasesc deja in dir [lib] al
ServerRuntime-ului Apache
Tomcat, prin urmare
dezactivam definitia explicita
a dependentelor JSF
Ca urmare a definirii <Target Runtime> ca fiind serverul Apache
Tomcat, acesta trebuie să apară între dependențele Java Build
Path - Libraries din proprietățile proiectul JSF tocmai creat.
1.2.2 Configurare dependenţe către
proiectul suport JPA
Adăugare dependenţe de compilare catre proiectul suport
JPA (din fereastra de proprietăţi a proiectului JSF):
1. activare secţiune Java Build Path,
2. deschidere pagina Projects,
3. acţionare Add...;
4. bifare nume proiect JPA.
Adăugare referinţă către
proiectul JPA în
JavaBuildPath pentru
proiectul JSF
(ProduseJSF)
Adăugare dependenţe de distribuţie către
proiectul suport JPA
● Adăugare referinţe proiect JPA în configuraţia de
distribuire/instalare:
a) prin activare secţiune Deployment Assembly,
b) acţionare Add,
c) selectare directivă Project;
d) selectare nume proiect JPA;
 Adăugare referinţe
distributie proiect JPA

Adăugare
dependenţă către
proiectul JPA în
Deployment
Assembly pentru
proiectul JSF
(ProduseJSF)
2. Creare formular start
● 2.1 Creare sursă de date formular simplu
● 2.2 Creare fişier gazdă formular simplu
○ Creare fişier XHTML
○ Creare form JSF cu rubrici legate la sursa de date
○ Creare butoane de navigare
○ Creare butoane tranzacționale
● 2.3 Test formular simplu JSF
2.1 Creare structuri model în
controler formular simplu
● Creare clasă suport <managed-bean> FormClienti din secţiunea
Java Resource: src a perspectivei JavaEE sau Web
● Codificarea clasei FormClienti
○ Marcarea clasei drept componentă “managed” pentru a putea fi
invocată din contextul aplicaţiei (în special de cadrul binding care
o va lega de componentele grafice)
■ @ManagedBean @SessionScoped
○ Definirea modelului de date
■ Atribut pentru entitatea curentă
■ Colecţie pentru entităţile accesibile
○ Constructorul implicit (fără parametri)
■ Invocarea suportului de persistenţă pentru a iniţializa modelul
de date
Controler: Definire Model

Model de date

Invocare JPA pentru

Iniţializare
model de date
Controler: Acțiuni navigaționale
Controler: Acțiuni tranzacționale
 Controller: Definire ManagedBean
package org.comenzi.forms;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;

import org.comenzi.model.Client;

@ManagedBean @SessionScoped
public class FormClienti
{
// Declaratii Model
// Initializare Model
// Actiuni de navigare Model
// Actiuni Tranzactionale
}
 Controller: Implementare Structuri Model

package org.comenzi.forms;

import …;

@ManagedBean @SessionScoped
public class FormClienti
{
// Declaratii Model
private List<Client> clienti = new ArrayList<Client>();
private Client client;

public List<Client> getClienti() { return clienti; }

public void setClienti(List<Client> clienti) { this.clienti = clienti; }

public Client getClient() { return client; }

public void setClient(Client client) { this.client = client; }
// Initializare model...
}
 Controller: Implementare Inițializare Model
@ManagedBean @SessionScoped
public class FormClienti
{
// Declaratii Model ...
// Initializare Model
private EntityManager em;
public FormClienti() {
EntityManagerFactory emf = Persistence.createEntityManagerFactory("ProduseJPA");
em = emf.createEntityManager();
init();
}
private void init(){
this.clienti = em.createQuery("SELECT c FROM Client c ORDER BY c.id", Client.class)
.getResultList();
if (!clienti.isEmpty()){
this.setClient(clienti.get(0));
}
}
}
 Controller: Implementare Acțiuni navigare
@ManagedBean @SessionScoped
public class FormClienti
{
// Declaratii Model ...
// Initializare Model ...
// Actiuni de navigare Model
public void previousClient(ActionEvent evt) {
System.out.println("<<< PREVIOUS CLIENT.");
Integer idxCurent = this.clienti.indexOf(client);
if (idxCurent > 0)
this.client = this.clienti.get(idxCurent - 1);
}

public void nextClient(ActionEvent evt) {

System.out.println(">>> NEXT CLIENT.");
Integer idxCurent = this.clienti.indexOf(client);
if ((idxCurent + 1) < this.clienti.size())
this.client = this.clienti.get(idxCurent + 1);
}
}
Controller: Implementare Acțiuni tranzacționale
@ManagedBean @SessionScoped
public class FormClienti
{
// Declaratii Model … // Initializare Model … // Actiuni de navigare Model …
// Actiuni tranzactionale Model (1)
public void adaugareClient(ActionEvent evt) {
this.client = new Client();
this.client.setId(999);
this.client.setNume("Client Nou");
this.clienti.add(this.client);
}
public void stergereClient(ActionEvent evt) {
this.clienti.remove(this.client);
if (this.em.contains(this.client)) {
this.em.getTransaction().begin();
this.em.remove(this.client);
this.em.getTransaction().commit();
}
if (!this.clienti.isEmpty())
this.client = this.clienti.get(0);
else
this.client = null;
}
}
Controller: Implementare Acțiuni tranzacționale
@ManagedBean @SessionScoped
public class FormClienti
{
// Declaratii Model … // Initializare Model … // Actiuni de navigare Model …
// Actiuni tranzactionale Model (2)
public void salvareClient(ActionEvent evt) {
System.out.println("Salvare");
try{
this.em.getTransaction().begin();
this.em.merge(this.client);
this.em.getTransaction().commit();
}catch(Exception ex){
ex.getSuppressed();
}
}

public void abandonClient(ActionEvent evt) {

System.out.println("Abandon client !");
em.clear();
init();
}
}
2.2 Creare fişier gazdă formular
simplu
● 2.2.1 Creare fişier XHTML
○ Creare pagină după template Facelet Header
● 2.2.2 Creare structură formular
○ Componente legate la acțiuni de navigare
○ Componente legate la modelul de date
○ Componente legate la acțiuni tranzacționale
2.2.1 Creare fişier XHTML
● Creare pagină după template Facelet Header (vezi captura
de pe următoarea pagină):
● Din secţiunea Web Content a perspectivei JavaEE sau Web
– meniul contextual – opţiunea New – HTML File
○ in primul pas se specifică numele paginii (FormClienti)
conţinând formularul – adăugând explicit extensia xhtml,
○ in al doilea pas se alege şablonul New Facelet Header.
Creare fişier XHTML
● Pagina de editare formular
○ Dacă perspectiva Web nu a fost activată, atunci după
finalizarea secvenţei de paşi de creare a fişierului
aceasta va fi activată (vezi captura de pe următoarea
pagină).
○ Zona de lucru va fi împărţită astfel
■ O sub-zonă de lucru grafic (drag&drop) care va
include o paletă de componente
■ O sub-zonă de lucru în mod cod-sursă
■ O fereastră de proprietăţi pentru elementul selectat
curent în oricare din cele două secţiuni
○ Modificarea titlului implicit se poate face direct în zona de
lucru grafic.
 Perspectiva Web
Paleta de
componente

Zona de lucru grafic

Zona de lucru cod sursă

Fereastra de proprietăţi
2.2.2 Structură formular
● Formularele JSF vor fi definite în fișiere XML specifice cu extensia XHTML
și având un antet care să menționeze spațiile de nume JSF pentru importul
corect al tag-urilor necesare definirii componentelor JSF:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"httf://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<!-- Continut cu tag-uri JSF-->
</body>
</html>
Structura finală a formularului
Definire tag JSF pentru formular
<h:form id="formClientiForm"> Tag start formular

<h:panelGrid columns="2" id="p1" border="1"> Tag panou dispunere

componente în formular pe
două coloane

<f:facet name="header"> Tag antet formular

<h:outputText value="Form Clienti Simplu"/> Componenta internă antet de

tip text-etichetă
</f:facet>
</h:panelGrid>
</h:form>
Definire secțiune de navigare
<h:form id="formClientiForm"> Tag start formular
<h:panelGrid columns="2" id="p1" border="1"> Tag panou principal
... ...

<h:outputLabel value="Navigare"/> Panou principal: Coloana 1,

linia 1: etichetă-text

<h:panelGrid border="1" columns="2" id="p2"> Panou principal: Coloana 2,

<h:commandButton id="cmdPrevious"
value="Previous"
actionListener="#{formClienti.previousClient}"/>
linia 1: panou secondar
butoane de navigare
Panou secundar C1, L1: buton
Previous

Panou secundar C1, L2: buton

<h:commandButton id="cmdNext"
Next
value="Next"
actionListener="#{formClienti.nextClient}"/>

</h:panelGrid>

</h:panelGrid>
</h:form>
Legare (binding) acțiuni de navigare
● Legare componentă <h:commandButton> la
metodă-controller prin expresia JSF.EL:
○ actionListener="#{formClienti.previousClient}"
■ #{...} notație JSF Expression Language evaluată
(dinamic) la runtime în:
■ formClienti - nume instanță din clasa FormClienti
etichetată @ManagedBean (implicit, numele instanței
derivă din numele clasei de origine, dar cu
minusculă);
■ previousClient - nume metodă din controller
public void previousClient(ActionEvent
evt){...} cu parametru de tip
javax.faces.event.ActionEvent
Definire rubrici formular:
<h:form id="formClientiForm">
<h:panelGrid columns="2" id="p1" border="1">
... ...
<h:outputText value="Nume:"/>
<h:inputText id="client_nume"
value="#{formClienti.client.nume}"/>
<h:outputText value="Id:"/>
<h:inputText id="client_id"
value="#{formClienti.client.id}"/>
... ...
</h:panelGrid>
</h:form>
Tag start formular
Tag panou principal
Panou principal: Coloana 1,
linia 2: etichetă-text
Panou principal: Coloana 2,
linia 2: input-text pentru
afișare-editare câmp nume
client
Panou principal: Coloana 1,
linia 3: etichetă-text
Panou principal: Coloana 2,
linia 3: input-text pentru
afișare-editare câmp id client
Legare (binding) rubrici formular
● Legare componentelor de tip <h:inputText> la
proprietăți ale structurilor de date din modelul
gestionat de componenta-controller FormClienti
se face prin expresii de tip JSF.EL:
○ value="#{formClienti.client.id}"
■ #{...} notație JSF Expression Language evaluată
(dinamic) la runtime în:
■ formClienti.client - numele proprietății din clasa
FormClienti corespunzătoare metodei accessor
getClient();
■ formClienti.client.id - numele proprietății
getId() din entitatea Client ce corespunde tipului
proprietății desemnate prin getClient();
Definire secțiune tranzacțională (1)
Panou Adaugare + Stergere
<h:form id="formClientiForm"> Tag start formular
<h:panelGrid columns="2" id="p1" border="1"> Tag panou principal
... ...

<h:panelGrid border="1" columns="2" id="p3"> Panou secundar: 2 coloane

pentru 2 butoane

<h:commandButton id="cmdAdaugare" value="Adauga" Panou secundar: Coloana 1,

actionListener="#{formClienti.adaugareClient}"/> linia 1: buton “Adauga”

<h:commandButton id="cmdStergere" value="Sterge Panou secundar: Coloana 2,

actionListener="#{formClienti.stergereClient}"/> linia 1: buton “Sterge”

</h:panelGrid>
... ...
</h:form>
Definire secțiune tranzacțională (2)
Panou Abandon + Salvare
<h:form id="formClientiForm"> Tag start formular
<h:panelGrid columns="2" id="p1" border="1"> Tag panou principal
... ...

<h:panelGrid border="1" columns="2" id="p3"> Panou secundar: 2 coloane

pentru 2 butoane

<h:commandButton id="cmdAbandon" value="Abandon" Panou secundar: Coloana 1,

actionListener="#{formClienti.abandonClient}"/> linia 1: buton “Abandon”

<h:commandButton id="cmdSalvare" value="Salveaza" Panou secundar: Coloana 2,

actionListener="#{formClienti.salvareClient}"/> linia 1: buton “Salveaza”

</h:panelGrid>
... ...
</h:form>
Legare (binding) acțiuni tranzacționale

● Legare componentă <h:commandButton> la

metodă-controller prin expresia JSF.EL:
○ actionListener="#{formClienti.adaugareClient}"
■ #{...} notație JSF Expression Language evaluată
(dinamic) la runtime în:
■ formClienti - nume instanță din clasa FormClienti
etichetată @ManagedBean (implicit, numele instanței
derivă din numele clasei de origine, dar cu
minusculă);
■ adaugareClient - nume metodă din controller
public void adaugareClient(ActionEvent
evt){...} cu parametru de tip
javax.faces.event.ActionEvent
Formular JSF: tablou complet
<h:form id="formClientiForm">
<h:panelGrid columns="2" id="p1" border="1">
<f:facet name="header">
<h:outputText value="Form Clienti-Simplu"/>
</f:facet>

<h:outputLabel value="Navigare"/>
<h:panelGrid border="1" columns="2" id="p2">
<h:commandButton id="cmdPrevious" value="Previous"
actionListener="#{formClienti.previousClient}"/>
<h:commandButton id="cmdNext" value="Next"
actionListener="#{formClienti.nextClient}"/>
</h:panelGrid>

<h:outputText value="Nume: "/>

<h:inputText id="client_nume" value="#{formClienti.client.nume}"/>
<h:outputText value="Id:"/>
<h:inputText id="client_id" value="#{formClienti.client.id}"/>

<h:panelGrid border="1" columns="2" id="p3">

<h:commandButton id="cmdAdaugare" value="Adauga"
actionListener="#{formClienti.adaugareClient}"/>
<h:commandButton id="cmdStergere" value="Sterge"
actionListener="#{formClienti.stergereClient}"/>
</h:panelGrid>
<h:panelGrid border="1" columns="2" id="p4">
<h:commandButton id="cmdAbandon" value="Abandon"
actionListener="#{formClienti.abandonClient}"/>
<h:commandButton id="cmdSalvare" value="Salveaza"
actionListener="#{formClienti.salvareClient}"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
3. Test formular start JSF
● Din meniul contextual al formularului JSF (în perspectiva JavaEE
sau Web) se selectează opţiunea Run şi acţiunea Run on server
● În fereastra consolă se poate observa pornirea serverului Tomcat
(dacă nu a fost deja pornit în prealabil) printr-o serie de mesaje
dintre care unul va indica calea de deploy a aplicaţiei curente
● Fereastra browserului se va lansa către un URL format astfel
◦ URLul generic al aplicaţie care cuprinde adresa serverului (local)
Tomcat și numele aplicației JSF, de exemplu:
httf://localhost:8080/ProduseJSF
◦ La care se adaugă numele particula faces urmată de numele
formularului, de exemplu:
httf://localhost:8080/ProduseJSF/faces/FormClienti.xhtml
Lansare Form JSF
Tomcat HOT Deploy
● Procedura hot-deploy se referă la posibilitatea
retestării formularelor JSF fără re-pornirea serverului
Tomcat.
● Pentru a activa această procedură sunt necesari 3
pași:
○ (1) modificarea fișierului web.xml din folderul WebContent
subfolderul WEB-INF prin adăugarea parametrului
javax.faces.FACELETS_REFRESH_PERIOD cu valoarea 0;
○ (2) repornirea serverului Tomcat în modul Debug;
○ (3) lansarea formularului JSF (adică a fișierului xhtml) cu
opțiunea Debug As...
Tomcat HOT Deploy
(1) Modificarea fișierului web.xml

<context-param>
<param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
<param-value>0</param-value>
</context-param>
Tomcat Debug Mode
(2) Start ApacheTomcat in Debug Mode

● Repornire server Apache Tomcat cu

opțiunea Debug...
Tomcat Debug Mode
(3) Lansare fișiere xhtml cu opțiunea Debug As

● Lansare formular cu opțiunea Debug As →

Debug on Server