Componente Swing

JButton
JCheckBox
JFrame
JLabel
JScrollBar
JScrollPane
JTextArea
JTextField
JColorChooser
JFileChooser
JDialog
JProgressBar
JSlider
JInternalFrame
Layout Managers
BorderLayout
BoxLayout
CardLayout
FlowLayout
GridBagLayout
GridLayout
GroupLayout
SpringLayout
Pozitionare absoluta
Card Layout
Layout-ul CardLayout, permite crearea unei arii ce contine
componente diferite la momente diferite. CardLayout este adesea
controlat de catre un ComboBox, a carui stare determina care dintre
paneluri (arie de componente) sa fie afisate de catre CardLayout. O
alternativa la folosirea CardLayout este utilizarea de tabbed pane.
Flow layout
FlowLayout este managerul default pentru orice JPanel. Acest
Layout pune componentele intr-un singur rand, continuand apoi pe
al doilea rand, in caz ca nu exista sufient spatiu in container.
Grid Bag Layout
GridBagLayout este un manager complex si felxibil. In acest
manager, pozitioarea

componenteleor este facuta prin plasarea lor intr-un grid de celule

lasand componentele sa ocupe mai mult de o celula. In acest grid,
randurile pot avea inaltimi diferite, iar coloanele pot avea latimi
diferite.
GroupLayout
GroupLayout este un layout dezvoltat pentru a fi utilizat de
editoarele GUI, insa poate si folosit si individual. GroupLayout
lucreaza cu layout separat pe verticala si pe orizontala.Layout-ul
este definit independent pe fiecare dimensiune. Astfel, fiecare
componenta trebuie sa fie definita de doua ori in layout.

SpringLayout
SpringLayout GroupLayout este un layout dezvoltat pentru a fi
utilizat de editoarele GUI.
SpringLayout permite definirea unei relatii precise intre marginile a
doua componente. De exemplu se poate defini ca marginea stanga
a unei componente este la o anumita distanta (ce poate fi calculata
dinamic) fata de marginea dreapta a unei alte componente.

Joel on Software
Interfata utilizator este importanta pentru ca afecteaza sentimentele,
emotiile si starea de spirit a utilizatorilor tai. Daca interfata utilizator este
gresita si utilizatorul simte ca nu iti poate controla software-ul, ei
literalmente nu vor fi fericiti, si vor da vina pe software-ul tau. Daca
interfata utilizator e desteapta si lucrurile functioneaza in modul in care
utilizatorul s-a asteptat sa functioneze, vor fi bucurosi caci au reusit sa duca
la bun sfarsit mici teluri.
Interfata treuie sa se comporte in modul in care ei(utilizatorii) se asteapta
sa se comporte.
Axioma importanta: O interfata utilizator este bine proiectata cand
programul se comporta exact cum utilizatorul s-a gandit ca ar functiona.
Modelul utilizator: este interpretarea lor mintala a ceea ce programul face
pentru ei, daca modelul program este similar cu modelul utilizator, ai o
interfata utilizator de succes.

