4. diel - WinJS - Vyrubenie stavu aplikácie a práca so súbormi

V minulom dieli sme si ukázali ako možno vo WinJS stylovať užívateľské prvky. Dnes sa pozrieme na niečo iné. Aby sme urobili onú "dokonalú aplikáciu", dáva nám Microsoft taký dobrý tip, že tam kde užívateľ skončí, tam musí pokračovať a keď skončí na tabletu, tak prečo by nemohol pokračovať na svojom počítači?

V tomto dieli si vysvetlíme ako zapísať dáta do "registra", do AppData, ako pracovať s Pickery a špeciálnymi protokoly. Neoddeliteľnou súčasťou tohto článku bude práca so súbormi. Vzhľadom na rozsiahlosť je tento článok rozdelený na dva diely.

Kam môžeme dáta ukladať

Na úvod si povieme, kam všade môžeme, pretože systém Windows bol navrhnutý s ohľadom na bezpečnosť koncového užívateľa. Je asi zrejmé, že si nemôžeme ukladať čo chceme a kam chceme. Máme teda na výber niekoľko miest, kam si môžeme zapisovať naše súbory. Užívateľ o nich väčšinou nevie a tak ani nemusíme príliš riešiť jeho zásahy do týchto miest.

Lokálne × SkyDrive

Väčšinou sú k dispozícii ako lokálne úložisko, tak i na SkyDrive. Výhoda SkyDrive je asi jasná, dáta budú automaticky synchronizovaná so všetkými počítačmi nášho užívateľa. Lokálne úložisko tiež nie je na priamo na zahodenie, treba napríklad logami je asi zbytočné zdieľať.

Ukladanie stavu aplikácie

Keďže chceme umožniť užívateľovi po opätovnom spustení aplikácie pokračovať v jeho predchádzajúcej činnosti, je potrebné si stav aplikácie ukladať. Stav aplikácie budeme ukladať na SkyDrive, docielime tým toho, že naša aplikácia bude synchronizovaná so všetkými zariadeniami používateľa. Keď si napríklad rozpíše dokument na počítači, a otvorí našu aplikáciu na tabletu, posledne upravovaný dokument (na počítači) sa mu zobrazí na tabletu.

Ukladanie stavu aplikácie si ukážeme na jednoduchom príklade. Založte si nový projekt. V našej ukážke budeme mať input typu range s maximom 100, inputu pridajte identifikátor "r".

Presuňte sa do scriptu default.js, všimnite si obslúh udalosti pre onactivated a oncheckpoint. Tieto obsluhy nám hovoria, že bola aplikácia buď ukončená (presunutá do Suspend) alebo spustená. A tu je miesto, kde práve môžeme načítať a ukladať stav našej aplikácie.

Ukladanie

Ukladá sa jednoducho, najprv si zadefinujeme náš register s nastavením. Register sa nachádza v Windows.Stora­ge.Application­Data.current, tu pre nás ale zatiaľ nič nie je, naša registre sa nachádza buď v localSettings, alebo roamingSettings. Rozdiel je len v tom že, local sa nezdieľa, zatiaľ čo roaming sa zdieľa so SkyDrive.

Register potom má vlastnosť values a tá je poľom našich uložených hodnôt.

K definíciám premenných (pred app.onactivated) - pridajte premennú registra, aby sme ho nemuseli stále vypisovať.

var sdileneNastaveni = Windows.Storage.ApplicationData.current.roamingSettings

do oncheckpoint, teda obsluhu udalosti pre presunu aplikácie k Suspend, pridajte nasledujúci kód:

var hodnotaRange = document.getElementById("r").value;
sdileneNastaveni.values["Range value"] = hodnotaRange;

V tomto jednoduchom kóde sme si získali našu hodnotu na uloženie a následne ju zapísali do registra k vlastnosti "Range value", tu ju potom taky spätne nájdeme.

Načítanie

Načítanie som už načal v minulom odseku, zase máme naše polia s "Range value" a tam nájdeme uloženú hodnotu. Tu si však musíte dávať pozor, pretože pri prvom spustení, tam žiadna hodnota nebude! Do onactivated za načítanie WinJS prvkov (args.setPromise (WinJS.UI.pro­cessAll ());) pridajte nasledujúci kód.

var hodnotaRange = sdileneNastaveni.values["Range value"];
if (hodnotaRange) {
    document.getElementById("r").value = hodnotaRange;
}

Najprv si načítame hodnotu, potom zistíme, či v nej vôbec niečo je a ak áno, tak ju odovzdáme nášmu inputu.

Testovanie

Aby sme sa uistili, že to funguje, spustíme aplikáciu. Zmeníme hodnotu v inputu a teraz pozor - ak sa vrátite do Visual Studia a stlačíte Stop Debuging, aplikácie sa vypne okamžite a žiadny suspend sa nevykoná. Toto sa môže stať iba pri vývoji aplikácie, ale nikdy na to nemôžete spoliehať, pretože čo ak užívateľovi počítača vypadne prúd, vykoná sa snáď nejaký suspend? To je rovnaký prípad. Ale späť k testovaniu. Ak chcete, aby sa suspend vykonal, máme tu niekoľko možností. Jedinou možnosťou je, že sa normálne vrátite do Visual Studia a na paneli standart stlačíte tlačidlo suspend. Všimnite si ďalších možností tohto tlačidla.

