Lekce 4 - WinJS - Ukládaní stavu aplikace a práce se soubory

V minulém díle, WinJS - Ovládací prvky a jejich stylování, jsme si ukázali jak lze ve WinJS stylovat uživatelské prvky.

Abychom udělali "dokonalou aplikaci", dává nám Microsoft takový dobrý tip, že tam kde uživatel skončí, tam musí pokračovat a když skončí na tabletu, tak proč by nemohl pokračovat na svém počítači?

V tomto dílu si vysvětlíme jak zapsat data do "registru", do AppData, jak pracovat s pickery a speciálními protokoly. Nedílnou součástí tohoto článku bude práce se soubory. Vzhledem k rozsáhlosti je tento článek rozdělen na dva díly.

Kam můžeme data ukládat

Na úvod si řekneme, kam všude můžeme, jelikož systém Windows byl navržen s ohledem na bezpečnost koncového uživatele. Je asi zřejmé, že si nemůžeme ukládat co chceme a kam chceme. Máme tedy na výběr několik míst, kam si můžeme zapisovat naše soubory. Uživatel o nich většinou neví a tak ani nemusíme příliš řešit jeho zásahy do těchto míst.

Lokálně × SkyDrive

Většinou jsou k dispozici jak lokální úložiště, tak i na SkyDrive. Výhoda SkyDrive je asi jasná, data budou automaticky synchronizována se všemi počítači našeho uživatele. Lokální úložiště také není k přímo k zahození, třeba například logy je asi zbytečné sdílet.

Ukládání stavu aplikace

Jelikož chceme umožnit uživateli po opětovném spuštění aplikace pokračovat v jeho předchozí činnosti, je potřeba si stav aplikace ukládat. Stav aplikace budeme ukládat na SkyDrive, docílíme tím toho, že naše aplikace bude synchronizována se všemi zařízeními uživatele. Když si například rozepíše dokument na počítači, a otevře naši aplikaci na tabletu, posledně upravovaný dokument (na počítači) se mu zobrazí na tabletu.

Ukládání stavu aplikace si ukážeme na jednoduchém příkladu. Založte si nový projekt. V naší ukázce budeme mít input typu range s maximem 100, inputu přidejte identifikátor "r".

Přesuňte se do scriptu default.js, všimněte si obsluh události pro onactivated a oncheckpoint. Tyto obsluhy nám říkají, že byla aplikace buďto ukončená (přesunuta do suspendu) nebo spuštěna. A zde je místo, kde právě můžeme načítat a ukládat stav naší aplikace.

Ukládání

Ukládá se jednoduše, nejprve si nadefinujeme náš registr s nastavením. Registr se nachází v Windows.Stora­ge.Application­Data.current, zde pro nás ale zatím nic není, naše registry se nachází buďto v localSettings, nebo roamingSettings. Rozdíl je jenom v tom že, local se nesdílí, zatímco roaming se sdílí se SkyDrive.

Registr pak má vlastnost values a ta je polem našich uložených hodnot.

K definicím proměnných (před app.onactivated) - přidejte proměnnou registru, abychom ho nemuseli pořád vypisovat.

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

do oncheckpoint, tedy obsluhu události pro přesunu aplikace k suspendu, přidejte následující kód:

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

V tomto jednoduchém kódu jsme si získali naši hodnotu k uložení a následně ji zapsali do registru k vlastnosti "Range value", zde ji pak taky zpětně najdeme.

Načítání

Načítání jsem již nakousl v minulém odstavci, zase máme naše pole s "Range value" a tam najdeme uloženou hodnotu. Zde si však musíte dávat pozor, protože při prvním spuštění, tam žádná hodnota nebude! Do onactivated za načtení WinJS prvků (args.setPromi­se(WinJS.UI.pro­cessAll());) přidejte následující kód.

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

Nejprve si načteme hodnotu, pak zjistíme, jestli v ní vůbec něco je a pokud ano, tak ji předáme našemu inputu.

Testování

Abychom se ujistili, že to funguje, spustíme aplikaci. Změníme hodnotu v inputu a teď pozor - pokud se vrátíte do Visual Studia a stisknete Stop Debuging, aplikace se vypne okamžitě a žádný suspend se neprovede. Toto se může stát pouze při vývoji aplikace, ale nikdy na to nemůžete spoléhat, protože co když uživateli počítače vypadne proud, provede se snad nějaký suspend? To je stejný případ. Ale zpátky k testování. Pokud chcete, aby se suspend provedl, máme zde několik možností. Jedinou možností je, že se normálně vrátíte do Visual Studia a na panelu standart stisknete tlačítko suspend. Všimněte si dalších možností tohoto tlačítka.

