SPECIALIZAREA: SISTEME DISTRIBUITE ÎN INTERNET FORMA DE ÎNVĂȚĂMÂNT: ZI DEZVOLTAREA APLICA ȚIILOR WINDOWS 8 METRO UI COORDONATOR ȘTIINȚIF IC: PROF…. [611431]

UNIVERSITATEA DIN ORADEA
FACULTATEA DE ȘTIINȚE
SPECIALIZAREA: SISTEME DISTRIBUITE ÎN
INTERNET
FORMA DE ÎNVĂȚĂMÂNT: ZI
DEZVOLTAREA APLICA ȚIILOR
WINDOWS 8 METRO UI
COORDONATOR ȘTIINȚIF IC:
PROF. UNIV. DR. POPE SCU CONSTANTIN
ABSOLVENT: [anonimizat]
2013

Introducere ………………………….. ………………………….. ………………………….. …………………….. 3
1. Introducere în Windows 8 ………………………….. ………………………….. ………………………. 4
1.2. Inovația S oftware ………………………….. ………………………….. ………………………….. . 6
1.2.1. Securitatea ………………………….. ………………………….. ………………………….. …. 6
1.2.2. Interfața sensibilă la atingere ………………………….. ………………………….. ……… 7
1.3. Inovația hardware ………………………….. ………………………….. …………………………. 10
1.4. Îmbunătățirea funcționalităților ………………………….. ………………………….. ……….. 11
2. Aplicații Metro UI ………………………….. ………………………….. ………………………….. …… 12
2.1. Metro UI ………………………….. ………………………….. ………………………….. ………… 12
2.2. Structura unei aplicații Metro UI ………………………….. ………………………….. ……… 15
3. Dezvoltarea unei aplicații Win dows 8 Metro UI ………………………….. …………………….. 16
3.1. Arhitectura Windows 8 ………………………….. ………………………….. ………………….. 16
3.2. Ciclul de viață al unei aplicații Windows 8 ………………………….. …………………….. 17
3.3. Limbajul XAML ………………………….. ………………………….. ………………………….. . 19
3.4. Crearea unei aplicații ………………………….. ………………………….. …………………….. 20
3.4.1. Orientarea dispozitivului ………………………….. ………………………….. …………. 22
3.4.2. Operația de snapping ………………………….. ………………………….. ………………. 25
3.4.3. Semantic Zoom ………………………….. ………………………….. ……………………… 26
3.4.4. Func ționalitatea de căutare ………………………….. ………………………….. ………. 28
3.5. Dezvoltarea sincronă și asincronă ………………………….. ………………………….. …….. 29
3.5.1. Modelul sincron ………………………….. ………………………….. …………………….. 30
3.5.2. Modelul multithread ………………………….. ………………………….. ……………….. 30
3.5.3. Modelul asincron ………………………….. ………………………….. …………………… 31
3.5.4. Evoluția programării asincrone pe platforma .NET ………………………….. ……. 32
3.6. Controale de bază în aplicații Windows 8 Metro UI ………………………….. …………. 34
3.6.1. Language Bar ………………………….. ………………………….. ………………………… 35
3.7. Data binding ………………………….. ………………………….. ………………………….. ……. 36
3.8. Dezvoltarea unei aplicații Windows 8 folosind JavaScript ………………………….. …. 42
3.9. Distribuirea aplicației prin intermediul Windows Store ………………………….. …….. 43
Concluzie ………………………….. ………………………….. ………………………….. …………………….. 45
Bibliografie ………………………….. ………………………….. ………………………….. ………………….. 46

3 Introduce re
În prezenta lucrare se va trata subiectul de actualitate al aplicațiilor Metro UI dezvoltate
în sistemul de operare Windows 8 cu ajutorul tehnologiilor curente.
Primul capitol prezintă câteva dintre caracteristicile sistemului de operare Windows 8,
noutățile și îmbunătățirile pe care le aduce acest sistem de operare în ceea ce privește
funcționalitatea și designul interfeței.
În acest capitol se explică în ce constă o aplicație Metro UI, structura unei astfel de
aplicații , precum și elementele de bază ale acesteia.
Al treilea capitol înfățișează modul de a dezvolta o aplicație Metro UI utilizând C# și
XAML precum și o scurtă introducere în dezvoltarea aplicațiilor Windows 8 utilizând HTML
și Javascript. Acest capitol prezintă particularități referitoar e la tehnologia XAML și la alte
detalii de implementare, respectând scopul aplicației și exemplificând prin modelul
implementat al unei aplicații Metro UI.

4 1. Introducere în Windows 8
Windows 8 este un sistem de operare care s -a schimbat mult în ceea ce priv ește partea
de user interface și nu numai. A fost construit cu o abordare centrată pe support tactil.
Desktop -ul prezintă câteva modificări, însă majoritatea elementelor desktop -ului tradițional
rămân neschimbate. Pentru aceasta Windows 8 prezintă două int erfețe utilizator: interfața
desktop obișnuită (asemănătoare cu cea din Windows 7) și o interfață complet diferită ( Metro
style).
Microsoft a construit versiunile precedente de sisteme de operare începând de la
premisa că utilizatorii vor folosi un mouse ș i o tastatură pentru a controla programele și
sistemul de operare. Astfel interfața utilizator este concepută pentru interacțiuni specifice
acestor două tipuri de echipamente, spre exemplu se presupune că un utilizator va folosi
cursorul mouse -ului pentru a efectua cu precizie un click pe orice iconiță.
Pentru un utilizator Windows obișnuit, folosirea unui mouse este considerată a fi cea
mai ușoară metodă de utilizare a interfeței grafice. Desigur alături de mouse utilizatorii se
bazează și pe tastatura atâ t pentru a scrie cât și pentru a folosi așa numitele shortcuts cum ar fi
CTRL+S, CTRL+A, CTRL+ALT+DELETE și nu numai, pentru a le ușura activitatea.
Dispozitive mai mici cum ar fi PDA ( Personal Digital Assistent ) și smartphone -uri
obișnuiau să aibe butoane și stilus -uri speciale pentru a imita cât mai bine interfața unui
sistem de operare specific desktop computerelor. Însă această alegere nu este cea mai optimă.
În 2001 Microsoft a creat o altă categorie de dispozitive: tablet PC -urile. Acestea erau în
fond mici laptop -uri cu ecrane reversibile, sensibile la gesturi tactile. Acestea erau computere
perfect funcționale însă mult mai mobile, iar un alt avantaj îl reprezenta faptul că obiectele
puteau fi manipulate într -un mod mult mai natural cu ajutorul ecra nului tactil, fără a utiliza
mouse -ul și tastatura, ci doar atingerea.
În ultima perioadă, telefoanele mobile au devenit mai mari și mai inteligente, nu includ
stylus -uri și uneori nici măcar butoane, un lucru de observat fiind faptul că interfața utilizat or
de pe acestea nu se aseamănă cu interfața desktop tradițională. Astfel a fost promovată o
interfață utilizator nouă care permite manipularea obiectelor pe ecran în mod natural prin
atingerea elementelor cu degetele. Majoritatea acestor dispozitive au ec rane multi -touch , adică
se pot întreprinde interacțiuni cu mai multe degete simultan, numite generic gesturi multi –
touch .
Cu Windows 8, s -a încercat să se creeze primul sistem de operare care să furnizeze
ambele interfețe utilizator: atât cea tradițională din vechile versiuni Windows cât și o interfață
multi -touch specifică altor dispozitive cum ar fi tablete, smartphone -uri, etc.

5 Natura complexă a interfeței grafice și îmbunătățirile aduse sistemului de operare permit
dezvoltatorilor de aplicații să constr uiască aplicații ce funcționează pe orice dispozitiv ce are
cel puțin 7 inch și cel mult 70 de inch. Aplicațiile sunt la fel de captivante, fie fiind folosite cu
ajutorul unui ecran multi -touch, fie controlate cu ajutorul unui mouse și a unei tastaturi.
Pentru a simplifica lucrul programele pentru utilizator, dezvoltatorii de software au
folosit metafore din viața de zi cu zi drept concepte în aplicațiile lor. Astfel în ceea ce privește
designul unui produs software a apărut stilul iconografic ce utilizează metafore din lumea
reală și portretizează obiecte cu un design grafic cât mai realist. În zilele noastre însă,
utilizatorii preferă unelte și elementele simple și productive, care să -i ajute să -și rezolve rapid
problemele.
Acest fapt este ilustrat prin in termediul stilului de design infografic, iar interfețele
utilizator din Windows 8 aplică principiile acestui stil.

Figura 1.1.1.1. Design infografic pentru Windows 8 Start Screen
În mod adițional Microsoft a creat un nou limbaj pentru customizarea design -ului
destinat u tilizării în Windows 8, care urmărește principiile designului infografic. Deși fiecare
aplicație are propriul său aspect, toate au teme comune și anumite șabloane care îi ajută pe
utilizatori să înțeleagă și să le folosească într -un mod similar.
Deși origi nile acestui limbaj pot fi găsite în versiunile anterioare ale Windows Media
Center și aplicații specifice Zune media player, Windows Phone 7 a fost cel care a îndreptat
atenția către acest limbaj și această direcție. De atunci Xbox 360 a fost adaptat aces tui design,
iar Windows 8 se bazează pe deplin tot pe acest design. În viitor probabil mult mai multe
aplicații vor adopta aceste concepte.

6

Figura 1.1.1.2. Unelte noi în cadrul interfeței
Pentru configurarea opțiunilor, Windows 8 prezintă în pagina de start o bară de un elte
specială, Charms Bar . Setul de butoane localizat în această bară de unelte deservește
următoarele funcții: căutare (search), partajare (share), conectare (connect), setări (settings),
start (start). Scopul acestora este de a permite utilizatorului ope rații de căutare, de partajare a
conținutului, de conectare la dispozitive, de trimitere de conținut. Butonul start are rolul de a
poziționa la pagina de start, iar butonul settings are rolul așa cum îi spune și numele de a
configura opțiunile aplicației î n funcție de preferințele userilor.
Aplicațiile sunt reprezentate în cadrul ecranului de start al sistemului de operare
Windows 8, prin intermediul imaginilor touch -friendly dispuse în meniuri de partajare.
1.2. Inovația Software
1.2.1. Securitatea
Calitățile sistemul ui de operare anterior în ceea ce privește securitatea au fost extinse și
îmbunătațite:
Trusted boot – anumite programe de malware vizează procesul de boot al mașinii de
calcul reușind să se infiltreze în sistem înainte ca antivirusul sau alt soft antimalw are să fi avut
șansa să pornească. În acest scop funcția ce promite boot securizat protejează integritatea
datelor implicate în procesul de boot, cum ar fi kernel -ul (nucleul), fișierele de sistem,
driverele de boot critice și chiar soft -ul antimalware în sine. În cazul în care un virus reușește
să compromită cu succes procesul de boot, Windows poate detecta acest fapt și poate repara
automat sistemul.

