Teodor T. Stefanut, S.a., Proiectarea Interfetelor Utilizator PDF

Teodor Traian TEFNU
Dnu Vasile MIHON

Victor Ioan BCU
Dorian GORGAN
PROIECTAREA INTERFEELOR
UTILIZATOR
ndrumtor de laborator
U.T. PRESS
Cluj-Napoca, 2015
ISBN 978-606-737-068-3
Editura U.T.PRESS
Str.Observatorului nr. 34
C.P.42, O.P. 2, 400775 Cluj-Napoca
Tel.:0264-401.999 / Fax: 0264 - 430.408
e-mail: utpress@biblio.utcluj.ro
www.utcluj.ro/editura
Director:
Consilier editorial:
Prof.dr.ing. Daniela Manea

Ing. Clin D. Cmpean
Copyright 2015 Editura U.T.PRESS

Reproducerea integral sau parial a textului sau ilustraiilor din aceast
carte este posibil numai cu acordul prealabil scris al editurii U.T.PRESS.
Multiplicarea executat la Editura U.T.PRESS.
ISBN 978-606-737-068-3
Bun de tipar: 15.06.2015
Prefa
Aceast publicaie cuprinde 12 lucrri de laborator din domeniul Proiectrii
Interfeelor Utilizator. Scopul principal al acestui material este de a sprijini
activitatea practic de laborator a studenilor din anul 4 de studiu al
Departamentului de Calculatoare, din cadrul Facultii de Automatic i
Calculatoare a Universitii Tehnice din Cluj-Napoca. n acelai timp ns,
publicaia se adreseaz oricrei persoane interesat de fundamentele dezvoltrii
interfeelor utilizator grafice i de tehnologiile actuale utilizate n acest sens.
Lucrrile de laborator incluse n acest material pot fi grupate n dou categorii: 9
lucrri orientate pe prezentarea de noi cunotine, noiuni sau concepte i 3 lucrri
specializate n evaluarea abilitilor practice dobndite de ctre cursani i a
gradului de asimilare de ctre acetia a cunotinelor teoretice prezentate.
Fiecare lucrare de laborator din prima categorie este structurat n patru seciuni
principale. Prima dintre acestea descrie pe scurt aspectele tehnologice prezentate
i obiectivele lucrrii, n timp ce a doua seciune include noiunile teoretice
elementare pe care cursantul trebuie s i le nsueasc pentru a putea ndeplini
sarcinile practice trasate. Ultimele dou seciuni ale fiecrei lucrri prezint
aspecte i recomandri practice de dezvoltare i implementare i propun exerciii
specifice spre rezolvare.
Lucrrile din a doua categorie sunt structurate n trei seciuni principale. Prima
seciune descrie pe scurt scopul evalurii efectuate. A doua seciune prezint
metodologia de testare, criteriile i modalitile de punctare, n timp ce a treia
seciune este rezervat exemplificrii tipurilor de ntrebri i exerciii utilizate n
evaluare.
Cluj-Napoca,
30.05.2015
Autorii
Cuprins
IMPLEMENTAREA INTERFEELOR UTILIZATOR N TEHNOLOGII WEB ................... 4
LABORATORUL 1 LIMBAJUL HTML ............................................................................ 5
1 Introducere ................................................................................................. 5
2 Consideraii teoretice .................................................................................. 5
3 Practici de implementare ............................................................................ 9
4 Exerciii ..................................................................................................... 10
LABORATORUL 2 FORMATARE CSS ......................................................................... 11
1 Introducere ............................................................................................... 11
2 Consideraii teoretice ................................................................................ 11
3 Practici de implementare .......................................................................... 15
4 Exerciii ..................................................................................................... 16
LABORATORUL 3 LIMBAJUL JAVASCRIPT ................................................................... 19
1 Introducere ............................................................................................... 19
4 Exerciii ..................................................................................................... 23
LABORATORUL 4 VERIFICAREA CUNOTINELOR N TEHNOLOGII WEB ............................ 25
1 Introducere ............................................................................................... 25
2 Metodologia de evaluare .......................................................................... 25
3 Exerciii ..................................................................................................... 26
IMPLEMENTAREA INTERFEELOR UTILIZATOR N TEHNOLOGII WINDOWS
MOBILE .......................................................................................................... 33
LABORATORUL 5 NOIUNI INTRODUCTIVE ................................................................ 34
1 Introducere ............................................................................................... 34
4 Exerciii ..................................................................................................... 39
LABORATORUL 6 UTILIZAREA CONTROALELOR DE TIP LIST ........................................... 42
1 Introducere ............................................................................................... 42
4 Exerciii ..................................................................................................... 47
LABORATORUL 7 ELEMENTE AVANSATE DE INTERFA I INTERACIUNE UTILIZATOR ......... 49
1 Introducere ............................................................................................... 49
2 Consideraii teoretice ............................................................................... 49
3 Practici de implementare.......................................................................... 53
4 Exerciii ..................................................................................................... 56
LABORATORUL 8 VERIFICAREA CUNOTINELOR N TEHNOLOGII WINDOWS MOBILE ........ 57
1 Introducere ............................................................................................... 57
3 Exerciii ..................................................................................................... 59
IMPLEMENTAREA INTERFEELOR UTILIZATOR N TEHNOLOGII ANDROID ......... 64
LABORATORUL 9 NOIUNI INTRODUCTIVE ................................................................ 65
1 Introducere ............................................................................................... 65
4 Exerciii ..................................................................................................... 75
LABORATORUL 10 UTILIZAREA CONTROALELOR DE TIP LIST ........................................ 78
1 Introducere ............................................................................................... 78
4 Exerciii ..................................................................................................... 82
LABORATORUL 11 ELEMENTE AVANSATE DE INTERFA I INTERACIUNE UTILIZATOR ....... 84
1 Introducere ............................................................................................... 84
4 Exerciii ..................................................................................................... 87
LABORATORUL 12 VERIFICAREA CUNOTINELOR N TEHNOLOGII ANDROID.................... 89
1 Introducere ............................................................................................... 89
3 Exerciii ..................................................................................................... 91
BIBLIOGRAFIE ........................................................................................................ 97
IMPLEMENTAREA INTERFEELOR
UTILIZATOR N TEHNOLOGII WEB
Laboratorul 1 limbajul HTML

1
Introducere
Dezvoltarea aplicaiilor WEB profesionale presupune realizarea unor interfee

utilizator care arat i se comport identic atunci cnd sunt accesate de ctre un
utilizator, indiferent de navigatorul folosit de acesta. n realizarea unor astfel de
interfee sunt utilizate n principal tehnologiile: HTML (HyperText Markup
Language), CSS (Cascading Style Sheets) i JavaScript.
1.1 Obiective
Lucrare de fa i propune prezentarea noiunilor introductive asupra limbajului
HTML i a unui subset al etichetelor acestuia pentru organizarea informaiilor.
Consideraii teoretice
HTML reprezint limbajul standard de descriere i organizare a coninutului care

urmeaz a fi vizualizat prin intermediul unui navigator web.
Structura unui document HTML valid cuprinde trei pri principale:
1. prima linie din document specific informaiile despre versiunea de
limbaj folosit
2. seciunea de antet cuprinde informaii generale despre document i
este ncrcat complet nainte de descrcarea restului documentului; nu
poate cuprinde informaii vizibile din document
3. corpul documentului cuprinde coninutul efectiv
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!</P>
</BODY>
</HTML>
2.1 Etichete HTML

Sunt utilizate pentru organizarea coninutului din cadrul documentului (n
seciunea de coninut) sau pentru ataarea de informaii suplimentare (n
seciunea de antet) cum sunt: metadate, fiiere corelate externe etc. ntreaga
structur a documentului poate fi reprezentat sub forma unui arbore, cu
rdcina n elementul <HTML>, denumit DOM (Document Object Model), care
poate fi parcurs de ctre navigator i pus la dispoziia limbajelor de scripting.
Din punct de vedere al modului de reprezentare implicit, etichetele de organizare
a coninutului pot fi grupate n:
etichete de tip bloc introduc o secionare a coninutului i ocup

ntreg spaiul orizontal disponibil
etichete n linie sunt reprezentate de ctre navigator n interiorul
textului, fiind incluse n regulile generale de formatare a acestuia
Cele mai uzuale etichete din cadrul unui document HTML sunt:
Etichet
HTML
TITLE
LINK
SCRIPT
Descriere
Specific titlul ntregului document i este inclus n seciunea
de antet. Textul din cadrul acestei etichete este utilizat de
ctre navigator pentru a denumi fereastra n care este
prezentat documentul.
Definete o legtur ctre un document extern (ex. CSS, alt
fiier HTML) care poate fi utilizat de ctre navigator n afiarea
informaiilor sau n navigare. Acest element este inclus n
seciunea de antet.
Permite includerea n cadrul documentului a unor instruciuni
de programare complexe ce pot fi executate de ctre
navigator. Aceste instruciuni pot fi grupate ntr-un document
extern, ce va fi descrcat separat, sau incluse direct n
documentul curent. Limbajul de programare cel mai uzual n
prezent este JavaScript.
Elementele de script pot fi incluse n oricare dintre seciunile
documentului iar execuia lor poate fi imediat (execuia are
loc n momentul n care scriptul este complet ncrcat, chiar
dac o parte a documentului nu a fost nc primit) sau
declanat de anumite evenimente (aciuni utilizator,
finalizarea ncrcrii documentului etc.).
STYLE
Permite includerea n cadrul documentului a unor instruciuni

de formatare CSS. Conform recomandrilor de bun practic
ns, este indicat ca specificaiile CSS s fie incluse ntr-un
document extern, dedicat.
H1, H2, H3, Sunt etichete de tip bloc, care pot fi incluse numai n corpul
H4, H5, H6
documentului i sunt folosite pentru a structura coninutul n
seciuni i sub-seciuni. Recomandrile de bun-practic
menioneaz c un document ar trebui s conin un singur
element de tip H1.
DIV
Element de tip bloc folosit pentru gruparea coninutului ntr-o
seciune rectangular.
P
Etichet de tip bloc pentru separarea paragrafelor din cadrul
unui text.
A
Etichet repezentat n linie pentru inserarea unei legturi
externe sau interne documentului curent.
IMG
Etichet cu format implicit n linie pentru afiarea unei imagini
n cadrul documentului.
SPAN
Etichet repezentat n linie pentru formatri specifice
coninutului de tip text.
FORM,
Etichete pentru descrierea formularelor n cadrul unui
INPUT, LABEL document HTML.
FORM are rolul de grupare a elementelor de tip INPUT
i este o etichet de tip bloc
INPUT descrie generic fiecare dintre elementele
disponibile pentru realizarea unui formular, tipul exact
fiind specificat prin atributul TYPE
LABEL specific un titlu asociat cu un element de tip
INPUT
TABLE
Permite inserarea unui tabel n cadrul unui document HTML.
THEAD
Element semantic i vizual de evideniere a unei seciuni dintrun tabel sub form de antet / seciune de titlu.
TBODY
Element semantic i vizual de grupare a informaiilor utile din
cadrul unui tabel.
TR, TD
Etichete care descriu rnduri, respectiv celule n cadrul unui
tabel. Numrul de etichete <TD> inserate ntr-o etichet de tip
<TR> stabilete numrul de coloane ale tabelului.
OL, UL
Etichete care permit definirea de liste ordonate, respectiv
neordonate.
LI
Descrie un element din cadrul unei liste ordonate /
neordonate.
Etichete introduse de standardul HTML 5 cu scop de organizare semantic a

coninutului:
Etichet
HTML
HEADER
SECTION
FOOTER
NAV
Descriere
Grupeaz elementele care fac parte din antetul vizual al paginii
(denumirea companiei, logo-ul acesteia, sloganul etc.)
Permite organizarea coninutului din cadrul paginii n seciuni
logice
Desemeneaz zona de final a paginii, care cuprinde n general
informaii despre drepturile de autor, ultima actualizare,
compania care a realizat situl etc.
Cuprinde elementele vizuale care descriu meniul principal al
sitului i alte informaii de navigare n cadrul acestuia.
Tip nou de coninut introdus nativ n cadrul HTML 5 prin definirea unor noi
etichete:
Etichet
HTML
VIDEO
AUDIO
CANVAS
Descriere
Permite afiarea de coninut video direct n cadrul paginii fr
interpunerea unei tere tehnologii (ex. Flash, Silverlight)
Asigur redarea de sunet fr interpunerea unei tere
tehnologii (ex. Flash, Silverlight).
Asigur programatorilor o zon de afiare n format bitmap
pentru trasarea n timp real a imaginilor, animaiilor etc.
2.2 Atribute ale etichetelor HTML

Fiecare tip de element HTML poate conine diferite atribute care specific
anumite configurri ale instanei pentru care au fost definite. Lista complet de
atribute, comune tuturor etichetelor sau specifice pentru anumite tipuri de
etichete poate fi consultat n documentaia oficial corespunztoare fiecrui tip
de element HTML.
n cadrul activitilor de laborator, cele mai uzuale atribute ale etichetelor HTML
vor fi:
Etichet HTML
id
class
Descriere
Atribut comun majoritii elementelor HTML. Identific n
mod unic, n ntregul document, o anumit etichet HTML
Atribut comun majoritii elementelor HTML. Permite
8
src
type
action
encoding
onfocus
onblur
onchange
onload
onkeydown
onkeyup
onkeypress
aplicarea uneia sau a mai multor clase CSS elementului curent

(care conine atributul) i elementelor care sunt cuprinse n
cadrul su
Definete calea ctre un fiier extern de tip script, imagine
etc, n funcie de tipul etichetei pentru care a fost definit
Stabilete tipul de element care este specificat prin
intermediul etichetei INPUT care conine acest atribut
Atribut specific etichetei FORM utilizat la desemnarea
fiierului care primete informaiile introduse de ctre
utilizator n formular
Stabilete modalitatea de codificare a informaiilor cuprinse n
cmpurile formularului, pentru a putea fi transmise fr erori
ctre server
Permite specificarea unei funcii JavaScript care este apelat
n momentul n care elementul primete focus-ul
Permite specificarea unei funcii JavaScript care este apelat
n momentul n care elementul pierde focus-ul
Specific funcia JavaScript care se dorete a fi apelat n
momentul n care valoarea elementului se schimb
Este un eveniment care apare atunci cnd documentul HTML
este complet ncrcat i poate fi apelat din JavaScript. Se
ataeaz n general elementului BODY
Specific funcia JavaScript care este apelat la fiecare
apsare de tast, dac elementul curent are focus-ul
Specific funcia JavaScript care este apelat la fiecare
eliberare de tast, dac elementul curent are focus-ul
Specific funcia JavaScript care este apelat la fiecare ciclu
complet de apsare + eliberare de tast, dac elementul
curent are focus-ul
Practici de implementare
Codul HTML nu necesit un mediu de dezvoltare sau compilare nainte de

publicare. El poate fi editat n orice editor de text (ex. Notepad), dar pentru
faciliti de evideniere cod sau auto-completare recomandm folosirea unor
aplicaii cum sunt Notepad++, Brackets, Sublime, Adobe Dreamweaver etc.
Vizualizarea rezultatului obinut n urma descrierii se realizeaz prin deschiderea
fiierului cu extensia .htm sau .html n oricare dintre navigatoarele web
disponibile, direct de pe HDD-ul staiei pe care ai lucrat.
9
Exerciii
Exerciiul 1. Creai o pagin HTML dedicat unei agenii de turism, cu urmtoarele

specificaii minime:
un element de tip H1 pentru titlul paginii

