5. díl - WinJS - Otevíraní souborů, pickery a protokoly -ms-*

JavaScript Windows 8 aplikace WinJS - Otevíraní souborů, pickery a protokoly -ms-*

Toto je pokračování minulého tutoriálu o ukládání stavu Windows 8 aplikace ve WinJS.

Otevíraní souborů

Soubor musíme zpětně i načíst. Přidejte obsluhu onclick pro btnNacti.

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

}

Nejprve musíme získat soubor z dočasné složky.

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

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

Všimněte si, že jsem obsloužil i onerror. To z toho důvodu, že uživatel může chtít soubor, který neexistuje. Proto mu vypíšeme chybu. V obsluze oncompeted se nám jako první parametr vrátil získaný soubor, ze kterého budeme číst. Pro čtení má třída FileIO metodu ReadAllText().

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

V oncompleted se nám jako první parametr vrátil obsah souboru. Ten uživateli vložíme do textArea. Jak vidíte, ani ukládaní ani otevíraní souborů není žádná věda.

Pickery a manipulace se soubory

Jelikož nemáme mnoho míst, kam můžeme sami zasahovat, může se nám hodit, aby nám uživatel předal soubor, který můžeme upravovat a manipulovat s ním. Zkrátka s ním pracovat jako by byl v místech, kde máme plný přístup. K výběru takového souboru slouží tzv. Pickery. Picker je vlastně takový dialog.

Picker pro výběr obrázku ve Windows 8

Picker pro otevření souboru

Pickery se nacházejí v Windows.Stora­ge.Pickers. Nachází se zde Picker pro otevření souboru, uložení souboru a pro výběr složky. Jako ukázku si uděláme aplikace, které pomocí pickeru předáte obrázek a ona si ho překopíruje do AppData.

Do HTML si přidejte tlačítko (id="btnVyberO­brazek"). Do scriptu mu přidejte obsluhu pro onclick. V obsluze deklarujte picker pro otevření souboru.

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

Pickeru musíme říci jaké přípony jsou povolené. Jednoduše je přidáte do pole fileTypeFIlter. V naší ukázce budeme potřebovat obrázek jpg.

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

Metodou pickSingleFile­Async() zobrazíme dialog a asynchronně počkáme, dokud uživatel nevybere jeden soubor. Dále je tam metoda pickMultipleFi­leAsync(), která umožní výběr více souborů najednou. Na tyto metody můžete obsloužit oncompleted, do kterého jako první parametr bude předán vybraný soubor.

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

});

V obsluze done soubor zkopírujeme. Jednoduše na vybraný obrázek zavoláme metodu copyAsync(). Této metodě jako parametr předáme složku, kam chceme soubor kopírovat. Metoda copyAsync nám do done jako první parametr vrací nový soubor.

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

});

Uživatelem předaný obrázek může mít různý název, proto si ho v dočasné složce přejmenujeme na tvujObrazek.jpg. Jednoduše v done kopírovaní na kopírovaný obrázek zavoláme RenameAsync a jelikož již takový obrázek v této složce může být, řekneme, že chceme přepsat stávající.

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

});

Tato metoda nám v done opět vrací jako první parametr nový obrázek.

Aplikaci si vyzkoušejte.

Picker pro uložení souboru

Uživateli dovolíme jeho obrázek i zpětně uložit. Přidejte si do aplikace tlačítko (id="btnUlozO­brazek") a v scriptu mu přidejte obsluhu onclick. V obsluze deklarujte picker a povolte příponu jpg.

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

Asynchronně zobrazte dialog metodou pickSaveFileA­sync(), která v obsluze oncompleted vrací soubor, do kterého můžeme následně zapisovat.

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

});

Soubor přepište obrázkem.

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

Metodu copyAndReplace­Async() jsme si ještě nevysvětlili. Nedělá nic jiného, než že kopíruje obrázek a pokud už existuje, tak ho přepíše.

Protokoly -ms-*

Jelikož potřebujeme často načítat data ze speciálních složek, zavedl nám Microsoft speciální protokoly začínající -ms-. Tyto protokoly se hodí, když potřebujeme načíst třeba obrázek (v HTML) z AppData. Mezi nejpoužívanějšími jsou protokoly -ms-appx, který odkazuje do složky naší aplikace a -ms-appdata, který zas do AppData. U AppData ještě musíme stanovit zda chceme do lokálních nebo sdílených.

Přidejte do HTML obrázek a jako src mu nastavte ms-appx:///images/lo­go.png. Nyní odkazuje do složky, kterou můžete vidět v Solution Exploreru. Odkazuje tedy na obrázek logo.png, který se zobrazuje na naší dlaždici. Když aplikaci spustíte, na obrázku se zobrazí naše dlaždice.

Dlaždice ve Windows 8 aplikaci

Teď ještě navážeme na naši předchozí ukázku (tu s pickery). Přidejte další obrázek (id="yourImage") a src mu nastavte ms-appdata:///ro­aming/tvujObra­zek.jpg. Tato cesta odkazuje do AppData do sdílené složky k obrázku, který nám vybral uživatel.

Tento obrázek se však načte jen po spuštění aplikace. Jakmile uživatel vybere nový obrázek, obrázek se nezaktualizuje. Lze to však poměrně jednoduše vyřešit. Přejděte do scriptu a do předpřipravené obsluhy oncompleted přejmenování vybraného obrázku přidejte, že se má nastavit nový src obrázku a jako parametr posílaný "serveru" se použije aktuální datum, čímž bude vždy odlišný a obrázek se zaktualizuje.

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

Aplikaci vyzkoušejte.

No a to je k tomuto nabitějšímu dvojdílu vše. Viděli jste spoustu věcí, které se v praxi celkem často využívají. Příště se podíváme na nastavení, které můžeme zobrazit v aplikaci, ono to tlačítko v panelu sharm tam není jen tak ze srandy králíkům :)


 

Stáhnout

Staženo 143x (55.13 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (2)

Č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 (3 hlasů) :
4444 4


 



 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!