7 Criptare BitLocker – acest tip de criptare facilitează protecția datelor în cadrul
sistemului de operare, aceasta incluzând protecția împotriva sustragerii de date de pe
computere furate sau dezafectate. Criptarea se face doar asupra spațiului folosit și nu asupra
întregului spațiu al hard disk -ului ceea ce determină o criptare mult mai rapidă și mai
performan tă. BitLocker criptează datele mult mai eficient oferind suport pentru criptare AES –
256 biți și pentru dispozitive de stocare mobile. De asemenea oferă suport și pentru memorii
externe criptate (ce provin pre -criptate de la producător).
AppLocker – este un mecanism simplu și flexibil care permite specificarea aplicațiilor
cărora le este permisă rularea pe PC -urile utilizatorilor într -o sesiune standard. Astfel se poate
preveni instalarea și utilizarea software -ului nedorit, neutorizat sau inadecvat prin cre area
unor politici de securitate. Se pot crea reguli bazate pe un număr de proprietăți, cum ar fi
semnătura pachetului unei aplicații
Window SmartScreen – este un serviciu care protejează userii de viruși ce pot proveni
de la aplicații software dăunătoare întâlnite pe Internet. Această tehnologie verifică reputația
fiecărei noi aplicații ajutând la menținerea securității utilizatorilor indiferent de browserul
folosit în Windows 8. Aceeași denumire o poartă funcționalitatea din Internet Explorer care
proteje ază utilizatorii de site -uri web care doresc să obțină informații cu caracter privat, spre
exemplu nume de utilizator, parole sau date de facturare.
1.2.2. Interfața sensibilă la atingere
Cea mai evidentă modificare este noua interfață utilizator: ecranul de porn ire, grafica
adoptată pentru ferestre. Beneficiul constă în faptul că scopul unei aplicații va fi pus în
valoare prin intermediul iconițelor dinamice, care pot înfățișa conțiut încărcat dinamic cu
informațiile cele mai recente specifice aplicației în cauză . Windows 8 aduce în lumină și noile
aplicații Windows 8 Metro Style, care sunt aplicații ce rulează pe întreg ecranul, fără bară de
titlu sau butoane de închidere, minimizare, maximizare, oferind o experiență diferită față de
aplicațiile desktop tradițion ale. Elementele ce țin de meniu devin comenzi de aplicație care
apar doar când sunt solicitate. Windows 8 și aplicațiile Windows 8 oferă șansa de a
experimenta asupra acțiunilor, comenzilor aplicației prin intermediul gesturilor mâinii,
cercuri, zig -zag, m ișcare verticală sau orizontală, pentru a efectua diverse funcții cum ar fi
închiderea unei aplicații, afișarea unei bare de comenzi, zoom -in, zoom -out, scroll, rotirea
imaginii ecranului, etc.
În timp ce versiunile de Windows precedente erau destinate în principal pentru
calculatoare desktop și laptopuri, Windows 8 deschide oportunități pentru o gamă nouă de
dispozitive: tablete, ultrabook -uri etc. O trăsătură comună pentru aceste dispozitive este
posibilitatea de a utiliza gesturile multi -touch. În cazul dezvoltării de aplicații Windows 8 este
indicat să se țină cont de acest lucru în interfața utilizator.
Pentru a ajuta în acest sens Microsoft pune la dispoziția dezvoltatorilor de aplicații noul
Visual Studio 2012 pentru Windows 8 care prezintă posibilita tea de a lucra cu respectivele
controale prestabilite, potrivite atât pentru touchcreen -uri cât și pentru lucrul cu mouse. De
asemenea Microsoft asigură utilizarea constantă a unui set de gesturi multi -touch pe parcursul
întregului sistem de operare și o m etodă clară, concisă pentru a le descrie.
Mai jos sunt prezentate toate gesturile definite pentru Windows 8:
Atingere (Tap) – Aceasta este interacțiunea principală cu un obiect de pe ecran, cum ar
fi pornirea unei aplicații prin atingerea unui Tile. Poate fi privită ca și un corespondent pentru
mouse click.

8

Figura 1.2.2.1. Gestul de atingere
Atingere și menținere (Tap and Hold) – Aceasta este interacțiunea secundară cu un
obiect, cum ar fi obținerea meniului contextual prin atingerea un obiect pentru o secundă fără
a-l elibera, asemenea unui click dreapta cu mouse -ul.

Figura 1.2.2.2. Gestul de atingere și menținere
Glisare (Slide) – defilarea în cadrul unei liste se referă de obicei la folosirea fie a
mouse -scroll -ului, fie a unei bare de defilare (scrollbar) pentru a modifica vizualiz area
curentă. În Windows 8 aceasta se realizează mult mai ușor prin atingerea view -ului cu un
deget și deplasând -ul în stânga sau dreapta. Drept rezultat lista se va deplasa, derula în acea
direcție.

Figura 1.2.2.3. Gestul de glisare

9 Deplasare rapidă (Swipe) – acest ges t poate fi folosit pentru a selecta un obiect de pe
ecran. Acest gest este similar celui anterior, de glisare: se atinge un obiect cu un deget și se
mișcă în jos ușor fără a -l ridica. Un gest swipe este complet în momentul opririi mișcării și
ridicării deg etului de pe ecran. Dacă gestul nu implică și oprire înaintea ridicării degetului
atunci gestul va fi mai mult decât probabil interpretat ca un gest de glisare.

Figura 1.2.2.4. Gestul de deplasare rapidă
Ciupire (Pinch) – acest gest implică folosirea a două degete pentr u a atinge ecranul și
mișcarea acestora ori apropiindu -le, ori depărtându -le unul de altul. De cele mai multe ori
acest gest este folosit în special pentru situații de zoom in, zoom out.

Figura 1.2.2.5. Gestul de ciupire
Rotire (Rotate) – acest gest este executat prin f olosrea a două degete pentru a atinge
ecranul și rotirea lor în jurul unui punct central, care poate fi stabilit cu unul dintre degete.
Acest gest este folosit pentru a roti obiecte.

10

Figura 1.2.2.6. Gestul de rotire
Deplasare rapidă de la margine (Swipe from the edge) – În Windows 8 colțurile
ecranului și marginile acestuia au un rol important. Astfel un gest de swipe de la marginea
ecranului poate fi folosit pentru a activa un meniu important. Swipe realizat la marginea
dreaptă a ecranului va aduce în față așa numita Ch arms Bar. Swipe efectuat la marginea de jos
va aduce în față meniul contextual cu principalele comenzi ale unei aplicații.

Figura 1.2.2.7. Deplasare rapidă de la margine
1.3. Inovația hardware
Există câteva domenii cheie în care Microsoft împreună cu partenerii săi a investi t efort,
iată câteva dintre aceste domenii:
Suport pentru atingerea dispozitivului – este în mod evident centrul de interes pentru
noul sistem de operare. Compania solicită ca dispozitivele promovate să posede un touch –
display care sa suporte un minim cinc i degete simultan pe suprafața tactilă. Numeroase

11 cercetări au fost investite în: timpul de răspuns al evenimentului de atingere, precizia și
senzitivitatea cerute de un digitizor și în experiența utilizator.
Multiple opțiuni pentru utilizatori în ceea ce privește computerul dorit – se dorește ca
PC-urile să apară pe piață în forme diverse: de la tablete la ultra -portabile la PC -uri all in one.
Astfel Microsoft dorește să furnizeze dispozitive adecvate pentru fiecare stil de lucru:
dispozitive optimizate p entru task -uri specifice, dispozitive industriale, dispozitive destinate
managementului întreprinderii.
1.4. Îmbunătățirea funcționalităților
Caracteristicile mult apreciate din Windows 7 cum ar fi listele de salt (Jump Lists), bara
de activități, unealta de sn apping sunt încă prezente în Windows 8. Se pot fixa itemi în bara de
activități în Windows 8 și se pot folosi de asemenea și miniaturi (thumbnails). Experiența
desktop este aceeași cu cea din Windows 7, însă Windows 8 a fost optimizat pentru a suporta
tehnologia tactilă.
Windows 8 a optimizat funcționalitățile destinate profesioniștilor IT – noi aplicații de
sistem, instrumente, suport pentru gestionarea la distanță, suport integrat pentru lucrul cu
mașini virtuale. Alte îmbunătățiri includ: o mai bună aloc are a resurselor, compatibilitate
crescută între dispozitive, desktop inovativ și personalizabil în funcție de preferințe, funcții
Windows performante.
Căutarea de fișiere și setări: căutarea în Windows 8 include applicații, setări și fișiere.
Se pot efec tua căutări și în cadrul aplicațiilor. Drept rezultat se pot găsi aplicații, fișiere și
informații de interes maxim într -un timp scurt.

12 2. Aplicații Metro UI
2.1. Metro UI
O aplicație Metro UI (Metro User Interface) este un nou tip de aplicație care rulează pe
dispozitive Windows 8: computere desktop, computere portabile, tablete. Se mai numesc și
Windows Store Apps datorită faptului că pot fi achiziționate prin intermediul Windows Store,
o platformă de distribuție digitală întâlnită în Windows 8 și Windows RT (o v ariantă a
sistemului de operare Windows 8 destinată dispozitivelor mobile).
Windows 8 adoptă convenții noi care au în vedere faptul că aplicațiile software și
dispozitivele aparțin de lumea digitală. Spre exemplu o iconiță nu trebuie neapărat să arate
perfect ca în realitate, ci imaginea poate fi simplificată păstrându -și scopul original.
Aplicațiile software nu trebuie să copieze perfect realitatea înconjurătoare în cadrul
universului digital. Autenticitatea și simplitatea pot oferi ajutor utilizatorilor ca să înțeleagă
detaliile unei aplicații software mult mai repede. Acest fapt este foarte important în stilul de
design infografic.
Aplicațiile au în general două scopuri: să producă și să consume informație. În acest caz
informația trebuie să devină centr ul atenției, iar restul elementelor care nu ajută la producerea
și consumul de informație pot fi aduse în plan secundar. Astfel centrul cade pe conținut și nu
pe bordura, cadrul aplicației. Dacă utilizatorul folosește conținutul ca resursă primară, atunci
toate ferestrele, bordurile, imaginile de fundal nu sunt atât de importante pentru acesta.
Spre deosebire de aplicațiile tradiționale întâlnite în Windows, ferestrele acestui tip de
aplicații sunt lipsite de cadru și bara de titlu pentru a oferi utilizator ului o experiență care
satisface de cele mai multe ori nevoile utilizatorului: vizualizarea pe întreg ecranul și
butoanele de acțiune mai mari pentru a ușura navigarea cu ajutorul degetelor.
Aplicațiile Windows 8 nu rulează în cadrul unei ferestre, în schi mb rulează în full –
screen pentru a oferi spațiu pentru conținut. Acestea nu prezintă nici măcar clasicul Windows
taskbar tocmai pentru a oferi cât mai mult spațiu, ceea ce în cazul dispozitivelor mobile cu
ecrane mai mici reprezintă un avantaj. În acest fe l utilizatorii se pot concentra pe deplin
asupra aplicației curente.
În ziua de azi utilizatorii sunt bombardați cu informații din diferite surse, de aceea este
de apreciat ca informațiile livrate acestora să fie personalizate după nevoie lor. Pe o tabletă o
aplicație poate să cunoască cine ești, unde te afli, în ce poziție ții dispozitivul (orizontală,
verticală), ce informații sunt de interes pentru un utilizator în acest moment. Aplicația poate

13 să fie personalizată pentru a livra conținut care este conex , personal și relevant. Dacă
dispozitivul suportă gesturi tactile, atunci este convenabil ca interacțiunea să se facă direct cu
cu respectivul conținut, ceea ce este un nou nivel de experiență utilizator care se ridică
deasupra utilizării clasicului mouse și a tastaturii.
În limbajul pentru design din Windows 8, conținutul este la loc de cinste. Astfel pentru
a-l promova cât mai bine este necesară atenție în ceea ce privește fonturile, marimea
fonturilor, culorile, spațiile, totul pentru a prezenta informaț ia într -un mod cât mai lizibil.
Microsoft oferă în mod gratuit informații asupra acestor particularități pentru a fi folosite cât
mai optim.
Un alt aspect important din punct de vedere al design -ului îl reprezintă animațiile,
deoarece animația poate îmbună tății modul înțelegere al utilizatorului. Utilizarea acestora
poate face aplicația mai intuitivă, chiar dacă utilizatorul nu ține cont de ele în mod conștient.
Se pot utiliza animații rapide și fluide pentru a semnala utilizatorului că aplicația răspunde ș i
pentru a aduce vivacitate în cadrul interfeței.
Windows 8 furnizează un set de principii de design pe care Microsoft le consideră drept
utile în provocările ce țin de folosirea eficientă și corectă a aplicației. Acesta nu este un set de
așteptări riguroa se pe care trebuie o aplicație să le îndeplinească pentru a putea rula pe
Windows 8, însă sunt recomandate. Cea mai mare temere a dezvoltatorilor este ideea că o
aplicație nu va putea fi personalizată cu emblema creatorului sau clientului, însă acest lucru
este posibil chiar dacă se urmăresc principiile de design propuse de Microsoft.

