2. diel - WinJS - Práca so základnými ovládacími prvkami

V minulom dieli seriálu tutoriálov pre tvorbu Windows 8.1 aplikácií v JavaScripte sme si urobili jednoduchú aplikáciu Hello User, ktorá nás pozdravila naším menom. Ukázali sme si ako písať HTML, CSS i JavaScript. U HTML sme si pridali prvky, ktoré nám HTML ponúka. Asi ste si však uvedomili, že to čo je v HTML a možno aj JavaScriptu nám pre vytvorenie väčšej a robustnejšie aplikácie stačiť nebude. Ako rozšíriť JavaScript si povieme niekedy v ďalšom dieli, teraz sa pozrieme ako použiť lepšie ovládacie prvky, ktoré HTML v základe neponúka.

Vytvorte si nový projekt typu Blank Page a pomenujte ho WinJSOvladaciPrvky. Otvorte si z koreňového priečinka projektu HTML súbor dafault.html.

Do obsahu stránky začnite písať <div data-win-control = ". Visual Studio vám v IntelliSense zobrazí možné prvky, ktoré môžete použiť.

V tomto dieli si vysvetlíme niektoré z nich, ak by sa vám hodili ďalší, tak v ukážkach, na ktoré som vás odkázal v prvom diele, sú všetky popísané.

Aplikačné lišta (AppBar)

Aplikačné lišta (AppBar) sa vysúva z horného alebo spodného okraja. Pomocou myši sa zobrazia pravým kliknutím na voľnú plochu. Aplikačné lišta musí mať ovládacie prvky - buttony. Samotná aplikačná lišta sa deklaruje ako div s atribútom data-win-control s hodnotou WinJS.UI.AppBar. Prvky sa do aplikačnej lišty pridávajú ako buttony s atribútom data-win-control s hodnotou WinJS.UI.AppBar­Command. Tlačidlu sa musí ešte pridať nastavenie, to sa pridá vo formáte JSON do atribútu data-win-options.

Príklad aplikačnej lišty:

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{'id': 'appbarcommand1', 'label': 'Přidat', 'icon': 'add', 'tooltip': 'Přidat prvek'}" ></button>
</div>

Vložte si toto do obsahu stránky a spustite aplikáciu, následne kliknite pravým tlačidlom myši. Zospodu sa vysunie aplikačné lišta s položkou Pridať. Teraz si ešte vyskúšame správanie tabletu. Vedľa tlačidla Local Machine pre spustenie aplikácie kliknite na šípku a vyberte Simulator. Simulátor simuluje správanie tabletu v rôznych rozlíšeniach. Kliknite na Simulator.

Otvorí sa simulátor, teraz ho máte v režime myši. Pre presun do režimu prsta vyberte vpravo ručičku. Aplikačné lištu vysuňte ťahaním zo spodného kraja smerom k stredu. Uvidíte AppBar s jeho jediným tlačidlom.

Narazili sme na dva veľmi zásadné atribúty data-win-control a dáta-win-options. Tieto atribúty sú špeciálne a bežne v HTML sa nevyskytujú.

Data-win-control obsahuje informáciu o aký prvok sa jedná. Môže nadobúdať hodnoty, ktoré vám zobrazí Visual Studio v IntelliSense alebo ich nájdete v dokumentácii.

Data-win-option uchováva nastavenia daného prvku vo formáte JSON. V predchádzajúcej ukážke ste videli, že sme nastavili vlastnosti id, label, icon a tooltip.

Vzhľadom k tomu, že sú špeciálne, musia je niečo spracovať. To niečo je JavaScript. Otvorte si súbor default.js. V riadku 20 tohto súboru je

args.setPromise(WinJS.UI.processAll());

SetPromise nám povie, že metóda vnútri bola asynchrónne vykonaná, to nás zatiaľ nemusí príliš ťažiť. Teraz je pre nás dôležitejšie vedieť čo robí tá volané metóda processAll (). Metóda processAll spracuje všetky elementy, ktoré majú atribút data-win-control. Keby sme túto metódu zakomentovali, aplikačné lišta nebude fungovať. Aplikačné lišta bude vyhodnotená ako obyčajný div a tlačidlo na aplikačnej lište nám zostane ako obyčajné tlačidlo.

DatePicker - výber dáta

DatePicker je súbor troch SELECT, ktoré nám umožňujú výber dáta. Zapisuje sa jednoducho ako element div a ako atribút data-win-control mu uvediete WinJS.UI.Date­Picker. Znalca inputov HTML možno napadá, prečo je to tak zložité, keď by teoreticky malo normálne fungovať

<input type="date" />

Dôvodom je, že input s typom date sa zle štýlom a preto sa radšej rozhodli urobiť vlastné. Na štýlovanie sa pozrieme v budúcom diele.

<div data-win-control="WinJS.UI.DatePicker"></div>

V JavaScriptu potom dátum z dataPickeru získate jednoducho pomocou vlastnosti _CurrentDate, ktorá sa nachádza na prvku. Pokiaľ chcete WinJS prvok spätne dostať do JavaScriptu, musíte si z neho vziať ešte winControl.

var datum = document.getElementById("dp").winControl._currentDate

Rating - hviezdičkové hodnotenie

Rating je ovládací prvok pre hodnotenie. Deklaruje sa opäť jednoducho ako div s atribútom data-win-control na hodnote WinJS.UI.Rating. Ak mu chcete uviesť predvolenú hodnotu (napríklad priemer hlasov ostatných užívateľov), tak to dajte do atribútu data-win-options vo formáte JSON k vlastnosti ratingAverage.

<div data-win-control="WinJS.UI.Rating" data-win-options="{ averageRating : 4}"></div>

Užívateľské hodnotenie je uložené vo vlastnosti _userRating tohto prvku.

var hodnoceni = document.getElementById("r").winControl._userRating

ToggleSwitch

Toggle switch je prepínač, umožňuje vybrať jednu z dvoch hodnôt. Deklaruje sa jednoducho ako div s atribútom data-win-control na hodnote WinJS.UI.ToggleS­witch. Nastavovať sa potom dajú treba popisky:

<div data-win-control="WinJS.UI.ToggleSwitch" data-win-options=" { 'title' : 'ToogleSwitch', 'labelOff': 'KO', 'labelOn': 'OK' }"></div>

Popisky zmeníme jednoducho tak, že do Attribut data-win-option pridáme vo formáte JSON hodnoty title pre titulok, labelOn, ako návestie pre hodnotu true a labelOff pre popisok k false.

Používateľovu voľbu možno získať vlastností _checked tohto prvku:

var volba = document.getElementById("t").winControl._checked

No a som u konca tohto dielu. V tomto diele som vybral 4 ovládacie prvky a opísal som vám, ako sa používajú. To čo som popisoval je značne orezané len na základy. V dokumentácii je toho oveľa viac. V budúcom dieli sa pozrieme na štýlovanie týchto prvkov.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.