Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 5 - WinJS - Otevíraní souborů, pickery a protokoly -ms-*

V předchozí lekci, WinJS - Ukládaní stavu aplikace a práce se soubory, jsme si ukázali, jak lze ukládat stav Windows 8 aplikace ve WinJS.

Dnes se zaměříme na otevíraní souborů, pickery a protokoly -ms-*.

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 - Tvorba Windows 8 store aplikací v JavaScriptu

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 - Tvorba Windows 8 store aplikací v JavaScriptu

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

V další lekci, WinJS - Nastavení a fotoaparát, se podíváme na nastavení, které můžeme zobrazit v aplikaci.


 

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
WinJS - Ukládaní stavu aplikace a práce se soubory
Všechny články v sekci
Tvorba Windows 8 store aplikací v JavaScriptu
Přeskočit článek
(nedoporučujeme)
WinJS - Nastavení a fotoaparát
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
4 hlasů
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.
Aktivity