L8.

TUTORIAL Eclipse
Java Server Faces: Form Simplu Starter

IDE: Eclipse Luna/Mars JEE [4.4/4.5]

Distribution: OEPE 12.1.3.x
Implementare JSF: JSF 2.2 / Apache MyFaces 2.2.x
Implementare JPA: JPA 2.1 / EclipseLink 2.5.2
Server Web: Apache Tomcat 7.x

SGBD: PostgreSQL9
Driver JDBC: posgresql-9.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 fiier-pagin gazd formular simplu
Creare rubrici formular
Creare butoane de navigare 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, JSTL
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.JPA. Doar, n cazul n care Apache Tomcat nu exist paii
de urmat ar fi:
1. In laboratoarele FEAA, serverul ApacheTomcat preconfigurat se
gsete n folderul local:
E:\_Programare2\_apache_tomcat
Pentru alte locatii (laptopuri, notebookuri personale):
Descrcare arhiv-kit apache-tomcat-7 de pe portal.
Dezarhivare kit n directorul-gazd pentru serverul de aplicaii
Web Tomcat:
E:\_Programare2\_apache_tomcat
Localizare biblioteci (jars) corespunztoare JPA n
E:\_Programare2\_apache_tomcat\lib
2. Adugare (locaie) 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
adugare dependen server de aplicaii web Apache
Tomcat

2. Adugare referin (pentru compilare) fa de

proiectul JPA de persisten
in [Java Build Path].

3. Adugare 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 configuraie:
JSF Facet versiunea 2.2

Proces creare proiect JSF

 7. Bibliotecile suport JSF se
gasesc deja in dir [lib] al
ServerRuntime-ului
ApacheTomcat7, prin urmare
dezactivam definitia explicita
a dependentelor JSF
Ca urmare a definirii <Target Runtime> ca fiind serverul Apache
Tomcat 7.0, acesta trebuie s apar ntre dependenele Java
Build Path - Libraries din proprietile proiectul JSF tocmai creat.
1.2.2 Configurare dependene ctre
proiectul suport JPA
Adugare dependene de compilare catre proiectul suport
JPA (din fereastra de proprieti a proiectului JSF):
1. activare seciune Java Build Path,
2. deschidere pagina Projects,
3. acionare Add...;
4. bifare nume proiect JPA.
Adugare referin ctre
proiectul JPA n
JavaBuildPath pentru
proiectul JSF
(ProduseJSF)
Adugare dependene de distribuie ctre
proiectul suport JPA
Adugare referine proiect JPA n configuraia de
distribuire/instalare:
a) prin activare seciune Deployment Assembly,
b) acionare Add,
c) selectare directiv Project;
d) selectare nume proiect JPA;
 Adugare referine
distributie proiect JPA

Adugare
dependen ctre
proiectul JPA n
Deployment
Assembly pentru
proiectul JSF
(ProduseJSF)
2. Creare formular start
2.1 Creare surs de date formular simplu
2.2 Creare fiier gazd formular simplu
Creare fiier XHTML
Creare form JSF cu rubrici legate la sursa de date
Creare butoane de navigare formular
creare linie de navigare cu butoane
declarare aciuni n fiier formular suport
legare butoane la aciuni
2.3 Test formular simplu JSF
2.1 Creare surs de date formular
simplu
Creare clas suport <back-bean> FormClienti din seciunea Java
Resource: src a perspectivei JavaEE sau Web
Codificarea clasei FormClienti
Definirea modelului de date
Atribut pentru entitatea curent
Colecie pentru entitile accesibile
Constructorul implicit (fr parametri)
Invocarea suportului de persisten pentru a iniializa modelul
de date
Declararea clasei FormClienti drept managed bean pentru a putea fi
invocat din contextul aplicaiei (n special de cadrul binding care o
va lega de componentele grafice)
 Model de date

Invocare JPA pentru

Iniializare
model de date
 4 2
1

