2. díl - WinJS - Práce se základními ovládacími prvky

JavaScript Windows 8 aplikace WinJS - Práce se základními ovládacími prvky

V minulém dílu seriálu tutoriálů pro tvorbu Windows 8.1 aplikací v JavaScriptu 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 však 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

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í

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

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í

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

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 příštím dílu se podíváme na stylování těchto prvků.


 

Stáhnout

Staženo 139x (32.57 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?
Celkem (3 hlasů) :
55555


 



 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!