Figura 2.1.1.1. Interfața personalizată a unei aplicații Metro UI
O aplicație Windows 8 Metro UI suportă diverse moduri de a expune structura interfeței
pentru a se preta schimbărilor de r ezoluții și schimbărilor de orientare de la orizontal la
vertical.

14 Aceste aplicații pot de asemenea să accepte diverse surse de input cum ar fi mouse -ul,
tastatura sau chiar atingerea, fie prin intermediul degetelor, fie prin intermediul creionului
tactil.
O altă caracteristică o reprezintă faptul că aplicațiile Metro pot comunica între ele,
putând partaja conținut în comun.
Aplicațiile Metro pot fi dezvoltate în limbaje ca: Javascript, VB.NET, C#, C++.
În mod uzual aplicațiile prezintă un Bar App, o bară d e unelte care se poate activa
glisând pe suprafața ecranului. În această bară de unelte se pot adăuga diverse controale și
butoane de comandă care permit utilizatorilor un control sporit al aplicației. Alte unelte din
așa numita bară – Bar Charms apar impl icit în partea dreaptă a ecranului în momentul
poziționării cursorului în partea dreaptă a ecranului.

Figura 2.1.1.2. Charms bar
Bara de activități apare din marginea de jos a ecranului pentru a prezenta mai multe
opțiuni utilizatorului. Ambele sunt extensibile ceea ce înseamnă că pot fi adăugate noi opțiuni
specifice aplicației dezvoltate. Bara de activități ar trebui să conțină informații contextuale iar
Charms bar include setări pentru aplicații.

Figura 2.1.1.3. Bara de activități

15 2.2. Structura unei aplicații Metro UI
Aplicațiile ce ab ordează stilul Metro în Windows 8 reprezintă software din cadrul noii
generații în sensul că obiectiul acestora este să ruleze atât pe laptop -uri și computere desktop,
cât și pe tabletele cel mai recent lansate. Tabletele suportă gesturi tactile și deseori se vând
fără mouse și tastatură. Windows 8 este pregătit pentru a rula pe acest gen de tablete având și
o tastatură virtuală în cazul în care utilizatorul trebuie să introducă text folosind doar ecranul
tactil. Mai mult decât atât Microsoft recomandă desi gnul unei aplicații care să poată fi
controlată prin intermediul gesturilor tactile.
Din nefericire gesturile tactile prezintă două probleme.
Utilizatorii nu vor putea lucra cu degetele la fel de precis cum ar putea lucra cu un
mouse. De aceea obiectele de pe ecran trebuie să fie mai mari.
O doua problemă se referă la faptul că gesturile tactile nu sunt ușor de implementat.
Acest tip de input funcționează mult mai bine dacă gesturile sunt folosite constant în întregul
sistem de operare. Astfel utilizatoril or le va fi mai ușor să le învețe pentru a le reproduce mai
apoi.
Microsoft a dezvoltat un sistem de navigare pentru aplicațiile Windows 8 Metro UI,
care rezolvă aceste probleme.
Unitatea principală de navigare în aplicațiile Windows 8 este pagina. Numele provine
din dezvoltarea web, deoarece paginile aplicațiilor Windows 8 funcționează asemănător cu
paginile web. Utilizatorii lucrează cu câte o pagină o dată, iar navigarea se referă la trecerea
de la o pagină la alta. În cazul ideal nici o fereastră sau po p-up nu trebuie să apară pentru a nu
distruge această consecvență și a nu complica interfața.
Paginile se pot organiza într -un sistem uniform sau într -un sistem ierarhic.
Într-un sistem uniform, toate paginile se află la același nivel ierarhic. Această
caracteristică este utilă aplicațiilor care conțin doar un număr mic de pagini, iar utilizatorul
trebuie să poată să comute între tab -urile aplicației. Jocurile, browserele sau aplicațiile care au
ca scop manipularea de documente, cad deseori în această cate gorie. În aplicațiile acestea
utilizatorul comută între pagini folosind o bară de navigare aflată în partea de sus a ecranului.
În aplicațiile Metro style paginile pot fi reprezentate de cele mai multe ori utilizând așa –
numitele miniaturi ( thumbnails ) .
Sistemul ierarhic este mai familiar deoarece folosește aceleași principiu pe baza căruia
sunt structurate paginile site -urilor web. Această structură este utilă pentru aplicațiile care au
un număr mare de pagini care pot fi grupate în mai multe secțiuni. Baz a acestei ierarhii este
pagina centrală ( hub page ) care este punctul de intrare al aplicației. În pagina centrală
utilizatorii pot vedea principalele elemente disponibile în secțiunile unei aplicații. Din acest
motiv pagina centrală trebuie să fie cât mai atractivă pentru a captiva și atrage utilizatorii în
secțiunile următoare.
Secțiunile reprezintă al doilea nivel al aplicației și conțin de cele mai multe ori liste ce
pot fi grupate, filtrate, sortate. Din aceste listele utilizatorii pot selecta un elemen t și astfel
ajung să navigheze în cel de -al treilea nivel al ierarhiei aplicației și anume pagina de detaliu.
Paginile de detalii pot conține toate informațiile despre obiectul selecționat, modul de
dispunere al informației variind în funcție de tipul de c onținut.
Utilizatorii pot naviga mai adânc în cadrul ierarhiei prin selectarea elementelor de pe
ecran sau pot să revină utilizând butonul înapoi (back).

16 3. Dezvoltarea unei aplicații Windows 8 Metro UI
Windows 8 permite dezvoltarea unui nou tip de aplicații, aplicații Windows 8 Metro UI,
alături de aplicații tradiționale Windows. Mai mult decât atât, încă există posibilitatea
utilizării tehnologiei și uneltelor preferate pentru a dezvolta aplicații Metro Style.
3.1. Arhitectura Windows 8
Arhitecții Windows 8 au lu at o decizie importantă atunci când au creat un nou model
pentru ierarhia claselor, clase ce vor ajuta la implementarea acestui tip nou de aplicații. În
consecință în Windows 8 există două tipuri fundamentale de tehnologii care pot fi folosite
laolaltă, un a pentru aplicații Windows 8 Metro Style și una pentru aplicații desktop obișnuite.

Figura 3.1.1.1. Arhitectura Windows 8
Pentru a putea dezvolta aplicații de nouă -generație este necesară adoptarea noilor
cerințe și standarde care implică experiența utilizator, inovați a, creativitatea și timpul de
răspuns al aplicației. Acestea trebuie să se ridice la nivelul așteptărilor utilizatorilor care sunt

17 în continuă creștere. Pentru ca un produs să fie competitiv, acesta trebuie să furnizeze o
experiență utilizator extrem de sa tisfăcătoare prin design, conținut, reprezentarea informației
și nu în ultimul rând utilizare.
Aceste cerințe au schimbat nevoia de unelte și tehnologii: până nu demult cel mai
populară tehnologie UI dezvoltată de Microsoft era Windows Forms, însă deși est e o
tehnologie eficientă și ușor de folosit are un dezavantaj major: un model rigid al reprezentării
controalelor, mai precis, pentru a schimba reprezentarea vizuală a unui control este necesar un
efort substanțial.
3.2. Ciclul de viață al unei aplicații Window s 8
În orice versiune anterioară a Windows -ului, sau chiar în modul desktop din Windows
8, utilizatorii pot rula mai multe aplicații simultan, acestea afișând informații în fereastra lor
corespunzătoare. În acest mod, fiecare aplicație care rulează consumă resurse, deși probabil
utilizatorul se concentrează doar asupra unei singure aplicații la un moment dat.
Cu aplicațiile Windows 8 Metro Style, va exista întotdeauna o aplicație în prim -plan
care va deține control asupra ecranului și a interacțiunilor cu u tilizatorul, celelalte aplicații
fiind ascunse. Sistemul de operare Windows 8 face managementul resurselor utilizând o
politică simplă. Aplicația din prim -plan primește acces la resurse pentru a oferi cea mai bună
experiență utilizator, în timp ce aplicați ile din fundal (care sunt momentan invizibile pentru
utilizator) sunt oprite și stocate în memorie și nu primesc alte resurse decât spațiul de
memorie alocat pentru a le salva momentan. În momentul în care un utilizator comută între
aplicații și dispune o altă aplicație în prim -plan, această aplicație primește resursele, iar
anterioara este stocată în memorie și nu mai primește acces la resurse.
Când o aplicație se mută în fundal, Windows 8 nu o va suspenda imediat, sistemul de
operare va aștepta aproximati v cinci secunde, tocmai pentru a da un timp de gândire
utilizatorului în caz că dorește să revină la aceeași aplicație.
Aplicațiile Windows 8 pot să apară într -una din următoarele stări: not running, running,
suspended, terminated. Stările not running și terminated se referă conceptual la același lucru:
aplicația fie nu a fost pornită, fie a fost oprită din diferite motive.

18

Figura 3.2.1.1. Stările unei aplicații
Din punct de vedere al dezvoltării unei aplicații, modelul ciclului de viață al unei
aplicații Windows 8 Metr o UI prezintă câteva probleme. Spre exemplu, dacă o aplicație
trebuie să prezinte informații ce sunt reactulizate din minut în minut, atunci în momentul
plasării aplicației în fundal, aceasta nu va mai avea access la resurse și va renunța să
actualizeze da tele. În momentul în care un utilizator va readuce aplicația în prim plan, aceasta
va prezenta informațiile anterioare, iar userul va trebui să aștepte cel puțin un minut pentru ca
aplicația să reactualizeze informațiile.
Această situație poate fi tratată cu ajutorul evenimentelor care au loc atunci când
sistemul de operare primește o notificare din partea unei aplicații care își schimbă starea.
Principalele evenimente sunt:
OnLaunched – Acest eveniment are loc atunci când aplicația a fost pornită fie de că tre
utilizator, fie de către o altă aplicație. Argumentul primit de metoda evenimentului este de tip
LaunchActivatedEventArgs . Un element important al acestui argument este propriatatea Kind
(Tip) care se poate folosi pentru a afla modul în care aplicația a fost pornită. O altă proprietate
importantă este proprietatea PreviousExecutionState care va informa asupra stării anterioare a
aplicației înainte ca aceasta să fie activată. Valorile pe care acesta le poate transmite sunt fie
Terminated , în cazul în car e aplicația a fost oprită de către sistem, fie ClosedByUser , în cazul
în care aplicația a fost închisă de către utilizator.
Suspending – are loc atunci când sistemul suspendă aplicația deoarece utilizatorul a
selectat o altă aplicație. Metoda evenimentului primește un argument de tip
SuspendingEventArgs . Cu ajutorul acestui argument se poate salva starea aplicației pentru a
putea fi mai apoi repornită în cazul în care are loc o eroare și aplicația este oprită de sistem.
Resuming – are loc atunci când utiliz atorul comută înapoi către o aplicație care a fost
suspendată anterior. Cu ajutorul argumentului acestei metode se pot se pot reaccesa resursele
eliberate în cadrul evenimetului Suspended.
NoEvent – în cazul în care aplicația trebuie să treacă în starea de terminated, nu se va
declanșa nici un eveniment. Acesta se poate întâmpla când sistemul necesită resurse și decide
să oprească aplicația. Motivul pentru care aplicația nu are nevoie un eveniment pentru acest
caz este faptul că nu există un răspuns pentru acțiunea de terminare a aplicației.