o list neordonat de legturi (elemente de tip A), cu rol de meniu al
sitului web, cu urmtoarele elemente: Acas, Croaziere, Plimbri n
natur, not, Oferte speciale
o imagine cu dimensiunea 900 x 350 px cu rol de banner
un element de tip H2 cu titlul Despre noi
text pentru seciunea Despre noi care s fie grupat n dou paragrafe
(etichet de tip P)
Exerciiul 2. Adugai la pagina creat la exerciiul 1 urmtoarele elemente
o nou seciune, intitulat Oferte speciale (etichet H2)

3 subseciuni alctuite din: titlu (etichet H3), imagine, descriere, similar
exemplificrii din figura de mai jos.
10
Laboratorul 2 Formatare CSS

1
Introducere
Foile de stil reprezint o modalitate modular de formatare vizual a unui

document HTML, care este uor de integrat la nivel de pagin sau chiar de ntreg
sit web. Cele mai bune practici recomand plasarea specificaiilor de stil ntr-un
fiier extern, cu extensia .css, care s fie integrat n paginile HTML n care este
necesar prin utilizarea etichetei LINK.
<LINK rel="stylesheet" href="nume_fisier.css" type="text/css">
1.1 Obiective
Lucrare de fa i propune prezentarea noiunilor de baz utilizate n definirea
stilurilor CSS i n modalitatea de aplicare a acestora pe elemente HTML.
Specificaiile de stil sunt grupate n mod obligatoriu n clase CSS care se aplic n
mod atomic elementelor HTML la care sunt conectate. Nu este posibil aplicarea
din cadrul unei clase doar a unui subset de specificaii, dar este permis
suprascrierea acestora cu ajutorul unei alte clase.
O clas CSS are urmtoarea sintax generic n care [nume_clas] poate fi oricare
dintre selectorii menionai la seciunea 2.1:
[nume_clas]
{
proprietate_1: valoare_1;
...
proprietate_n: valoare_n;
}
2.1 Selectori CSS

Legtura dintre specificaiile CSS i elementul HTML la care acestea fac referire
poate fi realizat n urmtoarele moduri:
11
2.1.1 Folosind eticheta HTML

Clasele CSS care au ca i denumire etichete HTML sunt aplicate n mod automat
tuturor elementelor de acel tip identificate n fiierul HTML. Spre exemplu, codul
urmtor va aplica tuturor elementelor de tip DIV din document o bordur de 1px
grosime, de culoare verde.
div
{
border: 1px solid #00FF00;
}
Este aadar recomandat ca acest tip de etichete s fie utilizate pentru a stabili
regulile generale de afiare a tipurilor de elemente HTML, urmnd ca excepiile s
fie rezolvate cu ajutorul altor tipuri de selectori.
2.1.2 Folosind atributul CLASS al elementului HTML
Pentru a aplica aceleai reguli de stil unui subset heterogen din elementele HTML
este necesar definirea unei clase CSS independent, folosind sintaxa .numeClas:
.mesajImportant
{
color: red;
font-style: italic;
font-weight: bold;
}
Aplicarea acestei clase oricrui element HTML se realizeaz folosind atributul class
al etichetei:
<ELEMENT class="class1 [class2 class3 ...]">
...
<ELEMENT class="mesajImportant">
2.1.3
Folosind ID-ul elementului HTML
Utilizarea acestei metode este recomandat atunci cnd specificaiile CSS se aplic
numai unui singur element HTML din cadrul documentului, care este identificat
prin intermediul ID-ului unic:
<ELEMENT id="mesajEroare">
n codul CSS, clasa corespunztoare are obligatoriu denumirea #idElement. Pentru

exemplul nostru:
12
#mesajEroare
{
color: white;
font-weight: bold;
background-color: red;
}
2.1.4 Folosind atributul STYLE al elementului HTML

Aceast modalitate de specificare a codului CSS beneficiaz de cea mai mare
prioritate la afiare (vezi seciunea 2.3) ns nu este recomandat n utilizarea
extensiv, deoarece codul astfel introdus nu poate fi reutilizat la alte elemente (cu
excepia celor imbricate n elementul formatat) sau la alte documente.
<ELEMENT style="proprietate_css_1:valoare_1; propriatea_css_2:valoare_2;
...">
2.2 Modaliti de definire a claselor CSS

Clasele CSS care au reguli comune de formatare pot fi definite mpreun,
denumirile lor fiind separate prin virgul:
[nume_clas_1, nume_clas_2, nume_clas_3]
{
...
proprietate_n: valoare_n;
}
Aceast modalitate de definire nu este influenat de tipul selectorilor utilizai,

existnd posibilitatea amestecrii acestora dup cum este necesar. Deoarece n
aplicarea claselor CSS nu este posibil selectarea unui subset din specificaii,
diferenierea ntre clase se poate realiza prin completarea / modificarea definiiei
acestora mai trziu n document:
[nume_clas_2]
{
proprietate_1: valoare_nou;
proprietate_nou_1: valoare_nou_1;
proprietate_nou_2: valoare_nou_2;
...
proprietate_nou_n: valoare_nou_n;
}
n cadrul unei specificaii CSS, fie c aceasta este cuprins ntr-un singur fiier sau
n mai multe fiiere, denumirea unei clase poate s apar de mai multe ori.
13
Formatul final al clasei se obine prin suprascrierea definiiilor n funcie de

apariia poziional a acestora i suprascrierea specificaiilor recurente /
adugarea specificaiilor noi. Ordinea de parcurgere a documentelor este dat de
ordinea n care acestea sunt incluse n fiierul HTML.
2.3 Aplicarea specificaiilor CSS pe elementele HTML

Fiecare dintre elementele HTML are aplicate mai multe specificaii de stil care
provin din mai multe clase CSS. La fel ca i n cazul claselor CSS cu mai multe
definiii, specificaiile de acelai tip sunt suprascrise n funcie de ordinea aplicrii
(ultimul aplicat este cel vizibil) iar specificaiile noi sunt adugate la setrile
vizuale ale elementului.
Aplicarea claselor asupra unei etichete se realizeaz pe baza unui numr care
indic specificitatea clasei CSS. Acest numr se calculeaz astfel (vezi Figura 1.1):
dac elementul are specificaii CSS n interiorul atributului style, acestea

vor fi prioritare (1,0,0,0 puncte)
pentru fiecare ID din specificarea selectorului, sunt calculate 0,1,0,0
puncte
pentru fiecare selector CSS generic (.numeClas) sunt calculate 0,0,1,0
puncte
pentru fiecare element HTML din specificarea selectorului sunt calculate
0,0,0,1 puncte
Figura 1.1: Ilustrare a calculului de specificitate pentru clasele CSS.

Preluare din [1]
14
Este important de menionat aici c unele proprieti sunt implicit motenite de

ctre etichetele imbricate n eticheta formatat (ex. dimensiunea textului,
culoarea, tipul de font etc...). Aceste proprieti au ns gradul de specificitate
0,0,0,1 ceea ce nseamn c oricare formatare specific etichetei imbricate va
suprascrie valoarea motenit.
Codul CSS nu necesit un mediu de dezvoltare sau compilare nainte de publicare.

El poate fi editat n orice editor de text (ex. Notepad), dar pentru faciliti de
evideniere cod sau auto-completare recomandm folosirea unor aplicaii cum
sunt Notepad++, Brackets, Sublime, Adobe Dreamweaver etc.
Vizualizarea rezultatului obinut poate fi realizat numai prin utilizarea unui fiier
HTML n care clasele definite s fie aplicate elementelor din cadrul acestuia. Cnd
legtura dintre fiierul HTML i cel CSS este realizat corect, deschiderea primului
n oricare dintre navigatoarele web disponibile va declana automat afiarea
corect a etichetelor specificate folosind regulile CSS ataate.
Figura 2.2: Exemplu de unelte pentru inspectarea modului de aplicare a stilurilor

i de suprascriere a proprietilor CSS (Firefox)
15
Inspectarea modului de aplicare a stilurilor i de suprascriere a diferitelor

proprieti poate fi realizat, n majoritatea navigatoarelor, folosind uneltele
specifice de dezvoltare (accesibile fie din meniul aplicaiei fie prin apsarea tastei
F12), similar cu exemplul din Figura 2.2.
Exerciii
Exerciiul 1. Implementai designul din figura de mai jos folosind HTML i CSS
Specificaii de implementare:
titlul font: Arial 24px ngroat, culoare: #800000; este i legtur ctre
pagina principal (Acas)
meniul culoare fundal: #DEB887, coluri rontunjite cu raza de 10px
elementele de meniu elemente de tip A, font: Arial 12 px, culoare
implicit: #800000, culoare interaciune: #FFFFFF
titlu seciune font: Arial 18px ngroat, culoare: #000000, margine: 10px
sus i jos
text pagin font: Arial 12px, culoare: #666666, aliniere: justified;
spaiere ntre paragrafe: 10px
16
pot fi folosite doar urmtoarele elemente HTML: html, head, body, title,
header, section, footer, h1, h2, h3, div, p, span, ul, li, a, img, strong, em
este permis numai utilizarea selectorilor CSS bazai pe etichete HTML
o nu este permis utilizarea atributului style
o nu este permis introducerea de cod CSS n documentul HTML
o nu este permis definirea atributelor ID sau CLASS pentru
elementele HTML
Exerciiul 2. n continuarea documentului de la exerciiul 1 implementai designul

din figura de mai jos utiliznd HTML i CSS:
titlu seciune font: Arial 18px ngroat, culoare: #000000, margine: 10px
sus i jos
titlu subseciune font: Arial 14px ngroat, culoare: #0000FF, culoare
fundal: #7FFFD4, spaiu interior: 5px
subseciune dimensiune: 33% din limea de afiare, spaiere: 10px fa
de celelalte seciuni
imagine lime: 100% din limea subseciunii, nlime fix: 300px
text font: Arial 12px, culoare: #666666, aliniere: justified, culoare
fundal: #DEB887
paragraf margine: 10px sus i jos, spaiu interior: 10px
17
pot fi folosite doar urmtoarele elemente HTML: html, head, body, title,
header, section, footer, h1, h2, h3, div, p, span, ul, li, a, img, strong, em
este permis numai utilizarea selectorilor CSS bazai pe etichete HTML
o nu este permis utilizarea atributului style
o nu este permis introducerea de cod CSS n documentul HTML
o nu este permis definirea atributelor ID sau CLASS pentru
elementele HTML
18
Laboratorul 3 limbajul
JavaScript
1
Introducere
Deoarece HTML i CSS sunt doar limbaje descriptive, care pot interaciona cu
utilizatorul numai prin intermediul navigatorului i se pot adapta interaciunilor cu
acesta doar ntr-o msur foarte redus, pentru realizarea procesrilor mai
complexe pe client (realizare de animaii, actualizare coninut n mod asincron
etc.) este necesar scrierea de instruciuni care pot fi interpretate i executate de
ctre navigator n mod dinamic. Limbajul utilizat se numete JavaScript.
1.1 Obiective
Lucrarea de fa i propune prezentarea noiunilor de baz n modelarea i
aplicarea interaciunilor utilizator folosind limbajul JavaScript.
Prin intermediul codului JavaScript programatorii au acces la structura DOM a

documentului i pot modifica diferitele proprieti ale elementelor HTML. Este
important de menionat c structura DOM nu este disponibil de la momentul 0 al
accesrii paginii, ci numai dup ce toate elementele din eticheta BODY au fost
descrcate i prelucrate de ctre Navigator. La acel moment este generat
evenimentul window.onload care poate fi folosit ca un iniiator de lansare a
codului JavaScript ce trebuie s ruleze automat la ncrcarea paginii.
Codul JavaScript poate fi conectat la un document HTML folosind etichetele
SCRIPT n dou modaliti:
2.1 Includere cod direct n fiierul HTML

Modalitate de specificare util pentru situaiile n care codul nu este reutilizat n
alte pagini HTML.
<SCRIPT type="text/javascript">
// cod JavaScript
19
</SCRIPT>
n general acest mod de inserare a codului JavaScript se realizeaz n cadrul

etichetelor HEAD sau BODY ale documentului, ca fiu direct al acestora.
2.2 Includere cod JavaScript dintr-un fiier extern

Este modalitatea recomandat de organizare a codului, pentru un grad mai ridicat
de flexibilitate (acelai cod poate fi uor refolosit n mai multe documente HTML).
<SCRIPT src="nume_fisier.js" type="text/javascript"></SCRIPT>
n marea majoritate a cazurilor, utilizarea sub aceast form a etichetei SCRIPT se

ntlnete n cadrul seciunii HEAD a documentului HTML. n cadrul aceluiai
document HTML pot fi incluse oricte fiiere externe de cod JavaScript.
2.3 Funcii JavaScript

n cadrul activitii de laborator vor fi utilizate urmtoarele elemente ale
limbajului JavaScript:
window
Cuvnt cheie care refereniaz

fereastra navigatorului n care
ruleaz scriptul curent
window.onload
Eveniment
generat de
ctre
navigator n momentul n care DOMul este finalizat i accesibil
document
rdcina arborelui DOM i este
echivalent cu nivelul etichetei BODY
document.getElementById(
Returneaz o referin ctre
"id_element") elementul HTML care are atributul id
= "id_element"
document.getElementsByTagName(
Funcie care returneaz irul
"etichet") elementelor de tip ETICHET din
documentul HTML
this
instana HTML n a crui membru
este apelat. Ex:
elem.onblur = function()
{
formInputBlur(this);
20
};
FORM.onsubmit
ELEMENT.onblur
ELEMENT.onclick
ELEMENT.getAttribute("nume_atribut")
ELEMENT.setAttribute("nume_atribut",
"valoare")
ELEMENT.innerHTML
VARIABIL.length
STRING.indexOf(string)
Date.parse(string)
21
n exemplul de mai sus, this = elem la

momentul
execuiei
funciei
anonime.
Eveniment
generat de
ctre
navigator n momentul n care un
formular este pregtit pentru
trimitere ctre server. Pentru
anulare, funcia ataat trebuie s
returneze false.
Eveniment
generat de
ctre
navigator atunci cnd ELEMENT
pierde focalizarea
Eveniment
generat de
ctre
navigator atunci cnd asupra
ELEMENT se efectueaz un click de
mouse
Returneaz valoarea atributului
"nume_atribut"
al
obiectului
ELEMENT
Seteaz
valoarea
atributului
"nume_atribut" la "valoare" n
cadrul obiectului ELEMENT
Returneaz coninutul etichetei
ELEMENT sub form de cod HTML.
Dac i se atribuie o valoare,
coninutul ELEMENT va fi nlocuit.
Returneaz numrul de elemente
din VARIABIL:
numrul de caractere dac
variabil este de tip STRING
numrul de elemente dac
VARIABIL este de tip ARRAY
Returneaz poziia (numrat de la
0) la care se regsete string n
STRING sau -1 n caz contrar.
Returneaz numrul de milisecunde
ntre data definit prin string i 1
Ianuarie 1970, sau NaN dac string
nu poate fi convertit la o dat valid.
isNaN(object)
Returneaz true dac object are

valoarea NaN.
Pentru utilizarea expresiilor regulate n cadrul limbajului JavaScript este necesar

definirea expresiei de forma /expresie/ i apoi utilizarea funciei test asupra
elementului dorit pentru verificare.
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s/;
re.test(string); // returneaz true dac string respect expresia
La fel ca i n cazul limbajelor HTML i CSS, codul JavaScript nu necesit un mediu

specific de dezvoltare sau compilare nainte de publicare. El poate fi editat n orice
editor de text (ex. Notepad), dar pentru faciliti de evideniere cod sau autocompletare recomandm folosirea unor aplicaii cum sunt Notepad++, Brackets,
Sublime, Adobe Dreamweaver etc.
Testarea i depanarea codului scris poate fi realizat numai n cadrul unei aplicaii
de navigare pe internet i doar dac fiierele cu codul JavaScript au fost corect
integrate cu un fiier HTML. Dup deschiderea acestuia din urm n navigator,
uneltele de dezvoltare oferite de cele mai multe dintre versiunile noi ale
aplicaiilor de navigare vor permite selectarea fiierului de cod dorit i stabilirea
de puncte de ntrerupere a execuiei (vezi Figura 3.1).
Figura 3.1: Exemplu de unelte pentru depanarea codului JavaScript (Firefox)