Aplikáciu vyskúšajte.

Ukladanie vlastných súborov

Niekedy nám nestačí ukladať len prostý kľúč-> hodnota, ale potrebujeme si to uložiť do súboru vo svojom formáte. Microsoft nám vyhradil niekoľko zložiek v AppData, ktoré sú určené našej aplikácii. HTML5 nám zavádza API pre prácu so súbormi. To ale funguje iba tak, že môžeme stroho manipulovať so súborom, ktorý nám zadal užívateľ. To asi nie je práve to, čo hľadáme. Microsoft nám pripravil v Windows.Storage niekoľko tried, ktoré sa nám pre túto prácu budú hodiť.

V našej ukážkovej aplikácii si pripravte jednu TEXTAREA (id = "t") a dve tlačidlá pre uloženie a načítanie obsahu zo súboru (id = "btnUloz" a id = "btnNacti"). Pridajte script, v ktorom to budeme obsluhovať a prejdite do tohto scriptu. Vytvorte obsluhu udalosti pre onclick tlačidla btnUloz.

document.getElementById("btnUloz").onclick = function () {

}

Teraz budeme potrebovať pracovať so zložkou AppData, tú získate pomocou Windows.Stora­ge.Application­Data.current.ro­amingFolder, samozrejme je tu možnosť localFolder, ktorá sa nedelí sa SkyDrive. Na začiatok súboru si pridajte premennú pre AppData zložku, pomenujte ju sdilenaSlozka.

var sdilenaSlozka = Windows.Storage.ApplicationData.current.roamingFolder

Ďalej ešte pridajte definíciu, že budeme prepisovať existujúci súbor. Keďže ju budeme hojne používať (do spústy metód), priradíme si ju do premennej.

var prepisExistujici = Windows.Storage.CreationCollisionOption.replaceExisting;

Do našej obsluhy si získajte obsah textarea.

var obsahKZapsani = document.getElementById("t").innerText

Do obsluhy pridajte nasledujúci kód:

sdilenaSlozka.createFileAsync("soubor.txt", prepisExistujici).done(function (soubor) {
    Windows.Storage.FileIO.writeTextAsync(soubor, obsahKZapsani);
});

Začiatok je jasný, v zdieľanej zložke (AppData) vytvoríme asynchrónne súbor "file.txt" a povieme mu, že má prepísať existujúci. Všimnite si potom konštrukcie .done. Tá určuje, čo sa má stať po dokončení, pri chybe a pri spracovávaní. Sú to akési obsluhy udalosti. Najviac asi budeme používať obsluhu pre dokončenie. Veľakrát sú aj niekoľkokrát do seba vnorené, pretože keby sme ich nechali urobiť za sebou:

sdilenaSlozka.createFileAsync("soubor.txt", prepisExistujici)
Windows.Storage.FileIO.writeTextAsync(soubor, obsahKZapsani)

V tomto prípade by sa občas kód vykonal správne a občas by sme (na druhom riadku) dostali vyhubováno, že žiadny file.txt neexistuje. Otázkou je prečo, keď sme ho o riadok vyššie vytvorili? Dôvod je ten, že sa to robí asynchrónne. Obe operácie sa robia viacmenej zároveň a občas sa jednoducho súbor nestihne vytvoriť. Ten druhý dôvod je nepohodlnosť, kde sme pre druhú metódu získali onen súbor? Súbor sa predsa vracal v parametri obsluhy oncompleted u done.

Prvý variant (kód s done) je správne a píšte vždy len ju. Spustite aplikáciu, napíšte niečo do textarea a stlačte tlačidlo uložiť. Obsah TEXTAREA sa uložil do textového súboru v AppData a ako si na neho nájde systém čas, bude nazdieľaný aj na SkyDrive. Vzhľadom k tomu, že občas neviete, či sa uložil správne, tak vám ešte poviem, kde ho nájdete. Stlačte na klávesnice Win + R, napíšte% appdata%, potvrďte. Vráťte sa o úroveň vyššie a prejdite do priečinka Local \ Packages. Vo Solution Exploreru (z Visual Studia) sa pozrite do package.appxma­nifest na záložku Packaging. Uvidíte tam jedinečné ID našej aplikácie v AppData \ Packages, tento priečinok otvorte.

Tip: Aby ste našli zložku rýchlejšie, zoraďte si zložky podľa dátumu zmeny.

V našej AppData zložke sa nachádza niekoľko zložiek, čo za nás vytvoril Windows. Pozrite sa do zložky RoamingState. Tu uvidíte súbor file.txt, keď ho otvoríte, uvidíte text, ktorý ste zapísali v aplikácii.

V pokračovaní tohto dielu si ukážeme ako súbory otvárať, ako pracovať s Pickery a špeciálne protokoly -ms- *. Ukážkové súbory nejdete pod pokračovaním tohto článku.

 

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