19 În momentul comutării la o altă aplicație, Windows 8 nu suspendă aplicația imediat, ci
păstrează aplicația în aceeași stare câteva secunde în cazul în care utilizatorul se răzgândește
și se reîntoarce la aceeași aplicați e. După câteva secunde, dacă aplicația rămâne în fundal
atunci sistemul de operare o suspendă și obiectul aplicației primește evenimentul de
suspendare ( Suspending event ).
În cadrul unei metode pentru un eveniment, se poate salva starea aplicației și infor mații
referitoare la aplicație. Mai mult decât atât, dacă s -au efectuat anumite operații de lock pe
anumite resurse (spre exemplu blocarea accesului la un fișier atâta timp cât aplicația este
pornită și scrie în fișier) în aceste metode se poate elibera ac cesul la resurse. Tot aici se pot
realiza operații de reducere a utilizării memoriei (spre exemplu se pot copia pe hard -disk
informațiile mai puțin prioritare, ce ocupă mult loc în memorie).
În momentul comutării înapoi la o aplicație suspendată anterior, sistemul de operare
aduce aplicația în prim -plan iar aplicația va primi notificarea corespunzătoare evenimentului
de Resume. Acesta este momentul când se poate restaura accesul la resurse și informațiile
anterior salvate, necesare pentru a putea continua o perarea normală cu aplicația.
În momentul reluării aplicației din starea sa suspemdată, sistemul de operare nu va
impune limitări de timp în ceea ce privește restaurarea datelor proprii aplicației și interfeței
utilizator.
Windows 8 permite salvarea stării unei aplicații în momentul închiderii acesteia.
Procesul de închidere al aplicației implică suspendarea aplicației (o notificare este primită din
partea evenimentului Suspend ), iar după revenirea din metoda evenimentului Suspend, sau
scurgerea cele cinci secunde pe care sistemul de operare le alocă procesului – timp în care se
pot salva informațiile proprii aplicației, sistemul de operare poate mai apoi să închidă procesul
aplicației.
3.3. Limbajul XAML
Proiectarea unei interfețe utilizator inovatoare este una dintre cerințele imperioase
pentru o aplicație de nouă generație. Microsoft a sesizat acest fapt și a oferit o nouă soluție din
acest punct de vedere: o dată cu lansarea .NET Framework 3.0, a lansat o nouă tehnologie
numită Windows Presentation Foundation (WPF). WPF introduce câteva inovații notabile:
Model nou pentru controale – WPF împarte controalele în două categorii: controale cu
un singur subcontrol și controale cu mai multe subcontroale. Spre exemplu, un buton poate
avea în componența sa un control d e tip imagine și un control de tip text, iar acest control de
tip text poate avea la rândul său alte controale, spre exemplu un scrollbar.
UI Declarativ – WPF include o nouă modalitate de a construi interfața utilizator, oferind
posibilitatea de a crea o i nterfața fără a scrie cod (C#,VisualBasic, C++) ci se poate folosi un
nou limbaj numit eXtensible Application Markup Language (XAML).
Extensible Markup Language (XAML) este un limbaj de marcare bazat pe XML, fiind
dezvoltat de Microsoft. XAML simplifică cr earea elementelor ce țin de interfața utilizator în
cadrul aplicațiilor .NET. Astfel se pot crea elemente vizuale prin metoda declarativă de
marcare în fișierele XAML, iar apoi se poate separa definiția interfeței utilizator de logica
execuției utilizând u tilizând cod C# în fișierele specifice .cs. Acestea din urmă sunt legate de
codul de marcare prin intermediul claselor parțiale.

20 XAML permite instanțierea unor obiecte în mod direct într -un set specific de tipuri
suport, definite în cadrul assembliurilor. Aceasta diferențiaza XAML de celelalte tipuri de
limbaje de marcare, care sunt de obicei limbaje interpretate fără o legatură directă cu un
sistem suport. XAML permite un flux de lucru unde grupuri diferite pot lucra fie la partea de
user-interface fie la logica aplicației folosind unelte diverse.
Când sunt reprezentate prin intermediul fișierelor de tip text, fișierele XAML sunt de
fapt fișiere XML care au în general extensia .xaml. Aceste fișiere pot fi conține orice tip de
codificare XML dintre care UTF -8 este tipul de codificare cel mai des întâlnit.
XAML implică folosirea unor noi concepte care aduc îmbunătățiri considerabile:
Grafică vectorială – acest tip de grafică utilizează concepte matematice pe bază de
distanțe pentru a reprezenta conținutul, sp re deosebire de grafica raster care va reda conținutul
operând direct asupra pixelilor. WPF încorporează grafica vectorială în cadrul interfeței
utilizator, astfel conținutul format din text, imagini, reprezentarea controalelor, va rămâne
calitativă din pu nct de vedere vizual, chiar dacă se fac operații de scalare sau dacă se schimbă
rezoluția ecranului.
Stiluri și modele – noile controale sunt construite pornind de la forme geometrice
primitive. Acestea compun ierarhia din punct de vedere grafic a controal elor și fac posibilă
modificarea acestora prin intermediul stilurilor și modelelor păstrând în totalitate
funcționalitatea specifică a unui control.
Aceste noi concepte au devenit în scurt timp adoptate în tot mai multe produse
dezvoltate de Microsoft: XAM L se poate folosi pentru a implementa aplicații WPF,
Silverlight, Windows Phone, etc.
În cazul dezvoltării de aplicații Windows 8 Metro style, există două tehnologii care se
pot folosi pentru a construi designul aplicației, fie HTML5 și JavaScript, fie XAM L.
Un fișier XAML nu este decât un document XML, însă elementele din acesta sunt
interpretate de un analizor special care procesează datele și creează instanțe în consecință.
Sintaxa nu este deloc complicată provenind din specificația XML. Următoarea secve nță
de cod ilustrează modul de a crea o instanță a unui buton, utilizând sintaxă XAML:
Cod XAML
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="Imagini/Logo.png" Width="20" Height="20"/>
<TextBlock Text="Buton Logo"></TextBlock>
</StackPanel>
</Button>
3.4. Crearea unei aplicații
Windows 8 introduce un nou tip de aplicație, Windows App Metro UI. Aceste aplicații
au un aspect cu totul nou și o funcționalitate asemenea, rulează pe o varietate de dispozitive și
se pot distribui prin intermediul Windows Store.
Aplicațiile Windows 8 Metro UI pot fi implementate utilizând mai multe tehnologii,
astfel pentru progrmatorii familiarizați cu dezvoltarea aplicțiilor Web se poate alege HTML5,

21 Cascading Style Sheets (CSS3) și JavaScript, dacă în schimb se p referă implementarea pe
platforma .NET și există o oarecare afinitate cu tehnologii cum ar fi Windows Presentation
Foundation, sau aplicații Microsoft Silverlight, se poate dezvolta o aplicație folosind XAML
și unul dintre limbajele .NET: C++, C# sau Visua lBasic. Dacă în schimb se dorește o aplicație
care se bazează în special pe experiență grafică, sau se dorește implementarea unui joc se
poate folosi DirectX și C++.
Pentru a crea o aplicație Windows 8 Metro UI cu ajutorul C# și XAML trebuie mai întâi
ca aplicația de dezvoltare de software, Visual Studio 2012 for Windows 8 (VS2012), să fie
instalată pe mașina de lucru. Această aplicație de dezvoltare va rula numai pe sistemele de
operare Windows 8.
Uneltele necesare pentru dezvoltarea de aplicații sunt: sis temul de operare Windows 8 și
Visual Studio 2012 (se poate folosi cu succes versiunea Visual Studio Express 2012 pentru
Windows 8, ce include Windows 8 SDK – Software Development Kit, Blend for Visual
Studio și modele de proiect). Visual Studio este unealt a care include tot ceea ce este necesar
pentru a dezvolta, depana și distribui o aplicație Windows 8.
Pentru a începe dezvoltarea unei aplicații este necesară obținearea unei licențe de
dezvoltator. Aceasta poate fi obținută prin intermediul Visual Studio sau prin command
prompt și necesită o conexiune activă la Internet. Acestă operație a fost impusă de Microsoft
pentru a preveni distribuirea aplicațiilor în afara Windows Store și pentru a descuraja
tentativele de piraterie.
Mediul de programare Visual Stu dio dispune de o serie de modele care pot fi alese în
dezvoltarea unei aplicații. Acest model se va selecta din meniul File opțiunea New Project.
Dezvoltarea unei aplicații pornește prin alegerea unui template potrivit cerințelor. În
momentul alegerii temp late-ului aplicației, Visual Studio va înfățișa codul implicit pentru
șablonul ales. Dacă Visual Studio a fost instalat corect acest cod ar trebui să fie perfect
funcționabil, putând fi compilat cu succes.
După selectarea opțiunii New Project va apărea o f ereastră cu toate tipurile de proiect ce
se pot crea dispuse pe categorii în funcție de disponibilitatea lor, fie instalate local, fie online,
ordonate după limbajul de programare. Astfel din categoria Installed se alege subcategoria
Templates , Visual C# și subcategoria Windows Store . Se va selecta mai apoi tipul de aplicație
dorit: Blank App , Grid App , Split App , Windows Runtime Component , Class Library , Unit
Test Library . Pentru a finaliza se va apăsa OK. Astfel Visual Studio va crea un proiect cu
structu ra prestabilită și va deschide fișierul App.xaml.cs în editorul VS2012.
Pentru a porni aplicația se va putea selecta din meniu Debug opțiunea Start Without
Debugging. Visual Studio va compila și va porni aplicația.
Fiecare tip de proiect este destinat unu i anumit scop așa cum se poate sesiza din
secțiunile următoare:
Blank App – un model Windows Store App care oferă doar structura de bază necesară
pentru a rula o aplicație. În momentul rulării aplicației va apărea o fereastră cu un label simplu
“Conținutul se poate insera aici” (“Content goes here”).
Grid App – reprezintă interfața cu ajutorul unui grid, grupând conținutul în anumite
sectoare, câmpuri. Accesarea sectoarelor poate înfățișa informații adiționale. Acest tip de
aplicație poate fi folosit atunci când este necesară prezentarea unei colecții de informații, iar
prin utilizarea gestului de apăsare (sau click stânga) utilizatorul poate vizualiza informații
adiționale despre un item din colecție, având posibilitatea de a naviga fie între elemente, fie
înapoi la pagina de start.

22 Split App – oferă o alternativă la aplicațiile bazate pe grid, având un view divizat în
două elemente: o parte de conținut structurată sub forma unui grid și o parte de conținut ce
conține partea de detaliu. Astfel aplicația va reprezenta grupuri de date împreună cu detaliile
elementelor selectate în aceeași fereastră.
Windows Runtime Component – este de asemenea o bibliotecă ce poate exporta tipuri
WinRT. Acesta înseamnă că acest proiect va produce un fișier metadata (.WINMD) c are
poate fi utilizat de proiecte de aplicații Windows Store în orice limbaj suportat (C++, C#,
JavaScript)
Class Library – este folosită pentru a crea biblioteci de clase, interfețe etc, care pot fi
mai apoi folosite în cadrul unei aplicații Windows Store fără a mai fi necesară rescrierea
codului sursă. De menționat este faptul că un proiect de acest tip nu creează un fișier
metadata, drept rezultat nu poate fi folosit cu alte limbaje decât cu cel selectat inițial din
subcategoria limbajelor.
Unit Test Lib rary – după cum sugerează și numele acest tip de proiect este util în unit
testing.
În cazul Grid App, potrivit scestui template, Visual Studio generează o structură care
conține tot ce poate avea nevoie un utilizator pentr a crea o aplicație Metro style î n Windows
8. Se poate accesa fereastra Solution Windows Explorer unde se pot găsi fișierele aplicației.
Aceste fișiere generate conțin cod care implementează navigarea între pagini.
GroupItemPage.xaml – reprezintă pagina de start a aplicației
GroupDetailPa ge.xaml –pagina înfățișează toti itemii dintr -un grup. Acest grup ce poate
fi ales din pagina de start
ItemDetailPage.xaml – va conține informații despre un item. Un item poate fi ales din
GroupDetailPage
SampleDataSource.cs – conține clase pentru itemi, g rupuri și colecții de grupuri care
sunt utile în popularea cu date a interfețelor utilizator. Data binding este utilizat cu
preponderență în acest tip de template, iar clasele din acest fișier sunt clasele cu care se
realizează legătura dintre proprietățil e elementelor din UI și informații.
Aplicația Travel Destinations utilizează acest template pentru a înfățișa informații
despre destinații de călătorie.
3.4.1. Orientarea dispozitivului
Windows 8 este proiectat să ruleze pe o varietate de dispozitive, inclusiv t ablete și alte
dispozitive care, cu ajutorul unor senzori pot notifica asupra modificării modului de orientare:
mod peisaj sau mod portret. O pagină care arată foarte bine în modul peisaj ar putea avea
nevoie de anumite ajustări pentru a arăta la fel de bi ne și în modul portret și vice -versa. Astfel
fiecare pagină a aplicației trebuie examinată în ambele moduri ( view-states ).
În aplicația Travel Destinations este necesar astfel de suport pentru paginile
GroupDetailPage.xaml și ItemDetailPage.xaml. Acestea a fișează conținutul în mod implicitîn
modul peisaj.
Elemente din pagina GroupDetailPage.xaml sunt redate prin intermediul unui
GridView. Acesta poate fi înlocuit cu un alt obiect care să urmărească dimensiunea
dispozitivului în modul portret. Acestă operați e se va realiza adăugănd un ListView cu
proprietățile corespunzătoare redării modului. În momentul recepționării notificării de

23 schimbare a modului de redare din mod peisaj în mod portret, se va ascunde GridView -ul
curent și va fi vizibil ListView -ul ce su portă redarea în mod portret.
Cod XAML
<ListView
x:Name="portraitListView"
AutomationProperties.AutomationId="ItemListView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Grid.Row="1"
Visibility="Collapsed"
Padding="86,0,20,60"
ItemsSource ="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Standard500x130ItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">

<ListView.Header>
<StackPanel>
<Image Source="{Bindin g Image}" Margin="20, –
10,18,0" MaxWidth="480" Stretch="UniformToFill"
HorizontalAlignment="Left"/>
<TextBlock Margin="20,20,18,30" Text="{Binding
Description}" Style="{StaticResource BodyTextStyle}"/>
</StackPanel>
</ListView.Header>
</ListView>
Partea de cod care detectează modificarea de view -state a ecranului se găsește în clasa
LayoutAwarePage, pagina din care moștenesc toate paginile aplicației. Acestă clasă
înregistrează un handler pentru eveniment de tip SizeChanged a ferestrei principale și
folosește clasa VisualStateManager pentru a conduce schimbările de la un mod vizual la
celălalt.
Cod XAML
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjec tKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitListView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnima tionUsingKeyFrames >
Animațiile adăugate ascund GridView -ul și afișează ListView -ul atunci când view state
se schimbă în FullScreenPortrait .

