Lekce 1 - Úvod do WinJS a první aplikace

Vítám vás u tutoriálu programování Windows Store aplikací pro operační systém Windows 8.1 a mírně starší 8. V tomto tutoriálu vás naučím využívat vlastností systému Windows 8.1 a 8. Naučím vás programovat jedinečné Modern UI aplikace. V tutoriálu budeme aplikace tvořit v HTML, CSS a JavaScriptu.

Tento tutoriál vyžaduje pokročilé znalosti HTML, CSS a JavaScriptu.

V tutoriálu budu zmiňovat pouze Windows 8.1. Některé ukázky fungují i pro starší verzi 8. Pokud aktualizaci 8.1 ještě staženou nemáte, je nejvyšší čas. Některé specifičtější části budou psány pouze pro novější 8.1, protože nemá smysl psát aplikace pro systém, na který byla uvedena aktualizace zdarma a téměř nikdo jej tedy nepoužívá.

Modern UI bylo dříve nazývané Metro, ale pak se Microsoft dostal do sporu s německým obchodním řetězcem a nakonec zde máme Modern UI.

Nebudu vám představovat Windows 8 jako běžnému uživateli, ale v tomto úvodním díle se podíváme do jeho hlubin. Zjistíme jak se systém stará o naši aplikaci, co s tím můžeme udělat a kde k vývoji najít informace.

Windows 8

Velikost aplikace

Windows Store aplikace se vyznačují tím, že již neběží v oknech, ale běží přes celou nebo část obrazovky. Jako vývojáři musíme počítat s rozlišením od 1024×768 do 2560×1440. Aplikace mají 4 hlavní zobrazovací stavy:

Na obrázku chybí ještě režim portrait, ten je vlastně full screen otočený o 90°. Full screen ještě často bývá označován jako landscape. Setkáte se s oběma názvy.

Windows 8.1 zavádí jednu podstatnou změnu, uživatel si může přesně rozdělit obrazovku, takže ji může mít třeba 1/3, 1/4, 1/15, atd. Může si tedy přesně určit, jak velká část bude. Naše aplikace by měla být responzivní a fungovat vždy s tím, že jako použitý styl se nastaví ten, který je nejblíže hlavním 4 stavům.

Dotykové rozhraní

Microsoft se rozhodl sjednotit myš, klávesnici i dotykové rozhraní do jednoho. Zajišťuje to knihovna WinRT, která běží nad naší aplikací. O této knihovně si řekneme někdy v dalších dílech.

Internet Explorer 11

Ve Windows 8.1 neslouží Internet Explorer jen k procházení internetu, je to také jádro k zpracování právě našich aplikací, které pro Windows 8 naprogramujeme v HTML, CSS a JavaScriptu. Postupně Vás s tím budu seznamovat.

Životní cyklus aplikace

V dobách před příchodem Windows 8 řídil životní cyklus aplikace uživatel, systém se o to vůbec nezajímal. Teď je situace jiná. Chod aplikace řídí systém, uživateli je jedno jak se o to postará, on se o tom stejně nic nedozví. Nás jako programátory to však zajímá, protože naše aplikace se tomu musí přizpůsobit.

Vysvětlíme si předchozí obrázek: Na začátku všeho je aplikace vypnutá, uživatel ji spustí tím, že klikne na její dlaždici (ve skutečnosti ji může zapnout ještě jinak, ale to si řekneme někdy v jednom z příštích dílů). Aplikace se spustí a běží, jakmile uživatel aplikaci opustí, ihned se aplikace přesune do režimu suspend. To je poslední okamžik, kdy můžete zachránit uživatelská data před ztrátou. A co dál? Vypíná se vůbec někdy aplikace? Ano, vypíná. V režimu suspend je aplikace pořád v paměti a pokud se do ní uživatel vrátí, aplikace pokračuje dál. Pokud systému začne docházet paměť, postupně začne terminovat suspendované aplikace. Aplikace se o tom nedozví, systém to prostě udělá. Přesně proto musíte uživatelská data ukládat už v okamžiku, kdy aplikace přechází do režimu suspend. Mohlo by se zdát, že po prvním spuštění se vše točí okolo tří stavů: běžící > suspendovaná > terminovaná a to pořád dokola, ale má to jeden háček. Když v naši aplikaci dojde k chybě, tak se aplikace vypne, čili systém vůbec neprovede žádný suspend, ani terminate, ale aplikace bude kompletně vypnutá.

Nyní již máte pojetí o základech funkčnosti Windows Store aplikací, při vývoji však určitě narazíte na spoustu problému, samozřejmě se můžete zeptat na ITnetwork. Většina věcí je však jako ukázka (sample) v MSDN, celý balíček ukázek si můžete stáhnout z: http://code.msdn.microsoft.com/…-App-Samples. Pokud budete vyvíjet výhradně v HTML, CSS a JavaScriptu, tak si stáhněte balíček pouze pro JavaScript, pokud budete vyvíjet tak různě, stáhněte si balíček Full.

