3. díl - WinJS - Ovládací prvky a jejich stylování

JavaScript Windows 8 aplikace WinJS - Ovládací prvky a jejich stylování

V minulém dílu seriálu tutoriálů pro tvorbu Windows 8 aplikací v JavaScriptu jste viděli, jak se prvky vytvářejí. Ne každému však vyhovují obyčejné prvky a některé aplikace přímo vyžadují prvky barevnější, zakulacenější,... Vzhledem k tomu, že prvky vykresluje Internet Explorer 11, můžeme využít celý arzenál CSS3 a jak známe IE, tak většina standardních funkcí jde použít i bez vendor prefixes. No jenomže to má háček: my přeci máme jen ten jeden div, jak ho stylovat uvnitř? Nakonec uvidíte, že to bude snadné.

Pro začátek budeme stylovat datePicker z minulého dílu:

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

Vytvořte si nový projekt StylovaneOvla­daciPrvky, do HTML stránky si vložte onen datePicker a přejděte do CSS. Do CSS přidejte jednoduchý selektor, kde nastavíte margin 100px každému divu s atributem data-win-control s hodnotou WinJS.UI.Date­Picker:

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

Tímto se vám datePicker posune o 100 pixelů odshora a zleva. Do CSS přidejte animaci, která bude našim datePickerem jemně třást:

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

A do selektoru k divu implementujte animaci:

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

Aplikaci spusťte. Uvidíte, že datePicker se trochu otáčí. Určitě jste si všimli, že jsme nepsali žádné vendor prefixes, což je jenom dobře.

Jenomže co když chcete otáčet jen částí našeho prvku, třeba selectem pro rok? V našem date pickeru se nachází jednoduché selecty a ty jsou přiřazené do různých tříd. Celý soupis tříd je v dokumentaci, ty nejdůležitější jsou win-datepicker-date, win-datepicker-month a win-datepicker-year. Tyto třídy stylují právě ty selecty pro určitou část data. Nám bude stačit onen poslední pro rok. Přidejte do CSS nový selektor, který z našeho divu vybere všechny selecty s třídou win-datapicker-year:

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

}

K tomuto selektoru přesuňte implementaci animace a aplikaci spusťte. Uvidíte, že se bude točit jen select pro rok. Dále jste viděli důkaz, že v divu jsou právě selecty (viz. předchozí selektor) a že metoda WinJS.UI.Proces­sAll() opravdu převedla div na jakousi skupinku jiných elementů, které spolu dokonale fungují.

Na prvky fungují běžné CSS, takže si je můžete přizpůsobovat jak chcete. Můžete jim měnit velikosti, obarvovat je, zakulacovat,... Další ukázku již ani popisovat nebudu, ukazuje jak stylovat náš datapicker dál, nic zvláštního na ni není.

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;
}
Stylovaný datapicker

Na této jednoduché ukázce jste viděli, že si s tím můžete dělat to, co se vám zlíbí.

U ovládacího prvku pro hodnocení, který jste také viděli v minulém díle, můžete třeba měnit třídy: win-average, win-disabled, win-empty, win-full, win-rating, win-star, win-tentative, win-user.

Když jsem říkal, že běžné HTML prvky lze jen běžně stylovat, trošku jsem vám lhal, protože Microsoft je vylepšil. Podívejme se na běžný input, typu text. Krom textu zde je ještě tlačítko, které ho vyprázdní:

Jednoduché textové pole s tlačítkem vymazat obsah

Toto tlačítko lze také stylovat. Do stylů začněte psát nový selektor pro input[type=text]::-ms- jakmile toto napíšete, našeptávač IntelliSense vám nabídne různé možnosti:

Intellisense -ms-

V těchto možnostech se skrývá i -ms-clear, který nám ostyluje právě tlačítko vymazat obsah. Selektoru nastavte barvu na oranžovou a border-radius na 100%. Aplikaci spusťte a napište něco do textového pole. Všimněte si, že tlačítko již vypadá jinak:

Stylované tlačítko vyprázdnit obsah.

Selektory, které vám našeptal IntelliSense, nejsou jen pro textová pole. Zcela přesně pro textové pole funguje jen -ms-cler a -ms-value, ty ostatní jsou pro jiné ovládací prvky. Můžete si zkusit nastylovat něco jiného. V ukázkách, které jsou ke stažení pod článkem, máte nastylovaný progressbar a checkbox.

Na konec si ještě řekneme o tlačítku zpět, to Microsoft navrhl za nás, jednoduše definujte div a jako třídu mi přidejte win-backbutton:

<div class="win-backbutton"></div>
Předdefinované tlačítko zpět.

Styl tlačítka je celkem jednoduchý a zde si ukážeme, že za vším u tlačítka opravdu stojí CSS. Podívejte se do stylu ui-dark.css, který najdete v referenci na WinJS ve složce css na řádek 587. Zde je definice onoho zpětného tlačítka, na tom není až zas tak nic k vidění, jen si všimněte řádku 615, kde je "před" element přidán jakýsi znak \E0D5. Tento znak je ona šipka, jednoduše si tedy můžete vytvořit podobná tlačítka. Ty šipky a podobné obrázky můžete snadno najít v mapě znaků. Do vyhledávače aplikací na startu napište Mapa znaků a otevřete aplikaci Mapa znaků. Přejděte do fontu Segoe UI Symbol a prohlédněte si různé symboly. Jednoduše je můžete zkopírovat a vkládat do vaši aplikace, pak ale nezapomeňte těm znaků nastavit font Segoe UI Symbol.

Finální aplikace

Nyní již víte, jak můžete stylovat ovládací prvky, můžete si je změnit od A do Z. Příště na chvíli opustíme ovládací prvky a podíváme se na ukládání stavu aplikace a práci se soubory.


 

Stáhnout

Staženo 154x (35.53 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Článek pro vás napsal Michal Žůrek (misaz)
Avatar
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 



 

 

Komentáře

Avatar
Peter Lazorik:

Dobrý deň,
Prosím Vás ak si vytvorim aplikáciu pre Windows 8 v JS vo Visual Studiu 2012 pre Windows 8 je možné zo zdrojového kódu zostaviť aplikáciu tak aby som ju spúšťal ako napr. v C# súbor.exe a aplikácia beží bez vývojového prostredia.
Z odpoveď ďakujem.

Odpovědět 19.8.2013 17:50
Naše cnosti a naše vady sú neoddeliteľné ako sila a hmota, keď ich oddelíte človek prestane existovať.
Avatar
Odpovídá na Peter Lazorik
Michal Žůrek (misaz):

ne, tyto aplikace nemají žádné exe, vy ani vlastně nevíte kded přesně vaše aplikace je. Tyto aplikace se šíří pouze přes windows store. Než se aplikace do store dostane muste si zaplatit (roční) poplatek. Následně by upload měl pokračovat přímo z visual studia. Po uploadu aplikace projde ještě kontrolou v microsoftu. Jakmile vše bude OK aplikace se objeví ve windows store.

Odpovědět 19.8.2013 18:01
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):

jinak pokud jsi student nebo máš MSDN, tak ten poplatek nepltíš.

Odpovědět 19.8.2013 18:05
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.