Relativ la specificul de execuie al codului JavaScript este important de subliniat
faptul c la fiecare rencrcare a paginii execuia este reluat de la zero. Niciunele
dintre variabilele setate la o execuie anterioar nu i pstreaz starea. Singurele
22
modaliti de transmitere a informaiilor folosind numai JavaScript ntre dou

pagini HTML succesive sau ntre reafiri succesive sunt prin intermediul cookieurilor sau prin transmiterea de parametri GET.
Exerciii
Exerciiul 1. Implementai un formular de contact cu urmtoarele cmpuri: nume,

prenume, adres, data naterii, telefon, email, culoarea favorit. Adugai dou
butoane intitulate Reset i Trimite. Implementai n JavaScript urmtoarea
funcionalitate:
la apsarea butonului Reset, cmpurile formularului sunt aduse la starea

iniial (coninut gol sau valoare implicit)
la apsarea butonului Trimite, formularul va fi ascuns iar informaiile din
acesta vor fi afiate n urmtoarea form:
Nume: [valoarea_cmpului_nume]
Prenume: [valoarea_cmpului_prenume]
Adres: [valoarea_cmpului_adres]
Data naterii: [valoarea_cmpului_dataNaterii]
Telefon: [valoarea_cmpului_telefon]
Email: legtur ctre adresa de email introdus
Culoarea favorit: dreptunghi colorat conform valorii selectate
funcionalitatea de la punctele anterioare va fi realizat fr rencrcarea

paginii HTML
Exerciiul 2. Folosind formularul de mai sus, implementai n JavaScript

funcionalitatea necesar astfel nct la apsarea butonului Trimite s se realizeze
urmtoarele validri:
nume trebuie s conin cel puin trei litere

prenume trebuie s conin cel puin trei litere
adresa trebuie s conin cel puin trei caractere i cel puin o cifr. Nu
sunt acceptate caracterele: @#$%^&*
data nasterii trebuie s conin o dat valid n format dd/mm/yyyy
23
cmpul telefon poate conine numai cifre i un caracter -, n formatul nnnnnnnnnnnn (3 - 9)

cmpul email trebuie s accepte numai o adres de email corect din
punct de vedere sintactic
La fiecare apsare a butonului Trimite erorile identificate, indiferent de numrul

acestora, vor fi anunate utilizatorului prin intermediul unei singure ferestre de
dialog de tip Alert.
24
Laboratorul 4 verificarea
cunotinelor n Tehnologii Web
1
Introducere
n cadrul acestui laborator va fi evaluat nivelul nelegerii noiunilor din domeniul

Tehnologiilor Web prezentate n cadrul laboratoarelor anterioare. Fiecare dintre
studeni va primi o not ce va reflecta att nivelul cunotinelor teoretice nsuite
ct i nivelul abilitilor practice dobndite.
1.1 Obiective
Lucrarea de fa i propune stabilirea msurii n care noiunile fundamentale din
domeniul Tehnologiilor Web au fost nsuite de ctre cursani.
Metodologia de evaluare
Evaluarea cunotinelor dobndite n timpul lucrrilor practice de laborator din

domeniul Tehnologiilor Web se va realiza pe dou niveluri:
2.1 Evaluarea teoretic

Presupune testarea nelegerii noiunilor teoretice de baz, care permite att
profesorului ct i studentului identificarea eventualelor puncte neclare n
nsuirea cunotinelor elementare.
Aceast evaluare se va desfura prin intermediul unui chestionar cu aproximativ
10 - 15 ntrebri care au multiple variante de rspuns, nota final obinut fiind
accesibil imediat dup completarea chestionarului, prin corectare automat.
Fiecare dintre participanii la laborator vor avea acces la forma electronic a
chestionarului pentru un timp limitat, contorizat automat, i numai de pe contul
propriu din cadrul platformei de gestiune a materialelor de laborator. ntrebrile
pentru fiecare chestionar vor fi selecionate aleator din cadrul unei baze de date
iar rspunsurile fiecrei ntrebri vor fi de asemenea ordonate aleator.
25
2.2 Evaluarea practic

Are ca i scop verificarea abilitii studenilor de a aplica noiunile nvate n
vederea dezvoltrii unor interfee utilizator Web. Fiecruia dintre participani i va
fi asignat un exerciiu, avnd la dispoziie spre consultare n timpul rezolvrii att
ndrumtorul de laborator ct i documentaiile oficiale ale tehnologiilor folosite.
Implementarea prezentat va fi evaluat conform urmtoarelor criterii generale:
structur modalitatea de utilizare a etichetelor HTML trebuie s

corespund bunelor practici descrise n cadrul lucrrii de laborator i s
asigure corectitudinea semantic a datelor prezentate
aspect gradul n care formatarea vizual utiliznd clase CSS respect
cerinele exerciiului
interaciune n ce msur implementarea realizat n JavaScript
corespunde cerinelor de:
o verificarea a validitii datelor
o prevenirii erorilor
o sprijinire a utilizatorului n revenirea dintr-o situaie de eroare
o etc.
respectarea recomandrilor de bune practici
o evitarea utilizrii atributului style
o separarea structurii documentului (HTML) de formatarea vizual
(CSS) i implementarea interaciunilor (JavaScript)
o etc.
La finalul timpului de lucru, fiecare dintre studeni prezint cadrului didactic

implementarea efectuat i fundamentele teoretice care au stat la baza deciziilor
de implementare.
Exerciii
3.1 Exemple de ntrebri pentru verificarea cunotinelor

teoretice
1. Selectai grupul de etichete minim necesare pentru a defini structura de
baz a unui document HTML?
a. <html> <script> <table>
26
b. <html> <head> <body> <doctype>

c. <html> <body>
d. <html> <head>
2. Care dintre urmtoarele etichete permite afiarea textului PIU la o
dimensiune ct mai mare?
a. <h2>
b. <h6>
c. <heading>
d. <h1>
3. Care este instruciunea pentru a deschide un link ntr-o fereastr nou
din navigator?
a. <a href=www.google.com open_new>
b. <a href=www.google.com target=_blank>
c. <a href=www.google.com target=new >
d. <a link=www.google.com tab=_new>
4. Specificai tipurile de elemente HTML care sunt folosite pentru definirea
unui tabel:
a. <table> <tr> <td>
b. <table> <head> <td>
c. <table> <row> <column>
d. <table> <tc> <tr>
5. Alegei rspunsurile corecte:
a. Atributul id identific n mod unic o etichet n cadrul unui
document HTML
b. Atributul class nu poate fi folosit pentru etichete care conin deja
un id
c. Codul HTML trebuie compilat de ctre utilizator, la fel ca i orice
aplicaie C++
d. Pentru numerotarea unei liste de elemente se folosete eticheta <ol>
6. Pentru a include un fiier extern n formatul CSS, care dintre
urmtoarele instruciuni sunt adevrate?
a. <style src=fisier.css>
b. <style>fisier.css</style>
27
c. <link rel=stylesheet type=text/css href=fisier.css>

d. <link rel=stylesheet type=text/css>fisier.css</link>
7. Stilul CSS
table
{
border: 1px solid #FF0000;
}
are rolul de a seta culoarea roie i dimeniunea de 1 pixel pentru conturul
primului tabel din documentul HTML n care a fost inclus?
a. Adevrat
b. Fals
8. Legtura dintre elementele HTML i stilurile CSS se face prin:
a. Selectori HTML
b. Selectori CSS
c. Fiier de configurare extern n care se specific aceste relaii sub
forma <etichet_html, stil_css>
d. Nu este nevoie s se specifice aceast legtur, ntruct
navigatoarele (browsere-le) moderne preiau automat aceast
informaie din fiierul HTML, fr a mai fi nevoie de fiiere CSS.
Fiierele CSS sunt folosite doar de ctre navigatoarele Web nvechite
9. Alegei varianta corect de stil CSS care poate fi folosit pentru a selecta
toate etichetele <div> care au clasa selectat:
a. div.class=selectat
b. div selectat
c. div.selectat
d. div#selectat
10. Prin care stil CSS se poate realiza selectarea tuturor elementelor <p> din
interiorul etichetelor <div>?
a. div p
b. div.p
c. p div
d. select p from div
28
11. Specificai care dintre urmtoarele afirmaii sunt adevrate n ceea ce

privete limbajul JavaScript (JS):
a. Codul JS trebuie compilat de ctre utilizator, la fel ca i orice aplicaie
C++
b. Codul JS este delimitat de codul HTML prin folosirea etichetei
<script>
c. Codul JS asociat unui document HTML trebuie neaparat s fie plasat
n acelai fiier. Nu este permis ncrcarea unor resurse externe
JavaScript
d. Limbajul JavaScript permite accesarea obiectelor din structura DOM
12. Alegei variant corect pentru afirmaia: accesarea structurii DOM este
permis nainte de generarea unui eveniment de tipul
window.onload?
a. Adevrat
b. Fals
13. Considernd faptul c documentul HTML conine instruciunile
<body>
<div>
<p id=p-elem-id class=p-elem-class />
</div>
<div id=div-elem-id />
</body>
care dintre urmtoarele secvene JS pot fi folosite pentru a selecta
elementul <p>?
a. document.getElementById(p-elem-id)
b. document.getElementsByTagName(p)
c. document.getElementByClass(p-elem-class)
d. document.getElement(p)
14. Specificai valoarea de adevr a urmtoarei afirmaii: aciunile uzuale
(ex.: click, focalizare etc.) asupra elementelor HTML pot fi recepionate
prin evenimente JavaScript.
a. Adevrat
b. Fals
29
15. Ce se va afia n urma execuiei secvenei de cod JavaScript de mai jos?

var x = 10;
alert(x);
x = ab;
alert(x);
a. Se va genera o eroare la execuie, pentru c variablia x este de tipul
int i nu este permis asignarea de valori ir de caractere (x = ab)
b. Se va afia: 10 i ab
c. Se va afia: 10 i ab, dup care un mesaj de eroare identic cu cel de la
punctul a)
d. Nu se va afia nimic, ntruct funcia alert nu are rolul de afiare de
mesaje n limbajul JavaScript
3.2 Exemple de probleme practice

Exerciiul 1. Folosind tehnologiile HTML, CSS i JavaScript, realizai un formular de
contact similar celui prezentat n imaginea de mai jos.
La prsirea unui cmp din formular, (evenimentul onblur) verificai validitatea

informaiilor introduse n acel cmp, conform condiiilor de mai jos
nume trebuie s conin cel puin trei litere i s nu conin cifre

30
prenume trebuie s conin cel puin trei litere i s nu conin cifre

adresa trebuie s conin cel puin trei caractere i cel puin o cifr. Nu
sunt acceptate caracterele: @#$%^&*
data nasterii trebuie s conin o dat valid n format dd/mm/yyyy
cmpul telefon poate conine numai cifre, un caracter + i unul sau mai
multe caractere - separate prin alte cifre
cmpul email trebuie s accepte numai o adres de email corect din
punct de vedere sintactic
n cazul n care valoarea introdus ntr-un anumit cmp nu este valid, culoarea
de fundal a cmpului respectiv va fi schimbat la #FFA500. Altfel, ea va fi setat la
#FFFFFF.
Exerciiul 2. Implementai funcionaliti de restricionare a valorilor introduse de
utilizator n cmpurile formularului de la exerciiul anterior, dup cum urmeaz:
n cmpurile Nume i Prenume nu pot fi introduse cifre de la tastatur

n cmpul Data naterii sunt acceptate numai cifre i caracterul /
n cmpul telefon pot fi introduse numai cifre i caracterele + i
lng cmpul Parola adugai un buton denumit Vezi parola: ct timp
acest buton este meninut apsat cu mouse-ul, parola va fi afiat n clar
Exerciiul 3. Implementai o mini-galerie de imagini cu urmtoarele funcionaliti:
imaginile afiate au dimensiunea de 300 x 300 px, prima imagine fiind

afiat la ncrcarea paginii
buton NEXT ncarc imaginea urmtoare din galerie, n locul celei curent
afiate
buton PREV ncarc imaginea anterioar din galerie, n locul celei curent
afiate
se va afia de asemenea progresul n interiorul galeriei, sub forma:
imagine curent / total imagini
Exerciiul 4. Simulai o aplicaie care necesit autentificare. Numele de utilizator

(sub forma unei adrese de email) i parola acceptate de sistem sunt salvate n
limbajul JavaScript. Implementai urmtoarele caracteristici:
la ncrcare, n centrul paginii vor fi afiate doar:
31
o textul: Introducei numele de utilizator i parola

o un cmp text cu eticheta Nume utilizator
o un cmp de tip password cu eticheta Parola
o un buton intitulat Autentificare
la apsarea butonului Autentificare
o verificai valorile introduse n cmpurile Nume utilizator i Parola
afiai mesaj de eroare dac nu au fost introduse valori
colorai eticheta cmpului gol n culoarea #FF0000
o afiai mesaj de eroare dac valorile introduse nu sunt corecte
o dac valori introduse corespund cu cele predefinite, ascundei
formularul de autentificare i afiai n locul su mesajul
Autentificare reuit! cu font: Helvetica 20px ngroat, culoare:
#00FF00
32
UTILIZATOR N TEHNOLOGII
WINDOWS MOBILE
Laboratorul 5 Noiuni
introductive
1
Introducere
n prezent exist o varietate de tipuri de telefoane inteligente (smartphones) care

ofer funcionaliti de nalt performan n domeniile de comunicaie. Dup ani
de ncercri, Microsoft revine pe piaa dispozitivelor mobile cu sistemul de
operare Windows Phone i cu un nou stil de a descrie interaciunea cu utilizatorul
prin intermediul dispozitivelor mobile.
Spre deosebire de sit-urile Web, dezvoltarea interfeelor utilizator pentru
dispozitivele mobile presupune condensarea informaiilor ntr-un spaiu restrns
ca dimensiune (ecranul telefonului) i prezentarea acestora ntr-un mod ct mai
inteligibil pentru utilizatori.
1.1 Obiective
Lucrarea de fa i propune prezentarea conceptual a tehnologiei Windows
Phone 7 cu aplicabilitate n dezvoltarea unei aplicaii practice.
Dei sunt multe de discutat n ceea ce privete funcionalitile oferite de

sistemele de operare Windows Phone, iOS, Android i BlackBerry, aceast
seciune prezint principalele caracteristici care difereniaz Windows Phone de
celelalte platforme existente.
2.1 Particulariti hardware

Exist o serie de productori de telefoane mobile (LG, HTC, Acer, etc) care
folosesc acest sistem de operare, dar el poate fi ntlnit n special pe dispozitivele
Nokia. Spre deosebire de alte sisteme de operare, Windows Phone 7 necesit
existena a ase butoane hardware:
napoi (Back): deschide vederea (view) anterioar;
34
Start: deschide vederea iniial (Start screen) afiat pe ecranul

telefonului;
Cutare (Search): operaie bazat pe unealta de cutare Bing;
Pornire/Oprire: are o dubl funcionalitate de a deschide/nchide ecranul
telefonului prin apsarea uoar a butonului, i de oprire/pornire a
telefonului la aciunea de apsare ndelungat;
Control de volum;
Control camer: pune n funciune camera harware a telefonului, acest
buton fiind folosit i pentru a face poze.
2.2 Interfaa grafic Metro