24

Figura 3.4.1.1. Detalii obiectiv turistic – mod peisaj
Aceleași operații se vor întreprinde și pentru pagina ItemDetailPage.xaml însă de data
acesta se poate folosi controlul numit FlipView pentru a reda în mod corect conținutul și în
modul portret. Același tip de animație din exemplul aterior poate fi folosit și aici pentru a
implementa operația de ascundere.

Figura 3.4.1.2. Detalii obiectiv tu ristic – mod portret

25 3.4.2. Operația de snapping
Operația de snapping permite utilizatorilor de aplicații Windows 8 să ruleze două
aplicații simultan, fiind alăturate prin împărțirea ecranului pe orizontală. Pe un ecran ce
suportă gesturi tactile această operație se poate simula prin glisarea degetului încet pe ecran,
începând de la marginea din stânga și prin oprirea momentană până ce apare o bară verticală
ce acționează ca delimitator între cele două aplicații. Aceeași operație se poate realiza apăsând
tastele W indows logo + tasta „.”. Pentru a putea utiliza această caracteristică în Windows 8,
ecranul dispozitivului trebuie să aibe o rezoluție decel puțin 1366 x 768 pixeli.
Grid Template oferă în mod implicit un layout pentru operația de snapping care poate fi
customizat conform cerințelor. Astfel în aplicația Travel Destinations pagina
ItemDetailPage.xaml poate fi modificată pentru a afișa detalii în ceea ce privește obiectivele
turistice prin adăugarea unui nou FlipView destinat vizualizării în modul snapped.
Cod XAML
<FlipView
x:Name="snappedFlipView"
AutomationProperties.AutomationId="ItemsFlipView"
AutomationProperties.Name="Item Details"
Grid.Row="1"
Margin="0, -3,0,0"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
Visibility="Collapse d">
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates"
Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer"
Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">
<!– Vertical StackPanel for item -detail layout –>
<StackPanel Orientation="Vertical"
Margin="20,0,20,0">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20"
FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
<Image x:Name="image" W idth="260"
Margin="0,12,0,40" Stretch="Uniform" Source="{Binding Image}"
HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20"
FontWeight="Light" Text="Sights" Margin="0,0,0,16"/>
<TextBlock FontSize="16"
FontWeight="Light" TextWrapping="Wrap" Text="{Binding Ingredients,
Converter={StaticResource ListConverter}}" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemp late>
</FlipView>
Pentru a dispune datele în acest fel doar în modul Snapped este necesară adăugarea unor
elementului care va ascunde, respectiv va afișa FlipView -ul nou adăugat, prin intermediul
unei aplicații.

26 Cod XAML
<ObjectAnimationUsingKeyFrames Stor yboard.TargetName="flipView"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedFlipView"
Storyboard.TargetProperty= "Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
În imaginea de mai jos se poate observa pagina ItemDetailPage în modul Snapped.

Figura 3.4.2.1. Detalii obiectiv turistic – Modul Snapped
3.4.3. Semantic Zoom
Numeroase apli cații ce rulează pe ecrane ce permit gesturi tactile au funcționalitatea de
zoom in, respectiv zoom out prin intermediul gestului de pinch. Există două tipuri de zoom:
zoom optic și zoom semantic. Funcționalitatea generată de zoom -ul optic implică
implemen tarea unei operații de scalare a conținutului aflat pe ecran, în schimb zoom -ul
semantic va grupa conținutul pentru a oferi o altă perspectivă asupra conținutului, un alt punct
de vedere, semantic. Pentru a include zoom semantic într -o aplicație Windows 8 este necesară
utilizarea controlului SemanticZoom. Ideea de bază din spatele acestui control este că se va
putea opera cu două tipuri de vizualizare: una pentru zoom -in și una pentru zoom -out.
Trecerea de la o vizualizare la cealaltă se va face prin interm ediul unor animații și evenimente
fie prin intermediul gestului de pinch (în cazul unui ecran cu suport tactil), fie prin
intermediul tastelor CTRL și „+”, respectiv CTRL și „ -”.

27 În cadrul aplicației Travel Destinations funcținalitatea de semantic zoom a f ost adăugată
pentru pagina de start a aplicației. În cadrul paginii GroupedItemsPage.xaml gridul
itemGridView poate fi modificat la fel ca și în exemplul de cod de mai jos:
Cod XAML
<SemanticZoom Grid.Row="1">
<SemanticZoom.ZoomedInView>
<!– Horizontal scrolling grid used in most view states –>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Margin="0, -3,0,0"
Padding="116,0,40,46"
ItemsSource="{Binding Source={StaticResource
groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">

<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPane l>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical "
Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutVie w>
<GridView x:Name="groupGridView" Margin="116,0,40,46">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,24,0">
<Image Source="{Binding Group.GroupImage}"
Width="250" Height="500" Stretch="UniformToFill" />
<TextBlock Text="{Binding Group.Title}"
Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
Style="{StaticResource TitleTextStyle}" FontSize="28" Margin="12"/>

28 <TextBlock Text="{Binding Group.RecipesCount}"
Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"
Style="{StaticResource TitleTextStyle}" FontSize="96" Margin="12,64,12,12"
HorizontalAlignment="Right"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Astfel a fost adăugat un control de tip SemanticZoom care include două elemente de tip
GridView: unul are scopu l de a afișa elementele pentru vizualizarea de tip zoom -in (care
contituie pagina de start inițială) și unul pentru vizualizarea de tip zoom -out.

Figura 3.4.3.1. Semantic Zoom Out
3.4.4. Funcționalitatea de căutare
Windows 8 prezintă un mod comun de a permite căutarea în toa te aplicațiile prezente în
sistemul de operare. Aceasta se realizează prin intermediul Charms bar – o bară de unelte care
poate fi vizualizată fie prin intermediul unui gest de deplasare rapidă de la marginea dreaptă a
ecranului fie prin apăsarea tastelor Windows logo și tasta „C”.
Pentru a implementa funcționalitatea de căutare trebuie mai întâi adăugat un nou item în
cadrul proiectului și anume o pagină Search Contract. În cadrul codului C# se poate adăuga o
metodă pentru a putea naviga către pagina de tr avels atunci când un item este selectat în
pagina de căutare nou adăugată.
Cod C#
private void OnItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the page showing the recipe that was clicked

29 this.Frame.Navigate(typeof(ItemDetailPage),
((RecipeDataItem)e.ClickedItem).UniqueId);
}
Metoda LoadState() trebuie modificată pentru a implementa căutarea în
cadrul titlurilor și descrierilor așa cum se poate vedea în codul de mai
jos:
protected override void LoadState(Object navigationParameter,
Dictionary<String, Object> pageState)
{
var queryText = navigationParameter as String;
var filterList = new List<Filter>();
filterList.Add(new Filter("All", 0, true));

// Search travels and tabulate results
var groups = TravelDataSource.GetGroups("A llGroups");
string query = queryText.ToLower();
var all = new List<TravelDataItem>();
_results.Add("All", all);

foreach (var group in groups)
{
var items = new List<TravelDataItem>();
_results.Add(group.Title, items);
foreach (var item in group.Items)
{
if (item.Title.ToLower().Contains(query) ||
item.Descrptions.ToLower().Contains(query))
{
all.Add(item);
items.Add(item);
}
}
filterList.Add(new Filter(group.Title, items.Count, false));
}
filterList[0]. Count = all.Count;
// Communicate results through the view model
this.DefaultViewModel["QueryText"] = ' \u201c' + queryText +
'\u201d';
this.DefaultViewModel["Filters"] = filterList;
this.DefaultViewModel["ShowFilters"] = filterList.Count > 1;
}
3.5. Dezvoltarea sincronă și asincronă
O practică bine cunoscută în programare, care poate rezolva atât problemele care țin de
timpul de reacție al interfeței utilizator cât și problema de adaptare a serverului, este aceea a
utilizării în software a mai multe fir e de execuție pentru ca acesta să poată fi capabil să
opereze asupra mai multor lucruri simultan.
Acest design este folosit în numeroase aplicații. Spre exemplu un utilizator poate naviga
pe Internet, asculta muzică și copia fișiere în același timp. Pentru a realiza acest lucru sistemul
de operare comută încontinuu între aplicațiile care rulează și le dă fiecăruia un timp mic de
execuție pentru a crea iluzia că acestea rulează simultan. Ceea ce se întâmplă în fundal este
faptul că sistemul de operare comută nu între aplicațiile propriu -zise, ci între unități mai mici

