Lekce 6 - WinJS - Nastavení a fotoaparát

V předchozím díle, WinJS - Otevíraní souborů, pickery a protokoly -ms-*, jsme si ukázali jak soubory otevírat, jak pracovat s pickery a speciální protokoly -ms-*.

V starších Windows to fungovalo tak, že když jste chtěli do aplikace dostat nastavení, tak jste si to museli implementovat po svém. To bylo samozřejmě únavné a navíc z toho byli uživatelé zmatení, když se každá aplikace nastavovala jinak. Ve Windows 8 Microsoft zavedl jednotné nastavení, které je pro všechny moderní aplikace stejné. Nastavení je v panelu Sharm pod "nastavení", každá aplikace tam má automaticky položku hodnocení, recenze a oprávnění. Hodnocení a recenze vás přesune do Windows Store, kde aplikaci můžete ohodnotit. Oprávnění umožňuje nastavit co aplikace smí a nesmí dělat. V tomto dílu si ukážeme jak si vložit vlastní nastavení a jak pracovat s kamerou.

Vlastní nastavení

Abychom uživateli umožnili něco nastavit, musíme mu nejprve nastavení připravit. Nejprve musíme odchytit aplikaci událost onsettings, která nám vrátí jako první parametr e, ve kterém jsou datail.applicationcommands. To jsou hodnoty ve formátu JSON. V tomto JSONu je pak idNastaveni : JSON s hodnotami. V tom druhém JSONu jsou pak hodnoty, title pro název a href pro odkaz se stránkou, na které je pak nastavení. Nakonec musíme nastavení aplikovat, prostě zavoláme WinJS.UI.SettingsFlyout.populateSettings() a jako jediný parametr předáme "éčko".

Vytvořte si aplikaci nastaveni a do default.js přidejte kód, který shrne předchozí odstavec.

app.onsettings = function (e) {
    e.detail.applicationcommands = {
        "NastaveniAplikace": { title: 'Nastavení aplikace', href: '/appsettings.html' },
        "NastaveniVzhledu": { title: 'nastavení vzhledu', href: '/stylesettings.html' }
    }
    WinJS.UI.SettingsFlyout.populateSettings(e)
}

Definoval jsem dvě volby nastavení, které odkazují na soubory, které za chvíli přidáme. Jedno bude nastavení aplikace a druhé vzhledu.

Přidejte soubor appsettings.html. A do záhlaví mu dejte styl definující že element p a h1 bude mít černou barvu písma.

<style>
    h1, p {
        color:black;
    }
</style>

WinJS.UI.SettingsFlyout

SettingsFlyout je takový panel určený speciálně pro nastavení. Vytvoříme ho jednoduše tím, že přidáme div a k němu atribut data-win-control s hodnotou WinJS.UI.SettingsFlyout. Dále mu musíme předat nastavení (opět k atributu data-win-options ve formátu JSON). Jako vlastnost můžeme použít Width, které se přiřadí jedna ze speciálních hodnot, mezi které patří například medium nebo wide. Tato vlastnost nastavuje šířku panelu. Dále tam je vlastnost settingsCommandId, které musíme dát id, které jsme definovali k nastavení aplikace (viz výše).

<div data-win-control="WinJS.UI.SettingsFlyout"
    data-win-options="{ settingsCommandId: 'NastaveniAplikace', width: 'medium'}">
</div>

Do tohoto divu teď můžete dávat běžné prvky HTML (i WinJS) a s těmi dále pracovat. Ještě si přidejte soubor stylesettings.html. Zde si ukážeme jak s nimi pracovat a obsluhovat jejich změny.

Do souboru stylesettings.html si přidejte následující kód HTML.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            h1, p {
                color:black;
            }
        </style>
    </head>
    <body>
        <div data-win-control="WinJS.UI.SettingsFlyout"
            data-win-options="{ settingsCommandId: 'NastaveniVzhledu', width: 'medium'}">
            <h1>Nastavení vzhledu</h1>
            <p>Vyberte si zdali chcete mít aplikaci světlou nebo tmavou.</p>
            <select id="selStyl">
                <option value="light">Světlý</option>
                <option value="dark" selected>Tmavý</option>
            </select>
        </div>
        </body>