Interfaa grafic Metro reprezint una dintre cele mai interesante caracteristici ale
sistemului de operare Windows Phone 7. Aceasta folosete conceptul de Dale
Active (Live Tiles) n locul tradiionalelor pictograme, fiind inspirate din interfaa
Zune HD. Avantajul acestei reprezentri l constituie vizualizarea n timp real a
strii diferitelor aplicaii, funcii, resurse media (reprezentate de aceste dale),
ntruct coninutul acestora este actualizat n mod dinamic. Spre exemplu,
apelurile pierdute sunt listate n dala Phone. Astfel, aplicaiile Windows Phone nu
necesit seciuni speciale de notificare (ca i n cazul iOS i Android) deoarece
informaiile actualizate sunt prezentate n dala corespunztoare aplicaiei.
Aceste dale active pot fi poziionate n diferite locaii pe ecran, pot fi
redimensionate n funcie de importana informaiilor afiate pentru utilizator, iar
navigarea se face prin gestul de swipe care const ntr-o secven de dou
operaii: tap, urmat de micarea stnga-dreapta a degetului.
Pentru o mai uoar identificare a aplicaiilor instalate, Windows Phone 7 afieaz
toate aceste resurse ordonate alfabetic. Prin funcionalitile pe care le ofer
interfaa Metro, se dorete o cretere a utilizabilitii sistemului de operare, fr a
afecta performana de execuie a aplicaiilor.
Practicile de implementare descrise n aceast seciune recomand urmtoarele

pentru dezvoltarea aplicaiei practice Windows Phone 7:
35
3.1 Configurare proiect de tipul Windows Phone

1. Instalare unealt Visual Studio 2010 cu Service Pack 1.
Dei exist o serie de unelte de dezvoltare a aplicaiilor Windows, n
general se recomand folosirea platformei Visual Studio care ofer un
mediu compact i profesionial de implementare, compilare i testare a
acestor aplicaii.
2. Instalare Windows Phone SDK 7.1 pentru dezvoltarea aplicaiilor Windows
Phone 7.
3. Creare proiect de tipul Visual C# -> Silverlight for Windows Phone ->
Windows Phone Application.
4. Creare directoare View, Model i ViewModel. Structura final a proiectului
trebuie s fie similar cu cea din Figura 5.1.
Figura 5.1: Structura proiectului
3.2 Elemente XAML

Limbajul XAML este folosit pentru declararea componentelor vizuale din cadrul
tehnologiilor Microsoft. Este similar limbajului HTML, cu meniunea c pune la
dispoziia programatorilor o gam mult mai variat de componente grafice:
butoane, etichete, tabele, module de organizare pe vertical i orizontal etc.
Realizarea aplicaiei practice presupune folosirea unor elemente XAML de
organizare (layout), care permit aranjarea n pagin a csuelor text, a etichetelor
i a butoanelor. Pentru aceasta se pot folosi clasele Grid i StackPanel. Prima
36
dintre acestea mparte ntreg spaiul n linii i coloane a cror dimensiune poate fi
specificat programatic, folosind proprietatea RowDefinition. Clasa StackPanel se
folosete pentru a ordona vertical sau orizontal modulele componente.
Etichetele i csuele text pot fi descrise tot prin intermediul elementelor XAML i
anume: TextBlock, respectiv TextBox. n cazul n care se dorete codificarea
parolei prin caractere de tipul *, se poate folosi clasa PasswordBox. Similar cu
limbajul HTML, butoanele se pot defini ca i elemente de tipul Button.
Exist de asemenea i posibilitatea de aplicare a unui set de atribute vizuale
(stiluri) asupra unui grup de elemente XAML. Pentru aceasta se pot folosi clasele
Style i Setter. Exist trei nivele de aplicabilitate a stilurilor:
Pentru elementele din clasa n care au fost definite: spre exemplu, pentru
stiluri declarate n cadrul clasei Grid, acestea au efect doar asupra
elementelor din aceast clas.
Pentru elementele din ntreaga pagin XAML.
Pentru elementele din ntregul proiect: dac stilurile sunt definite n
fiierul App.xaml.
3.3 Elemente de logic C#. Modelul MVVM (Model View

ViewModel)
Bunele practici de dezvoltare a aplicaiilor Window Phone recomand o separare
a elemetelor grafice de modelul de date, n care sunt pstrare valorile acestora.
Astfel, n modelul de dezvoltare MVVM, legtura dintre componentele grafice din
View i obiectele din ViewModel se realizeaz prin intermediul conceptului de
Binding. Spre exemplu dac n clasa din View avem definiia unei csue text
<TextBox Text="{Binding Username}" />
iar n ViewModel avem proprietatea Username

private string _username;
public string Username
{
get { return _username; }
set { _username = value; }
}
37
atunci maparea se face in clasa View prin construcia Binding Username. Operaia
de mapare presupune preluarea valorii Username i afiarea acesteia n csua
text TextBox, n mod automat.
Deoarece Username este o proprietate a unei clase din categoria ViewModel, este
necesar definirea explicit a conexiunii dintre instana de tip View i cea de tip
ViewModel pentru ca platforma WindowsPhone s poate identifica n mod corect
proprietatea la care se face referire. n acest sens, este necesar ca n constructorul
clasei de tip View s declarm o instan a clasei de tip ViewModel i s o
conectm la proprietatea DataContext:
class View
{
private ViewModel _vm;
public View
{
IntitializeComponent();
_vm = new ViewModel();
DataContext = _vm;
}
}
Este important de menionat faptul c n modelul MVVM actualizarea interfeei se

realizeaz de cele mai multe ori printr-o implementare a design-ului Observer.
Astfel, orice modificare survenit n ViewModel trebuie notificat explicit
interfeei grafice prin generarea unui eveniment la care aceasta din urm este
conectat. Pentru aceasta, clasa din ViewModel trebuie s implementeze
interfaa INotifyPropertyChanged, similar exemplului de mai jos:
class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Pn n acest moment, exemplele de mai sus definesc numai o legtur unidirecional, de la elementul din View la proprietatea Username. n cazul n care
38
coninutul elementului din View este modificat, proprietarea Username nu va fi

actualizat. Pentru a corecta acest neajuns, vom modifica linia din fiierul XAML
astfel:
<TextBox Text="{Binding Username, Mode=TwoWay}" />
n cazul n care se dorete folosirea unei variabile de tipul X pentru a seta o

proprietate a unui element XAML care accept numai valori de tipul Y se
recomand folosirea unui convertor care implementeaz interfaa
IValueConverter. Convertorul poate fi folosit n pagina XAML n interiorul
etichetei <phone:PhoneApplicationPage.Resources > i apelat ca i o resurs
static. Implementarea convertorului se face n limbajul C#. Exemplul urmtor
descrie modul n care se poate face o conversie a variabilei VisibleText de tipul
Visibility la tipul String (ateptat de clasa TextBlock), prin implementarea
convertorului VisibilityToString.
<TextBlock Text="{Binding VisibleText,
Converter={StaticResource VisibilityToString}}" />
Pentru a simplifica arhitectura aplicaiei, se recomand folosirea unui obiect care

s memoreze credeniale statice de autentificare (spre exemplu Username =
user, Password = password). Iniializarea acestui obiect se poate face n
constructorul clasei App.xaml.cs. Astfel, la fiecare aciune de login se verific
valorile introduse de utilizator cu cele deja existente n acest obiect.
Exerciii
Exerciiul 1. Creai un nou proiect Windows Phone 7.0 i descriei n XAML un