30 numite fire de execuție ( threads ). Un fir de execuție este cea mai mică unitate de procesare
care poate fi planificată de către sistemul de operare. Fiecare aplicație poate crea fire de
execuție multiple și poate să execute cu acestea diverse sarcini ( taskuri ), iar sistemul de
operare le va utiliza în consecință. Acest concept este denumit multithreading .
Aplicațiile care implementează conceptul de multithreading sunt de obicei mult mai
ușor de u tilizat și mai prietenoase decât aplicațiile clasice care execută toate sarcinile pe
același fir de execuție. Cu toate acestea, implementarea aplicațiilor multithread nu este o
sarcină ușoară și de multe ori dezvoltatorii evită folosirea programării în ace st mod deoarece
execuția concurentă mărește complexitatea aplicației, iar codul sursă devine mai greu de
înțeles și mai greu de întreținut.
3.5.1. Modelul sincron
Tipul de programare care implică o serie de pași care sunt executați unul după altul se
numește pro gramare sincronă. Majoritatea dezvoltatorilor preferă să scrie cod sincron.

Figura 3.5.1.1. Modelul sincron
Toate programele conțin taskuri, adică unități de lucru mai mari sau mai mici care
trebuie să fie finalizate.
Problemele apar atunci când finalizarea unui task du rează prea mult, deoarece mașina
de calcul are de executat o operație computațională intensivă, consumatoare de timp. În mod
implicit sistemul de operare alocă un singur fir de execuție fiecărui proces, iar acel fir de
execuție va fi ocupat așteptând rezul tatul operației care durează și nu va fi capabil să răspundă
niciunui eveniment ce provine din interfața utilizator. În acest caz firul de execuție este blocat.
Userul va avea sesiza că aplicația este blocată, iar acest fapt constituie în sine o experiență
utilizator săracă, neprietenoasă.
3.5.2. Modelul multithread
În lumea aplicațiilor acționate la atingere și a telefoanelor inteligente de azi, utilizatorii
sunt dornici de o experiență de utilizare cât mai calitativă, iar așteptările vizează ca aplicațiile
să răspundă întotdeauna la input, independent de alte elemente, cum ar fi rețeaua, hard -disk-ul
sau procesorul. Pentru a ajunge la acest ideal un dezvoltator trebuie să evite firele de execuție
blocante. O soluție naturală la această problemă este trecerea de l a modelul sincron (bazat pe
un singur fir de execuție) la modelul multithread.

31

Figura 3.5.2.1. Modelul multithread
În acest tip de model fiecare task este executat pe un fir de execuție separat, iar sistemul
de operare are grijă să execute aceste thread -uri aparent simu ltan. Mai mult decât atât, există
posibilitatea mutării unui task cu un timp de excuție mai lung pe un thread de fundal, iar
pentru a răspunde evenimentelor din interfața utilizator se poate folosi un alt fir de execuție.
În momentul implementării unei apl icații multithread apar o sumedenie de elemente
care trebuie luate în considerare: trebuie verificat faptul că accesul concurent se face în
condiții de siguranță, un alt detaliu vizează transmiterea datelor între thread -uri și semnalarea
progresului în int erfața utilizator. O altă problemă ar fi anularea execuției unui proces de
lungă durată sau posibilitatea de propagare a unei excepții. Găsirea soluțiilor pentru aceste
probleme necesită în primul rând un dezvoltator capabil și în al doilea rând o logică d estul de
complexă.
3.5.3. Modelul asincron
Pentru a obține rezultate similare se poate folosi un model simplificat al modelului
precedent (modelul multithread) numit modelul programării asincrone. Astfel vor putea fi
rezolvate eficient multe dintre problemele rid icate anterior.

Figura 3.5.3.1. Modelul asincron
În programarea asincronă, mai multe taskuri pot fi executate pe același fir de execuție,
iar task -urile a căror procesare ar putea necesita mai mult timp sunt divizate în unități mai
mici pentru a nu bloca thread -ul princ ipal pentru prea mult timp. În comparație cu modelul
sincron, în care task -urile sunt executate secvențial ca și unități complexe, acest model
asincron aduce îmbunătățiri considerabile deoarece un task nou poate începe imediat ce un
task anterior îi cedeaz ă execuția și nu trebuie să aștepte până ce taskul anterior și -a încheiat
execuția, ci doar până i se va semnala accesul.
Din nefericire modelul asincron nu este perfect. Responsabilitatea de a diviza task -urile
în unități mai mici neblocante, îi revine pr ogramatorului. De asemenea acesta trebuie să se
asigure că unitățile eliberează firul de execuție o dată ce au terminat lucrul cu resursele.
Tratarea acestor cerințe va necesita un timp îndelungat iar codul rezultat este de cele mai
multe ori complex și gr eu de întreținut.

32 3.5.4. Evoluția programării asincrone pe platforma .NET
De la primul release al .NET Framework, platforma deținea suport încorporat pentru
programare asincronă. Pe parcursul numeroaselor versiuni ale platformei în ultimii 10 ani, au
luat naștere mai multe abordări, iar acum există mai multe paradigme care pot fi folosite
pentru a crea o logică asincronă în .NET.
Primul .NET framework folosea așa numitul Model al Programării Asincrone
(Asynchronous Programming Model – APM ). În APM, operațiile as incrone erau implementate
cu ajutorul a două metode ( BeginOperationName() și EndOperationName () ) care aveau rolul
de a începe și finaliza operația asincronă ( OperationName ).
Cod C#
private void StartDownload(string url)
{
HttpWebRequest req = (HttpWebReq uest)WebRequest.Create(url);
IAsyncResult result = req.BeginGetResponse(this.OnResponse, req);
}

private void OnResponse(IAsyncResult result)
{
HttpWebRequest req = (HttpWebRequest)result.AsyncState;
HttpWebResponse resp = (HttpWebResponse)req.EndGetRe sponse(result);
Stream str = resp.GetResponseStream();
// TODO: process the response stream here
}
Metoda BeginResponse () este utilizată pentru a porni operația de download în mod
asincron și să înregistreze operația de callback, care să fie apelată de f ramework atunci când
operația asincronă este finalizată. Metoda BeginGetResponse () returnează o instanță
IAsyncResult care poate fi folosită pentru a interoga starea curentă a operației asincrone.
Când download -ul este complet, framework -ul apelează funcți a specificată AsyncCallback cu
ajutorul căreia se poate mai apoi apela metoda EndGetResponse() pentru a obține rezultate și
a finaliza operația de download.
APM nu suportă din păcate tratarea excepțiilor, anularea unei operații și nici
monitorizarea explic ită a progresului.
Cea de -a doua versiune majoră a .NET Framework se concentrează pe evenimente și
delegați și introduce modelul asincron bazat pe evenimente ( Event -based Asynchronous
Pattern – EAP ). Avantajul EAP constă în faptul că pentru a executa opera ția asincronă
(OperationName) este implementată o singură metodă (OperationNameAsync() ). Însă înainte
de apelul acestei metode trebuie mai întâi înregistrată metoda de callback (metoda care se
apelează atunci când operația s -a finalizat).
Următoarea secve nță de cod ilustrează modul de utilizare a clasei WebClient care
folosește modelul EAP pentru a downloada un string.
Cod C#
private void StartDownload(string url)
{
WebClient wc = new WebClient();
wc.DownloadStringCompleted += this.OnCompleted;
wc.Downl oadStringAsync(new Uri(url));
}
private void OnCompleted(object sender,
DownloadStringCompletedEventArgs e)

33 {
string result = e.Result;
// TODO: Process the string result here.
}
Deși codul pare mai concis, succesiunea în care se desfășoară activitățile nu este ușor de
urmărit. Codul se complică mult mai mult însă atunci când există mai multe taskuri care
trebuie executate asincron. Mai mult decât atât, nici în acest caz nu se rezolvă problema
propagării unei excepții.
Pentru a rezolva toate aceste dificu ltăți .NET Framework 4.0 a introdus o abordare cu
totul nouă numită Modelul asincron bazat pe taskuri ( Task -based Asynchronous Pattern –
TAP ). Scopul principal al TAP este de a da dezvoltatorilor impresia că scriu cod asincron în
același mod în care tratea ză codul sincron, văzând succesiunea și fluxul proceselor în mod
clar. Pentru a realiza aceasta .NET Framework a adăugat un nou set de clase, o bibliotecă
numită Task Parallel Library (TPL ). Cel mai important aspect al acesteia este că clasa Task
este conț inută în bibiotecă și oferă dezvoltatorilor o nouă perspectivă pornind de la unitatea de
lucru (taskul) și nu o perspectivă concentrată asupra succesiunii execuției.
O instanță a clasei Task se referă la o valoare care va fi returnată la un moment dat în
viitor. Adițional nu trebuie ținut cont de cum și pe ce thread este calculată valoarea, tot ce este
necesar de știut este faptul că procesarea informației va dura un timp și obiectul Task poate fi
folosit pentru a preveni blocarea fluxului de execuție până ce va fi obținut rezultatul.
Obiectul Task oferă sprijin în interogarea statusului execuției asincrone, așteaptă până la
finalizarea execuției și primește valoarea rezultat. Există chiar și o clasă generică
Task<TResult> care poate fi folosită pentru a acc esa rezultatul operației asincrone într -o
modalitate puternic tipizată (strongly typed).
Următoarea secvență înfățișează modul de a downloada un string utilizând clasa Task.
Cod C#
Task.Factory.StartNew(() =>
{
WebClient wc = new WebClient();
string resu lt = wc.DownloadString(url);
// TODO: Process the string result here.
});
Cu ajutorul obiectelor Task se poate implementa cod asincron utilizând o logică
asemănătoare implementării codului sincron. Microsoft încurajează această abordare astfel că
în .NET framework 4.5 există metode care returnează obiecte de tip Task în mod direct.
Până acum am putut vedea mai multe moduri de a executa cod în mod asincron, toate
acestea fiind favorizate de clasa de bază a .NET Framework. Beneficiul acestei arhitecturi este
că aceste clase sunt disponibile pentru toate limbajele .NET (C, C++, C#, VisualBasic, F#).
În C# 5.0 Microsoft a simplificat și mai mult programarea asincronă adăugând în limbaj
două noi cuvinte cheie împrumutate din limbajul F# și anume: await , respecti v async .
Cele două noi cuvinte cheie au roluri bine stabilite în limbaj, async fiind un modificator,
iar await un operator, ambele având scopul de a reduce din elementele care complicau codul
sursă la folosirea clasei Task. Începând cu această versiune, u tilizând cele două cuvinte cheie,
compilatorul va primi responsabilitatea de a transforma o metodă sincronă în logică asincronă.

34 Următoarea secvență de cod ilustrează o metodă care conține un apel către o metodă ce
are rolul de a downloada un string. Aceas tă metodă va necesita un timp computațional
îndelungat.
Cod C#
private void DownloadSync(string url)
{
WebClient wc = new WebClient();
string result = wc.DownloadString(url);
this.txtStatus.Text = result;
}
Modificatorul async are rolul de a anunța comp ilatorul că un anumit bloc de cod trebuie
să fie tratat asincron. Metoda marcată cu modificatorul async se numește metodă async .
În cadrul metodei async operația sau apelul către o altă metodă ce necesită timp
computațional îndelungat trebuie marcat cu awa it. Metodele asincrone sunt folosite pentru a
face managementul asincronicității și nu pentru a crea asincronicitate. Aceste metode nu vor
porni thread -uri noi, ci folosesc în fundal apeluri de callback cunoscute, fără a mai necesita
implementarea lor expl icită de către programator. Asfel compilatorul este cel care se ocupă de
generarea acestui cod în mod corect și de fluxul de control pentru metoda asincronă. Pentru ca
metoda să funcționeze în mod corect operația marcată cu await trebuie să returneze void, o
instanță Task sau Task<T>.
Pentru a putea utiliza noile elemente este necesar Visual Studio 2012 și .NET
Framework 4.5, sau în cazul folosirii Visual Studio 2010 este necesară instalarea unui patch
de upgrade pentru compilator numit: Visual Studio Async Community Technology Preview
(CTP ).
3.6. Controale de bază în aplicații Windows 8 Metro UI
Pentru a construi interfața utilizator există controale simple care respectă principiile de
bază ale stilului Metro. Aceste controale se împart în două categorii:
Prima categorie conține controalele pentru conținut ( ContentControls ), acestea pot
conține un singur element în cadrul lor, fie text, fie un element vizual. Acest element poate fi
setat utilizând proprietatea Content a controlului.
A doua categorie conține contr oalele pentru itemi ( ItemsControl s), acestea pot conține
mai multe elemente. Există două metode pentru a popula acest tip de controale:
 se poate seta proprietatea Items a controlului populând -o cu o serie de elemente,
imagini, text, conținut video, prin i ntermediul metodei Items.Add()
 se poate seta proprietatea ItemsSource instanțiind -o cu o colecție de date
reprezentând elementele de mai sus
Fiecare control este derivat fie din clasa ContentControl, fie din clasa ItemsControl,
singurele excepții fiind cla sa Border, TextBlock și Image, însă utilizarea acestor clase este
foarte similară celor derivate din cele două clase de bază discutate anterior.

35 3.6.1. Language Bar
Pentru a adăuga noi funcționalități cum ar fi cea de multi -language se poate utiliza un
controlul numit BottomBarApp în care se pot adăuga noile butoane pentru limbile ce urmează
a fi incluse în cadrul aplicatiei. În aplicația Travel Destinations această bară de activități va
include limbile română și engleză așa cum se poate sesiza și în liniile de c od de mai jos:
Cod XAML
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<Button x:Name="btnEng" Style="{StaticResource
EnglishAppBarButtonStyle}"
Click="Language_Click" FontSize="18" Content="EN"/>
<Button x:Name="btnRo" Style="{StaticResource
RomanianAppBarButtonStyle}"
Click="Language_Click" FontSize="18"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Evenimentul apăsării ce lor două butoane va fi interceptat cu ajutorul metodei
Language_Click(). Această metodă va conține apelul către funcția LoadDataAsync() ce va
primi datele prin intermediul unui webservice, în funcție de limba aleasă de utilizator. În mod
implicit limba sel ectată este limba engleză.
Cod C#
private async void Language_Click(object sender, RoutedEventArgs e)
{
String languageStr = (sender as Button).Content.ToString().ToLower();
switch (languageStr)
{
case "en":
default:
btnEng.IsEnabled = false;
btnRo.IsEnabled = true;
TravelDataSource.Language = "English";
break;
case "ro":
btnRo.IsEnabled = false;
btnEng.IsEnabled = true;
TravelDataSource.Language = "Romanian";
break;
}
await TravelDataSource.LoadDataAsync(TravelDataSource .Language);
}

