1. diel - Úvod do WinJS a prvej aplikácie

Vítam Vás pri tutoriálu programovanie Windows Store aplikácií pre operačný systém Windows 8.1 a mierne staršie 8. V tomto tutoriálu vás naučím využívať vlastností systému Windows 8.1 a 8. Naučím vás programovať jedinečné Modern UI aplikácie. V tutoriále budeme aplikácie tvoriť v HTML, CSS a JavaScriptu.

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

V tutoriále budem zmieňovať iba Windows 8.1. Niektoré ukážky fungujú aj pre staršiu verziu 8. Ak aktualizáciu 8.1 ešte stiahnutú nemáte, je najvyšší čas. Niektoré špecifickejšie časti budú písané len pre novšie 8.1, pretože nemá zmysel písať aplikácie pre systém, na ktorý bola uvedená aktualizácie zdarma a takmer nikto ho teda nepoužíva.

Modern UI bolo predtým nazývané Metro, ale potom sa Microsoft dostal do sporu s nemeckým obchodným reťazcom a nakoniec tu máme Modern UI.

Nebudem vám predstavovať Windows 8 ako bežnému užívateľovi, ale v tomto úvodnom diele sa pozrieme do jeho hlbín. Zistíme ako sa systém stará o našu aplikáciu, čo s tým môžeme urobiť a kde k vývoju nájsť informácie.

Windows 8

Veľkosť aplikácie

Windows Obchod aplikácie sa vyznačujú tým, že už nebeží v oknách, ale beží cez celú alebo časť obrazovky. Ako vývojári musíme počítať s rozlíšením od 1024 × 768 do 2560 × 1440. Aplikácie majú 4 hlavné zobrazovacie stavy:

Na obrázku chýba ešte režim portrét, ten je vlastne full screen otočený o 90 °. Full screen ešte často býva označovaný ako landscape. Stretnete sa s oboma názvami.

Windows 8.1 zavádza jednu podstatnú zmenu, užívateľ si môže presne rozdeliť obrazovku, takže ju môže mať napríklad 1/3, 1/4, 1/15, atď. Môže si teda presne určiť, aká veľká časť bude. Naša aplikácia by mala byť responzívne a fungovať vždy s tým, že ako použitý štýl sa nastaví ten, ktorý je najbližšie hlavným 4 stavom.

Dotykové rozhranie

Microsoft sa rozhodol zjednotiť myš, klávesnicu aj dotykové rozhranie do jedného. Zaisťuje to knižnica WinRT, ktorá beží nad našou aplikáciou. O tejto knižnici si povieme niekedy v ďalších dieloch.

Internet Explorer 11

Vo Windows 8.1 neslúži Internet Explorer len na prehliadanie internetu, je to tiež jadro k spracovaniu práve našich aplikácií, ktoré pre Windows 8 naprogramujeme v HTML, CSS a JavaScriptu. Postupne Vás s tým budem zoznamovať.

Životný cyklus aplikácie

V časoch pred príchodom Windows 8 riadil životný cyklus aplikácie užívateľ, systém sa o to vôbec nezaujímal. Teraz je situácia iná. Chod aplikácie riadi systém, užívateľovi je jedno ako sa o to postará, on sa o tom rovnako nič nedozvie. Nás ako programátorov to však zaujíma, pretože naše aplikácie sa tomu musí prispôsobiť.

Vysvetlíme si predchádzajúci obrázok: Na začiatku všetkého je aplikácia vypnutá, používateľ ju spustí tým, že klikne na jej dlaždicu (v skutočnosti ju môže zapnúť ešte inak, ale to si povieme niekedy v jednom z najbližších dielov). Aplikácia sa spustí a beží, akonáhle používateľ aplikáciu opustí, ihneď sa aplikácia presunie do režimu Suspend. To je posledný okamih, kedy môžete zachrániť užívateľské dáta pred stratou. A čo ďalej? Vypína sa vôbec niekedy aplikácie? Áno, vypína. V režime suspend je aplikácia stále v pamäti a ak sa do nej používateľ vráti, aplikácia pokračuje ďalej. Pokiaľ systému začne dochádzať pamäť, postupne začne termínový suspendované aplikácie. Aplikácia sa o tom nedozvie, systém to jednoducho urobí. Presne preto musíte používateľské dáta ukladať už v okamihu, keď aplikácia prechádza do režimu Suspend. Mohlo by sa zdať, že po prvom spustení sa všetko točí okolo troch stavov: bežiaci> suspendovaná> termínovaný a to stále dookola, ale má to jeden háčik. Keď v našu aplikácii vyskytne chyba, tak sa aplikácia vypne, čiže systém vôbec nevykoná žiadny suspend, ani terminate, ale aplikácia bude kompletne vypnutá.