7
2.2 Creare fiier gazd formular
simplu
2.2.1 Creare fiier XHTML
Creare pagin dup template Facelet Header
Modificare titlu pagin formular
2.2.2 Componente grafice
Creare form JSF (drag&drop) legat la sursa de date
2.2.3 Creare butoane de navigare formular
creare butoane
declarare aciuni n fiier formular suport
Legare butoane la aciuni
2.2.1 Creare fiier XHTML
Creare pagin dup template Facelet Header (vezi captura
de pe urmtoarea pagin):
Din seciunea Web Content a perspectivei JavaEE sau Web
meniul contextual opiunea New HTML File
in primul pas se specific numele paginii (FormClienti)
coninnd formularul adugnd explicit extensia xhtml,
in al doilea pas se alege ablonul New Facelet Header.
Creare fiier XHTML
Modificare titlu pagin formular
Dac perspectiva Web nu a fost activat, atunci dup
finalizarea secvenei de pai de creare a fiierului
aceasta va fi activat (vezi captura de pe urmtoarea
pagin).
Zona de lucru va fi mprit 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 proprieti pentru elementul selectat
curent n oricare din cele dou seciuni
Modificarea titlului implicit se poate face direct n zona de
lucru grafic
 Perspectiva Web

Paleta de
component
e

Zona de lucru grafic

Zona de lucru cod surs

Fereastra de proprieti
2.2.2 Componente grafice legate la
sursa de date
Creare form JSF (drag&drop) legat la sursa de date (vezi capturile de pe
urmtoarele pagini):
Selectare component Form din seciunea JSF HTML a paletei de
componente
drag&drop n zona de lucru de grafic
activare secven asistent configurare form
Pasul 1 selectare surs de date
Alegere opiune de generare: Generare a form tag and content
from data
Acionare buton selecie Form Bean: selectare proprietate client
din sursa formClienti
Pasul 2 selectare proprieti client care vor genera rubricile
formularului
Pasul 3 configurare rubrici
Poziie-ordine rubrici
Text etichete asociat
Pasul 1

Pasul 2

Pasul 3
2.2.3 Creare butoane de navigare
formular
Aezarea butoane n cadrul formularului: zona de navigare va constitui o
nou linie deasupra liniilor cu rubricile obinuite.
Pentru a obine o nou linie vom aduce (drag&drop) naintea etichetei Id
client , linie coninnd exact trei componente (vezi capturile de pe
urmtoarele pagini):
o nou etichet Navigare: drag&drop OutputLabel din seciunea JSF
HTML a paletei
un panou cu 2 coloane (cte una pentru fiecare buton): drag&drop
Panel Grid din seciunea JSF HTML a paletei
un mesaj sau o etichet final: drag&drop Message sau Output Label
din seciunea JSF HTML a paletei
n interiorul sub-panoului cu 2 coloane vor fi aduse (drag&drop) dou
componente Command Button din seciunea JSF HTML a paletei, pentru
care n fereastra Properties vor fi modificate proprietile:
Id, n cmdPrevious respectiv cmdNext;
Value, n Prev respectiv Next
Componentele care vor forma linia de navigare vor fi trase exact naintea
primei rubrici ...
Linia de navigare trebuie format din exact 3 componente, altfel se
dezechilibreaz aezarea n pagin, panoul principal al formularului fiind
definit cu 3 coloane...

2
n panoul
secundar adus
1
pe coloana a
2
doua din prima
linie a panoului
principal al
formularului vor
fi trase cele
dou butoane de 3
navigare
cmdPrev i
cmdNext

4
2.2.3 Creare butoane de navigare
formular
Activare butoane de navigare
Creare aciuni de navigare n clasa suport a formularului grafic (vezi
cod surs pe urmtoarea pagin)
n clasa FormClienti se adaug operaiile nextClient i
previousClient care
vor fi parametrizate cu javax.faces.event.Event;
actualizeaz referina clientului curent relativ la poziiile din
lista de clieni
Legare aciuni de navigare la butoane de navigare (vezi capturile de
pe urmtoarele pagini)
se selecteaz fiecare buton de navigare;
se acceseaz proprietatea ActionListener din fereastra de
proprieti i se acioneaz butonul Bind to a dynamic value;
din fereastra activat se selecteaz metoda de navigare din
beanul formClienti.
 Atentie ActionEvent trebuie
importat din
javax.faces.event.ActionEvent

Aciunile de navigare.
ActionEvent provine din
javax.faces.event
1

4 2

3 (dublu click)
3. Test formular start JSF
Din meniul contextual al formularului JSF (n perspectiva JavaEE
sau Web) se selecteaz opiunea Run i aciunea 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 aplicaiei curente
Fereastra browserului se va lansa ctre un URL format astfel
URLul generic al aplicaie, de exemplu
http://localhost:8080/ProduseJSF
La care se adaug numele formularului urmat de extensia jsf i
nu xhtml, de exemplu
http://localhost:8080/ProduseJSF/faces/FormClienti.xhtml
Lansare Form JSF