Cunoștințe, prelegere, controale, stilul lor și legarea datelor

Fișierele pentru această lecție pot fi descărcate aici.

Controalele sunt unul dintre acele lucruri care nu pot fi evitate, mai ales în cultura noastră obsedată de tehnologie, ca cea care ne înconjoară pe mulți dintre noi. Chiar și dispozitivele de cea mai înaltă tehnologie, cum ar fi bicicletele și diferitele instrumente horticole, au controale. Dar aceasta nu este o problemă - aceasta este o necesitate reală. Elementele de control sunt mijloacele prin care intențiile oamenilor sunt traduse în domeniul mecanicii și al electronicii și sunt create pentru a invita o persoană să interacționeze. Când am scris asta, de fapt, stăteam în avion și priveam toate controalele din domeniul meu de viziune. Băiatul care ședea în rândul următor părea ocupat la fel, iar butonul mare de a "apela stewardesa" doar a cerut ca ea să fie apăsată!

Pe scurt, după ce și-a dat seama cum să construiască cadrul de aplicare, configurați cablarea și drenajul în "Anatomia aplicației și navigarea prin pagini". Suntem pregătiți pentru lucrări de finisare plăcute, cum ar fi instalarea întrerupătoarelor, mânerele ușilor și robineții de apă - ceea ce face ca aplicația să fie într-adevăr pregătită pentru a deveni o parte a vieții utilizatorului.

Inset: Materiale importante la comenzi

Din nou, atunci când Microsoft a creat mediul de dezvoltare, am dorit un grad ridicat de uniformitate între controalele HTML încorporate. Elementele WinJS și comenzile utilizatorului. Eu numesc toate aceste "controale", deoarece toate conduc la o experiență similară de interacțiune între utilizator și sistem: toate acestea sunt diferite elemente vizuale prin care utilizatorul interacționează cu aplicația. În acest sens, fiecare astfel de element are trei părți:

Comenzi HTML standard. desigur, au deja un marcaj alocat pentru ei, permițându-le să fie declarați, cum ar fi . . și . Controalele WinJS și controalele utilizatorilor. lipsiți de avantajele standardelor existente, sunt anunțate utilizând anumite elemente rădăcină, de obicei -

sau . cu două atribute speciale *. date-win-control și date-win-opțiuni. Valoarea de date-win-control specifică numele complet al constructorului de funcții publice, care creează controlul ca element elemental față de rădăcină. În al doilea rând, opțiunile de câștig de date sunt un șir JSON care conține perechi cheie-valoare. separate prin virgule: <: , : .>.

O sugestie. Dacă tocmai ați făcut o schimbare a opțiunilor de date-câștig, iar aplicația dvs., data viitoare când se execută, iese fără niciun motiv aparent (și fără a face o excepție), verificați erorile de sintaxă din șirul de parametri. De exemplu, acest comportament este tipic pentru cazurile în care brățara de închidere este uitată>.

Funcția constructor are doi parametri: elementul rădăcină (părinte) și obiectul cu parametrii. Comandă convenabilă WinJS.Class.define vă permite să creați funcții similare, ceea ce face foarte convenabil pentru a determina controalele (la fel ca și WinJS). Desigur, din moment ce atributele de date *. în conformitate cu specificația HTML5, sunt complet ignorate de subsistemul de redare HTML / CSS. Aveți nevoie de efort suplimentar pentru a transforma un element cu atribute similare într-un control real DOM. Și aceasta, așa cum am spus mai devreme, este scopul existenței WinJS.UI.process și WinJS.UI.processToate metodele. Așa cum vom vedea în scurt timp, aceste metode se ocupă de atributele cu parametrii și trec obiectul rezultat și elementul rădăcină la constructorul funcției specificate în controlul de date-câștig.

Rezultatul acestui marcaj declarativ simplu, completat cu WinJS.UI.process / processAll, este că controalele WinJS și controalele de utilizator sunt la fel ca și alte elemente DOM. Ele pot fi menționate de API pentru a ocoli DOM. ele pot fi ținte pentru stil folosind un set complet de selectori CSS (așa cum vom vedea în galeria de stiluri de mai jos). Aceștia pot asculta evenimente externe ca și alte elemente și își pot apela propriile evenimente prin implementarea metodelor [add / remove] din EventListener și pe. (WinJS, din nou, oferă o implementare standard a addEventListener: removeEventListener și dispatchEvent în acest scop.)

Să ne uităm la controale. pe care le putem folosi pentru aplicațiile Windows 8, începând cu elemente HTML și WinJS. În ambele cazuri, vom examina aspectul lor de bază, modul în care sunt create instanțele acestora și vom lua în considerare parametrii care pot fi aplicați acestora.

Controale HTML

click pentru a mari imaginea
Fig. 4.1. Standardul controlează HTML5 în stilul "light" (ui-light.css în WinJS)

click pentru a mari imaginea
Fig. 4.2. Standardul controlează HTML5 în stilul "light" (ui-light.css în WinJS)

Două mecanisme care adaugă ceva elementelor de control HTML sunt foile de stil WinJS și metodele, proprietățile și evenimentele suplimentare pe care motorul de randare Microsoft le adaugă la majoritatea elementelor HTML. Următoarele două secțiuni sunt dedicate acestui aspect.

Fișiere de stil WinJS: ui-light.css, ui-dark.css și win- * stiluri

Ambele stiluri specifică un set de clase de stiluri win- *. care de obicei mă gândesc ca pachete de stil care adaugă în mod eficient stiluri și comportament bazate pe CSS (cum ar fi pseudo-class: hover) care transformă comenzile HTML standard în versiunea specifică Windows 8. Printre acestea se numără win- buton pentru butoane, win-ring. win-mediu. și câștiga-mare pentru indicatorii de performanță, câștiga-mici pentru controlul de rating, câștiga-vertical pentru slider-ul vertical, și win-textareal pentru div. care acceptă editarea conținutului. Dacă aveți nevoie de detalii, căutați-le după numele lor în fila Regulilor de Stil din Blend.

Pagina anterioară

Pagina următoare