ecran de autentificare cu urmtoarele componente:
titlul "Autentificare" (font: 20px, culoare: #0000FF)

textul "Nume utilizator" (font: 14px, culoare: #FFFFFF, aliniere la stnga)
un cmp de intrare de tip text
textul "Numele de utilizator nu poate fi vid. " (aliniat la stnga, font: 14px,
culoare: #FF0000)
textul "Parol" (font: 14px, culoare: #FFFFFF, aliniat la stnga)
un cmp de intrare de tip password
39
textul "Parola nu poate fi vid. " (aliniat la stnga, font: 14px, culoare:
#FF0000)
textul "Nume de utilizator / parol incorecte. " (centrat orizontal, font:
14px, culoare: #FF0000)
un buton cu titlul "Autentificare", centrat orizontal
spaiere:
o sub titlu: 60px
o deasupra textului "Parol": 40px
o deasupra textului "Nume de utilizator / parol incorecte": 20px
o deasupra butonului Autentificare: 20px
Exerciiul 2. Adugai urmtoarea funcionalitate aplicaiei de la punctul 1:
la ncrcarea aplicaiei, textul de culoare #FF0000 de pe ecran va fi ascuns

la apsarea butonului Autentificare:
o dac textul introdus n cmpul Nume utilizator este vid:
culoarea textului "Nume utilizator" este schimbat la
#FF0000
textul "Numele de utilizator nu poate fi vid. " este afiat
o dac textul introdus n cmpul Parol este vid:
culoarea textului "Parol" este schimbat la #FF0000
textul "Parola nu poate fi vid. " este afiat
o dac cele dou cmpuri conin valori
dac valorile introduse sunt incorecte, textul "Nume de
utilizator / parol incorecte" este afiat
dac valorile introduse sunt corecte, culoarea textului
"Nume utilizator" i "Parol" este schimbat la #00FF00
Restricii de implementare:
n implementarea aplicaiei se va folosi modelul MVVM descris:

o numele de utilizator i parola acceptate de aplicaie vor fi descrise
ntr-o clas Model
o caracteristicile de culoare i vizibilitate a textului vor fi conectate
prin metoda Binding de proprieti ale componentei ViewModel a
aplicaiei
40
verificrile de validitate a datelor introduse se vor realiza n

componenta ViewModel
41
Laboratorul 6 utilizarea
controalelor de tip list
1
Introducere
n cadrul acestui laborator se urmrete adugarea unui nou ecran care permite
afiarea crilor din bibliotec, sub form de list. Acest ecran devine vizibil numai
n cazul autentificrii cu succes a utilizatorului.
1.1 Obiective
Lucrarea de fa i propune folosirea i personalizarea listelor n aplicaii de tipul
Windows Phone 7.

pentru dezvoltarea aplicaiei practice Windows Phone 7.
2.1 Organizarea elementelor vizuale

Deoarece dispozitivele care ruleaz Windows Phone dispun de mai multe rezoluii
(variind de la 480x800 px pn la 1080x1920 px, cu rapoarte de aspect de 15:9 sau
16:9), nu este recomandat plasarea i dimensionarea n coordonate absolute ale
elementelor de interfa.
Pentru organizarea vizual a elementelor, SDK-ul Windows Phone pune la
dispoziia dezvoltatorilor mai multe structuri de organizare implicite, dintre care
cele mai uzuale sunt:
2.1.1 Grid
Permite organizarea sub form de gril / tabel a elementelor vizuale. n cadrul
fiecrei celule, plasarea elementelor se face n coordonate absolute (cu ajutorul
proprietii Margin), ceea ce permite suprapunerea acestora. Dup definirea
generic a structurii (numr i dimensiune coloane / rnduri) fiecare dintre
elementele plasate n gril i specific celula n care va fi afiat, folosind atributele
Grid.Row i Grid.Column.
42
n exemplul de mai jos se definete o gril cu dou rnduri i 3 coloane:

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
<TextBlock Grid.Row="1" Grid.Column="2">Celula 2</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">Celula 5</TextBlock>
</Grid>
Pentru a ocupa tot spaiul disponibil, nlimea rndurilor i limea coloanelor nu

este specificat n valori absolute. Simbolurile utilizate au urmtoarea
semnificaie:
Auto
nlimea rndului sau limea coloanei este calculat n funcie

de coninutul afiat. Astfel, toate elementele din interiorul
containerului vor fi vizibile iar spaiul ocupat este minimul
necesar pentru afiare.
nlimea rndului sau limea coloanei este calculat n funcie
de spaiul rmas disponibil n containerul printe, dup afiarea
elementelor cu dimensiuni absolute sau Auto. Spaiul rmas este
mprit n mod egal ntre toate elementele de acelai tip care
folosesc acest simbol pentru stabilirea nlimii sau limii.
Pentru specificarea proporional a nlimii / limii elementelor, simbolul *

poate fi utilizat cu un multiplicator. n exemplul de mai jos, rndul al doilea va fi
de dou ori mai nalt dect primul rnd:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
43
Mai multe informaii despre organizarea dinamic a elementelor pot fi gsite n

documentaia oficial iar exemple de dimensionare pot fi consultate n articolul
Understanding XAML Layout and Events.
2.1.2 StackPanel
Elementele vizuale incluse sunt plasate relativ unele la celelalte, fr a fi permise
suprapunerile. Orientarea de afiare n cadrul containerului poate fi vertical sau
orizontal (elementele sunt plasate unele sub celelalte sau unele dup celelalte)
n timp ce spaierile definite pentru elemente (ex. margini) sunt aplicate relativ la
elementul anterior i nu la marginile containerului. nlimea elementelor de tip
StackPanel este implicit setat la valoarea Auto, ea fiind actualizat n funcie de
elementele vizuale plasate n interior. Limea elementelor de tip StackPanel este
implicit setat la limea pus la dispoziie de containerul printe.
2.1.3 ScrollViewer
Este un container virtual care permite afiarea unor elemente mai mari dect
ecranul prin implementarea implicit a interaciunii de defilare.
2.2 Elemente XAML

Una dintre metodele de reprezentare a listelor poate fi realizat prin folosirea
clasei ListBox. Aceasta permite definirea de elemente personalizate (similare
cerinei acestui laborator) prin intermediul componentelor ListBox.ItemTemplate
i DataTemplate. Clasa DataTemplate permite organizarea elementelor de
interfa folosind containere vizuale dintre cele descrise n seciunea 2.1.
<ListBox x:Name="ListName" ItemsSource="{Binding ElementsList}">
<ListBox.ItemTemplate >
<DataTemplate >
// elemente vizuale care reprezint formatul unui element din
list
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
De cele mai multe ori afiarea datelor n interfa presupune o etap de colectare
a acestora din diferite surse (de exemplu: baze de date, fiiere XML etc.). Atunci
cnd exist o ntrziere ntre iniierea cererii i afiarea datelor, se recomand
folosirea unei bare de progres care s ofere utilizatorului o mai bun nelegere a
strii aplicaiei. n Windows Phone 7 componenta corespunztoare este
ProgressBar.
44
2.3 Stiluri
Pentru a eficientiza volumul de munc se pot folosi stiluri, care pot fi aplicate unui
set de elemente vizuale, asigurnd astfel i un aspect unitar al aplicaiei. Pentru
aceasta se recomand folosirea claselor Style i Setter, n care fiecare atribut este
specificat prin cuvntul rezervat Property, iar valoarea acestuia prin Value.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Name="MyStyle" TargetType="TextBlock" >
<Setter Property="Margin" Value="0, 10, 0, 0" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</StackPanel.Resources>
<TextBlock Text="Formatted using styles"
Style="{StaticResource MyStyle}"/>
<TextBlock Text="Formatted using same style"
Style="{StaticResource MyStyle}"/>
</StackPanel>
Pentru a respecta standardul MVVM se recomand implementarea a trei

componente i structurarea codului astfel:
Componenta
View
ViewModel
Model
Detalii
Gestioneaz toate elementele vizuale ale interfeei
(fiierul .xaml) i comportamentul acestora (fiierul
.xaml.cs). Cele dou fiiere ar trebui plasate n directorul
View al proiectului.
Componenta care formateaz informaiile din model
pentru a fi vizualizate n interfaa utilizator. Fiierul .cs va
fi plasat n directorul ViewModel.
Clas sau grup de clase care simuleaz o baz de date.
Valorile vor fi introduse manual n cod, pentru fiecare
dintre elementele de date necesare.
3.1 Navigarea n aplicaiile Windows Phone

Pentru a ncrca un nou ecran ntr-o aplicaie Windows Phone, din cadrul unei
componente View se apeleaz componenta NavigationService, astfel:
45
NavigationService.Navigate(new Uri("/TargetView.xaml",
UriKind.Relative));
Se poate astfel concluziona c partea de navigare n cadrul unei aplicaii Windows

Phone este o component vizual. n MVVM ns, deciziile care determin
navigarea sunt cel mai adesea luate n ViewModel, deoarece aceasta este
componenta care prelucreaz informaiile i controleaz comportamentul
aplicaiei.
Pentru a evita referinele dinspre ViewModel nspre View exist mai multe
abordri implementate n biblioteci de unelte cum sunt MVVM Light Toolkit,
nRoute, MicroModels, Composite WPF/Prism i altele. Pentru simplitate, n cazul
nostru vom utiliza o clas personalizat, conform modelului de mai jos:
using System;
using Microsoft.Phone.Controls;
namespace PhoneApp.Infrastructure
{
public class MyNavigationService
{
private PhoneApplicationFrame frame;
public MyNavigationService(PhoneApplicationFrame phoneAppFrame)
{
frame = phoneAppFrame;
}
public void Navigate(String pageName)
{
frame.Navigate(new Uri(pageName, UriKind.Relative));
}
}
}
Pentru a folosi aceast clas n cadrul aplicaiei, se recomand implementarea

unui model de baz care sa fie extins de toate celelalte componente ViewModel:
public class BaseViewModel
{
public static NavigationService NavService;
public BaseViewModel()
{
NavService = new NavigationService(
((App)Application.Current).RootFrame);
}
46
Pentru a naviga la un nou ecran, n cadrul clasei ViewModel care

extinde clasa de baz BaseViewModel vom apela:
NavService.Navigate("/TargetView.xaml");
Exerciii
Exerciiul 1. Realizai o aplicaie pe tema Biblioteca virtual n care crile

disponibile sunt afiate sub forma:
la ncrcarea ecranului
o va fi vizibil numai o bar de progres cu comportament nedefinit
o dup dou secunde, lista de cri va deveni vizibil iar indicatorul
de progres va disprea
fiecare carte va fi reprezentat de un element n cadrul unui control de tip
list
informaiile crilor afiate vor fi descrise n cadrul componentei Model a
aplicaiei
47
Exerciiul 2. La selectarea unui element din lista descris la Exerciiul 1:
schimbai culoarea de fundal n #00FF00, transparen de 30%

schimbai culoarea textului pentru descrierea crii n #000000
schimbai culoarea textului pentru numele autorului n #00FF00
48
Laboratorul 7 elemente
avansate de interfa i
interaciune utilizator
1
Introducere
n cadrul acestui laborator se urmrete extinderea aplicaiei de gestiune a

crilor dintr-o bibliotec (nceput n laboratoarele anterioare), prin introducerea
seciunii de detalii despre o carte, a posibilitii de adugare/tergere de
elemente din list etc.
1.1 Obiective
Utilizarea conceptelor de meniu contextual, bar de aplicaie, precum i
modificarea funciei implicite a evenimentelor din aplicaiile de tipul Windows
Phone 7.

concepte i soluii pentru dezvoltarea aplicaiei practice Windows Phone 7.
2.1 Adugare unei vederi noi

Pagina de detalii despre o carte presupune crearea a dou clase n directorul View
i ViewModel, iar organizarea elementelor grafice se poate realiza prin
intermediul claselor Grid i StackPanel. n acest pas este necesar stabilirea
conexiunii dintre View i ViewModel, aceasta putnd fi realizat n constructorul
clasei xaml.cs prin setarea unui DataContext:
this.DataContext =
ViewModelsFactory.GetViewModel("nume_clasa_ViewModel");
2.2 Utilizarea meniului contextual

Meniul contextul este un alt concept introdus n Windows Phone. Acesta devine
vizibil la aciunea de apsare lung (long press) pe elementele grafice dintr-un
49
ecran. Pentru aceasta trebuie inslatat pachetul toolkit folosind NuGet (acest
proces este descris n primul laborator de Windows Phone i n Figura 7.1).
Figura 7.1: Instalarea pachetului toolkit

Pasul urmtor n includerea unui astfel de meniu contextual este adugarea unei
referine spre pachetul nou adugat n cadrul vederii:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit"
urmat de specificarea opiunilor disponibile:

<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Option1" />
<toolkit:MenuItem Header="Option2" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
Evenimentele (clic, de exemplu) generate de aceste opiuni pot fi gestionate n

clasa xaml.cs, corepsunztoare clasei View. Cu toate aceste bunele practici
recomand folosirea unei clase speciale care implementeaz interfaa ICommand
i care permite aceast gestionare din ViewModel.
50
n cazul n care se implementeaz operaii de adugare sau tergere a elementelor

dintr-o list se recomand definirea acestei liste ca i ObservableCollection n loc
de List:
ObservableCollection<Item> ItemsList
Avantajul utilizrii clasei ObservableCollection const n faptul c elementele din

View sunt notificate automat n cazul unor aciuni de adugare/tergere.
2.3 Bara de aplicaie (AppBar)

Este un concept specific platformei Windows Phone, care permite plasarea de
imagini (n partea de jos a ecranului) care asigur accesul rapid la cele mai utilizate
operaii referitoare la resursele dintr-o anumit pagin. Adugarea acestui control
ntr-o pagin xaml se poate realiza astfel:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="image_path"
Text="Option1 " />
<shell:ApplicationBarIconButton IconUri="image_ path"
Text="Option2" />
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
De obicei imaginile utilizate trebuie s ndeplineasc anumite condiii de aspect i

dimeniune. Un set restrns de astfel de imagini sunt stocate n locaia:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\
nainte de utilizarea acestor imagini trebuie s ne asigurm de faptul c acestea

au fost importate n proiectul din Visual Studio i c proprietatea Build Action
(accesibil din Visual Studio la clic dreapta pe imagine) are valoarea Content.
Gestionarea evenimentului de clic pe o opiune din AppBar se poate realiza n
clasa xaml.cs corespunztoare vedereii care conine acest modul:
private void ApplicationBarIconButton_Click(object sender,EventArgs e)
{
}
51
2.4 Lifecycle pentru aplicaiile Windows Phone

Sistemul de operare Windows Phone asigur faptul c la un moment dat o singur
aplicaie este activ, n timp ce restul sunt n starea de ateptare. Figura 7.2
evidenieaz strile unei aplicaii Windows Phone:
Figura 7.2: Strile unei aplicaii Windows Phone [2]
Launching event: deschiderea aplicaiei de ctre utilizator.

Running: starea de funcionare rmne pn n momentul n care
utilizatorul navigheaz cu butonul de napoi (Back) pn nainte de prima
vedere din aplicaie.
Metoda OnNavigatedFrom: aceast metod se genereaz atunci cnd
utilizatorul navigheaz din accea pagin.
Starea Deactivated: acest eveniment este generat atunci cnd se apas
butonul de Start i aplicaia devine inactiv sau cnd se deschide o alt
aplicaie.
52
Dormant: apare dup starea Deactivated i pstreaz coninutul

memoriei corespunztoare aplicaiei.
Tombstoned: sistemul de operare Windows Phone permite existena a cel
mult 8 aplicaii n starea Dormant. Atunci cnd apare o a noua aplicaie,
prima dintre acestea trece n starea Tombstoned, caz n care datele
generate de aceastea sunt eliminate din memorie.
Metoda OnNavigatedTo: aceast metod se genereaz atunci cnd
utilizatorul navigheaz spre accea pagin.
Evenimentul Close: utilizatorul navigheaz cu butonul de napoi (Back)
pn nainte de prima vedere din aplicaie.
Pentru a crea seciunea de detalii a crii selectate este nevoie de transmiterea

informaiilor aferente acesteia din vederea care conine colecia de cri n
vederea cu detalii. Exist dou abordri n acest sens:
3.1.1 Navigarea prin intermediul clasei View (xaml.cs)
n clasa xaml.cs corespunztoare vederii care conine colecia de cri este
necesar implementarea evenimentului de schimbare a seleciei
(SelectionChanged). Navigarea spre vederea de detalii se face prin intermediul
mecanismul intern Windows Phone, iar parametrii se pot transmite folosind
noiunea de query string, care conine o list de perechi cheie-valoare, precedat
de caracterul ?:
private void SelectionChanged (object sender,
SelectionChangedEventArgs e)
{
this.NavigationService.Navigate(
new Uri("/View/DetailsPage.xaml?param=selected_item",
UriKind.Relative)
);
}
n vederea cu detalii despre cartea selectat se suprascrie metoda OnNavigatedTo

n care se gestioneaz setul de parametrii trimii anterior:
protected override void
OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
53
string parameter = NavigationContext.QueryString["param"];

}
Similar se pot suprascrie i metodele care gestioneaz evenimentele de

OnNavigatedFrom i OnBackKeyPress.
3.1.2 Navigarea prin intermediul clasei din ViewModel
Pentru aceasta se implementeaz o nou clas NavigationService n care sunt
suprascrise evenimentele de Navigating, Navigated i BackKeyPress. Aceast clas
conine i metoda Navigate care permite trecerea dintr-o vedere n alta,
permind inclusiv transmiterea de parametrii. Definiia complet a acestei clase
este:
public class NavigationService
{
private PhoneApplicationFrame frame;
private object _param;
public NavigationService(PhoneApplicationFrame phoneAppFrame)
{
frame = phoneAppFrame;
frame.Navigated +=
new System.Windows.Navigation.NavigatedEventHandler
(frame_Navigated);
frame.Navigating +=
new System.Windows.Navigation
.NavigatingCancelEventHandler
(frame_Navigating);
frame.BackKeyPress +=
new EventHandler<System.ComponentModel.CancelEventArgs>
(frame_BackKeyPress);
}
void frame_BackKeyPress(object sender,
System.ComponentModel.CancelEventArgs e)
{
}
void frame_Navigating(object sender,
NavigatingCancelEventArgs e)
{
}
void frame_Navigated(object sender, NavigationEventArgs e)
{
54
}
public void Navigate(String pageName)
{
}
public void Navigate(String pageName, object parameter)
{
_param = parameter;
}
}
Instanierea acestei clase se face o singur dat n BaseViewModel:

public static NavigationService NavService =
new NavigationService(((App)Application.Current).RootFrame);
Se mai folosete o clas Factory pentru a avea acces la instanele ViewModel din
fiecare vedere. Aceasta implementeaz ablonul Singletone, astfel nct se evit
crearea mai multor instane de acelai tip:
public class ViewModelsFactory
{
private static DetailsViewModel _detailsVM;
public static DetailsViewModel DetailsVM
{
get
{
if (_detailsVM == null)
{
_ detailsVM = new DetailsViewModel();
}
return _ detailsVM;
}
}
public static Object GetViewModel(string type)
{
switch (type)
{
case "option1":
return DetailsVM;
case "option2":
return ;
default:
return DetailsVM;
}
55
}
}
n cazul nostru se dorete transmiterea unui parametru (cartea selectat) din

vederea care conine colecia de cri n vederea de detalii despre cartea
respectiv. Pentru aceasta, n prima vedere se folosete clasa NavigationService
astfel:
NavService.Navigate("/View/DetailsPage.xaml", selectedBook);
dup care se modific metoda frame_Navigating din NavigationService

void frame_Navigating(object sender, NavigatingCancelEventArgs e)
{
ViewModelsFactory.GetViewModel(e.uri.toString())
.OnNavigatedTo(_param);
}
n timp ce n ViewModel-ul din a doua vedere se gestioneaz parametrul primit:

public void OnNavigatedTo(object param)
{
}
Exerciii
Exerciiul 1. Utiliznd aplicaia de la laboratorul precedent, creai un nou ecran,

denumit "Detalii carte". Cnd o carte este selectat din lista de cri afiat
(conform instruciunilor din laboratoarele anterioare), detaliile despre ea vor fi
prezentate n noul ecran.
Exerciiul 2. Numrai de cte ori este accesat ecranul de detalii, indiferent pentru
care dintre cri. Afiai acest numr ntr-o fereastr de dialog la fiecare
deschidere a ecranului.
56
cunotinelor n Tehnologii
Windows Mobile
1
Introducere

Windows Mobile prezentate n cadrul laboratoarelor anterioare. Fiecare dintre
studeni va primi o not ce va reflecta att nivelul cunotinelor teoretice nsuite
ct i nivelul abilitilor practice dobndite.
1.1 Obiective
Stabilirea msurii n care noiunile fundamentale din domeniul Windows Mobile
au fost nsuite de ctre cursani.

domeniul Windows Mobile se va realiza pe dou niveluri:

57

vederea dezvoltrii unor interfee utilizator n tehnologia Windows Mobile.
Fiecruia dintre participani i va fi asignat un exerciiu, avnd o or i jumtate
timp de rezolvare.
structura aplicaiei implementarea soluiei trebuie s respecte designpattern-ul arhitectural Model-View-ViewModel

interfaa utilizator
o gradul n care formatarea vizual a elementelor de interfa
respect cerinele exerciiului
o fluiditatea designului (adaptare la orientarea dispozitivului)
o respectarea recomandrilor de design a interfeelor utilizator i a
interaciunilor cu acesta
interaciune utilizator n ce msur implementarea realizat
ndeplinete cerinele de:
o verificare a validitii datelor
o prevenirea erorilor i sprijinirea utilizatorului n revenirea dintr-o
situaie de eroare
o gestiune corect a butoanelor hardware
o etc.
o definirea i utilizarea stilurilor pentru formatarea elementelor
vizuale
o separarea corect a componentelor de View, Model i
ViewModel
o etc.

de implementare.
58
Exerciii

teoretice
1. Alegei afirmaiile corecte despre conceptul de Dale active (Live tiles):
a. Permit afiarea diferitelor mesaje care reflect starea aplicaiei
b. Identific pictograma aplicaiei
c. Pot fi redimensionate la dimensiuni prestabilite
d. Nu fac parte din interfaa Metro
2. Care dintre urmtoarele limbaje sunt folosite pentru dezvoltarea
aplicaiilor Windows Phone?
a. Java
b. C#
c. MXML
d. XAML
3. Specificai nivelul de aplicabilitate a stilurilor definite n fiierul
App.xaml:
a. Numai n cadrul fiierului xaml care este cel mai apropiat (n structura
de directoare) de clasa App.xaml
b. La niveul ntregului proiect
c. Stilurile sunt valabile doar pentru containerele care permit gruparea
de elemente grafice, cum ar fi: Grid, StackPanel etc.
d. Au efect doar asupra elementelor care nu au deja definite stiluri
locale
4. Ce se poate spune despre urmtoare secven de cod?
<StackPanel>
<StackPanel.Resources>
<Style Target=TextBlock>
<Setter Property=Foreground Value=Red />
</Style>
</StackPanel.Resources>
<TextBlock Text=PIU1 />
<TextBlock Foreground=Green>PIU2</TextBlock>
<TextBlock>PIU3</TextBlock>
59
</StackPanel>
a. Culoarea textului va fi roie pentru fiecare TextBlock
b. Se va afia PIU1 i PIU3 cu rou, iar PIU2 cu verde
c. Stilul definit n seciunea de resurse nu are efect dac nu e adugat
explicit pentru un TextBlock
d. Se va genera o eroare de compilare pentru c stilul definit la resurse
nu are setat proprietatea x:Key
5. Alegei dintre opiunile de mai jos pe cele care reprezint moduri valide
de mapare (binding):
a. OneWay
b. ManyToMany
c. TwoWay
d. OneToMany
6. Care dintre urmtoarele secvene de cod are ca i rezultat afiarea
textului PIU pe un buton?
a. <Button Content=PIU />
b. <Button x:Name=PIU />
c. <Button>PIU</Button>
d. <Button>
<TextBlock>PIU</TextBlock>
</Button>
7. Specificai limea n pixeli a fiecrei coloane definite n urmtoarea
secven XAML:
<Grid Width=500>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column=1 Width=200 />
</Grid>
a. 0, 200, 0
b. 100, 200, 200
c. 200
d. 500
60
8. Care dintre urmtoarele variante de rspuns sunt adevrate?

a. StackPanel permite poziionarea relativ a componentelor interioare
b. Este permis definirea mai multor coloane n container-ul StackPanel
c. Plasarea elementelor ntr-un container Grid se face n coordonate
absolute
d. Att StackPanel ct i Grid permit accesarea elementelor interioare,
folosind proprietatea Children
9. Care dintre interfee permite actualizarea n timp real a claselor View,
atunci cnd au loc modificri n ViewModel?
a. IRaisePropertyChanged
b. IBindingChanged
c. INotifyPropertyChanged
d. IObservableObjectChanged
10. Un convertor are rolul de a schimba valoarea afiat n interfaa grafic
pe baza unei proprieti sau a unui parametru:
a. Adevrat
b. Fals
11. Care dintre strile de mai jos indic funcionarea activ a aplicaiilor
Windows?
a. Launching
b. Dormant
c. Running
d. OnNavigatedFrom
12. Selectai denumirea clasei care se folosete pentru afiarea unei liste:
a. ListBox
b. List
c. HorizontalList
d. ListItem
13. Unde este poziionat bara de opiuni ntr-o aplicaie Windows Phone?
a. n partea de sus a ecranului
b. n josul ecranului
c. n dreapta
61
d. n stnga
14. Legtura dintre ViewModel i View, n cadrul aplicaiilor Windows
Phone se realizeaz prin:
a. Setare DataContext n pagina dorit
b. Referirea n ViewModel a View-ului
c. Maparea (binding) la proprietile din ViewModel
d. Folosirea variabilelor statice n clasa ViewModel
15. Ce se poate afirma cu privire la secvenele de cod:
View:
<TextBlock Text={Binding MyInput} />
<TextBox Text={Binding MyInput, Mode=TwoWay} />
ViewModel:
private string _myInput;
public string MyInput
{
get {return _myInput;}
set {
if (string.IsNullOrEmpty(value))
_myInput = Introduceti o valoare;
else
_myInput = value;
NotifyPropertyChanged(MyInput);
}
}
a. Valoarea iniial a elementului TextBlock este Introduceti o valoare
b. Modificarea proprietii MyInput din ViewModel nu se reflect n
View
c. Valorile introduse n TextBox vor fi vizibile automat i n elementul
TextBlock
d. Valorile introduse n TextBox NU vor fi vizibile automat i n elementul
TextBlock

Exerciiul 1. Creai o aplicaie cu tema "Biblioteca virtual", cu urmtoarele
caracteristici:
62
utilizatorul trebuie s se autentifice nainte de a putea vizualiza lista de

cri, folosind o adres de email i o parol; datele de autentificare
corecte vor fi salvate n componenta Model a aplicaiei
lista de cri disponibile va fi afiat conform designului din Laboratorul 6
la selectarea unei cri din list, va fi deschis un nou ecran de detalii cu
informaii despre cartea aleas
Exerciiul 2. Creai un "meniu de context" activ pentru elementele listei de cri,

cu urmtoarele opiuni:
Adaug - la apsare se afieaz un nou ecran care permite adugarea

unei noi intrri n lista de cri; imaginea utilizat va fi una generic
terge - la apsare, elementul selectat din list este ters
Exerciiul 3. Creai un "meniu aplicaie", vizibil numai pe pagina de detalii, cu

dou opiuni:
Adaug - la apsare cartea curent afiat este adugat la o list de

Preferine i este afiat un mesaj de confirmare
terge - la apsare
o dac n lista de preferine exist cartea curent afiat, aceasta
este tears
o dac n lista de preferine nu poate fi gsit cartea curent afiat,
un mesaj de eroare este prezentat utilizatorului
Exerciiul 4. Modificai comportamentul butonului hardware Back astfel nct, la

apsarea pe ecranul "List cri" utilizatorul este solicitat s confirme aciunea
Log out prin intermediul unei ferestre de dialog sistem:
o
o
dac utilizatorul apas Cancel/No aciunea de Back este anulat

dac utilizatorul apas Yes, este prezentat ecranul de Autentificare.
Exerciiul 5. Creai un ecran intitulat "List de preferine", accesibil prin

intermediul "meniului aplicaie" definit pe ecranul "List cri". n cadrul acestui
ecran vor fi afiate Titlul i Autorul crilor care au fost adugate la lista de
preferine. Prin intermediul unui "meniu contextual" utilizatorul poate elimina
oricare dintre crile din list.
63
UTILIZATOR N TEHNOLOGII ANDROID
64
Laboratorul 9 Noiuni
introductive
1
Introducere
Dezvoltarea de aplicaii n tehnologia Android presupune modelarea interfeei

utilizator n limbajul XML specific platformei i scrierea codului aplicaiei n
limbajul Java. Principalele unelte de dezvoltare folosite sunt:
Android SDK pentru lucrrile de laborator vom utiliza versiunea 4.4.2

(API 19)
Android Development Tools (ADT Plugin) mediul de dezvoltare creat
pentru Android pe baza aplicaiei Eclipse
Android Development Studio noul mediu oficial de dezvoltare a
aplicaiilor Android
1.1 Obiective
Prezentarea noiunilor introductive n dezvoltarea unei aplicaii Android i
realizarea n cursul orelor de laborator a unei prime aplicaii.
Una dintre caracteristicile principale ale dispozitivelor pe care ruleaz sistemele

de operare Android este diversitatea. Aceasta se manifest n:
configuraiile hardware (procesor, memorie, spaiu de stocare,

senzori disponibili etc.)
rezoluiile disponibile
numrul i funcionalitatea butoanelor hardware disponibile
O aplicaie de succes trebuie s se adapteze ct mai bine condiiilor asigurate de

fiecare dispozitiv i s ofere ntotdeauna un maximum de funcionalitate.
65
2.1 Configuraiile hardware

Sistemul de operare Android este utilizat pe o gam foarte larg i variat de
dispozitive: televizoare, telefoane mobile, tablete, ceasuri etc. O list complet a
dispozitivelor compatibile cu Google Play, actualizat la data de 02.12.2014 poate
fi
consultat
la
adresa:
https://storage.googleapis.com/support-kmsprod/35E61236E9B2475D8E9C9F58AD1002A7CECE
2.2 Dezvoltarea de aplicaii Android pentru mai multe rezoluii
dimensiunea ecranului indic dimensiunea fizic a acestuia, msurat

pe diagonal i exprimat cel mai adesea n inch. Pentru simplitate,
Android grupeaz ecranele n mici, normale, mari i foarte mari.
densitatea ecranului indic numrul de pixeli localizai ntr-o unitate de
suprafa, exprimat cel mai adesea n dots-per-inch (dpi). Pentru
simplitate, Android grupeaz densitile n sczute, normale i mari.
orientare indic orientarea dispozitivului n raport cu utilizatorul.
rezoluie reprezint numrul total de pixeli ai afiajului.
pixel independent de densitate (density-independent pixel) reprezint
un pixel virtual utilizat n descrierea interfeei utilizator pentru a asigura
independena fa de caracteristicile fizice ale afiajelor.
1 dp = 1 px pentru un ecran cu densitatea de 160 dpi
px = dp * (dpi / 160)
2.2.1 Tipuri de afiaje suportate de Android

Pentru simplificarea dezvoltrii aplicaiilor, Android utilizeaz urmtoarea
clasificare a afiajelor:
ldpi (low) ~120dpi

mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi
66
n lucrrile de laborator pentru tehnologia Android vom utiliza ca i mediu de

dezvoltare Android Development Tools.
3.1 Crearea unei noi aplicaii Android

Pentru crearea unei noi aplicaii, urmai paii de mai jos:
3.1.1
Deschiderea aplicaiei Eclipse cu plugin-ul ADT instalat
3.1.2
Crearea unui nou proiect, de tipul Android Application Project
3.1.3
Introducei informaiile specifice aplicaiei

Application Name reprezint numele cu care APP-ul va fi afiat pe
telefon
Project Name numele proiectului n Eclipse. Acest cmp este completat
automat cu valoarea din cmpul Application Name fr spaii
Package Name la fel ca i la alte aplicaii Java, clasele sunt organizate
ntr-un pachet cu denumire unic, specific organizaiei i aplicaiei. n
cazul nostru, organizaia este cea implicit: example
Minimum Required SDK reprezint versiunea minim de Android pe
care va rula APP-ul. n selectarea acestei opiuni trebuie luat n
considerare faptul c, fr a avea n vedere dezvoltarea de cod specific
67
anumitor versiuni de Android, funciile disponibile aplicaiei sunt cele din

SDK-ul minim
Target SDK reprezint versiunea de Android pentru care aceast
aplicaie este optimizat
Compile With versiunea de SDK utilizat pentru compilarea aplicaiei
Theme tema implicit pentru care este optimizat aplicaia
NOT: pentru dezvoltarea aplicaiilor de laborator noi vom utiliza Android 4.4
(KitKat), API 19.
Figura 9.2: Stabilirea numelui aplicaiei i a versiunilor de Android pe care

aceasta va rula
68
3.1.4
Definirea directorului n care este salvat aplicaia i optarea pentru

crearea unei pictograme a aplicaiei i a unei activiti n cadrul
etapelor urmtoare din tutorialul curent
3.1.5
Personalizarea pictogramei aplicaiei i definirea fiierelor imagine

optimizate pentru diferitele rezoluii ale dispozitivelor
69
3.1.6
Selectarea tipului de activitate pe care l dorim creat de ctre tutorial
3.1.7
Introducerea numelui activitii i a denumirii fiierului care va

descrie interfaa utilizator
70
3.1.8
Rezultatul obinut
3.2 Structura generic a unei aplicaii Android

Dup cum se poate observa din Figura 9.1, seciunea A din structura de directoare
a aplicaiei Android este similar cu a altor aplicaii Java, cuprinznd:
directorul src n care sursele aplicaiei sunt organizate pe pachete

referinele ctre librrii externe (n cazul nostru Android 4.4.2 i altele)
directorul bin cu versiunea executabil a proiectului
Seciunea B conine un set de directoare specifice aplicaiilor Android, cu

denumiri prestabilite (care nu pot fi modificate) i cu urmtoarea semnificaie:
res directorul rdcin al seciunii; n acest director pot fi adugate i

alte tipuri de resurse.
71
Figure 9.1: Structura generic de fiiere a unei aplicaii Android
drawable-**** - directoare care conin elemente afiabile pe ecranul

dispozitivului (imagini, setri vizuale etc.), cu versiuni optimizate pentru
diferite rezoluii de afiare (vezi seciunea...)
layout este directorul care cuprinde elementele de organizare a
interfeei utilizator, descrise n limbajul propriu al sistemului Android,
limbaj bazat pe XML
menu cuprinde toate fiierele XML care descriu structura unui meniu
values-v**** - cuprind fiiere XML n care sunt declarate elemente statice
ale aplicaiei, cum sunt: dimensiuni, stiluri, text, constante etc. Modul de
utilizare a informaiilor este urmtorul: fiecare versiune Android va cuta
informaiile statice referite n directorul cu valoarea mai mic cea mai
apropiat de versiunea sa. Cu alte cuvinte, n cazul nostru:
72
values-v14 este primul director verificat de ctre versiunile de

Android cu API >= 14. Dac valorile cutate nu sunt identificate
aici, sistemul va cuta, descresctor, n restul directoarelor
o values-v11 este primul director verificat de ctre versiunile de
Android cu API < 14
o values este ultimul director verificat, n cazul n care valorile
cutate nu au fost identificate n celelalte directoare
values-w820dp este fiierul de valori dedicat dispozitivelor cu rezoluie
de afiare pe lime >= cu 820dp
Fiierul AndroidManifes.xml cuprinde toate elementele descriptive la nivel de

aplicaie care sunt necesare dispozitivului pentru instalare, determinarea
compatibilitilor i acordarea de diferite drepturi de acces. Detalii despre
structura i informaiile cuprinse n acest fiier pot fi studiate la adresa:
http://developer.android.com/guide/topics/manifest/manifest-intro.html
3.3 Descrierea interfeei utilizator

Definirea interfeei utilizator se realizeaz n fiierele XML din directorul
/src/layout/ i include elemente vizuale din directoarele drawable, meniuri
descrise n directorul menu sau constante i stiluri specificate n directoarele
values. Pentru organizarea vizual a elementelor se utilizeaz containere
invizibile, care definesc anumite reguli implicite de organizare a componentelor pe
care le conin i permit ataarea de atribute XML specifice pentru entitile copil
(ex: layout_alignLeft, layout_height).
n cadrul lucrrii de laborator vom utiliza cu precdere dou astfel de containere
(vezi Figura 9.2):
3.3.1 Linear Layout
Ordoneaz elementele vizuale pe care le conine unele dup celelalte, fr a
permite suprapuneri, fie n direcie vertical fie orizontal. Atributele XML
disponibile
entitilor
copil
pot
fi
consultate
la
adresa:
http://developer.android.com/guide/topics/ui/layout/linear.html
3.3.2 Relative Layout
Permite ordonarea elementelor vizuale prin poziionare relativ unele fa de
celelalte. Atributele XML disponibile entitilor copil pot fi consultate la adresa:
http://developer.android.com/guide/topics/ui/layout/relative.html
73
Figura 9.2: Exemplificarea ordonrii elementelor vizuale folosing Linearlayout

sau RelativeLayout
3.4 Funcionalitatea interfeei utilizator

Pentru a realiza legtura dintre modelul de date al aplicaiei i afiarea
informaiilor este necesar scrierea de cod Java. Este esenial de reinut faptul c
ntreaga structur a directorului /res/ este mapat de ctre SDK-ul Android ntr-o
structur Java denumit generic R, sub forma unor resurse de tip int. Organizarea
diferitelor elemente este realizat pe categorii, astfel:
fiecare dintre ID-urile definite n cadrul fiierelor XML de layout sub forma
android:id="@+id/valoareID" sunt accesibile prin R.id.valoareID
fiecare
dintre
resursele
grafice
este
accesibil
prin
R.drawable.nume_fisier_fara_extensie
fiecare dintre fiierele de interfa este accesibil prin
R.layout.nume_fisier_fara_extensie
etc.
Pentru a avea acces la resursele incluse n SDK-ul folosit pentru aplicaie, se va

utiliza instruciunea
import android.R
iar pentru a accesa resursele aplicaiei se va utiliza instruciunea
74
import com.example.booksstoreapp.R;
3.4.1 Accesarea elementelor vizuale

Pentru a obine o referin din codul Java la un element vizual este necesar n
primul rnd parsarea fiierului XML i transformarea structurii acestuia n obiecte
Java. Acest lucru se realizeaz n cadrul funciei onCreate, la linia:
setContentView(R.layout.activity_sign_in);
Dup executarea cu succes a comenzii de mai sus, orice element vizual poate fi
accesat prin comanda:
TipElement variabil = (TipElement) findViewById(R.id.TVErrorPassword);
3.4.2 Ataarea de funcii la interaciunile utilizator

Pentru a ataa o funcie la un eveniment onClick, este necesar ca n fiierul XML s
definim atributul android:onClick pentru elementul vizual dorit.
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:minWidth="300dip"
android:onClick="SignInClick"
android:text="Sign in" />
n clasele Java care vor extinde acest layout este necesar definirea funciei
SignInClick, astfel:
public void SignInClick(View view)
{
}
Exerciii
Exerciiul 1. Creai un nou proiect Android i descriei un ecran de autentificare cu

urmtoarele caracteristici:
titlul ecranului - font: 20px, culoare: #0000FF, aliniere centrat orizontal

textul din cadrul ecranului:
75
etichetele cmpurilor de introducere a datelor: font: 14px,

culoare: #FFFFFF, aliniere la stnga
o mesajele de eroare: font: 14px, culoare: #FF0000, aliniere la
stnga
cmpurile pentru introducerea datelor
o un cmp de tip text pentru introducerea numelui de utilizator n
format email
o un cmp de tip password pentru introducerea parolei
butonul de Autentificare, dimensiune 400px, centrat orizontal
spaiere:
o sub titlu: 60px
o deasupra etichetelor pentru cmpurile de intrare: 40px
o deasupra butonului Autentificare: 20px
afiare la rotirea dispozitivului:
o titlul trebuie s rmn centrat vertical
o cmpurile de intrare trebuie s se redimensioneze pentru a ocupa
tot spaiul orizontal disponibil
Exerciiul 2. La apsarea butonului Autentificare, adugai urmtoarea

funcionalitate pentru aplicaia de la punctul 1:
valorile introduse vor fi verificate dup cum urmeaz

o numele de utilizator i parola nu pot fi vide
o numele de utilizator trebuie s fie o adres de email corect
sintactic
o parola trebuie s
conin cel puin o liter mare i o cifr
s aib cel puin 5 caractere
dac valorile introduse sunt valide
o dac sunt corecte: se va afia textul Autentificare reuit cu
culoarea #00FF00
o dac sunt incorecte: se va afia textul Autentificare euat.
Nume utilizator sau parol invalide! cu culoarea #FF0000
76
pentru fiecare dintre erorile de mai sus, va fi afiat un mesaj

corespunztor imediat sub cmpul de intrare verificat
o sub cmpul Nume utilizator se vor afia, dup caz, mesajele
Numele de utilizator nu poate fi vid
Introducei o adres de email valid
o sub cmpul Parol se vor afia, dup caz, mesajele:
Parola nu poate fi vid
Parola introdus este prea scurt
Parola trebuie s conin cel puin o liter mare i cel
puin o cifr
o mesajul pentru autentificare reuit / euat va fi afiat deasupra
butonului Autentificare
77
Laboratorul 10 utilizarea
controalelor de tip list
1
Introducere
Ca i n cazul altor tehnologii orientate spre interfee mobile, Android utilizeaz

frecvent pentru afiarea informaiilor controale bazate pe liste de elemente.
Pentru interacionarea cu anumite elemente dintr-o list exist posibilitatea
definirii unui meniu contextual, care apare la gestul de apsare prelungit a unui
element.
1.1 Obiective
Folosirea i personalizarea listelor n aplicaiile Android. Definirea meniurilor
contextuale.
2.1 Crearea listelor personalizate

Pentru realizarea unei liste cu elemente personalizate n tehnologia Android este
necesar ndeplinirea urmtorilor pai:
2.1.1 Descrierea structurii vizuale a unui element din list
Fiecare element din list este descris prin intermediul unui fiier XML plasat n
directorul res/layout/.
2.1.2 Realizarea unui adaptor pentru list
Legtura dintre modelul de date i structura vizual a fiecrui element din list
este realizat prin intermediul unei clase Adapter. Dup adugarea / eliminarea
unui element din list este necesar actualizarea adaptorului i apoi notificarea
Listei conectate la acesta.
Pentru definirea unei clase Adapter personalizate este necesar implementarea
unei interfee specifice, definit ca i o clas virtual n SDK-ul Android. Astfel,
este necesar motenirea din clasa BaseAdapter (sau una din subclasele acesteia)
i implementarea funciilor:
78
getCount
getItem
getItemId
getView
returneaz numrul de elemente din colecie i implicit numrul

de elemente din list
returneaz elementul din modelul de date care se gsete la o
anumit poziie n list
returneaz ID-ul elementului din modelul de date care este afiat
la o anumit poziie n list
creeaz i returneaz reprezentarea vizual a unui element din
list, completat cu datele din model. n cazul n care lista
conine mai multe elemente dect pot fi afiate deodat pe
ecran, unul din parametrii acestei funcii va conine o referin
ctre elemente de list create anterior i care pot fi refolosite
(pentru o gestiune mai eficient a memoriei).
2.2 Crearea i interacionarea cu un meniu contextual

Pentru crearea unui meniu contextual care este afiat la apsarea prelungit a
unui element vizual, este necesar ndeplinirea urmtorilor pai:
2.2.1 Descrierea elementelor meniului
Elementele meniului contextual dorit se descriu ntr-un fiier XML din directorul
res/menu/. Pentru fiecare dintre elemente se adaug o etichet item:
<item
android:id="@+id/menu_item_id"
android:title="@string/menu_item_title"/>
2.2.2 nregistrarea elementelor vizuale pentru meniul contextual

Elementele vizuale pentru care se dorete afiarea meniului contextual la gestul
de apsare prelungit trebuie s fie nregistrate n prealabil utiliznd comanda
registerForContextMenu.
2.2.3 Afiarea i personalizarea meniului contextual
n clasa controller a ecranului n care este afiat meniul contextual este necesar
suprascrierea metodei onCreateContextMenu, care este apelat la afiarea
meniului. n cadrul acesteia se stabilete care meniu contextual va fi afiat (putem
afia meniuri diferite n funcie de tipul elementului vizual declanator) i se face
ncrcarea structurii vizuale definite n fiierul XML.
2.2.4 Reacia la selectarea unei intrri din meniul contextual
La momentul selectrii unui element al unui meniu contextual, n cadrul clasei
controller va fi apelat funcia onContextItemSelected.
79
Vom considera n cele ce urmeaz c structurile vizuale pentru elementele din

list
i
meniul
contextual
au
fost
descrise
n
fiierele
res/layout/activity_books_list.xml i res/menu/books_list_context.xml.
3.1 Navigarea la o alt activitate

Navigarea ctre o alt activitate (un alt ecran) n Android se realizeaz folosind
codul urmtor:
Intent intent = new Intent(this, new_activity_class);
startActivity(intent);
3.2 Crearea clasei Adapter

public class MyAdapter extends BaseAdapter
{
public List<Object> items;
private Context context;
public MyAdapter(Context context)
{
this.context = context;
}
}
3.2.1
Implementarea funciei getView
public View getView(int position, View convertView, ViewGroup parent)

{
// referin spre serviciul LayoutInflater
LayoutInflater inflater = (LayoutInflater)
context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// posibilitatea de refolosire a unui rnd definit anterior i care
nu mai este vizibil
View myRow = (convertView == null) ?
inflater.inflate(R.layout.layout_name, parent, false) : convertView;
// referin spre elementele vizuale. Actualizarea acestora cu
informaii din model
return myRow;
}
3.3 Conectarea adaptorului cu lista

Conectarea instanei Adapter cu lista se realizeaz de obicei n funcia onCreate a
controller-ului, dup urmtorul algoritm:
80
listAdapter = nou instan a adaptorului;

listAdapter.items = conector la model;
referinList.setAdapter(listAdapter)
3.3.1 Actualizarea listei la schimbarea informaiilor din model

Actualizarea listei se face prin notificarea sa, utiliznd clasa Adapter, dup ce noile
informaii sunt deja disponibile adaptorului:
listAdapter.notifyDataSetChanged();
3.4 Implementarea meniului contextual

Pentru a putea afia un meniu contextual, elementele vizuale trebuie s se
nregistreze n acest sens. De obicei, nregistrarea se efectueaz n metoda
onCreate a controller-ului, prin apelarea metodei:
registerForContextMenu(view_reference);
3.4.1
Controlul afirii meniului contextual
nainte de a afia meniul contextual, sistemul de operare apeleaz funcia
onCreateContextMenu. Vom exemplifica n cele ce urmeaz personalizarea
acestei funcii prin ataarea la meniu a unui titlu diferit n funcie de elementul
vizat dintr-o list. Pentru a identifica mai multe informaii despre elementul vizual
la care este ataat meniul se poate utiliza parametrul de tipul ContextMenuInfo,
conform exemplului de mai jos.
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo)
{
super.onCreateContextMenu(menu, v, menuInfo);
// verificm dac meniul este creat pentru lista vizat
if (v.getId()==R.id.id_lista_vizata)
{
// identificm elementul selectat din list
AdapterView.AdapterContextMenuInfo info =
(AdapterView.AdapterContextMenuInfo)menuInfo;
menu.setHeaderTitle(String valoare_specifica_elementului);
// ncrcm structura vizual a meniului
getMenuInflater().inflate(R.menu.meniu_contextual, menu);
}
}
81
3.4.2
Prelucrarea elementului selectat din meniul contextual
public boolean onContextItemSelected (MenuItem item)

{
// accesarea informaiei ataate meniului contextual
AdapterView.AdapterContextMenuInfo info =
(AdapterView.AdapterContextMenuInfo)item.getMenuInfo();
// identificarea elementului selectat din meniu, folosind ID-urile
predefinite
if(item.getItemId() == R.id.id_item_1)
{
}
else if(item.getItemId() == R.id.id_item_2)
{
}
return super.onContextItemSelected(item);
}
Exerciii
Exerciiul 1. Extindei aplicaia din laboratorul anterior pentru a simula accesul la

o bibliotec virtual. Dup autentificarea cu succes a utilizatorului, acestuia i va fi
afiat un nou ecran cu lista de titluri disponibil n bibliotec, conform imaginii de
mai jos:
Restricii de implementare
informaiile despre fiecare carte vor fi modelate n cadrul unei

componente cu rol de model n aplicaie (clas Java dedicat)
82
afiarea informaiilor se va realiza cu un control de tip list, care va

ncrca n mod dinamic datele despre fiecare carte
fiecrei cri afiate i corespunde un element din list
Exerciiul 2. La apsarea prelungit a unui element din list va fi afiat un meniu

contextual conform imaginii de mai jos:
Specificaii de implementare
pentru a identifica elementul selectat, meniul contextual va afia n partea

de sus titlul crii
meniul afiat va avea dou elemente: Add book i Remove book
83
Laboratorul 11 elemente
avansate de interfa i
interaciune utilizator
1
Introducere
Aplicaiile pentru Android permit afiarea n cadrul unei bare de opiuni, plasat n
partea de sus a ecranului, comenzile generale pentru activitatea curent. Aceasta
trebuie s reflecte opiunile disponibile utilizatorului n fiecare moment. De
asemenea, pentru situaiile n care anumite operaiuni dureaz un timp mai
ndelungat, este necesar introducerea barei de progress care s avertizeze
utilizatorul.
1.1 Obiective
Folosirea barei de opiuni, a barei de progres i a butonului Back.
2.1 Bara de opiuni

Include n mod implicit un buton de revenire la activitatea anterioar (denumit i
activitate printe) i un text care afieaz titlul activitii curente. Ambele
elemente sunt aliniate la stnga.
n restul spaiului disponibil pot fi afiate diferite opiuni disponibile utilizatorului
pentru activitatea curent. Definirea acestor elemente se realizeaz n cadrul unei
resurse de tip meniu, fiind inclus n activitate n funcia onCreateOptionsMenu,
apelat automat de ctre sistemul de operare. Modalitatea de reprezentare a
comenzilor n cadrul barei de opiuni poate fi controlat din fiierul XML, prin
setarea parametrului android:showAsAction.
2.2 Bara de progres

Pentru a nu nghea interfaa utilizator pe durata realizrii anumitor operaii mai
costisitoare este necesar includerea unei bare de progres pentru notificarea
84
utilizatorului. n sistemul Android, executarea periodic a unui set de instruciuni

poate fi realizat folosind un obiect de tipul CountDownTimer, care insereaz
automat instruciunile n firul principal de execuie.
2.3 Butonul BACK

Majoritatea dispozitivelor Android din prezent ofer utilizatorului un set de
butoane fizice, dintre care unul implementeaz funcionalitate de pas anterior.
Exist ns situaii specifice n care comportamentul acestui buton trebuie
modificat pentru a corespunde cerinelor aplicaiei. n acest sens este necesar
suprascrierea funciei onBackPressed din cadrul activitii.
2.4 Ferestre de dialog

Ferestrele de dialog au rolul de a solicita confirmarea anumitor aciuni care pentru
utilizator nu sunt neaprat evidente sau au rezultat destructiv. Afiarea unei
ferestre de dialog se realizeaz cu ajutorul clasei AlertDialog.Builder.
2.5 Mesaje scurte, denumite TOAST

Pentru afiarea de mesaje informative scurte ctre utilizator, care nu necesit
confirmare de vizualizare din partea acestuia, poate fi utilizat clasa Toast.
Mesajele astfel afiate sunt vizibile pe ecran un anumit timp stabilit, fiind apoi
automat ascunse de ctre sistemul de operare.
3.1 Definirea unui timer

Navigarea ctre o alt activitate (un alt ecran) n Android se realizeaz folosind
codul urmtor:
_progressTimer = new CountDownTimer(interval_de_apelare,
timp_maxim_de_rulare)
{
@Override
public void onTick(long millisUntilFinished)
{
// cod ce va fi executat repetitiv, dup fiecare
interval_de_apelare
}
@Override
public void onFinish()
{
85
// cod ce va fi executat o singur dat, dup timp_maxim_de_rulare

}
}.start();
3.2 Definirea listei de opiuni

Lista de opiuni se definete n cadrul unui fiier XML din directorul de resurse
menu. Descrierea general a unui element este similar cu codul de mai jos:
<item
android:id="@+id/id_actiune_1"
android:showAsAction="always"
android:title="Aciune 1"/>
// id-ul de identificare a aciunii

// opiunile pentru afiare
// textul afiat
3.3 Popularea barei de opiuni

public boolean onCreateOptionsMenu(Menu menu)
{
// adugare de elemente la bara de opiuni.
getMenuInflater().inflate(R.menu.fisier_xml_meniu, menu);
return true;
}
3.4 Identificarea opiunii selectate

public boolean onOptionsItemSelected(MenuItem item)
{
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.id_actiune_1)
{
// cod pentru Opiunea1
return true;
}
else if(id == R.id.id_actiune_2)
{
// cod pentru Opiunea2
return true;
}
else if ...
return super.onOptionsItemSelected(item);
}
3.5 Afiarea unui Toast

Toast.makeText(this, "textul_pentru_afiare", durata_afirii_milisec)
.show();
86
3.6 Afiarea unei ferestre de dialog

Pentru captarea i prelucrarea evenimentelor generate de butoanele unei ferestre
de dialog este necesar implementarea interfeei OnClickListener. Astfel, pentru a
capta aceste evenimente n activitatea curent, la lista interfeelor implementate
trebuie adugat i cea menionat anterior.
AlertDialog.Builder myDialog = new AlertDialog.Builder(this);
logoutConfirmation
.setTitle("titlu_dialog")
.setMessage("mesaj_dialog")
.setPositiveButton("titlu_buton",
referin_implem_interf_ OnClickListener)
.setNegativeButton("titlu_buton",
referin_implem_interf_ OnClickListener)
.show();
3.7 Prelucrarea butonului Back

La apsarea butonului fizic Back, n cadrul activitii curente este apelat funcia:
public void onBackPressed()
{
// cod executat la apsarea butonului Back
}
Pentru comportamentul implicit, este necesar apelarea funciei din clasa printe:
super.onBackPressed().
Exerciii
Exerciiul 1. Extindei aplicaia din laboratorul anterior prin adugarea unui ecran
de detalii, conform imaginii de mai jos:
87
pagina pentru detaliile unei cri este afiat la gestul Tap

contorizai i afiai de cte ori pagina de detalii este afiat pentru fiecare
carte n parte
Exerciiul 2. Adugai aplicaiei urmtoarele funcionaliti:
la apsarea butonului fizic Back, atunci cnd ecranul cu lista de cri este
afiat, solicitai utilizatorului confirmarea ncheierii sesiunii de lucru prin
intermediul unei ferestre de dialog a sistemului Android
o dac utilizatorul confirm, afiai ecranul de Autentificare
o dac utilizatorul anuleaz, rmnei la ecranul curent
definii un meniu de opiuni care permite iniializarea ncheierii sesiunii de
lucru prin intermediul opiunii Sign out
o implementai scenariul de interaciune de la punctul anterior
88
cunotinelor n Tehnologii
Android
1
Introducere

Tehnologiilor Android prezentate n cadrul laboratoarelor anterioare. Fiecare
dintre studeni va primi o not ce va reflecta att nivelul cunotinelor teoretice
nsuite ct i nivelul abilitilor practice dobndite.
1.1 Obiective
Stabilirea msurii n care noiunile fundamentale din domeniul Tehnologiilor
Android au fost nsuite de ctre cursani.

domeniul Tehnologiilor Android se va realiza pe dou niveluri:

89

vederea dezvoltrii unor interfee utilizator n tehnologia Android. Fiecruia dintre
participani i va fi asignat un exerciiu, avnd o or i jumtate timp de rezolvare.
structura aplicaiei implementarea soluiei trebuie s respecte designpattern-ul arhitectural Model-View-Controller

interfaa utilizator
o gradul n care formatarea vizual a elementelor de interfa
respect cerinele exerciiului
o fluiditatea designului (adaptare la orientarea dispozitivului)
o respectarea recomandrilor de design a interfeelor utilizator i a
interaciunii cu acesta
interaciune utilizator n ce msur implementarea realizat
ndeplinete cerinele de:
o verificare a validitii datelor
o prevenire a erorilor
o sprijinire a utilizatorului n revenirea dintr-o situaie de eroare
o evitarea blocrii elementelor de interfa n timpul efecturii
unor operaii mai complexe
o etc.
o definirea i utilizarea stilurilor
o separarea componentelor de vizualizare, model de date i control
o procesarea n fire de execuie secundare a operaiilor costisitoare
o etc.

de implementare.
90
Exerciii

teoretice
1. Specificai valoarea de adevr a urmtoarei afirmaii: aplicaiile Android
pot fi testate pe dispozitive fizice, precum i n simulatoare software
oferite de anumite medii de dezvoltare cum ar fi Android Development
Tools:
a. Adevrat
b. Fals
2. Aplicaiile native Android sunt compatibile cu:
a. Telefoanele i tabletele care ruleaz sistemul de operare Android
b. Smart TV bazate pe sistemul de operare Android
c. Pot funciona corect pe orice dispozitiv, indiferent de sistemul de
operare instalat
d. Toate opiunile de mai sus
3. Este corect afirmaia conform creia aplicaiile Android folosesc
formatul XML pentru a defini elementele grafice ale unui ecran?
a. Adevrat
b. Fals
4. Ce se poate afirma despre container-ul Relative Layout?
a. Permite ordonarea de noi elemente grafice n funcie de poziia
componentelor existente
b. Se poate specifica faptul c elementul A s fie aliniat deasupra
unui alt element B
c. Permite plasarea vertical a componentelor grafice
d. Permite plasarea orizontal a componentelor grafice
5. Datorit numrului mare de dispozitve care ruleaz sistemul de operare
Android, a fost realizat o convenie de clasificare a afiajelor. Selectai
tipurile de afiaje care fac parte din aceast convenie:
a. ldpi
b. smalldpi
c. xsdpi
91
d. xhdpi
6. Care dintre urmtoare afirmaii, referitoare la AndroidManifest.xml sunt
adevrate:
a. Cuprinde toate elementele descriptive necesare instalrii pe
dispozitive
b. Definete nivelul minim pentru versiunea de Android SDK
c. Restricioneaz accesul la aplicaiile din magazinul virtual Google
Play, pentru anumite dispozitive
d. Deservete la identificarea aplicaiei pe baza unui nume unic
7. Cum se numete clasa care realizeaz legtura dintre modelul de date i
componentele vizuale n aplicaiile Android?
a. Link
b. Adapter
c. MVC
d. LiniarLayout
8. Care este numele clasei care se folosete pentru a crea elementele
grafice ale unui ecran (screen)?
a. Activity
b. ViewGroup
c. View
d. Adapter
9. Identificai metoda Android care permite navigarea ntre activiti:
a. startActivity
b. gotoActivity
c. open
d. create
10. Care este metoda folosit pentru notificarea clasei Adapter despre
modificrile din clasa model?
a. adapterNotify
b. notifyDataSetChanged
c. updateAdapter
d. notification
92
11. Unde este poziionat bara de opiuni ntr-o aplicaie Android?

a. n partea de sus a ecranului
b. n josul ecranului
c. n dreapta
d. n stnga
12. Specificai numele directorului (din structura implicit a unui proiect
Android) care conine clasele XML folosite pentru definirea interfeei
grafice:
a. src
b. res/layout
c. android
d. res/view
13. Care metod este folosit pentru actualizarea la fiecare 3 secunde a unei
liste de elemente, cu informaii preluate dintr-o baz de date?
a. CountDownTimer(3000, 100)
b. CountDownTimer(3, 100)
c. Count()
d. CountDownTimer(3000, 1000)
14. Specificai numele metodei care identific elementul selectat din bara
de opiuni:
a. selected
b. optionSelect
c. onOptionsItemSelected
d. selectedItem
e. onItemSelect
15. Selectai clasa prin intermediul creia se afieaz o fereastr de dialog n
aplicaiile Android:
a. Alert
b. Echo
c. AlertDialog.Builder
d. Display.Builder
93

Exerciiul 1. Implementai o aplicaie care gestioneaz o list de cumprturi,
conform urmtoarelor specificaii:
la pornirea aplicaiei este afiat lista curent de produse

pentru fiecare produs se afieaz
o denumirea, numrul de uniti, preul estimat
meniul Opiuni conine urmtoarele comenzi:
o terge toate elementele - terge toate elementele din list
o Adaug un element afieaz un nou ecran prin intermediul
cruia poate fi adugat un nou element n list
la apsarea prelungit a unui element se va afia un meniu contextual cu
urmtoarele caracteristici
o titlul meniului corespunde denumirii elementului
o terge din list opiune care elimin elementul din list
o Editeaz opiune care deschide un nou ecran ce va permite
utilizatorului editarea informaiilor despre elementul selectat
Exerciiul 2. Implementai o aplicaie care permite vizualizarea unor anunuri de

vnzare autoturisme, conform urmtoarelor specificaii:
la deschiderea aplicaiei va fi afiat automat lista de autoturisme, cu

urmtoarele informaii:
o poz autoturism, model, denumire proprietar, anul fabricaiei,
numr de kilometri, tip combustibil, descriere
o poza autoturismului va fi plasat n partea din stnga sus a
fiecrui element din list
la apsarea prelungit a unui element va fi afiat un meniu contextual cu
urmtoarele opiuni:
o Ascunde anun - va ascunde elementul selectat din list dar nu l
va elimina din modelul de date
o Marcheaz anun - va modifica afiarea elementului selectat prin
plasarea imaginii n partea din dreapta sus
o terge anun - va elimina anunul din list i din modelul de date
implementai bara de opiuni a aplicaiei cu funcionalitatea
94
o
o
Afieaz anunurile ascunse afieaz din nou n list toate

anunurile ascunse
Demarcheaz toate anunurile va readuce toate anunurile
marcate la stadiul de anunuri nemarcate
Exerciiul 3. Implementai o aplicaie de gestiune a profilului utilizatorilor unei

reele sociale, conform urmtoarelor specificaii:
profilul utilizatorului conine informaiile:

o poz, nume, prenume, hobby
la gestul Tap pe poz, se va deschide un nou ecran cu o list de poze
predefinit, formatat astfel:
o fiecare element din list afieaz n partea din stnga poza iar n
dreptul acesteia denumirea pozei
la selectarea unei poze din list aplicaia revine la ecranul cu contul
utilizatorului, actualiznd poza acestuia
n mod similar, utilizatorul poate selecta dintr-o list de hobby-uri pe cel
pe care l dorete afiat n profil
Exerciiul 4. Implementai o aplicaie similar unei agende de telefon, conform

urmtoarelor specificaii:
pentru fiecare contact se poate reine

o nume, prenume, telefon, email
meniul de opiuni al aplicaiei permite urmtoarele aciuni
o Adaug contact deschide un nou ecran n care pot fi introduse
datele contactului
o Caut contact afieaz un cmp de text n care poate fi introdus
cuvntul cheie utilizat pentru filtrarea contactelor
meniul contextual afiat la apsarea lung a unui element din lista de
contacte permite efectuarea urmtoarelor aciuni
o terge contact - terge un contact din list
o Sun contact - efectuarea unui apel telefonic
o Trimite email - iniierea trimiterii unui mesaj email
la fiecare dintre aciunile menionate, verificai dac informaiile necesare
sunt disponibile (ex. dac pentru contactul selectat exist specificat o
adres de email), iar n caz contrar afiai un mesaj de eroare
95
Exerciiul 5. Implementai o aplicaie de mesagerie instantanee, conform

urmtoarelor specificaii:
ecranul principal al aplicaiei prezint lista de mesaje primite, afind

pentru fiecare mesaj urmtoarele informaii:
o mesaj, autor, data i ora primirii mesajului
sub lista de mesaje primite, introducei o csu de text i un buton
denumit Trimite
o la introducerea unui mesaj n csua de text i apsarea butonului,
mesajul va fi adugat n lista de mesaje
meniul contextul afiat la apsarea ndelungat a unui mesaj permite
utilizatorului s executarea urmtoarelor aciuni
o terge mesaj - permite eliminarea unui mesaj primit din list
o Rspunde la mesaj va introduce automat n csua de rspuns
textul: @[autor_mesaj_selectat]
la fiecare 5 secunde, generai automat un mesaj ctre utilizatorul curent,
simulnd o scurt conversaie
96
Bibliografie
[1] Chris Coyier, Specifics on CSS Specificity, 10 Mai 2010, http://csstricks.com/specifics-on-css-specificity/ [ONLINE, 30 mai 2015]
[2] App activation and deactivation for Windows Phone 8. http://msdn.microsoft
.com/en-us/library/windows/apps/ff817008%28v =vs.105%29.aspx [ONLINE, 30
mai 2015]
[3] Clifton, I.G. Android User Interface Design: Turning Ideas and Sketches into
Beautifully Designed Apps. Addison-Wesley Professional, 2013
[4] Krug, S. Don't Make Me Think, Revisited: A Common Sense Approach to Web
Usability (3rd Edition) (Voices That Matter). New Riders, 2014
[5] Lewis, C., Rieman, J. Task-Centered User Interface Design. Electronic publishing,
1993. http://hcibib.org/tcuid/ (2015)
[6] Matteo, P. Windows Phone 8 Development Succinctly. Electronic publishing,
Syncfusion, 2014. http://www.syncfusion.com/resources/techportal/
ebooks/windowsphone8
[7]McCracken D.D., Wolfe R.J. User-Centered Website Development. A HumanComputer Interaction Approach. Pearson Prentice Hall, 2004
[8] Neil, T. Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps
(Second Edition). O'Reilly Media, 2014
[9] Nudelman, G. Android Design Patterns: Interaction Design Solutions for
Developers. Wiley, 2013
97

Teodor T. Stefanut, S.a., Proiectarea Interfetelor Utilizator PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Teodor T. Stefanut, S.a., Proiectarea Interfetelor Utilizator PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Teodor Traian TEFNU

Dnu Vasile MIHON

Prof.dr.ing. Daniela Manea

Copyright 2015 Editura U.T.PRESS

Laboratorul 1 limbajul HTML

Dezvoltarea aplicaiilor WEB profesionale presupune realizarea unor interfee

HTML reprezint limbajul standard de descriere i organizare a coninutului care

2.1 Etichete HTML

etichete de tip bloc introduc o secionare a coninutului i ocup

Permite includerea n cadrul documentului a unor instruciuni

Etichete introduse de standardul HTML 5 cu scop de organizare semantic a

2.2 Atribute ale etichetelor HTML

aplicarea uneia sau a mai multor clase CSS elementului curent

Codul HTML nu necesit un mediu de dezvoltare sau compilare nainte de

Exerciiul 1. Creai o pagin HTML dedicat unei agenii de turism, cu urmtoarele

un element de tip H1 pentru titlul paginii

Exerciiul 2. Adugai la pagina creat la exerciiul 1 urmtoarele elemente

o nou seciune, intitulat Oferte speciale (etichet H2)

Laboratorul 2 Formatare CSS

Foile de stil reprezint o modalitate modular de formatare vizual a unui

2.1 Selectori CSS

2.1.1 Folosind eticheta HTML

Folosind ID-ul elementului HTML

n codul CSS, clasa corespunztoare are obligatoriu denumirea #idElement. Pentru

2.1.4 Folosind atributul STYLE al elementului HTML

2.2 Modaliti de definire a claselor CSS

Aceast modalitate de definire nu este influenat de tipul selectorilor utilizai,

Formatul final al clasei se obine prin suprascrierea definiiilor n funcie de

2.3 Aplicarea specificaiilor CSS pe elementele HTML

dac elementul are specificaii CSS n interiorul atributului style, acestea

Figura 1.1: Ilustrare a calculului de specificitate pentru clasele CSS.

Este important de menionat aici c unele proprieti sunt implicit motenite de

Codul CSS nu necesit un mediu de dezvoltare sau compilare nainte de publicare.

Figura 2.2: Exemplu de unelte pentru inspectarea modului de aplicare a stilurilor

Inspectarea modului de aplicare a stilurilor i de suprascriere a diferitelor

Exerciiul 2. n continuarea documentului de la exerciiul 1 implementai designul

Prin intermediul codului JavaScript programatorii au acces la structura DOM a

2.1 Includere cod direct n fiierul HTML

n general acest mod de inserare a codului JavaScript se realizeaz n cadrul

2.2 Includere cod JavaScript dintr-un fiier extern

n marea majoritate a cazurilor, utilizarea sub aceast form a etichetei SCRIPT se

2.3 Funcii JavaScript

Cuvnt cheie care refereniaz

n exemplul de mai sus, this = elem la

Returneaz true dac object are

Pentru utilizarea expresiilor regulate n cadrul limbajului JavaScript este necesar

La fel ca i n cazul limbajelor HTML i CSS, codul JavaScript nu necesit un mediu

Figura 3.1: Exemplu de unelte pentru depanarea codului JavaScript (Firefox)

modaliti de transmitere a informaiilor folosind numai JavaScript ntre dou

Exerciiul 1. Implementai un formular de contact cu urmtoarele cmpuri: nume,

la apsarea butonului Reset, cmpurile formularului sunt aduse la starea

funcionalitatea de la punctele anterioare va fi realizat fr rencrcarea

Exerciiul 2. Folosind formularul de mai sus, implementai n JavaScript

nume trebuie s conin cel puin trei litere

cmpul telefon poate conine numai cifre i un caracter -, n formatul nnnnnnnnnnnn (3 - 9)

La fiecare apsare a butonului Trimite erorile identificate, indiferent de numrul

n cadrul acestui laborator va fi evaluat nivelul nelegerii noiunilor din domeniul

Evaluarea cunotinelor dobndite n timpul lucrrilor practice de laborator din

2.1 Evaluarea teoretic

2.2 Evaluarea practic

structur modalitatea de utilizare a etichetelor HTML trebuie s

La finalul timpului de lucru, fiecare dintre studeni prezint cadrului didactic

3.1 Exemple de ntrebri pentru verificarea cunotinelor