Documente Academic
Documente Profesional
Documente Cultură
ri/i
CUPRINS
1. Programarea vizuală.
II. Interfeţe utilizator grafice - GUI. Arhitectura MVC.
(JAVA)
1. GUI
3. Implementare
4. Avantajele/dezavantaje arhitecturii
MVC.
I l/x.
k \ ^ ___________________________ __________________________ £_
J Caracteristici:
I. Programarea vizuală.
Vizual -> acel atribut al unui obiect cc il Tace destinat percepţiei folosind simţul văzului.
Programarea vizuala: "Utilizarea de reprezentări grafice cu o anumita semnificaţie in procesul de programare” (Shu, 1988).
• Alternativa la reprezentările grafice sunt reprezentările textuale. Diferenţa esenţiala intre ele este ca primele sunt destinate văzului iar cele textuale auzului.
La ora actuală este la modă termenul de expresie vizuală in procesul de programare în loc de reprezentare geometrică sau topologică. Expresiile vizuale sunt manipulate cu
ajutorul unui mediu de programare vizuala.
• Se refera la utilizarea de tehnici grafice, diagramatice. vizuale pentru a realiza programarea.
= ° Limbajele vizuale manipulează expresii vizuale pentru
a realiza ceea ce în mod normal se realizează cu expresiile textuale din limbajele de programare tradiţionale;
91
U . . . .
“ • Otera suport pentru interacţiune vizuala.
£
fi.
0
Se refera la folosirea de tehnologii vizuale.
o Un loc special il ocupa construirea de interfeţe grafice pentru limbajele de programare textuale.
° permite manipularea de informaţii vizuale;
□ interfeţelor grafice respectă look- and-feel-ul Windows (sintagmă ce se referă la două aspecte importante ale interfeţei):
1. caracteristicile vizuale ale interfeţei
2. comportamentul interfeţei ca răspuns la acţiunea utilizatorului.
> Aceste două caracteristici sunt puternic intercondiţionate, unde acţiunile utilizatorului sunt dictate de aspectul vizual al interfeţei, iar acţiunile similare sunt reprezentate
1
1/4/2018
_ Definiţie tehnica:
“m
3
^ Limbajele vizuale asigură suport pentru interacţiunea vizuală (limbajul poate fi textual).
comen/.i apeluri
Parte de
preluerare:
Interfaţa date si
grafica algoritmi
răspunsuri rezultate
A
GUI
Arhitectura W3. (JAVA)
cui
2. Arhitectura MVC
2.1. Model
2.2. View
2.3. Controller
3. Implementare
4. Avantajele/ dezavantajele aduse prin implementarea arhitecturii MVC.
Arhitectura unui program (Software Arclntecture)
> Este recomandat ca arhitectura I generală a unui program să tic I modulară, fiecare componentă fiind responsabilă de aspecte diferite ale funcţionalităţii programului.
r Se consideră că proiectarea la nivel arhitectural este o etapă separată şi obligatorie in I dezvoltarea unui program, ca I trebuind să preceadă etapa de I proiectare detaliată a
programului.
Interfeţe GUI
«- Interfeţele grafice, au un rol important în comunicarea dintre utilizator şi computer.
- Diferenţa între interfeţele coinmand-Iine şi interfeţele grafice constă în faptul că interfaţa grafică interacţionează în mod direct cu utilizatorul şi creează astfel un mediu
"user- ftiendly”.
- Orice aplicaţie software ce implică interacţiunea cu un utilizator (se consideră cazul cel mai defavorabil - utilizatorului lără experienţă în domeniu IT ) trebuie să folosească
o interfaţă grafică (GUI - Graphic User Interface) deoarece aceasta este mult mai uşor de învăţat chiar şi pentru utilizatorii neexperimentaţi in domeniul programului
respectiv.
2
1/4/2018
> Clasa Component, tot din Java, conţine în mare parte clase ale obiectelor graficc(subclase).
• reprezintă si defineşte generic componenta grafică ce poate sa intcracţionczc cu utilizatorul. Meniurile din clasa MenuContponent reprezintă obiecte grafice ce nu derivă din
clasa Component.
> Un obiect ce poate să fie afişat pe ecran, are o reprezentare grafică si are proprictarea de a interacţiona cu utilizatorul reprezintă o componentă grafică. Componentele
definite sunt definite folosind clase proprii din java.awt. Superclasa Abstractă a acestor clase este Clasa Component.
> Exemplu de componente grafice: butoane, ferestre.
1. GUI - GraphicaI User hiteiface
> se bazează pe un ansamblu ce foloseşte elemente grafice
> sistem afisaj grafic-vizual
> oferă indicatori vizuali
r realizează o legătură între dispozitive electronice şi utilizator
> în cadru! procesului de a realiza interfaţa cu utilizatorul. Java se foloseşte de diferite clase care au rolul in implementarea funcţionalităţi lor interfeţelor grafice.
> în timpul evoluţiei si trecerii de la un JDK ca altul, pachetul de clase java.awt (oferă servicii grafice) a fost cea mai des modificată si revizuită bibliotecă prin adăugarea de
noi component grafice. AWT provine de Abstract VVindow Toolkit.
r Pentru a realiza o aplicaţie grafică trebuie să ţinem cont dc următorii paşi:
■ Trebuie creat suprafaţa de afişare: toate componentele grafice care au rolul de a realiza legătura cu utlizatorul se plasează pe această suprafaţă. După ce a fost creată
suprafaţa de afişate, se creează elementele grafice care se plasează in această suprafaţă. Pentru a te face vizibile, componentele trebuiesc setate din cod să devină
vizibile.
• Următorul pas constă in definirea unor acţiuni pe butoane. Mai clar, atunci când utilizatorul interacţionează cu aceste componente, elementele trebuie să execute
comenzile primite de Ui utilizator.
> Obiectele grafice si afişarea lor pe ferestre trebuie să se facă manual, deoarece nu se generează automat. La început sunt create si apoi trebuiesc plasate de suprafeţe de
afişare (ferestre. Applet). Pentru a face elementele grafice vizibile este necesar ca fereastra să se facă vizibilă.
> Suprafeţele de afişare se numesc containere deoarece suprafeţele în care se plasează obiectele sunt instaţelc unei clase ce se obţine din clasa Container prin extensie. Clasa
Container reprezintă o subclasă a clasei Component care este superclasa suprafeţelor de afişare Java.
> Un obiect cu reprezentare grafică pe fereastra de afişare si interacţionează cu utilizatorul se numeşte componentă. Acestea sunt definite dc clase proprii. Clasele se găsesc in
pachetul jartumt. Superclasa abstractă a claselor se numeşte Component.
Ierarhia claselor
> Containerele reprezintă un spaţiu în care se pot adăuga componente. Ordinea de traversare front-to-baek este realizată de poziţiile componentelor care sunt aşezate in
container şi sunt memorate intr-o listă. Atunci când se adaugă componente, ele sunt adăugate la sfârşitul listei. Situaţia se poate schimba dacă specificăm indexi la
adăugarea componentelor.
Limbajul Java
- Java este un limbaj de programare orientat - obiect (la fel C++). La proiectarea Java s-a dorit eliminarea elementelor problematice din C++: moştenire multiplă, pointeri,
supraîncărcarea operatorilor, destructori, etc.
* Java a aparut în ideea de a dezvolta aplicaţii pentru Internet. Ulterior el a devenit un limbaj de programare de uz general.
- Structurile de control sunt cele din C/C++.
«- Fiecare fişier sursă (are extensia .java) conţine o singură clasa publică. Numele său trebuie să fie identic cu numele fişierului.
Limbajul Java
- Nu există moştenire multiplă. In schimb există interfeţe. O interfaţă conţine o mulţime de prototipuri de metode şi o mulţime de constante. O clasă poate moşteni de la o
singură altă clasă de bază dar poate extinde oricâte interfeţe.
Clasele sunt organizate în pachete. Pachetele sunt structurate pe directoare în sistemul de fişiere.
»• Un program Java se compilează într-un cod intermediar numit bytecode. Acest cod se poate executa pc orice calculator cu condiţia existenţei unui interpretor numit şi
maşina virtuala Java.
> Bibliotecile de cod obiect pot fi arhivate într-un format special jar.
2. Arhitectura MVC (Model-View-Controller)
MVC este un model architectural care poate să izoleze logica de business de interfaţa cu utilizatorul (UI). Aplicaţia care rezultă are proprietatea ce constă în uşurinţa
3
1/4/2018
modificării asupra aspectului vizual şi asupra nivelelelor inferioare ale regulilor de business. Astfel alte nivele a aplicaţiei nu sunt modificate.
> Spre exemplu, V indică culoarea componentei, fontul sau indicarea vizuală a stării de apasarc /eliberare a unui buton.
> Componenta V este responsabilă cu menţinerea actualizata a reprezentării vizuale a componentei M. Pentru aceasta primeşte indirect mesaje de la componenta M şi
direct dc la componenta C.
Arhitectura User lnterface
> Este una dintre cele mai uzuale modele de design . Cei mai mulţi programatori au folosit acest pattem in dezvoltarea aplicaţiilor cel puţin o dată.
Structura unui astfel de pattern este următoarea
Request
Response
----- ► FbGsteiux
(tstalty Io a rchtmal -< fata Inse)
Componenta Controlor (C)
- Componenta C este responsabilă cu comportamentul reactiv la evenimente.
- Componenta C determină dacă un anumit eveniment de intrare a fost adresat într-adevar unei anumite componente: cum este un clic pe un buton (acest lucru poate cere
o cooperare cu componenta V). in caz afirmativ informează componenta M. Componenta M transmite apoi mesajul prin difuzare, către celelalte componente V.
Acestea actualizează modul de prezentare vizuală a stării componentei. în felul acesta toate componentele V asociate componentei îşi vor putea actualiza aspectul
vizual în concordanţă cu starea componentei.
4
1/4/2018
V în implementarea MVC, Controlorii sunt clase de obicei derivate din Clasa System.Web.Mvc.Controiler (in cazul ASP.NET). Fiecare metodă publică
derivata din Controlor se numeşte action method. Atunci când o cerere este trimis la URL-asociat cu o metodă de acţiune, metodele din clasa
Controlerului sunt executate pentru a efectua operaţiile necesare.
' Modele ale datelor aplicaţiei: reprezintă date care au semnificaţie doar în contextul aplicaţiei. Aceste modele sunt importante în aplicaţiile care separă datele
aplicaţiei de IG.
maura
5
1/4/2018
Controale Swing
Se observă că partea superioară a ierarhiei controalelor grafice Swing se bazează pc AWT. controalele Swing moştnind din
JComponent.
Componente primitive Swing:
> JButton: are în plus faţă dc clasa Button suport pentru pictograme şi acceleratori (tastatura).
> JCheckBox: are în plus faţă de CheckBox suport pentru pictograme.
> JComboBox: selecţiile pot fi şi pictograme. r Jlabei: eticheta poate fi şi o pictogramâ.
> JList: elementele pot fi şi pictograme.
Aspecte vizuale diferite în Sisteme de Operare diferite
' ------------------ H s II B ll
I Frame 1 ca
03 Ifrl Frame 2 □ II O || B |1
03 03 Frame 3 Tâlăi
03 os. nanve: Uindovs Visca
os.version: 6.1
O n rs Frame 1
f,am 3
'
“•’oi nirm Mac OS X os.version 10.5.8
Swin
în general, crearea unei aplicaţii Swing presupune parcurgSM următorilor paşi:
> Se importă pachetele Swing necesare: javax.swing, j ava. awt, j ava. awt. event.
> Orice aplicaţie Swing conţine o fereastră rădăcină. în majoritatea cazurilor acesta este un obiect JFrame, JDialog sau JApplet. Containerele rădăcină conţin
suportul necesar pentru desenarea şi tratarea evenimentelor pentru obiectele componente.
> Se crează componentele grafice ale aplicaţiei: butoane, etichete, etc.
> Se adaugă componentele grafice la containerul ferestrei rădăcină. Acest container se obţine cu metoda getContentPane (). Este recomandabil ca obiectele grafice
să nu se adauge direct, ci să se grupeze în prealabil în containere JPanel. Acest lucru va uşura structurarea aspectului vizual al interfeţei.
> Se scrie codul de tratare a evenimentelor şi se adaugă obiectele
^ascultătoare la obiectele generatoare de evenimente.
6
1/4/2018
Mediul Java detectează aceste evenimente, identifică componentele legate de aceste evenimente (de exemplu, când se face un clic cu mouse-ul se detectează dacă cursorul mouse-
ului se afla deasupra unui buton) şi generează evenimente noi conţinând reprezentări de nivel înalt ale acestora către obiectele din program înregistrate să le primească.
Cel mai adesea sursele evenimentelor sunt componentele Swing sau modelele acestora.
Obiectele eveniment sunt instanţe ale claselor <Nume>Kvent.
Swin
7
1/4/2018
" Un ascultător trebuie să implementeze o interfaţă standard de tipul Clasa JButton suporta instalarea tmor ascultători de tipul
ActionListener:
<Numc>Listener, unde <Nume> identifief tipul
evenimentului.
JButton myButton = new JButtonf);
<- Aceste interfeţe sunt definite în pachetele Actionl.istener act • new
java . awt .event, j avax. swing. event şi respectiv ActionListener!) (
java .beans. public void
O astfel de interfaţă va conţine cel puţin o metodă care primeşte ca
parametru un eveniment, adica un obiect de tipul actionPerformed(ActionEvent e) (
System.out.prinţIn("Swing-ul este puternic!!");
<Nume>Event.
)
- Un obiect ţintă capabil dc a primi notificări prin evenimente va );
dispune de o interfaţă pentru înregistrarea ascultătorilor dar şi myButton.addActionListener(act);
pentru eliminarea ascultătorilor prin metodele content.add(myButton);
add<Nume>Listener (), respectiv remove<Nume>Listener(). myButton.setOpague(false);
http Messons2all.com/java_events.php
8
1/4/2018
> Această mini-aplicaţic este contruită pe baza arhitecturii MVC si reprezintă un panou în care utilizatorul poate să deseneze. Pentru fiecare componentă MVC avem 3 clase
> DemoController - care reprezintă controllerul r DemoView- reprezintă interfaţa cu utilizatorul
> Demo Model- reprezintă modelul
> Rolul unui Controller constă în responsabilitatea primirii cererilor de la client. După cc sunt primite cererile, ele trebuiesc să fie mapate la o clasă controller. Aceasta trebuie
să retumeze la un utilizator un view sau trebuie să redirecteze spre un alt controller. In mod nonnal, numele unui controller este de tipul: numeController.
'*• Acţiunile unui controller. O acţiune este o metodă în clasa controller-ului care este apelată ahinci când utilizatorul introduce un URL in bara de adresa a browscr-ului.
-
-
Exemplu:
VHellej Wcrrld!
9
1/4/2018
Avantaje
'r Arhitectura MVC in cazul interacţiunii cu serverul nu utilizează modelul în web forms de post-back. Pentru testarea cu uşurinţă si pentru separarea elementelor în program,
modelul se înlocuieşte cu direcţionarea interacţiunii utilizatorului la o clasă Controller.
y Asigură separarea responsabilităţilor componentelor unei aplicaţii vizuale.
> proiectarea sa, poale să fie uşor de înlocuit sau personalizat.
y Suportă injectare de dependenţe ( dependenez injection).
>> Suportă modele de containere IOC (Nhibemate, Spring.Net).
> Permite ca unui aceluiaşi model să i se asocieze mai multe vederi.
V Pennite schimbarea dinamică a comportamentului unei vederi.
Dezavantaje:
> Necesită o legătură strânsă între controlor şi vedere. încă din faza de proiectare trebuie să se cunoască detalii despre particularităţile vederilor cu care interacţionează
controlorul.
f
MVC
1. Adam Freeman and Steven Sanderson - "Pro ASP.NET MVC 4", Fourth Edition
2. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
3. Curs P00 (Telecom Academy)
4. ht tD //www c\.utsa.edu/~ci>3443/mvc-exarm)!p.html
5. http://www.asp.net/mvc
/"T
10