6. diel - WinJS - Nastavenie a fotoaparát

V starších Windows to fungovalo tak, že keď ste chceli do aplikácie dostať nastavenia, tak ste si to museli implementovať po svojom. To bolo samozrejme únavné a navyše z toho boli užívatelia zmätení, keď sa každá aplikácia nastavovala inak. Vo Windows 8 Microsoft zaviedol jednotné nastavenie, ktoré je pre všetky moderné aplikácie rovnaké. Nastavenie je v paneli Sharm pod "nastavenia", každá aplikácia tam má automaticky položku hodnotenia, recenzie a oprávnenia. Hodnotenie a recenzie vás presunie do Windows Store, kde aplikáciu môžete ohodnotiť. Oprávnenie umožňuje nastaviť čo aplikácia smie a nesmie robiť. V tomto dieli si ukážeme ako si vložiť vlastné nastavenia a ako pracovať s kamerou.

Vlastné nastavenie

Aby sme užívateľovi umožnili niečo nastaviť, musíme mu najprv nastavenia pripraviť. Najprv musíme odchytiť aplikáciu udalosť onsettings, ktorá nám vráti ako prvý parameter e, v ktorom sú datail.applicationcommands. To sú hodnoty vo formáte JSON. V tomto JSON je potom idNastaveni: JSON s hodnotami. V tom druhom JSON sú potom hodnoty, title pre názov a href pre odkaz so stránkou, na ktorej je potom nastavenie. Nakoniec musíme nastavenie aplikovať, jednoducho zavoláme WinJS.UI.SettingsFlyout.populateSettings () a ako jediný parameter odovzdáme "éčko".

Vytvorte si aplikáciu nastaveni a do default.js pridajte kód, ktorý zhrnie predchádzajúci odsek.

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 som dve voľby nastavení, ktoré odkazujú na súbory, ktoré za chvíľu pridáme. Jedno bude nastavenie aplikácie a druhej vzhľadu.

Pridajte súbor appsettings.html. A do hlavičky mu dajte štýl definujúce že element pa h1 bude mať čiernu farbu písma.

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

WinJS.UI.SettingsFlyout

SettingsFlyout je taký panel určený špeciálne pre nastavenie. Vytvoríme ho jednoducho tým, že pridáme div ak nemu atribút data-win-control s hodnotou WinJS.UI.SettingsFlyout. Ďalej mu musíme odovzdať nastavenia (opäť k atribútu data-win-options vo formáte JSON). Ako vlastnosť môžeme použiť Width, ktoré sa priradí jedna zo špeciálnych hodnôt, medzi ktoré patrí napríklad medium alebo wide. Táto vlastnosť nastavuje šírku panelu. Ďalej tam je vlastnosť settingsCommandId, ktoré musíme dať id, ktoré sme definovali na nastavenie aplikácie (pozri vyššie).

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

Do tohto divu teraz môžete dávať bežné prvky HTML (i WinJS) as tými ďalej pracovať. Ešte si pridajte súbor stylesetting.html. Tu si ukážeme ako s nimi pracovať a obsluhovať ich zmeny.

Do súboru stylesettings.html si pridajte nasledujúci 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 chte 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>

Definícia vlastné WinJS funkcie

Tu sa nachádza jeden zásadný problém - ako zmeniť stav jedného dokumentu, keď vlastne máme zobrazené dva (hlavné a nastavenie)? Jediné, čo vieme, je, že vždy máme objekt WinJS a keďže máme JavaScript, môžeme si definovať vlastné funkciu v ňom. Prejdite do súboru default.js a definujte vlastnú WinJS funkciu zmenStyl. Než sa na nej vrhneme, ešte doplňte ID definícií štýlu (light alebo dark).

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

Teraz sa vráťte k našej definícii WinJS funkcie a naprogramujte ju tak, aby z parametra štýl upravila definíciu štýlu.

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

Do onchange (inline zápisu) zavolajte funkciu zmenStyl a ako parameter ju predajte užívateľom zvolenú hodnotu.

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

Oprávnenia aplikácie a fotoaparát

Každá aplikácia má automaticky vloženú možnosť oprávnenie, kde užívateľ môže určité veci zakázať alebo povoliť. Pri každej aplikácie je nastavené, že môže používať internet, čo dnes v čase, keď je wi-fi na každom druhom rohu, vadiť nikomu nebude. Tzv. capatibilies sú definíciou všetkého, čo kedy s aplikáciou chceme používať. Ukážeme si jednoduchú ukážku fotoaparátu. Pridajte do aplikácie (zložky js) skript fotoaparat.js. Do hlavnej stránky (default.html) pridajte img (id = mojeFotka, src = #) a tlačidlo (id = btnVyfot, text = 'Chcem fotku!'). Nakoniec 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 obslúžte onclick tlačidla btnVyfot.

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

}

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

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

Foťáku do photoSettings.cropedAspectRation nastavte v anonymnom objekte width aj height na 1. To je pomer strán, ktorý bude mať výsledná fotka, teda 1: 1.

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

Následne zavolajte metódu captureFileAsync, ktoré ako prvý parameter povedzte, že chcete fotku (môžete chcieť napríklad aj video). V obsluhu oncompleted vám ako prvý parameter bude odovzdaná vyfotená a orezaná fotka v pomere 1: 1.

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

});

Na fotku vytvorte objektový Blob a ten nastavte ako src obrázka.

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

Aplikáciu spustite a vyskúšajte. Uvidíte, že to nebude fungovať.

WinJS – Chyba aplikáciu, keď nemá príslušné oprávnenie. - Tvorba Windows 8 store aplikácií v JavaScripte

Dostanete hlásenie, že aplikácia zatiaľ nemá oprávnenie využívať kameru. Prejdite vo Visual Studiu do manifestu aplikácie (package.appxmanifest) na záložku Capabilities a zaškrtnite webcam. Aplikáciu spustite znovu a vyskúšajte to. Užívateľ musí vždy ešte potvrdiť, že si naozaj kameru môžete využívať.

V tomto dieli ste sa dozvedeli o nastavení, vysvetlili sme si ovládací prvok SettingsFlyout, nadefinovali ste vlastné WinJS funkciu a urobili ste si fotku. Nabudúce oživíme (zatiaľ mŕtvu) dlaždicu našej aplikácie a zobrazíme užívateľmi toastový notifikáciu.

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 159x (33.86 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Michal Žůrek - misaz

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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