L8.

TUTORIAL Eclipse [II]

Java Server Faces: Form Simplu Complet

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. Implementare aciuni CRUD

Codificare aciuni
Invocare aciuni prin butoane de comand
2. Navigare prin selectare n list-combinat a entitii
curente
adugare component de selecie-navigare
legare rubric selecie-navigare la model de date
codificare operaii de conversie-sincronizare
3. Test formular start JSF
1. Implementare aciuni CRUD

1.1 Codificare aciuni CRUD

1.2 Adugare butoane de comand (de
aciune) n formularul grafic
1.3 Legare butoane de comand la aciuni
Codul surs al
controller-beanului
curent al
formularului
Starea curent a formularului
1.1. Implementare aciuni CRUD
Aciunile CRUD (adugare, tergere, abandon, salvare)
vor fi codificate n fiierul bean-controller
FormClienti.java:
public void adaugareClient(ActionEvent evt): se
creeaz un nou client i se adug n modelul de date;
public void stergeClient(ActionEvent evt): se
ndeprteaz clientul curent din modelul de date i din
contextul de persisten (EntityManager);
Implementare aciuni CRUD
Aciunile CRUD din FormClienti.java:
public void abandonClient(ActionEvent evt): se
resincronizeaz clientul curent cu starea actual din
suportul de persisten (schema BD la care este
conenctat entityManagerul formularului);
public void salveazaClient(ActionEvent evt): se
asociaz clientul curent cu contextul de persisten
(EntityManager) i se declaneaz tranzacia cu
suportul de persisten (schema BD).
Vezi codul surs n pagina urmtoare !!!
1.2 Adugare butoane de comand
n formular
Se va obine o nou linie n formular prin aducerea a
dou componente grafice PanelGrid din seciunea JSF
HTML a paletei de componente, fiecare nou panou
avnd 2 coloane. Linia nou este completat eventual
cu un Message sau OutputText (reamintim c panoul
principal al formularului are trei coloane);
1.2 Adugare butoane de comand
n formular
n fiecare sub-panou de pe ultima linie se vor aduga cte 2 butoane de
comand astfel:
Primul panou:
buton pentru adugare:
Id: cmdAdaugare
Value: Adaugare (textul afiat pe buton)
Action Listener: se va aciona butonul Bind to a dynamic
value din fereastra de proprieti i se va selecta: formClienti
- adaugareClient, rezultnd expresia
#{formClienti.adaugareClient} (Vezi pagina urmtoare!)
buton pentru stergere:
Id: cmdStergere
Value: Stergere
Action Listener: #{formClienti.stergereClient}
Adugare butoane de comand n
formular
Al doilea panou:
buton pentru abandon:
Id: cmdAbandon
Value: Abandon
Action Listener: #{formClienti.abandonClient}
buton pentru salvare:
Id: cmdSalvare
Value: Salvare
Action Listener: #{formClienti.salvareClient}
Noua fa a formularului
2. Navigare prin selecie n
list-combinat a entitii curente
Reutilizare model de date suport din clasa back-bean.
Adugare component SelectOneMenu (echivalentul
listei combinate) i legare la element curent din formular.
Adugare specificaii pentru popularea listei combinate.
Adugare comportament ajax.
Modul de functionare a listei de
navigare-selectie
Se bazeaz pe urmtoarele repere:
popularea listei (de navigare) se va face pe baza
coleciei de entiti din modelul de date al
formularului;
lista va fi sincronizat cu entitatea curent a
formularului, deci:
schimbarea elementului selectat (modificarea
valorii listei de selecie) va produce schimbarea
entitii curente din modelul de date;
schimbarea entitii curente din modelul de date
(altfel dect prin list) va produce schimbarea
elementului curent al listei.
Modelul de date suport pentru lista de
selecie (navigare) din clasa controller-bean

