Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014

Page 1 of 27




Programarea interfeelor grafice
Aplicaii interactive



Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 2 of 27

Cuprins
1. Introducere n programarea aplicaiilor interactive
2. Interfee grafice n Windows
3. Evenimente i controale Win32 n C/C++
4. Grafic n WIN32. Context de desenare
5. Elemente avansate.Controale definite de utilizator
6. Arhitectura MVC
7. Observator - model observabil
8. Baze de date. Reprezentarea datelor
9. Aplicaii Windows moderne
10. Interfete grafice n WEB i evenimente asincrone
11. Interfete grafice n Java
12. Interfete grafice pentru sisteme mobile
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 3 of 27

Teme de laborator
Temele se vor dezvolta intr-unul din urmatoarele limbaje: C/C++/C#/Java.
1. S se elaboreze un calculator
2. S se elaboreze un convertor a unitilor de msur
3. S se elaboreze un editor simplu de text
4. S se elaboreze o agend electronic
5. S se elaboreze un program minimal de grafic bitmap
6. S se elaboreze un program minimal de grafic vectorial
7. S se elaboreze un program de generare facturi si chitane
8. S se elaboreze un program de gestiune minimal
9. S se elaboreze un dicionar explicativ al limbii romne
10. S se elaboreze un dicionar RO-EN/EN-RO
11. S se elaboreze un program de chat
12. S se elaboreze un program pentru reprezentarea grafurilor
13. S se elaboreze un program de reprezentarea grafic a algoritmilor de sortare
14. S se elaboreze un program de reprezentarea grafic a algoritmilor pe grafuri
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 4 of 27


15. S se elaboreze un program de rezolvare a problemelor de fluxuri pe grafuri
16. S se elaboreze un program de reprezentare i testare a AFD/AFN


Aplicaii mobile
17. Aplicaii de culegere date pentru sondaje de opinie
18. S se elaboreze un program de chat (n reea) pentru Android/Windows Phone
19. S se elaboreze jocul (distribuit) Tic Tac Toe(x si 0) pentru Android/Windows
Phone
20. S se elaboreze jocul (distribuit) Reversi pentru Android/Windows Phone
21. S se elaboreze un dicionar Android/Windows Phone



Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 5 of 27

Bibliografie
1. Charles Petzold, Programming Windows, 5th ed. Microsoft Press, 1998
2. Charles Petzold, Programming Windows Phone 7, Microsoft Press, 2010
3. Bruce Eckel, Thinking in C++: Introduction to Standard C++, Prentice Hall,
2000
4. Bruce Eckel, Thinking in Java (4th ed.), Prentice Hall, 2006




Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 6 of 27

Oportuniti
Previziunile de angajare pentru anul 2014 subliniaza o relativa stabilizare a
pietei fortei de munca in comparatie cu anii precedenti. 57% dintre
angajatori estimeaza o crestere a numarului de angajati din companie in
2014 raportat la anul care s-a incheiat.



Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 7 of 27




Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 8 of 27

Java, un limbaj de programare orientat pe obiect, puternic tipizat, este printre cele mai solicitate limbaje in cerintele job-urilor din Romania,
dar si din Europa. Limbajul imprumuta o mare parte din sintaxa de la C si C++, dar are un model al obiectelor mai simplu. Cele mai multe
aplicatii distribuite sunt scrise in Java, fiind utilizat si pe dispozitive mobile gen telefon, agenda electronica, palmtop. In urma clasificarilor
realizate, Java isi mentine primul loc in topul celor mai utilizate limbaje de programare, la fel cum se intampla si acum 5 ani. Job-urile care cer
cunoasterea limbajului de programare Java sunt printre cele mai ofertante, atat din punct de vedere al numarului de locuri de munca
disponibile, dar si al pachetului salarial oferit.
C, un limbaj de programare standardizat, compilat, de nivel mediu, este apreciat pentru eficienta codului obiect pe care il poate genera si
pentru portabilitatea sa. Sintaxa limbajului C sta la baza multor limbaje de programare populare, precum: C++, Java, JavaScript, C#. Ca si in
cazul limbajului Java, acesta se situeaza pe locul doi, la fel ca in 2006.
C++este un limbaj de programare general, un limbaj multi-paradigma, cu verificare statica a tipului variabilelor, care suporta programare
procedurala, abstractizare a datelor si programare orientata pe obiective. A devenit un limbaj foarte popular in anii '90, ramanand la fel pana
in prezent, conform statisticilor.
PHP, unul dintre cele mai importante limbaje de programare web open-source si server-side, este folosit pe scara larga in dezvoltarea
paginilor si aplicatiilor web. Popularitatea sa se datoreaza simplitatii sale, eficientei, securitatii, flexibilitatii si, nu in ultimul rand, gratuitatii
sale.
C#este un limbaj de programare orientat pe obiect, derivat din C++. Avantajele sale sunt: dezvoltarea rapida de aplicatii, functionare inter-
platforme, acces la resursele caracteristice platformei si suport pentru platformele COM si .Net. Acest limbaj se bucura de o popularitate
ridicata datorita simplificarii scrierii de programe, fiind o cerinta obligatorie cunoasterea sa pentru numeroase job-uri disponibile pe piata
muncii in acest moment.
Objective C este o extensie a limbajului de programare C, utilizat pentru dezvoltarea aplicatiilor pentru Apple OS X si iOS. Piata muncii din
Romania tine pasul cu evolutia tehnologiei, existand job-uri ofertante pentru programatori si specialisti care sa dezvolte tehnologii pentru
iPhone si iPad.


Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 9 of 27