De cati utilizatori ai nevoie pentru a testa interfata ta? - Aproape oricine isi
castiga painea din teste de utilizabilitate crede ca cinci sau sase utilizatori
sunt deajuns.
Axioma - Daca modelul tau program nu e trivial, probabil nu e modelul
utilizator.
Important: De fiecare data cand furnizezi o optiune, ii ceri utilizatorului sa
ia o decizie. ar trebui intodeauna sa incerci sa minimizezi numarul de
decizii pe care oamenii trebuie sa le ia.
Din moment ce optiunea afecteaza aspectul vizual fara a afecta nimic din
functionalitate, si din moment ce utilizatorii sunt liberi sa ignore aceasta
optiune si sa isi faca oricum treaba, asta este o buna utilizare a optiunilor.
Metafore, accesibilitati
Consecventa - consecventa cauzeaza usurinta de utilizare care in schimb
cauzeaza sentimente placute rezultand mai multi bani pentru
tine.Consecventa este un principiu fundamental al unui bun design UI, dar
este doar un corolar al axiomei "fa modelul program sa se potriveasca cu
modelul utilizator", pentru ca modelul utilizator este mai probabil sa
reflecte modul in care utilizatorii vad alte programe functionand. Designerii
UI buni folosesc consecventa inteligent, si, desi s-ar parea ca nu isi etaleaza
creativitatea asa bine, pe termen lung ii face pe utilizatori mai fericiti.
Cand proiectezi interfete utilizator, e o buna idee sa ai doua principii in
minte:
- Utilizatorii nu au manualul, si daca l-ar avea, nu l-ar citi.
- De fapt, utilizatorii nu pot citi nimic, si daca ar putea, nu ar vrea.
Unul din principiile timpurii ale interfe GUI era ca nu ar trebui sa le ceri
oamenilor sa isi aminteasca lucruri care ar putea sa si le aminteasca
calculatorul. Oamenii isi amintesc lucrurile mult mai bine cand li se dau
niste indicii, si intodeauna ar prefera sa mai degraba sa aleaga ceva dintr-o
lista decat sa trebuiasca sa isi aduca aminte.
Celalalt lucru grozav despre planificarea bazata pe activitate este ca iti
permite sa faci o lista a ce functionalitati sa nu faci. Cand creezi orice fel de
software, realitatea este ca vei sugera de trei ori mai multe functionalitati
decat ai timp sa faci. Si una din cele mai bune cai de a decide ce
functionalitati sa implementezi, si ce functionalitati sa lasi afara, este de a

evalua ce functionalitati suporta cele mai importante activitati ale

utilizatorului.
Cei mai buni designeri UI din industrie sunt cu totii de acord asupra unui
lucru: trebuie sa inventezi si sa descrii cativa utilizatori imaginari inainte
sa iti proiectezi UI-ul.
Pentru a rezuma, proiectarea unui software bun iti ia cam sase pasi:
Inventeaza niste utilizatori
Identifica activitatile importante
Identifica modelul utilizator -- cum se va asteapta utilizatorul sa
finalizeze acele activitati
Traseaza prima schita a designului
Itereaza asupra designului tau din nou si din nou, facandu-l mai usor
si mai usor, pana cand e compatibil cu abilitatile utilizatorilor tai
imaginari
Urmareste utilizatori reali incercand sa foloseasca software-ul tau.
Observa zonele unde lumea are dificultati, care probabil iti
evidentiaza zonele unde modelul program nu se potriveste cu
modelul utilizator.
UI-ul bun vinde software-ul, dar in acelasi timp face oamenii fericiti,
pentru ca oamenii sunt fericiti cand finalizeaza sarcina care au dorit sa o
finalizeze. De aceea designul UI este un domeniu care iti ofera o extrema
satisfactie. Unde in alta parte vei avea o sansa sa faci milioane de oameni
putintel mai fericiti?
Principii de baz pentru crearea interfetelor interactive
Anticiparea - Aplicatiile ar trebui s anticipeze nevoile si dorintele
utilizatorului.
Autonomia
- Calculatorul, interfata, mediul de lucru, apartin utilizatorului, dar
autonomia utilizatorului nu nseamn ca trebuie uitate regulile.
- Folositi mecanisme de afisare a strii procesului pentru a tine
utilizatorii informati

- Mentineti informatiile de stare la curent si la vedere

Consecventa
- Nivele de consistent: Importanta de a mentine o consistenta strict
variaz.
- Inconsecventa: cnd obiectele de interfat se comport diferit este
tot att de important
inconsecventa vizual ca si consecventa atunci cnd obiectele se
comport similar.
Evitati uniformitatea. Imaginea obiectelor trebuie s se potriveasc
logic cu menirea lor. Faceti obiectele care se comport diferit s arate
diferit.
Eficienta utilizatorului
- Urmriti productivitatea utilizatorului, nu a calculatorului
- Tineti utilizatorul ocupat
- Marile realizri legate de eficient n domeniul software se gsesc
n arhitectura fundamental a sistemului, nu n partea de suprafat, designul
interfetei.
Interfete explorabile
- Oferiti utilizatorilor ci bine stabilite si repere, apoi lsati-i s
porneasc la drum
- Faceti actiunile reversibile
- ntotdeauna oferiti optiunea de Undo
- ntotdeauna permiteti o modalitate de a iesi
Legea lui Fitts
- Timpul necesar atingerii unei tinte este o functie ntre distant si
dimensiunea tintei
Obiecte ale interfetei umane
- Obiectele interfetei umane pot fi vzute, auzite, atinse, sau
percepute ntr-un alt fel
- Obiectele interfetei umane care pot fi vzute sunt foarte familiare n
interfetele grafice.
- Obiectele care fac apel la un alt simt cum ar fi auzul sau pipitul
sunt mai putin familiare.
- Obiectele interfetei umane au un mod standard de interactiune
- Obiectele interfetei umane au comportamente standard
- Obiectele interfetei umane trebuie s fie inteligibile, logice, stabile
Reducerea latentei

