3. diel - WinJS - Ovládacie prvky a ich štýlovanie

V minulom dieli seriálu tutoriálov pre tvorbu Windows 8 aplikácií v JavaScripte ste videli, ako sa prvky vytvárajú. Nie každému však vyhovujú obyčajné prvky a niektoré aplikácie priamo vyžadujú prvky farebnejšie, zakulacenější, ... Vzhľadom k tomu, že prvky vykresľuje Internet Explorer 11, môžeme využiť celý arzenál CSS3 a ako poznáme IE, tak väčšina štandardných funkcií ide použiť aj bez vendor prefixes . No lenže to má háčik: my predsa máme len ten jeden div, ako ho stylovať vnútri? Nakoniec uvidíte, že to bude ľahké.

Pre začiatok budeme stylovať datePicker z minulého dielu:

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

Vytvorte si nový projekt StylovaneOvla­daciPrvky, do HTML stránky si vložte onen datePicker a prejdite do CSS. Do CSS pridajte jednoduchý selektor, kde nastavíte margin 100px každému divu s atribútom data-win-control s hodnotou WinJS.UI.Date­Picker:

div[data-win-control='WinJS.UI.DatePicker'] {
    margin:100px;
}

Týmto sa vám datePicker posunie o 100 pixelov odhora a zľava. Do CSS pridajte animáciu, ktorá bude našim datePickerem jemne triasť:

@keyframes jemnyOtres {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(-20deg)
    }
    50% {
        transform: rotate(0deg)
    }
    75% {
        transform: rotate(20deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

A do selektora k divu implementujte animáciu:

animation-name: jemnyOtres;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function:linear;

Aplikáciu spustite. Uvidíte, že datePicker sa trochu otáča. Určite ste si všimli, že sme nepísali žiadne vendor prefixes, čo je len dobre.

Lenže čo keď chcete otáčať len časťou nášho prvku, treba SELECT pre rok? V našom date Picker sa nachádza jednoduché SELECT a tie sú priradené do rôznych tried. Celý súpis tried je v dokumentácii, tie najdôležitejšie sú win-datepicker-date, win-datepicker-month a win-datepicker-year. Tieto triedy štýlom práve tie SELECT pre určitú časť dáta. Nám bude stačiť onen posledný pre rok. Pridajte do CSS nový selektor, ktorý z nášho divu vyberie všetky Select s triedou win-datapicker-year:

div[data-win-control='WinJS.UI.DatePicker'] select.win-datepicker-year {

}

K tomuto selektora presuňte implementáciu animácie a aplikáciu spustite. Uvidíte, že sa bude točiť len select pre rok. Ďalej ste videli dôkaz, že v divu sú práve select (viz. Predchádzajúci selektor) a že metóda WinJS.UI.ProcessAll () naozaj previedla div na akúsi skupinku iných elementov, ktoré spolu dokonale fungujú.

Na prvky fungujú bežné CSS, takže si ich môžete prispôsobovať ako chcete. Môžete im meniť veľkosti, zafarbovať je, zaguľacovať, ... Ďalšie ukážku už ani popisovať nebudem, ukazuje ako stylovať náš datapicker ďalej, nič zvláštne na ňu nie je.

div[data-win-control='WinJS.UI.DatePicker'] select.win-datepicker-year {
    animation-name: jemnyOtres;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;

    transition: all linear 0.5s;

    background-color:red;
}
div[data-win-control='WinJS.UI.DatePicker'] select.win-datepicker-year:hover {
    background-color:violet;
    border:5px dotted yellow;
    border-radius:5px;
}
div[data-win-control='WinJS.UI.DatePicker'] select.win-datepicker-month {
    background-color:blue;
    color:white;
    transform:rotate(180deg);
}
div[data-win-control='WinJS.UI.DatePicker'] select.win-datepicker-date {
    background-color:orange;
    font-family:Calibri;
    font-family:Andy;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

Na tejto jednoduchej ukážke ste videli, že si s tým môžete robiť to, čo sa vám zapáči.

U ovládacieho prvku pre hodnotenie, ktorý ste tiež videli v minulom diele, môžete potrebné meniť triedy: win-average, win-disabled, win-empty, win-full, win-rating, win-star, win-tentative, win-user .

Keď som hovoril, že bežné HTML prvky možno len bežne stylovať, trošku som vám klamal, pretože Microsoft je vylepšil. Pozrime sa na bežný input, typu text. Okrem textu tu je ešte tlačidlo, ktoré ho vyprázdni:

Toto tlačidlo možno tiež stylovať. Do štýlov začnite písať nový selektor pre input [type = text] :: - MS-akonáhle toto napíšete, našepkávač IntelliSense vám ponúkne rôzne možnosti:

V týchto možnostiach sa skrýva aj -MS-clear, ktorý nám ostyluje práve tlačidlo vymazať obsah. Selektora nastavte farbu na oranžovú a border-radius na 100%. Aplikáciu spustite a napíšte niečo do textového poľa. Všimnite si, že tlačidlo už vyzerá inak:

Selektory, ktoré vám našepkala IntelliSense, nie sú len pre textové polia. Úplne presne pre textové pole funguje len -MS-cler a -MS-value, tie ostatné sú pre iné ovládacie prvky. Môžete si skúsiť nastylovať niečo iné. V ukážkach, ktoré sú k stiahnutiu pod článkom, máte nastylovaný progressbar a checkbox.

Na koniec si ešte povieme o tlačidle späť, to Microsoft navrhol za nás, jednoducho definujte div a ako triedu mi pridajte win-backbutton:

<div class="win-backbutton"></div>

Štýl tlačidla je celkom jednoduchý a tu si ukážeme, že za všetkým pri tlačidle naozaj stojí CSS. Pozrite sa do štýlu ui-dark.css, ktorý nájdete v referenciu na WinJS v priečinku css na riadok 587. Tu je definícia onoho spätného tlačidla, na tom nie je až zas tak nič k videniu, len si všimnite riadku 615, kde je "pred "element pridaný akýsi znak \ E0D5. Tento znak je ona šípka, jednoducho si teda môžete vytvoriť podobné tlačidlá. Tie šípky a podobné obrázky môžete ľahko nájsť v mape znakov. Do vyhľadávača aplikácií na štarte napíšte Mapa znakov a otvorte aplikáciu Mapa znakov. Prejdite do fontu Sego UI Symbol a pozrite si rôzne symboly. Jednoducho ich môžete skopírovať a vkladať do vašu aplikácie, potom ale nezabudnite tým znakov nastaviť font Sego UI Symbol.

Teraz už viete, ako môžete stylovať ovládacie prvky, môžete si ich zmeniť od A do Z. Nabudúce na chvíľu opustíme ovládacie prvky a pozrieme sa na ukladanie stavu aplikácie a prácu so súbormi.

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š.