</html>

Definice vlastní WinJS funkce

Zde se nachází jeden zásadní problém - jak změnit stav jednoho dokumentu, když vlastně máme zobrazené dva (hlavní a nastavení)? Jediné, co víme, je, že vždy máme objekt WinJS a jelikož máme JavaScript, můžeme si definovat vlastní funkci v něm. Přejděte do souboru default.js a definujte vlastní WinJS funkci zmenStyl. Než se na ní vrhneme, ještě doplňte ID definic stylu (light nebo dark).

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" id="definiceStylu" />

Teď se vraťte k naší definici WinJS funkce a naprogramujte ji tak, aby z parametru styl upravila definici stylu.

WinJS.zmenStyl = function (styl) {
    document.getElementById("definiceStylu").setAttribute("href", "//Microsoft.WinJS.1.0/css/ui-" + styl + ".css")
}

Do onchange (inline zápisu) zavolejte funkci zmenStyl a jako parametr ji předejte uživatelem zvolenou hodnotu.

<select id="selStyl" onchange="WinJS.zmenStyl(this.value)">

Oprávnění aplikace a fotoaparát

Každá aplikace má automaticky vloženou možnost oprávnění, kde uživatel může určité věci zakázat nebo povolit. U každé aplikace je nastaveno, že může používat internet, což dnes v době, kdy je wi-fi na každém druhém rohu, vadit nikomu nebude. Tzv. capatibilies jsou definicí všeho, co kdy s aplikací chceme používat. Ukážeme si jednoduchou ukázku fotoaparátu. Přidejte do aplikace (složky js) skript fotoaparat.js. Do hlavní stránky (default.html) přidejte img (id=mojeFotka, src=#) a tlačítko (id=btnVyfot, text=‘Chci fotku!‘). Nakonec si definujte onen script fotoaparat.js.

<img src="#" id="mojeFotka" />
<button id="btnVyfot">Chci fotku!</button>
<script src="/js/fotoaparat.js"></script>

V scriptu fotoaparat.js obslužte onclick tlačítka btnVyfot.

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

}

Deklarujte si "foťák" Windows.Media.Capture.CameraCaptureUI().

var fotak = new Windows.Media.Capture.CameraCaptureUI()

Foťáku do photoSettings.cropedAspectRation nastavte v anonymním objektu width i height na 1. To je poměr stran, který bude mít výsledná fotka, tedy 1:1.

fotak.photoSettings.croppedAspectRatio = { width: 1, height: 1 }

Následně zavolejte metodu captureFileAsync, které jako první parametr řekněte, že chcete fotku (můžete chtít například i video). V obsluze oncompleted vám jako první parametr bude předána vyfocená a ořezaná fotka v poměru 1:1.

fotak.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (fotka) {

});

Na fotku vytvořte objektový Blob a ten nastavte jako src obrázku.

var fotkaVBlobu = URL.createObjectURL(fotka)
document.getElementById("mojeFotka").src = fotkaVBlobu

Aplikaci spusťte a vyzkoušejte. Uvidíte, že to nebude fungovat.

WinJS – Chyba aplikaci, když nemá příslušné oprávnění. - Tvorba Windows 8 store aplikací v JavaScriptu

Dostanete hlášení, že aplikace zatím nemá oprávnění využívat kameru. Přejděte ve Visual Studiu do manifestu aplikace (package.appxmanifest) na záložku Capabilities a zatrhněte webcam. Aplikaci spusťte znovu a vyzkoušejte to. Uživatel musí vždy ještě potvrdit, že si opravdu kameru můžete využívat.

V tomto dílu jste se dozvěděli o nastavení, vysvětlili jsme si ovládací prvek SettingsFlyout, nadefinovali jste vlastní WinJS funkci a udělali jste si fotku.

V dalším díle, Dlaždice a toastové notifikace, si oživíme dlaždici naší aplikace a zobrazíme uživateli toastovou notifikaci.

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 159x (33.86 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Článek pro vás napsal Michal Žůrek - misaz

Uživatelské hodnocení:

3 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