36 3.7. Data binding
Datele prezentate în cadrul cotroalelor, date ce au un caracter modificabil pot fi afiliate
unui model de date. Astfel fiecare modificare a textului va putea fi mai apoi salvată în mod
automat în spațiul de stocare (bază de date, fișier) fără a mai fi necesară scrierea a multe linii
de cod care să trateze fiecare control ce modifică aceeași informație. Acest tip de afiliere se
numește data binding . Acest mecanism servește ca și liant între proprietățile controalelor și
obiectul de date. Astfel, în funcție de setări, de fiecare dată când, spre exemplu se vor
modifica datele în baza de date, se vor actualiza și în cadrul interfeței utilizator și/sau vice –
versa.
O regulă importantă în ceea ce privește data binding se referă la faptul că proprietatea
țintă a obiectului de legătură trebuie să fie o proprietate subordonată, fiind derivată din clasa
DependencyObject . Majoritatea proprietăților unui control au această caracteristică.
Figura de mai jos ilustrează tipurile de data binding.

Figura 3.7.1.1. Data binding
Definirea legăturii se poate face declarativ din XAML sau imperativ din cadrul codului
C# utilizând clasa Binding. Clasa Binding prezintă numeroase proprietăți folositoare în
mecanismul de data binding. În secțiunea de mai jos sunt prezentate câteva dintre acestea:
 Path – Specifică proprietatea sursă cu care se face legătura. Aceasta poate să fie
orice proprietate publică.
 Mode – Specifică un tip de binding, ce determină direcția legăturii.
 Source – Specifică instanța clasei cu care se face le gătura.
 ElementName –Specifică o referință la un control sursă prin proprietatea name.
 Convert – Acceptă o instanță IvalueConverter care servește drept proxy între
proprietăți incompatibile.
Data binding poate fi clasificat după tipul direcției de binding utilizând proprietatea Mode:
 OneWay – Această opțiune asigură faptul că legătura actualizează obiectul țintă de
fiecare dată când primește o notificare despre o modificare din partea unei
proprietăți a obiectului sursă. Modificarea valorii obiectului țint ă nu are nici un efect
asupra proprietăților obiectului sursă.
 TwoWay – Acestă opțiune asigură faptul că legătura sincronizează atât datele
proprietăților din obiectul sursă cât și din obiectul țintă, oricând primește o
notificare de modificare din partea oricăreia dintre ele.

37  OneTime – Această opțiune este asemănătoare celei OneWay, însă va actualiza
proprietatea obiectului țintă numai imediat după ce are loc operația de binding, iar
după aceea nu va mai monitoriza modificările.
O altă proprietate importan tă în mecanismul de data binding este proprietatea
DataContext. Această proprietate permite ca toate elementele aflate la un nivel inferior în
ierarhia de derivare pot moșteni valoarea conținută în DataContext și o pot accesa. Spre
exemplu dacă un control de tip panel va avea setat DataContext, atunci controalele acestuia
pot accesa fiecare informația din DataContext.
Cod XAML
<DockPanel DataContext="{Binding Source={StaticResource InfoStudent}}">
<TextBox Text="{Binding Path=Nume, Mode=TwoWay}"/>
<TextBox Text="{Binding Path=Prenume, Mode=TwoWay}"/>
</DockPanel>
Popularea cu informații în cadrul aplicației Travel Destinations se poate face prin data
binding. Această operație apare fie în cazul datelor statice, fie ca și binding cu stiluri și
modele, fie î n cazul bindingului cu informațiilor dinamice.
Un exemplu în cazul operației de binding cu o informație statică este chiar setarea
titlului în cadrul aplicației așa cum se poate vedea mai jos:
Cod XAML
<TextBlock x:Name="pageTitle" Text="{StaticResource Ap pName}"
Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource
PageHeaderTextStyle}" Foreground="#FFE0EA0E"/>

Un stil deține proprietăți ce pot fi setate pentru a personaliza un anumit control. Aceste
proprietăți pot primi fie o valoare, fie stil ul unui alt template. În codul XAML de mai jos se
poate observa stilul unui buton aparținând unui control de tip BottomBarApp.
Cod XAML
<Button x:Name="btnEng" Style="{StaticResource EnglishAppBarButtonStyle}
Stilul acestui buton (EnglishAppBarButtonStyle) este derivat din stilul
AppBarButtonStyle.
Cod XAML
<Style x:Key="EnglishAppBarButtonStyle" TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId"
Value="PicturesAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Pictures"/>
<Setter Property="Content" Value="ENG"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="FontFamily" Value="Arial"/>
</Style>
În cazul bindingului dinamic acesta este folosit în c azul datelor obținute în momentul
execuției din surse externe aplicației, prin intermediul WebService -ului TravelDataWS. Acest
ebService conține o metodă numită GetTravelData() care are rolul de a obține date dintr -o
bază de date.

38 Cod C#
public static Lis t<TravelData> GetTravelData(String language)
{
List<TravelData> result = new List<TravelData>();
try
{
using (TRAVELDATAEntities ent = new TRAVELDATAEntities())
{
switch (language)
{
case "English":
default:
result = (from g in
ent.COUNTRYGROUPs.Include("TRANSLATION")
select new TravelData
{
backgroundImage = g.BackgroundImage,
groupImage = g.GroupImage,
key = g.COUNTRY.TRANSLATION.English,
rank = g.Rank,
shortTitle = g.COUNTRY.TRANSLATION.En glish,
title = g.COUNTRY.TRANSLATION.English,
CID = g.CID
}).ToList();
break;
case "Romanian":
result = (from g in
ent.COUNTRYGROUPs.Include("TRANSLATION")
select new TravelData
{
backgroundImage = g.Backgroun dImage,
groupImage = g.GroupImage,
key = g.COUNTRY.TRANSLATION.Romanian,
rank = g.Rank,
shortTitle = g.COUNTRY.TRANSLATION.Romanian,
title = g.COUNTRY.TRANSLATION.Romanian,
CID = g.CID,
}).ToList();
break;
}

for (int index = 0; index < result.Count; index++)
{
var element = result[index];
result[index].travelItems = new List<TravelItem>();
var res = (from c in
ent.COUNTRYINFOes.Include("TRANSLATION")
where c.CID == element.CID
select c);
//Log.logMessage(" travel Item " + res.Count, null);
foreach (var cInfo in res)
{
TravelItem travelItem = new TravelItem();
travelItem.backgroundImage = cInfo.BackgrundImage;
travelItem.tileImage = cInfo.TileImage;
travelItem.key = (int)cInfo.CKey;
switch (language)
{
case "English":
default:

39 travelItem.title =ent.TRANSLATIONs.Where(t
=> t.DBID == cInfo.TitleID).Select(t=> t.English).FirstOrDefault();
travelItem.shortTitle =
ent.TRANSLATIONs.Where(t => t.DBID == cInfo.ShortTitleID).Select(t =>
t.English).FirstOrDefault();
travelItem.description =
cInfo.TRANSLATION.English;
travelItem.sights =
ent.SIGHTs.Include("TRANSLATION").Where(s => s.CountryID == cInfo.DBID)
.Select(s => s.TRANSLATION.English)
.ToList();
break;
case "Romanian":
travelItem.title =ent.TRANSLATIONs.Where(t
=> t.DBID == cInfo.TitleID).Select(t=> t.Romanian).FirstOrDefault();
travelItem.shortTitle =
ent.TRANSLATIONs.Where(t => t.DBID == cInfo.ShortTitleID).Select(t =>
t.Romanian).FirstOrDefault();
travelItem.description =
cInfo.TRANSLATION.Romanian;
travelItem.sights =
ent.SIGHTs.Include("TRANSLATION")
.Where(s => s.CountryID == cInfo.DBID)
.Select(s => s.TRANSLAT ION.Romanian)
.ToList();
break;
}

result[index].travelItems.Add(travelItem);
}
}
}
}
catch (Exception exc)
{
Log.logMessage("Exception "+exc.StackTrace, exc);
}
return result;
}
Această metodă este apelată asincron din cadrul aplicației Travel Destinations .
Cod C#
public static Task<TravelDataWS.getTravelDataResponse>
AccessWebService(String language)
{
Task<TravelDataWS.getTravelDataResponse> result =
travelWS.getTravelDataAsync(language);
return result;
}
Rezultatul acestei metode este mai apoi prelucrat în cadrul clasei TravelDataSource în
metoda LoadDataAsync() ce primește ca parametru un element de tip string ce reprezintă
limba în care vor fi obținute titlurile și conținutul informațional pentru aplicația în cauză.

40 Cod C#
public static async Task LoadDataAsync(String language)
{
// Retrieve Travel data from Travels Webservice
TravelDataWS.getTravelDataResponse elem = await
DBHelper.AccessWebService(language);
ObservableCollection<TravelDataWS.TravelData> items =
elem.Body.getTravelDataResult;
CreateTravelsAndTravelGroups(items);
}