- Oricnd e posibil, folositi mai multe fire de executie pentru a

mpinge latenta n background
- Latenta poate fi de obicei ascuns utilizatorilor prin tehnica firelor
de executie, lsndu-i s-si continue lucrul n timp ce transmisia sau
calculele se realizeaz n spate.
- Reduceti impactul latentei asupra utilizatorului
Monitorizarea strilor
- Deoarece multe dintre aplicatiile noastre bazate pe navigare exist
ntr-un spatiu fr stare, avem noi nsine responsabilitatea de a monitoriza
strile
- Informatii despre stare ar trebui tinute ntr-un cookie pe masina
client pe durata unei sesiuni care contine servicii tranzactionale, si apoi
salvat pe server la deconectare.

Arhitectura software pentru interfee utilizator

- Nu se pun ntrebri la care userul nu poate rspunde.
- ntotdeauna trebuie s oferim user-ului o cale de ieire.
Modelul Model-View-Controller (Model-Prezentare-Controler)
Separ preocuprile pentru prile din aplicaie care se vad, de
prile din aplicaie care nu se vd.
Separ intrrile de ieiri
Permite aplicarea mai multor views (prezentri) pentru aceleai
date.
Permite prezentrilor sau controlerelor s poat fi reutilizate pentru
alte modele.
Exemple: text box
Model: string-ul modificabil
View: dreptunghiul cu text n el;
Controler: codul ce se ocupa de tratarea evenimentelor de tastatur.
(caracterele
introduse de la tastatur)
Separ interfaa utilizator a aplicaiei, de codul aplicaiei ce se afl n
spatele interfeei.
MVC separ de asemenea intrarea de ieire; controlerul ar trebuie s trateze
intrrile, iar
prezentarea s trateze ieirile.

Modelul model-view-controller a aprut prima data n interfaa Smalltalk80, i de atunci a avut o importanta influen asupra proiectrii interfeelor
utilizator.
Un exemplu simplu de model MVC este un text box. Modelul este stringul, sirul de caractere modificabil. Prezentarea (view) este un obiect care
afieaz/deseneaz textul pe ecran (de obicei cu un dreptunghi de jur
mprejur pentru a indica c este vorba de un cmp text editabil).
Controlerul este un obiect ce primete caracterele tastate la tastatur de
ctre utilizator i le insereaz n string.
Modelul
Responsabil cu datele
Menine starea aplicaiei (cmpurile de date)
Implementeaz mecanismul / comportamentul state-changing
(schimbarea
starilor)
Notific prezentrile sau controlerele dependente cnd apare /
intervine o
schimbare. (modelul observer)
View (prezentare)
responsabil de ieire
are caracteristici de ecran (poziie, dimensiune)
deseneaz pe ecran
ascult modificrile din model
interogheaz modelul pentru a-l desena
o prezentare are numai un model
dar un model poate avea mai multe prezentri
Controlerul
responsabil cu intrrile
ascult evenimente de tastatur si mouse
instruiete modelul sau prezentarea s se modifice ca atare
ex. un caracter este inserat n string-ul text
un controler are numai un model i o prezentare
Realitatea: Legtura strns dintre prezentare i controler
MVC a fost nlocuit de MV (Model-View)
o prezentare reutilizabil controleaz att intrarea ct i ieirea
mai este denumit si component
controlere reutilizabile sunt rare
Aciunile n Java Swing: obiecte aflate n spatele componentelor
meniurilor,
butoanele din toolbar, sau scurtturile de la tastatur.

 ex. cut, copy, paste, delete