Din punct de vedere logic, o list JSF (gen

SelectOneMenu sau SelectOneListBox) poate fi
populat cu o colecie de entiti ale modelului de date.
La nivelul formularului HTML din browser, de fapt, lista
va fi format dintr-o colecie de elemente.
<string de prezentare>-<string valoare>.
Modificarea elementului curent selectat al listei de
navigare este echivalent cu modificarea valorii listei.
Prin urmare, lista va fi legat, din punctul de vedere al
valorii, la o proprietate, accesibila prin operaii getter/setter,
gzduit de clasa controller.
Lista de navigare a formularului pentru
clienti
Va fi alimentata direct din colectia de clienti de la nivelul
form-beanului.
List<Client> getClienti()
Elementele din setul de selectie vor fi formate din
perechi de forma nume client-identificator client
[eticheta] nume - [valoare] id
Valoarea listei (de fapt a elementului curent selectat) va
fi, prin urmare, identificatorul clientului (idClient).
Valoarea listei va fi legata, prin urmare, la proprietatea
idClient, desemnata prin getter/setter:
Integer getIdClient()
void setIdClient()
Modelul de date suport pentru lista de selecie
(navigare) clienti
Adugare component-view list navigare:
SelectOneMenu (sau SelectOneListBox)
Lista combinat pentru selecie-navigare va fi obinut
prin configurarea componentei grafice SelectOneMenu
din seciunea JSF HTML a paletei.
Aceast component va fi adaugat iniial pe prima linie
a panoului principal al formularului (vezi pagina
urmtoare), dup eticheta Navigare care va fi eliminat
ulterior, astfel nct lista-combinat s o nlocuiasc.
Lista combinat va fi legat la entitatea curent a
formularului.
Dup tergerea etichetei Navigare iniiale,
formularul ar trebui s arate astfel:
Adugare specificaii pentru popularea
listei combinate
Legarea listei combinate de sursa de date se face prin
intermediul componentei non-grafice SelectedItems din
seciunea JSF Core a paletei. Aceast component
poate fi adus prin drag&drop exact ntre tagurile
<selectOneMenu>...</selecteOneMenu> ce
consemneaz definiia listei combinate n fereastra
cod-surs aferent fiierului xhtml.
nscrierea cursorului de scriere ntre tagurile
<selectedItems> nou generate va activa fereastra de
proprieti de unde se va selecta proprietea clienti a
beanului-controller formClienti, dup cum se
exemplific n pagina urmtoare.
Adugare specificaii pentru popularea
listei combinate
Pentru desemnarea modului cum entitatile din sursa de
date, proprietatea clienti accesata prin getClienti(), sunt
convertite in perechi eticheta-valoare de forma nume-id,
componenta (non-grafica) selectedItems va fi
configurata prin proprietatile:
var cu valoarea item:
ca urmare fiecare client va fi accesat la iterarea
sursei de date (proprietatea value) prin variabila
cu numele item;
itemLabel cu valoarea #{item.nume}
itemValue cu valoaare #{item.id}
Adugare comportament ajax
Pentru ca lista combinat s aib un comportament corespuztor,
e nevoie de adugarea unor specificaii ajax astfel nct:
comportamentul listei (mai exact schimbarea elementului
curent al listei) s nu retrimit pe server dect noua stare a
listei, fr celelalte componente ale formularului;
dup procesarea pe server a listei, ce se va traduce prin
apelarea setterului setIdClient, pentru a desemna drept entitate
nou selectat n formular pe cea corespunztoare valorii listei,
vor trebui reluate de pe server doar valorile corespunztoare
rubricilor simple (refresh pe rubricile care vor prezinta
proprietile entitii nou selectate, adic rubricele cu id-urile id
i nume).
Adugare comportament ajax
Acest comportament se face specifica astfel:
din seciunea JSF Core a paletei se aduce (drag) componenta
non-vizual Ajax n contextul formularului, i se plaseaz, la fel
ca i selectedItem, tot ntre tagurile
<selectOneMenu>...</selecteOneMenu> ce consemneaz
definiia listei combinate n fereastra cod-surs aferent
fiierului xhtml (vezi pagina urmtoare);
dup nscrierea cursorului de scriere ntre tagurile <ajax> nou
generate se vor meniona id-urile rubricilor simple ale
formularului (desprite obligatoriu prin spaiu, i nu prin
virgul) n proprietatea render din fereastra de proprieti
asociat tagului ajax.
3. n final, formularul ar trebui s arate
astfel