Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 2 - WinJS - Práce se základními ovládacími prvky

V minulém dílu, Úvod do WinJS a první aplikace, jsme si udělali jednoduchou aplikaci Hello User, která nás pozdravila naším jménem. Ukázali jsme si jak psát HTML, CSS i JavaScript. U HTML jsme si přidali prvky, které nám HTML nabízí.

Asi jste si uvědomili, že to co je v HTML a možná i JavaScriptu nám pro vytvoření větší a robustnější aplikace stačit nebude. Jak rozšířit JavaScript si řekneme někdy v dalším dílu, nyní se podíváme jak použít lepší ovládací prvky, které HTML v základu nenabízí.

Vytvořte si nový projekt typu Blank Page a pojmenujte ho WinJSOvladaciPrvky. Otevřete si z kořenové složky projektu HTML soubor dafault.html.

Do obsahu stránky začněte psát <div data-win-control=". Visual Studio vám v IntelliSense zobrazí možné prvky, které můžete použít.

data-win-control ve Windows 8 aplikacích - Tvorba Windows 8 store aplikací v JavaScriptu

V tomto dílu si vysvětlíme některé z nich, pokud by se vám hodily další, tak v ukázkách, na které jsem vás odkázal v prvním díle, jsou všechny popsány.

Aplikační lišta (AppBar)

Aplikační lišta (AppBar) se vysouvá z horního nebo spodního okraje. Pomocí myši se zobrazí pravým kliknutím na volnou plochu. Aplikační lišta musí mít ovládací prvky – buttony. Samotná aplikační lišta se deklaruje jako div s atributem data-win-control s hodnotou WinJS.UI.AppBar. Prvky se do aplikační lišty přidávají jako buttony s atributem data-win-control s hodnotou WinJS.UI.AppBar­Command. Tlačítku se musí ještě přidat nastavení, to se přidá ve formátu JSON do atributu data-win-options.

Příklad aplikační 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 spusťte aplikaci, následně klikněte pravým tlačítkem myši. Zespodu se vysune aplikační lišta s položkou Přidat. Nyní si ještě vyzkoušíme chování tabletu. Vedle tlačítka Local Machine pro spuštění aplikace klikněte na šipku a vyberte Simulator. Simulátor simuluje chování tabletu v různých rozlišeních. Klikněte na Simulator.

Otevře se simulátor, nyní ho máte v režimu myši. Pro přesun do režimu prstu vyberte vpravo ručičku. Aplikační lištu vysuňte táhnutím ze spodního kraje směrem ke středu. Uvidíte AppBar s jeho jediným tlačítkem.

simulátor Windows 8 store aplikací - Tvorba Windows 8 store aplikací v JavaScriptu

Narazili jsme na dva velmi zásadní atributy data-win-control a data-win-options. Tyto atributy jsou speciální a běžně v HTML se nevyskytují.

Data-win-control obsahuje informaci o jaký prvek se jedná. Může nabývat hodnot, které vám zobrazí Visual Studio v IntelliSense nebo je naleznete v dokumentaci.

Data-win-option uchovává nastavení daného prvku ve formátu JSON. V předchozí ukázce jste viděli, že jsme nastavili vlastnosti id, label, icon a tooltip.

Vzhledem k tomu, že jsou speciální, musí je něco zpracovat. To něco je JavaScript. Otevřete si soubor default.js. Na řádku 20 tohoto souboru je

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

SetPromise nám řekne, že metoda uvnitř byla asynchronně provedena, to nás zatím nemusí příliš tížit. Nyní je pro nás důležitější vědět co dělá ta volaná metoda processAll(). Metoda processAll zpracuje všechny elementy, které mají atribut data-win-control. Kdybychom tuto metodu zakomentovali, aplikační lišta nebude fungovat. Aplikační lišta bude vyhodnocena jako obyčejný div a tlačítko na aplikační liště nám zůstane jako obyčejné tlačítko.

Aplikační lišta bez ProcessAll - Tvorba Windows 8 store aplikací v JavaScriptu

DatePicker – výběr data

DatePicker je soubor tří selectů, které nám umožňují výběr data. Zapisuje se jednoduše jako element div a jako atribut data-win-control mu uvedete WinJS.UI.Date­Picker. Znalce inputů HTML možná napadá, proč je to tak složité, když by teoreticky mělo normálně fungovat

<input type="date" />

Důvodem je, že input s typem date se špatně styluje a proto se raději rozhodli udělat vlastní. Na stylování se podíváme v příštím díle.

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

V JavaScriptu pak datum z dataPickeru získáte jednoduše pomocí vlastnosti _CurrentDate, která se nachází na prvku. Pokud chcete WinJS prvek zpětně dostat do JavaScriptu, musíte si z něj vzít ještě winControl.

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

Rating - hvězdičkové hodnocení

Rating je ovládací prvek pro hodnocení. Deklaruje se opět jednoduše jako div s atributem data-win-control na hodnotě WinJS.UI.Rating. Pokud mu chcete uvést výchozí hodnotu (třeba průměr hlasů ostatních uživatelů), tak to dejte do atributu data-win-options ve formátu JSON k vlastnosti ratingAverage.

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

Uživatelské hodnocení je uloženo ve vlastnosti _userRating tohoto prvku.

var hodnoceni = document.getElementById("r").winControl._userRating
Rating Windows store aplikací - Tvorba Windows 8 store aplikací v JavaScriptu

ToggleSwitch

Toggle switch je přepínač, umožňuje vybrat jednu ze dvou hodnot. Deklaruje se jednoduše jako div s atributem data-win-control na hodnotě WinJS.UI.ToggleS­witch. Nastavovat se pak dají třeba popisky:

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

Popisky změníme jednoduše tak, že do attributu data-win-option přidáme ve formátu JSON hodnoty title pro titulek, labelOn, jako popisek pro hodnotu true a labelOff pro popisek k false.

ToogleSwitch - Tvorba Windows 8 store aplikací v JavaScriptu

Uživatelovu volbu lze získat vlastností _checked tohoto prvku:

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

No a jsem u konce tohoto dílu. V tomto díle jsem vybral 4 ovládací prvky a popsal jsem vám, jak se používají. To co jsem popisoval je značně ořezané jen na základy. V dokumentaci je toho mnohem více.

V dalším díle, WinJS - Ovládací prvky a jejich stylování, se podíváme na to, jak lze ve WinJS stylovat uživatelské prvky.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Úvod do WinJS a první aplikace
Všechny články v sekci
Tvorba Windows 8 store aplikací v JavaScriptu
Přeskočit článek
(nedoporučujeme)
WinJS - Ovládací prvky a jejich stylování
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
4 hlasů
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.
Aktivity