n principiu, este o idee bun s separm intrarea de ieire n clase separate
reutilizabile.
n realitate ns, nu prea este posibil, deoarece intrare i ieirea sunt strns
legate ntre ele.
Drept urmare, modelul MVC a trebuit s fie nlocuit de ceea ce se poate
numi ModelView, unde prezentarea i controlerul sunt cuplate ntr-o singur clas,
numit
component (component) sau widget.
View Hierarchy (ierarhia prezentarilor)
views sunt aranjate n ierarhie
containerele
window, panel, rich text widget
componentele
canvas, button, label, textbox
containerele sunt de asemenea componente
fiecare sistem GUI are o ierarhie de view i aceasta e folosit n diferite
moduri
ieire
intrare
layout
.
Metaforele Dezvolatarea unei interfete utilizator a carui model program se
potriveste cu modelul utilizator nu este intotdeauna usoara. Uneori,
utilizatorii s-ar putea sa nu aibe o perspective concreta despre modul in
care programul functioneaza si despre ceea ce ar trebui sa faca.In aceate
cazuri va trebui sa gasesti cai de a-I oferi utilizatorului indicii despre cum
functioneaza aplicatia.In interfetele grafice, o metoda obisnuita de a rezolva
aceasta problema este folosirea metaforelor.Una dintre cele mai faimoase
metafore este metafora desktop folosita in Windows si Macintosh.Lupa este
o metafora din lumea reala.O metafora, chiar si una imperfecta,
functioneaza mult mai bine decat daca nu avem una deloc.

Design centrat pe utilizator

Waterfall model - consta dintr-o secventa de stari, fiecare stare include
cate o validare - principiul gandeste si apoi scrie cod, Feedback intre stari NU ESTE BUN PENTRU DESIGN UI

Modelul Cascada Modelul cascada, este unul dintre primele procedee de

design pentru desvoltarea de software.Modeleaza procesul de design ca o
secventa de etape. Fieare etapa rezulta intr-un produs concret (un document
de cerinte, un design, un det de module de cod) care va fi folosit apoi la
urmatoarea etapa. Fiecare etapa include de asemenea propia validare:
designul este validat cu cerintele, codul este validat conform designului
Cea mai mare imbunatatire pe care modelul cascada il aduce in dezvoltatea
de software fata de modelele precedente (haotice) este disciplina pe care o
impune programatorulor aceea de a gandi intai si apoi de a scrie cod.
Cerintele si designul preced in general prima linie de cod.In productie, un
dezvoltator de software are in atributiile de serviciu nu numai scrierea de
cod ci si identificarea cerintelor.
Iterative design - Ofera o cale de a controla risk-ul ce poate aparea in UI
DESIGN.
DESIGN -> IMPLEMENT -> EVALUATE... Nici asta nu e chiar
buna.Designul iterativ este o parte extreme de importanta a designului
centrat pe utilizator (process
de design al interfetelor utilizator larg raspandit in randurile designerilor de
UI). Exista o intreaga varietate de tehnici de design bazat pe utilizator (ex:
GUIDE, STUDIO, OVID,LUCID). Dar majoritatea au trei caracteristici in
comun:
- Designul iterativ pentru crearea de prototipuri rapide (rapid prototyping)
- Localizarea timpurie pe utilizatori si taskurile lor
- Evaluarea continua la fiecare iteratie in procesul de design.
Spiral design - Modelul spiralat ofera rezolvarea acesei dileme. Luam in
calcul cateva iteratii in procesul nostru de design, si iteram astfel incat
primele iteratii sa fie cat mai ieftine cu putiinta.
Dimensiunea radial a nodelului spiralat, corespunde costului fiecarei etape
a iteratiei (sau echivalent, ar putea corespunde fidelitatii sau acuratetii). De
exemplu implementarea de inceput ar putea fi schita pe hartie sau macheta.
Are acuratete redusa, reprezinta doar o umbra a ceea ce ar trebui sa devina
si se comporta ca un software interactive. Dar este extrem de ieftin de
realizat, si o putem evalua aratand si intreband utilizatorii despre ea.