Aplikaci vyzkoušejte.

Ukládání vlastních souborů

Někdy nám nestačí ukládat jen prostý klíč->hodnota, ale potřebujeme si to uložit do souboru ve svém formátu. Microsoft nám vyhradil několik složek v AppData, které jsou určené naší aplikaci. HTML5 nám zavádí API pro práci se soubory. To ale funguje jenom tak, že můžeme stroze manipulovat se souborem, který nám zadal uživatel. To asi není zrovna to, co hledáme. Microsoft nám připravil ve Windows.Storage několik tříd, které se nám pro tuto práci budou hodit.

V naší ukázkové aplikaci si připravte jednu textAreu (id="t") a dvě tlačítka pro uložení a načtení obsahu ze souboru (id="btnUloz" a id="btnNacti"). Přidejte script, ve kterém to budeme obsluhovat a přejděte do tohoto scriptu. Vytvořte obsluhu události pro onclick tlačítka btnUloz.

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

}

Nyní budeme potřebovat pracovat se složkou AppData, tu získáte pomocí Windows.Stora­ge.Application­Data.current.ro­amingFolder, samozřejmě je zde možnost localFolder, která se nesdílí se SkyDrive. Na začátek souboru si přidejte proměnnou pro AppData složku, pojmenujte ji sdilenaSlozka.

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

Dále ještě přidejte definici, že budeme přepisovat existující soubor. Jelikož ji budeme hojně používat (do spousty metod), přiřadíme si ji do proměnné.

var prepisExistujici = Windows.Storage.CreationCollisionOption.replaceExisting;

Do naší obsluhy si získejte obsah textArea.

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

Do obsluhy přidejte následující kód:

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

Začátek je jasný, ve sdílené složce (AppData) vytvoříme asynchronně soubor "soubor.txt" a řekneme mu, že má přepsat existující. Všimněte si pak konstrukce .done. Ta určuje, co se má stát po dokončení, při chybě a při zpracovávání. Jsou to jakési obsluhy události. Nejvíc asi budeme používat obsluhu pro dokončení. Mnohdy jsou i několikrát do sebe vnořené, protože kdybychom je nechali udělat za sebou:

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

V tomto případě by se občas kód vykonal správně a občas bychom (na druhém řádku) dostali vyhubováno, že žádný soubor.txt neexistuje. Otázkou je proč, když jsme ho o řádek výš vytvořili? Důvod je ten, že se to dělá asynchronně. Obě operace se dělají víceméně zároveň a občas se prostě soubor nestihne vytvořit. Ten druhý důvod je nepohodlnost, kde jsme pro druhou metodu získali onen soubor? Soubor se přeci vracel v parametru obsluhy oncompleted u done.

První varianta (kód s done) je správně a pište vždy jen ji. Spusťte aplikaci, napište něco do textArea a stiskněte tlačítko uložit. Obsah textArea se uložil do textového souboru v AppData a jak si na něj najde systém čas, bude nasdílen i na SkyDrive. Vzhledem k tomu, že občas nevíte, jestli se uložil správně, tak vám ještě řeknu, kde ho najdete. Stiskněte na klávesnice Win + R, napište %appdata%, potvrďte. Vraťte se o úroveň výše a přejděte do složky Local\Packages. Ve Solution Exploreru (z Visual Studia) se podívejte do package.appxma­nifest na záložku Packaging. Uvidíte tam jedinečné ID naší aplikace v AppData\Packages, tuto složku otevřete.

Tip: Abyste našli složku rychleji, seřaďte si složky podle data změny.

V naší AppData složce se nachází několik složek, co za nás vytvořil Windows. Podívejte se do složky RoamingState. Zde uvidíte soubor soubor.txt, když ho otevřete, uvidíte text, který jste zapsali v aplikaci. Ukázkové soubory najdete pod tímto článkem.

V dalším díle, WinJS - Otevíraní souborů, pickery a protokoly -ms-*, si ukážeme jak soubory otevírat, jak pracovat s pickery a speciální protokoly -ms-*.

 

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