Interfaa grafic n C++i Windows
Ferestre
Caracteristica de baz a sistemului de operare Windows este definit de
faptul c reprezint un mediu de lucru multitasking, adic permite operarea
cu mai multe programe (aplicaii) simultan.
Atunci cnd deschidei un program, un fiier sau un folder, acesta apare pe
ecran ntr-o caset sau un cadru denumit fereastr (window, n limba
englez). De aici provine numele sistemului de operareWindows . Deoarece
ferestre sunt peste tot n Windows, este important s nelegem cum
funcioneaz ferestrele.
Prile unei ferestre
Dei coninutul fiecrei ferestre este diferit, toate ferestrele au n comun
unele lucruri. n primul rnd, ferestrele apar ntotdeauna pe desktop,
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 10 of 27

principala zon de lucru a ecranului. De asemenea, majoritatea ferestrelor
au aceleai pri de baz.

Bara de titlu. Afieaz numele documentului i al programului (sau
numele folderului, dac lucrai ntr-un folder).
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 11 of 27

Cmpul de control este o mic pictogram situat pe bara de titlu la
extremitatea stng. Se acceseaz prin apsarea combinaiei de taste
Alt+Space i conduce la un meniu pentru manevrarea ferestrei active
fr mouse.
Butoanele de control se situeaz ntotdeauna la extremitatea
dreapt a barei de titlu. Acestea sunt urmtoarele:
Buton de minimizare prin apsare, determin reducerea ferestrei
sub form de buton pe taskbar. Fereastra se restaureaz
(maximizeaz) de pe taskbar cu ajutorul butonului funciilor active al
mouse-ului.
Buton de maximizare mrete la maxim fereastra;aceasta se va
extinde ocupnd suprafaa maxim posibil.Locul acestui buton va fi
luat automat de un nou buton de restaurare a dimensiunii anterioare
maximizrii ferestrei.
-Buton de nchidere se utilizeaz pentru nchiderea ferestrei.
Bara de meniuri. Conine elemente pe care se face clic pentru opiuni
ntr-un program.
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 12 of 27

Barele de butoane utilitare sunt elemente caracteristice interfeelor
grafice. Majoritatea opiunilor de meniu (comenzilor) au corespondent
un buton grafic. Prin apsarea butoanelor se obin aceleai efecte ca i
la utilizarea comenzilor din cadrul meniurilor. Comenzile sunt deci
tipuri de aciuni pe care ni le propunem (verbe), grupate n meniuri
care au ca numitor comun aciunea propus (dac se dorete
acionarea asupra formei unui document atunci cu siguran va trebui
s se apeleze la serviciile meniului Format).
Bara de defilare. V permite s defilai prin coninutul ferestrei pentru
a vedea informaii care sunt momentan n afara zonei vizibile.
Borduri i coluri. Acestea se pot glisa cu indicatorul mouse-ului pentru
a modifica dimensiunea ferestrei.
Bara de stare este o zon n partea de jos a ferestrei, n care se
afieaz informaii sumare despre coninutul sau activitatea
desfurat n fereastr la fiecare moment.
Alte ferestre pot avea butoane, casete sau bare suplimentare.
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 13 of 27


O fereastr minimizat nu este nchis, nu este oprit din funcionare.
Ferestrele se gsesc (numai cu numele lor de aplicaie sau fiier) sub form
de butoane (de tip ntreruptor apsat/neapsat) pe bara de sarcini
(taskbar). Prin apelarea cu butonul funciilor active al mouse-ului se aduce n
cmpul de lucru (se maximizeaz) oricare din aplicaiile exitente pe taskbar.

