1. díl - Úvod do WinJS a první aplikace

JavaScript Windows 8 aplikace Ú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:

Možné „zobrazovací stavy“ Windows 8 Store aplikace

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.

Životní cyklus aplikace Windows store

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 devbooku. 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:

Nový projekt typu Blank Page

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:

Hello User

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:

Windows Store aplikace – Hello User se stylem

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.

Příště se podíváme na speciální ovládací prvky, které nejsou součásti běžného HTML.


 

Stáhnout

Staženo 241x (33.05 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 (8 hlasů) :
55555


 



 

 

Komentáře
Zobrazit starší komentáře (8)

Avatar
Kit
Redaktor
Avatar
Kit:

Python je pěkný jazyk. Odsazování je dokonce součástí syntaxe, takže tě to i donutí psát kulturně.

Odpovědět  +2 24.7.2013 20:51
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Aplikaci musíme přiřadit styl, nebo font Segoe UI je defaultní?
Můžeme do html kódu hodit na button onclick="funkce()" nebo musím takhle přes JS?

Odpovědět 12.12.2013 21:28
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

Je ta téměř klasický internet explorer. Čili je tam nalinkovaný defaultní styl s defautním fontem Segoe UI. onclick="funkce()" samozřejmě fungovat bude, ale je to prasekód, skus se tomu vyhnout.

Odpovědět  +2 12.12.2013 21:34
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondřej Štorc:

Ahoj, mám VS 2013 Pro přes dreamware a nemam tady žádný template pro windows store, ani pro JS nevíte co s tím?

Odpovědět 28.5.2014 10:12
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovídá na Ondřej Štorc
Michal Žůrek (misaz):

Co je dreamware? Nemyslíš Dreamspark? Máš nainstalované všechny součásti?

Odpovědět 28.5.2014 10:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondřej Štorc:

Jo myslel jsem Dreamspark (nevím proč jsem napsal dreamspare..), Myslíš jako současti který se zaklikávaly při instalaci VS?

Odpovědět 28.5.2014 10:53
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovědět 28.5.2014 12:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
BlugW
Redaktor
Avatar
BlugW:

Hoj, jak je to s VS Express 2013?
Nainstaloval jsem si VS 2013 Express For Windows Update 2, ale nemam tam u templates vubec JavaScript, jen C#, VB, C++?

Dik

Odpovědět 23.6.2014 14:39
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Odpovídá na BlugW
Michal Žůrek (misaz):

Na stránkách microsoftu se píše, že tam JavaScript je, takže nemám tuchy, zkus to přeinstalovat a v instalátoru si pohlídej, že instaluješ vše.

Odpovědět 23.6.2014 14:57
Nesnáším {}, proto se jim vyhýbám.
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
BlugW:

Taky jsem se koukal že to tam píšou, a docela se divím že to tam není. Pohlídat to nejde jelikož to instaluje samo automaticky co chce, není to jak u Professionalu. Nicméně už to reinstaluju, snad to bude OK.

Odpovědět 23.6.2014 15:09
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
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 10 zpráv z 18. Zobrazit vše