5. diel - WinJS - Otváranie súborov, Pickery a protokoly -ms- *

Toto je pokračovanie minulého tutoriálu o ukladaní stave Windows 8 aplikácie vo WinJS.

Otvárania súborov

Súbor musíme spätne aj načítať. Pridajte obsluhu onclick pre btnNacti.

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

}

Najprv musíme získať súbor z dočasného priečinka.

sdilenaSlozka.getFileAsync("soubor.txt").done(function (soubor) {

}, function () {
    var dlg = new Windows.UI.Popups.MessageDialog("Soubor se nepodařilo načíst.");
    dlg.showAsync();
});

Všimnite si, že som obslúžil aj onerror. To z toho dôvodu, že užívateľ môže chcieť súbor, ktorý neexistuje. Preto mu vypíšeme chybu. V obsluhe oncompeted sa nám ako prvý parameter vrátil získaný súbor, z ktorého budeme čítať. Pre čítanie má trieda FileIO metódu ReadAllText ().

var obsahSouboru = Windows.Storage.FileIO.readTextAsync(soubor).done(function (obsahSouboru) {
    textArea.value = obsahSouboru;
});

V oncompleted sa nám ako prvý parameter vrátil obsah súboru. Ten užívateľovi vložíme do textarea. Ako vidíte, ani ukladanie ani otváranie súborov nie je žiadna veda.

Pickery a manipulácia so súbormi

Keďže nemáme veľa miest, kam môžeme sami zasahovať, môže sa nám hodiť, aby nám užívateľ odovzdal súbor, ktorý môžeme upravovať a manipulovať s ním. Skrátka s ním pracovať ako by bol v miestach, kde máme plný prístup. K výberu takéhoto súboru slúži tzv. Pickery. Picker je vlastne taký dialóg.

Picker pre otvorenie súboru

Pickery sa nachádzajú v Windows.Stora­ge.Pickers. Nachádza sa tu Picker pre otvorenie súboru, uloženie súboru a pre výber zložky. Ako ukážku si urobíme aplikácie, ktoré pomocou Picker odovzdáte obrázok a ona si ho prekopíruje do AppData.

Do HTML si pridajte tlačidlo (id = "btnVyberObrazek"). Do scriptu mu pridajte obsluhu pre onclick. V obsluhe deklarujte picker pre otvorenie súboru.

var picker = new Windows.Storage.Pickers.FileOpenPicker();

Picker musíme povedať aké prípony sú povolené. Jednoducho ich pridáte do poľa fileTypeFIlter. V našej ukážke budeme potrebovať obrázok jpg.

picker.fileTypeFilter.push(".jpg");

Metódou pickSingleFileAsync () zobrazíme dialóg a asynchrónne počkáme, kým používateľ nevyberie jeden súbor. Ďalej je tam metóda pickMultipleFi­leAsync (), ktorá umožní výber viacerých súborov naraz. Na tieto metódy môžete obslúžiť oncompleted, do ktorého ako prvý parameter bude odovzdaný vybraný súbor.

picker.pickSingleFileAsync().done(function (vybranyObrazek) {

});

V obsluhu done súbor skopírujeme. Jednoducho na vybraný obrázok zavoláme metódu copyAsync (). Tejto metóde ako parameter odovzdáme zložku, kam chceme súbor kopírovať. Metóda copyAsync nám do done ako prvý parameter vracia nový súbor.

vybranyObrazek.copyAsync(sdilenaSlozka).done(function (novyObrazek) {

});

Užívateľom odovzdaný obrázok môže mať rôzny názov, preto si ho v dočasnej zložke premenujeme na tvujObrazek.jpg. Jednoducho v done kopírovanie na kopírovaný obrázok zavoláme RenameAsync a keďže už taký obrázok v tejto zložke môže byť, povieme, že chceme prepísať existujúce.

novyObrazek.renameAsync("tvujObrazek.jpg", prepisExistujici).done(function () {

});

Táto metóda nám v done opäť vracia ako prvý parameter nový obrázok.

Aplikáciu si vyskúšajte.

Picker pre uloženie súboru

Používateľovi dovolíme jeho obrázok aj spätne uložiť. Pridajte si do aplikácie tlačidlo (id = "btnUlozObrazek") a v scriptu mu pridajte obsluhu onclick. V obsluhe deklarujte picker a povoľte príponu jpg.

var picker = new Windows.Storage.Pickers.FileSavePicker()
picker.fileTypeChoices.insert("Obrázek jpg", [".jpg"])

Asynchrónne prezrite dialóg metódou pickSaveFileAsync (), ktorá v obsluhe oncompleted vracia súbor, do ktorého môžeme následne zapisovať.

picker.pickSaveFileAsync().done(function (soubor) {

});

Súbor prepíšte obrázkom.

sdilenaSlozka.getFileAsync("tvujObrazek.jpg").done(function (obrazekKUlozeni) {
    obrazekKUlozeni.copyAndReplaceAsync(soubor);
});

Metódu copyAndReplaceAsync () sme si ešte nevysvetlili. Nerobí nič iné, než že kopíruje obrázok a ak už existuje, tak ho prepíše.

Protokoly -ms- *

Keďže potrebujeme často načítavať dáta zo špeciálnych zložiek, zaviedol nám Microsoft špeciálne protokoly začínajúcich -ms-. Tieto protokoly sa hodí, keď potrebujeme načítať treba obrázok (v HTML) z AppData. Medzi najpoužívanejšími sú protokoly -MS-appx, ktorý odkazuje do zložky našej aplikácie a -MS-appdata, ktorý zas do AppData. U AppData ešte musíme stanoviť či chceme do lokálnych alebo zdieľaných.

Pridajte do HTML obrázok a ako src mu nastavte ms-appx: ///images/logo.png. Teraz odkazuje do zložky, ktorú môžete vidieť v Solution Exploreri. Odkazuje teda na obrázok logo.png, ktorý sa zobrazuje na našej dlaždicu. Keď aplikáciu spustíte, na obrázku sa zobrazí naše dlaždice.

Teraz ešte nadviažeme na našu predchádzajúcu ukážku (tú s Pickery). Pridajte ďalší obrázok (id = "yourImage") a src mu nastavte ms-appdata: ///roaming/tvu­jObrazek.jpg. Táto cesta odkazuje do AppData do zdieľanej zložky k obrázku, ktorý nám vybral používateľ.

Tento obrázok sa však načíta iba po spustení aplikácie. Keď používateľ vyberie nový obrázok, obrázok sa nezaktualizuje. Možno to však pomerne jednoducho vyriešiť. Prejdite do scriptu a do predpripravené obsluhy oncompleted premenovanie vybraného obrázku pridajte, že sa má nastaviť nový src obrázka a ako parameter posielaný "servera" sa použije aktuálny dátum, čím bude vždy odlišný a obrázok sa zaktualizuje.

document.getElementById("yourImage").src = "ms-appdata:///roaming/tvujObrazek.jpg?" + new Date().getTime();

Aplikáciu vyskúšajte.

No a to je k tomuto nabitějšímu dvojdílu všetko. Videli ste veľa vecí, ktoré sa v praxi celkom často využívajú. Nabudúce sa pozrieme na nastavenie, ktoré môžeme zobraziť v aplikácii, ono to tlačidlo v paneli sharm tam nie je len tak zo srandy králikom

 

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