Casete de dialog
O caset de dialog este un tip special de fereastr care furnizeaz informaii,
ne pune o ntrebare, sau ne permite s selectm opiuni pentru a ndeplini o
activitate. Vom vedea deseori casete de dialog atunci cnd un program sau
Windows are nevoie de un rspuns din partea noastr. nainte de a continua.
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 14 of 27


Dac ieii dintr-un program fr a salva documentul, apare o caset de
dialog. Spre deosebire de ferestrele obinuite, majoritatea casetelor de
dialog nu pot fi maximizate, minimizate sau redimensionate dar pot fi
mutate.

Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 15 of 27

Controale
Prin controale nelegem elementele grafice (ferestre speciale) cu ajutorul
crora se realizeaz diverse aciuni asupra aplicaiilor
Controale apar de obicei n ferestre de dialog.
Cele mai cunoscute controale sunt:
Butoanele push
Butoanele radio
Checkbox-urile
Listele
Listele ascunse
Casetele de editare
Contoalele deincrementare
Exist i controale definite de utilizator

Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 16 of 27



Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 17 of 27

Mesaje, bucla de mesaje

BOOL bRet =0;
whi l e ( bRet =Get Message( &msg, 0, 0, 0 ) )
{
i f ( bRet ==- 1 )
{
/ / handl e t he er r or and possi bl y exi t
br eak;
}
el se
{
i f ( ! Pr eTr ansl at eMessage( &msg ) )
{
Tr ansl at eMessage( &msg ) ;
Di spat chMessage( &msg ) ;
}
}

}


Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 18 of 27

Crearea ferestrelor
voi d Regi st er Cl ass( WNDCLASS & wcex )
{
wcex. st yl e = CS_HREDRAW| CS_VREDRAW;
wcex. l pf nWndPr oc = Wi ndowProc;
wcex. cbCl sExt r a = 0;
wcex. cbWndExt r a = 0;
wcex. hI nst ance = Get Modul eHandl e( 0 ) ;
wcex. hCur sor = LoadCur sor ( nul l pt r , I DC_ARROW) ;
wcex. hbr Backgr ound =( HBRUSH ) : : Cr eat eSol i dBr ush( RGB( 255, 255, 255) ) ;
wcex. l pszMenuName =MAKEI NTRESOURCE( I DC_MYMENU ) ;
wcex. l pszCl assName =Cl asaFer east r a;
wcex. hI con =( HI CON ) LoadI con( Get Modul eHandl e( 0 ) ,
MAKEI NTRESOURCE( I DI _MYI CON ) ) ;

ATOMat om= Regi st er Cl assEx( &wcex ) ;

}



Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 19 of 27

CreateWindow

HWND WI NAPI Cr eat eWi ndow(
_I n_opt _ LPCTSTR l pCl assName,
_I n_opt _ LPCTSTR l pWi ndowName,
_I n_ DWORD dwSt yl e,
_I n_ i nt x,
_I n_ i nt y,
_I n_ i nt nWi dt h,
_I n_ i nt nHei ght ,
_I n_opt _ HWND hWndPar ent ,
_I n_opt _ HMENU hMenu,
_I n_opt _ HI NSTANCE hI nst ance,
_I n_opt _ LPVOI D l pPar am) ;


/ / Cr eat e wi ndow.
HWND hwnd_ =Cr eat eWi ndow(
TEXT( "Cl asaFer east r a") ,
TEXT( "TI TLU") ,
WS_CHI LD,
0, 0, 640, 480,
hwndPar ent ,
nul l pt r ,
Get Modul eHandl e( 0 ) ,
Nul l pt r ) ;



Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 20 of 27

Programul principal
i nt WI NAPI wWi nMai n( HI NSTANCE hI nst ,
HI NSTANCE hPr ev, LPWSTR l pCmdLi ne, i nt nCmdShow)
{
/ / Regi st er wi ndow
/ / Cr eat e Wi ndow
/ / ShowWi ndow( hWnd, nCmdShow) ;
/ / Updat eWi ndow( hWnd) ;

MSG msg;
BOOL b =0;
whi l e ( b =Get Message( &msg, NULL, 0, 0) ) / / WM_QUI T
{
i f ( b ==- 1 ) { / * er oar e */ }
el se
{
Tr ansl at eMessage( &msg ) ;
Di spat chMessage( &msg ) ;
}
}

r et ur n 0;
}
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 21 of 27

Procedura ferestrei
LRESULT CALLBACK WndPr ocedur e( HWND hWnd,
UI NT Msg, WPARAMwPar am, LPARAMl Par am)
{
swi t ch( Msg)
{
case WM_DESTROY:
Post Qui t Message( WM_QUI T) ;
br eak;
def aul t :
r et ur n Def Wi ndowPr oc( hWnd, Msg, wPar am, l Par am) ;
}
r et ur n 0;
}

Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 22 of 27