private static void CreateTravelsAndTravelGroups
(ObservableCollection<TravelDataWS.TravelData> travelElements)
{
TravelDataGroup group = null;
TravelDataItem tItem = null;
_TravelDataSo urce._allGroups.Clear();
if (travelElements != null)
foreach (var item in travelElements)
{
group = new TravelDataGroup();
group.UniqueId = item.key;
group.Title = item.title;
group.ShortTitle = item.shortTitle;
group.Description = (item.descr iption != null)?
item.description:"";
group.SetImage(item.backgroundImage);
group.SetGroupImage(item.groupImage);
if (item.travelItems != null)
foreach (var elem in item.travelItems)
{
tItem = new TravelDataItem();
tItem.UniqueId = elem .key.ToString();
tItem.Title = elem.title;
tItem.ShortTitle = elem.shortTitle;
tItem.Description = elem.description;
tItem.Sights = new
ObservableCollection<string>(elem.sights);
tItem.SetImage(elem.backgroundImage);
tItem.SetTileIm age(elem.tileImage);
tItem.Group = group;
group.Items.Add(tItem);
}
_TravelDataSource.AllGroups.Add(group);
}
}
Clasele de care sunt legate prin data binding proprietățile principalelor elemente din
interfața utilizator, urmăresc ierarhia de terminată de navigarea în paginile aplicației.

41

Figura 3.7.1.2. Diagrama claselor
Clasa TravelDataCommon este clasa de bază pentru cele două clase: TravelDataGroup
și TravelDataItem. Astfel acestea au în comun următoarele proprietăți: UniqueID, Title,
ShortTitle, Descri ption, ImagePath și Image.
Clasa TravelDataGroup este complexă și expune două colecții de date și anume o listă
cu itemi de tip TravelDataItem și încă o listă numită TopItems. Diferența dintre cele două
colecții constă în faptul că prima listă va conține t oți itemii, iar cea de -a doua va conține doar
un subset dintre aceștia care vor fi dispuși în GroupItemsPage.xaml în funcție de rezoluția
ecranului. Scopul acestei liste din urmă este de a aduce îmbunătățiri în ceea ce privește viteza
de afișare a paginii principale, independent de numărul total de itemi dintr -un grup. Această
clasă mai conține și evenimentul ItemsCollectionChanged, care are loc ori de câte ori un item
este adăugat sau eliminat, adică are loc o modificare la nivelul colecției de date.
Clasa TravelDataItem va avea proprietățile moștenite din TravelDataCommon și alte
două proprietăți: Content și Group. Scopul proprietății Group este de a facilita navigarea de la
un item selectat către grupul său părinte.

42 3.8. Dezvoltarea unei aplicații Windows 8 fo losind JavaScript
Windows 8 aduce noi oportunități dezvoltatorilor de software: noile aplicații Windows
8 pot fi dezvoltate atât cu ajutorul C# și XAML cât și cu ajutorul JavaScript, HTML și CSS.
Windows Runtime oferă un nou API ( Application Programming In terface ) pentru aplicațiile
care au nevoie de acces la sistemul de fișiere pentru a citi și a scrie. Deoarece aceste operații
pot fi consumatoare de timp, metodele noului API sunt asincrone obligând la respectarea unor
principii de dezvoltare a aplicațiilo r neblocante. În javaScript metodele asincrone sunt
gestionate și legate între ele prin intermediul metodei then() .
Class FileIO din namespace -ul Windows.Storage oferă următoarele metode pentru
citirea și scrierea fișierelor:
 appenndLinesAsync
 appendTextAs ync
 readBufferAsync
 readLinesAsync
 readTextAsync
 writeBufferAsync
 writeBytesAsync
 writeLinesAsync
 writeTextAsync
Aceste metode pot funcționa cu ajutorul unei instanțe IstorageFile care oferă informații
despre fișier și conținutul acestuia și oferă posibili tăți de manipulare a fișierelor. O astfel de
instanță se poate obține prin utilizarea ferestre de save sau open, numite în Windows 8 Metro
Style applications: File pickers . Acestui tip îi corespund două clase: FileOpenPicker și
FileSavePicker și se pot găs i în namespace -ul Windows.Storage.Pickers.
Pentru a crea o aplicație Metro Style utilizând JavaScript se va alege din Visual Studio
2012 modelul de proiect corespunzător, prin File, opțiunea New Project. Astfel se va genera
un proiect nou cu o structură ca re va conține informațiile necesare pentru a putea începe
dezvoltarea unei aplicații utilizând JavaScript. Acest proiect conține două fișiere principale:
fișierul default.html cu sintaxa de marcare specifică HTML și fișierul default.js pentru codul
JavaScr ipt.
Fișierul HTML este util pentru a defini elementele care aparțin de interfața grafică,
vizuală, iar fișierul default.js conține logica aplicației care definește funcționalitatea acesteia.
Managementul informațiilor reprezintă un aspect important al apl icației. Datele se pot
furniza fie cu ajutorul fișierelor, fie prin intermediul unei conexiuni cu o bază de date
(SQLite), fie prin intermediul unor servicii web.
Mediile noi de dezvoltare prezintă avantaje din acest punct de vedere, oferind
posibilitatea utilizării unor componente de tip data source cu ajutorul cărora se poate realiza
conexiunea la o bază de date, la un fișier sau la un serviciu web. Mai apoi informațiile se pot
transmite și înfățișa în interfața utilizator.
Conexiunea dintre data source și interfață se realizează și aici prin data binding. Există
două tipuri de data binding și anume:
Simple binding – face conexiunea pentru o singură vaoare cu o singură proprietate a
unui element din interfața utilizator.

43 List binding – face conexiunea pen tru mai multe valori pentru un element al interfeței
care suportă lucrul cu o colecție de date.
În cazul aplicațiilor Windows 8 WinJS suportă doar binding într -o singură direcție (de
tip one -way), adică modificările din baza de date, fișiere se vor reflect a asupra interfeței
utilizator, însă modificările ce survin din interacțiunea utilizatorului cu interfața nu vor fi
salvate automat în sursa de date, ci trebuie tratate separat utilizând mecanisme de notificare
pentru a salva datele în mod corespunzător. A ceastă conexiune poate fi definită în mod
declarativ sau în mod programatic:
Binding declarativ – valorile vor fi atribuite proprietăților folosind marcare HTML, așa
cum se poate observa în exemplul de mai jos în care numele unui student va fi afișat în
proprietatea innerText a tag -ului <div>:
Cod JavaScript
<script type="text/javascript">
var student = { nume: "Cristina" };
</script>
HTML
<div id="basicBinding">
Hello,
<span id="nameSpan" data -win-bind="innerText: nume"></span>
</div>
Binding Programat ic – valorile, informațiile vor fi manipulate din codul JavaScript.
Cod JavaScript
var data = WinJS.Binding.as({ nume: 'Cristina' });
data.bind('nume', function (newValue, oldValue) {
var target = document.getElementById('nameSpan');
target.innerText = new Value;
});
3.9. Distribuirea aplicației prin intermediul Windows Store
O dată ce o aplicație este creată, este necesară distribuirea acesteia. Distribuirea
aplicaței se realizează fie prin intermediul Windows Store sau prin încărcarea acesteia pentru
utilizarea internă, proces numit sideloading.
Distribuirea unei aplicații Windows 8 Metro UI prin intermediul Windows Store include
câțiva pași: crearea unui cont de dezvoltator de aplicații, acceptarea diverselor contracte de
acord și de servicii, înaintarea aplica ției pentru a fi aprobată, stabilirea termenilor pentru
aplicație, ș.a.
Cerințele pretinse de Microsoft în ceea ce privește publicarea aplicațiilor sunt descrise
în “Windows 8 app certification requirements”:
 Aplicația trebuie să poată fi valorificată
 Aplicația trebuie să ofere mai multă funcționalitate decât un simplu website
 Aplicația trebuie să fie intuitivă, cu un comportament previzibil
 Aplicația trebuie să respecte viața privată și practicile de securitate

44  Conținutul și subiectul aplicației trebuie s ă fie adecvat pentru mai multe audiențe
 Aplicația trebuie să poată fi identificată cu ușurință printr -un nume și alte informații
care să confere unicitate
Procesul de certificare al aplicației implică mai mulți pași. Primul pas include încrcarea
pachetului aplicației pe site -ul Microsoft pentru a fi verificat din punct de vedere al
conformității cu diversele cerințe de certificare. Printre testele întreprinse de Microsoft se află
următoarele:
 Teste de securitate – care includ scanări malware tipice
 Teste de conformitate tehnică – în acest scop se utilizează Windows App
Certification Kit. Acest kit poate fi folosit și de dezvoltatorii de aplicații pentru a se
asigura că testele ce vor fi ulterior efectuate de Microsoft au succes
 Teste de conformitate ale con ținutului – acesta este un test efectuat manual de către
un reprezentant Microsoft
Când o aplicație este aprobată, Microsoft efectuează semnarea digitală a aplicației
pentru a preveni falsificarea, iar apoi publică aplicația în cadrul Windows Store.
Pentru mai multe informații în ceea ce privește procesul de certificare al unei aplicații
Windows 8 se poate vizita pagina:
http://msdn.microsoft.com/library/windows/apps/hh923026.aspx.

45 Concluzie
Utilizatorii au acces tot mai crescut la dispozitive cum ar fi lap top-uri, tablete, telefoane
mobile, astfel așteptările acestora în ceea ce privește tehnologia adoptată sunt tot mai crescute.
Astfel Windows 8 oferă o experiență de manipulare tactilă dar și suport complet pentru mouse
și tastatură, oferind confortul și m obilitatea unei tablete împreună cu puterea și familiaritatea
unui desktop PC tradițional.
Dezvoltarea unor aplicații Windows 8 Metro Style ce oferă suport tactil se poate face cu
ajutorul unor tehnologii cunoscute, fie XAML și limbaje specifice .NET (C#, C++, Visual
Basic), fie HTML, CSS3 și JavaScript.
Majoritatea aplicațiilor Windows 8 Metro Style au mai multe pagini, iar navigarea între
acestea se poate face în mod intuitiv cu ajutorul principii de navigare: navigare hub, navigare
ierarhică, zoom semant ic.
Noua generație de aplicații răspunde provocărilor mediului de execuție pentru a oferi o
experiență utilizator de înaltă calitate. Acesta se realizează prin interfața ce respectă
standardele designului infografic, prin concentrarea asupra conținutului. Un alt aspect care
care trebuie luat în considerare evitarea firelor de execuție blocante, pentru a conferi aplicației
fluiditate și viteză crescută în execuție.
Pentru a conecta interfața utilizator la obiectele de date se poate folosi o funcționalitate
puternică, aceea de data binding. Există suport atât pentru obiecte simple dar și pentru
colecții.
Aplicațiile pot avea mai multe funcionalități care pot fi accesate din Charms Bar, în
cazul operațiilor de căutare, sau sharing întreaplicații, fie din bara d e activități.
O aplicație Windows 8 Metro UI poate fi distribuită prin intermediul Windows Store.
Pentru aceasta aplicația trebuie să treacă de testele de certificare propuse de Microsoft.

46 Bibliografie
[1] Nick Lecrenski, Doug Holland, Allen Sanders, Kevin Ash ley, Professional Windows
8 Programming with C# and XAML , Wiley, 2013
[2] Istvan Novak, Gyorgy Ballasy, Zoltan Arvai, David Fulop, Beginning Windows 8
Application Development , Wrox Press, 2012
[3] Jerry Honeycutt, Introducing Windows 8 , Microsoft Press 2012
[4] Meet Windows Store apps , http://msdn.microsoft.com/en –
us/library/windows/apps/hh974576.aspx
[5] Windows 8 , http://ro.wikipedia.org/wiki/Windows_8
[6] WindowsStore , http://en.wikipedia.org/wiki/Windows_Store
[7] Windows 8 Camp in a Box , http://aka.ms/windows8campinabox
[8] What is XAML , http://msdn.microsoft.com/en -us/library/cc295302.aspx
[9] XAML Overview (WPF) , http://msdn.microsoft.com/en -us/library/ms752059.aspx
[10] Create your first Windows Store app using DirectX , http://msdn.microsoft.com/en –
us/library/windows/apps/br229580.aspx
[11] Downloads for programming Windows Store apps , http://msdn.microsoft.com/en –
us/windows/apps/br229516.aspx
[12] Windows 8 Store App Development , http://forum.xda –
developers.com/showpost.php?p=39987215&postcount=1