První aplikace - Hello User

Otevřete si Visual Studio 2013. Založte si nový projekt typu Blank page ze skupiny JavaScript > Windows Store a pojmenujte ho prvniAplikace:

Potvrďte.

Automaticky se vám otevřel soubor default.js. V tomto souboru jsou hlavní části aplikace, které řídí její chování, později si je vysvětlíme řádek po řádku.

Nyní si otevřete Solution Explorer. První položka References obsahuje referenci Windows Library for JavaScript 2.0. To je knihovna, kde je zapsáno vnitřní chování aplikace a její styly. Později si to ještě vysvětlíme.

Ve složce css je nyní pouze soubor default.css, v tomto stylu je pouze definice stylu pro body.

Ve složce images, jsou připravené obrázky pro dlaždice aplikace, loga a tzv. splashscreen. Splashscreen je obrazovka, která se zobrazí při načítání aplikace.

Ve složce js je zatím jen soubor default.js, ten jsem již zmiňoval.

V kořenové složce pak je ještě soubor default.html, který je ta hlavní stránka, kterou bude Internet Explorer vykreslovat.

Do package.appxma­nifest se podíváme v jednom z dalších dílů.

První aplikace

HTML

Otevřete si soubor default.html, který je v kořenové složce aplikace. Uvidíte HTML naší aplikace. Na začátku je definice stylů a skriptů, které jsou potřeba pro běh naší aplikace. Když nyní zkusíte aplikaci spustit, klikněte na tlačítko Local Machine, uvidíte tmavou obrazovku a nahoře Content goes here. Již jsem říkal, že aplikace vykresluje Internet Explorer, teď vás však možná napadne, že Internet Explorer by to vykreslil:

1. Bílé pozadí
2. Černý text
3. Jiné písmo

On to tak i udělá, jenže v definici stylů máme link na styl ui-dark.css, které právě určí, že pozadí bude tmavé, text bílý a font Segoe UI. Ne každému vyhovuje tmavá a tmavá se nehodí do všech aplikací, proto je zde ještě ui-light.css. Stačí jednoduše přepsat link na styl, zkuste si, jak by stránka vypadala bez linku, pak s tmavým stylem a nakonec se světlým. Experimentům se meze nekladou. Jak s experimenty skončíte, vraťte link na tmavý styl.

Do elementu body vložte následující:

<header>
    <h1>Hello user!</h1>
</header>
<section>
    <input  id="txtJmeno" type="text" placeholder="Zadej své jméno" />
    <button id="btnHello">Klikni na mě</button>
</section>

Spusťte aplikaci (klávesou F5). Uvidíte něco takového:

Gratuluji, vaše první HTML Windows Store aplikace se vykreslila skoro dobře. Určitě se vám však nelíbí, jak je všechno hned u horního levého rohu. Layout opravíme pomocí CSS - nedílnou součástí vývoje těchto aplikací.

CSS

Otevřete si soubor default.css, ze složky css. Uvidíte tam připravený responzivní design. Toho si zatím nebudeme všímat. Na konec souboru default.css přidáme následující styly, které nám prvky lépe rozmístí:

header {
    margin-top:20px;
    margin-left:70px;
}
section {
    margin:30px 70px;
}

Tento styl odsadí hlavičku 20 pixelů od shora a 70 zleva. Samotnou sekci s prvky 30 pixelů shora a 70 pixelů zleva.

Záhlaví i sekce již bude odsazena:

JavaScript

Když nyní kliknete na tlačítko, nic se nestane, to je celkem logické, když jsme ho zatím nenaprogramovali.

V Solution Exploreru přidejte do složky js soubor zdravic.js, je lepší oddělovat skripty.

V tomto souboru si přidáme obsluhu události pro kliknutí, získáme jméno a vytvoříme dialog, který následně zobrazíme. Obyčejný alert nám ale fungovat nebude. Dialog si vytvoříme pomocí speciální třídy MessageDialog, která ve svém konstruktoru bere textový řetězec, který se vypíše. Tento dialog pak musíme asynchronně zobrazit. MessageDialog se nachází v Windows.UI.Popups.

Obsluha události bude vypadat následovně:

document.getElementById("btnHello").onclick = function () {
    var jmeno = document.getElementById("txtJmeno").value
    var pop = new Windows.UI.Popups.MessageDialog("Ahoj " + jmeno);
    pop.showAsync()
}

Do HTML na konec, těsně před koncový element přidejte odkaz na skript zdravic.js. Gratuluji, vaše první aplikace je hotová. Aplikaci si vyzkoušejte. Pak si ještě zkuste změnit styly na light.

Zdrojový kód je (a vždy i bude) přiložen ke stažení pod článkem, můžete tam najít kde jste udělali chybu.

V dalším díle, WinJS - Práce se základními ovládacími prvky, se podíváme na speciální ovládací prvky, které nejsou součásti běžného HTML.

 

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