LRESULT CALLBACK WndPr oc( HWND hwnd, UI NT msg, WPARAM wPar am, LPARAMl Par am)
{
swi t ch( msg )
{
case WM_PAI NT:
{
: : Begi nPai nt ( ) ; / / apar e PE AI CI WM_NCPAI NT, WM_ERASEBKGND
OnPai nt ( ) ;
: : EndPai nt ( ) ;
}
case WM_ERASEBKGND:
{
r et ur n OnEr aseBackgr ound( ( HDC ) wPar am) ;
}
case WM_NCPAI NT:
{
r et ur n OnNcPai nt ( wPar am, l Par am) ;
}
case WM_COMMAND:
{
r et ur n OnCommand( wPar am, l Par am) ;
}
case WM_CREATE: / / t r i mi s de Cr eat eWi ndow si pr i mi t i nai nt e de as se t er mi na Cr eat eWi ndow
{
r et ur n OnCr eat e( ) ;
}
case WM_NCCREATE: / / t r i mi s de Cr eat eWi ndow si pr i mi t i nai nt e de as se t er mi na Cr eat eWi ndow
{
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 23 of 27

r et ur n OnNcCr eat e( ) ;
}
case WM_CLOSE:
{
Dest r oyWi ndow( hwnd ) ;
Br eak;
}
case WM_DESTROY:
{ / / Post Qui t Message( 0) ;
r et ur n OnDest r oy( ) ; / / ci neva a apel at Dest r oyWi ndow( )
}
case WM_NCDESTROY:
{
r et ur n OnNcDest r oy( ) ;
}
case WM_SI ZE:
{
i nt t ype = ( i nt ) wPar am; / / SI ZE_MI NI MI ZED
i nt cx = LOWORD( l Par am) ;
i nt cy = HI WORD( l Par am) ;
r et ur n OnSi ze( t ype, cx, cy ) ; / / vi r t ual ;
}
case WM_MOUSEMOVE:
{
UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;
/ / I f an appl i cat i on pr ocesses t hi s message, i t shoul d r et ur n zer o.
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 24 of 27

r et ur n OnMouseMove( f l ags, QPoi nt ( cx, cy ) ) ;
}

case WM_LBUTTONDOWN:
{
UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;
r et ur n OnLBut t onDown( f l ags, QPoi nt ( cx, cy ) ) ;
}

case WM_LBUTTONUP:
{

UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;
r et ur n OnLBut t onUp( f l ags, QPoi nt ( cx, cy ) ) ;
}

case WM_RBUTTONDOWN:
{
UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;
r et ur n OnRBut t onDown( f l ags, QPoi nt ( cx, cy ) ) ;
}

Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 25 of 27

case WM_RBUTTONUP:
{

UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;
r et ur n OnRBut t onUp( f l ags, QPoi nt ( cx, cy ) ) ;
}

case WM_LBUTTONDBLCLK:
{

UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;
r et ur n OnLBut t onDbl Cl k( f l ags, QPoi nt ( cx, cy ) ) ;
}

case WM_RBUTTONDBLCLK:
{

UI NT f l ags = ( i nt ) wPar am; / / MK_CONTROL | MK_SHI FT
i nt cx = GET_X_LPARAM( l Par am) ;
i nt cy = GET_Y_LPARAM( l Par am) ;

r et ur n OnRBut t onDbl Cl k( f l ags, QPoi nt ( cx, cy ) ) ;
}

Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 26 of 27

case WM_KEYDOWN:
{
r et ur n OnKeyDown( ( UI NT) wPar am, ( UI NT) ( l Par am& 0xf f f f ) , ( UI NT) l Par am) ;
}

case WM_KEYUP:
{
r et ur n OnKeyUp( ( UI NT) wPar am, ( UI NT) ( l Par am& 0xf f f f ) , ( UI NT) l Par am) ;
}

case WM_CHAR: / / Send by Tr ansl at eMessage( ) . The WM_CHAR message uses Uni code Tr ansf or mat i on For mat ( UTF) - 16.
{
r et ur n OnChar ( ( UI NT ) wPar am, ( UI NT ) ( l Par am& 0xf f f f ) , ( UI NT ) l Par am) ;
}

def aul t : : : Def Wi ndowPr oc( hWnd, message, wPar am, l Par am) ;
}
r et ur n 0;
}
Programarea interfeelor grafice - curs 1 Universitatea Spiru Haret, 2014
Page 27 of 27

ntrebri