Teraz už máte poňatie o základoch funkčnosti Windows Store aplikácií, pri vývoji však určite narazíte na veľa problému, samozrejme sa môžete opýtať na ITnetwork. Väčšina vecí je však ako ukážka (sample) v MSDN, celý balík ukážok si môžete stiahnuť z: http://code.msdn.microsoft.com/...-App-Samples. Ak budete vyvíjať výhradne v HTML, CSS a JavaScriptu, tak si stiahnite balíček iba pre JavaScript, ak budete vyvíjať tak rôzne, stiahnite si balíček Full.

Prvá aplikácia - Hello User

Otvorte si Visual Studio 2013. Založte si nový projekt typu Blank page zo skupiny JavaScript> Windows Store a pomenujte ho prvniAplikace:

Potvrďte.

Automaticky sa vám otvoril súbor default.js. V tomto súbore sú hlavné časti aplikácie, ktoré riadia jej správanie, neskôr si ich vysvetlíme riadok po riadku.

Teraz si otvorte Solution Explorer. Prvá položka References obsahuje referenciu Windows Library for JavaScript 2.0. To je knižnica, kde je zapísané vnútorné správanie aplikácie a jej štýly. Neskôr si to ešte vysvetlíme.

V priečinku css je teraz iba súbor default.css, v tomto štýle je len definícia štýlu pre body.

V priečinku images, sú pripravené obrázky pre dlaždice aplikácie, logá a tzv. Splashscreen. Splashscreen je obrazovka, ktorá sa zobrazí pri načítaní aplikácie.

V priečinku js je zatiaľ len súbor default.js, ten som už spomínal.

V koreňovom priečinku potom je ešte súbor default.html, ktorý je tá hlavná stránka, ktorú bude Internet Explorer vykresľovať.

Do package.appxma­nifest sa pozrieme v jednom z ďalších dielov.

Prvej aplikácie

Html

Otvorte si súbor default.html, ktorý je v koreňovom priečinku aplikácie. Uvidíte HTML našej aplikácie. Na začiatku je definícia štýlov a skriptov, ktoré sú potrebné pre beh našej aplikácie. Keď teraz skúsite aplikáciu spustiť, kliknite na tlačidlo Local Machine, uvidíte tmavú obrazovku a hore Content goes here. Už som hovoril, že aplikácia vykresľuje Internet Explorer, teraz vás však možno napadne, že Internet Explorer by to vykreslil:

1. biele pozadie
2. Čierny text
3. iné písmo

On to tak aj urobí, lenže v definícii štýlov máme link na štýl ui-dark.css, ktoré práve určí, že pozadie bude tmavé, text biely a font Sego UI. Nie každému vyhovuje tmavá a tmavá sa nehodia do všetkých aplikácií, preto je tu ešte ui-light.css. Stačí jednoducho prepísať link na štýl, skúste si, ako by stránka vyzerala bez linku, potom s tmavým štýlom a nakoniec sa svetlým. Experimentom sa medze nekladú. Ako s experimenty skončíte, vráťte link na tmavý štýl.

Do elementu body vložte nasledujúce:

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

Spustite program (klávesom F5). Uvidíte niečo takéto:

Gratulujem, vaše prvé HTML Windows Store aplikácie sa vykreslila skoro dobre. Určite sa vám však nepáči, ako je všetko hneď pri horného ľavého rohu. Layout opravíme pomocou CSS - neoddeliteľnou súčasťou vývoja týchto aplikácií.

CSS

Otvorte si súbor default.css, z priečinka css. Uvidíte tam pripravený responzívne dizajn. Toho si zatiaľ nebudeme všímať. Na koniec súboru default.css pridáme nasledujúce štýly, ktoré nám prvky lepšie rozmiestni:

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

Tento štýl odsadia hlavičku 20 pixelov od zhora a 70 zľava. Samotnú sekciu s prvkami 30 pixelov zhora a 70 pixelov zľava.

Hlavička aj sekcia už bude odsadená:

Javascript

Keď teraz kliknete na tlačidlo, nič sa nestane, to je celkom logické, keď sme ho zatiaľ nenaprogramovali.

V Solution Exploreri pridajte do zložky js súbor zdravic.js, je lepšie oddeľovať skripty.

V tomto súbore si pridáme obsluhu udalosti pre kliknutia, získame meno a vytvoríme dialóg, ktorý následne zobrazíme. Obyčajný alert nám ale fungovať nebude. Dialóg si vytvoríme pomocou špeciálnej triedy MessageDialog, ktorá vo svojom konstruktoru berie textový reťazec, ktorý sa vypíše. Tento dialóg potom musíme asynchrónne zobraziť. MessageDialog sa nachádza v Windows.UI.Popups.

Obsluha udalosti bude vyzerať nasledovne:

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 koniec, tesne pred koncový element pridajte odkaz na skript zdravic.js. Gratulujem, vaše prvé aplikácie je hotová. Aplikáciu si vyskúšajte. Potom si ešte skúste zmeniť štýly na light.

Zdrojový kód je (a vždy aj bude) priložený k stiahnutiu pod článkom, môžete tam nájsť kde ste urobili chybu.

Nabudúce sa pozrieme na špeciálne ovládacie prvky, ktoré nie sú súčasti bežného HTML.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.