Aplikace pro Windows Store v HTML5 – kontrakty

V tomto díle se zaměříme na kontrakty. Kontrakty jsou specifické pro Windows Store aplikace a umožňují vám integrovat vaši aplikaci do operačního systému.

Seriál: Aplikace pro Windows Store v HTML5 (6 dílů)

  1. Začínáme psát aplikace pro Windows Store v HTML5 5.4.2013
  2. Ovládací prvky specifické pro Windows Store aplikace a PLM 12.4.2013
  3. Vícestránkové Windows Store aplikace a navigace 19.4.2013
  4. Aplikace pro Windows Store v HTML5 – kontrakty 26.4.2013
  5. Dlaždice a oznámení aplikací pro Windows Store v HTML5 17.5.2013
  6. Práce se senzory v aplikacích pro Windows Store v HTML5 24.5.2013

Základní kontrakty jsou:

  • Hledání
  • Sdílení
  • Nastavení

Vyhledávání

Pomocí tohoto kontraktu můžete hledání ve vaší aplikaci integrovat přímo do systémového hledání. Uživatel pak hledá informace z jednoho místa.

image1

Nejdříve je potřeba integraci do systémového vyhledávání deklarovat v package.appxmanifest.

image2

Pak je třeba zaregistrovat událost, kterou vyvolává systémové hledání. Těchto událostí je několik, podle toho, jaký komfort chcete uživateli nabídnout, např. našeptávání. Pokud chcete jen základní vyhledávání, stačí zaregistrovat událost onquerysubmitted.

Windows.ApplicationModel.Search.SearchPane.getForCurrentView().onquerysubmitted = function (eventObject) {
    txtSearch.innerText = eventObject.queryText;
};

Search contract sample obsahuje další příklady použití kontraktu hledání.

Sdílení

Pomocí kontraktu sdílení můžete předávat informace z jedné aplikace do druhé. Princip je velmi podobný schránce. Aplikace může být zdrojem sdílení. Zdroj sdílení naplní datový balíček, který je pak předán aplikaci, která se označuje jako cíl sdílení. Na následujícím snímku obrazovky je zdrojem sdílení aplikace Mapy a cílem sdílení je aplikace Pošta.

image3

Typ sdílených dat

Sdílet můžete jakýkoliv typ dat. Pro některé typy, jako je např. text, URL, obrázek, jsou přímo připravené vlastnosti objektu DataRequest. Pokud potřebujete sdílet jiný typ dat, např. poštovní adresu, musíte tento typ dat nějak popsat. Můžete použít třeba MIME Type nebo obecně uznávané slovníky ze schema.org. Zdroj sdílení jen naplní datový balíček, ale cíl sdílení musí v package.appxmanifest deklarovat, jakým typům dat rozumí.

image4

Zdroj sdílení

U zdroje sdílení stačí opět zaregistrovat příslušnou událost, v které pak naplníte datový balíček informacemi, které chcete sdílet.

Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView().ondatarequested = function (eventObject) {
    var request = eventObject.request;

    request.data.properties.title = "MSDN Blog"; // musite nastavit!
    request.data.setText("MSDN Blog");
    request.data.setUri(new Windows.Foundation.Uri("http://blogs.msdn.com/b/vyvojari/"));
};

Cíl sdílení

Vytvořit cíl sdílení je již komplexnější úloha, pro kterou budete muset vytvořit i uživatelské rozhraní. Podívejte se na příklad Sharing content target app sample.

Nastavení

Nastavení je vlastně jediný kontrakt, který budete muset implementovat. Do nastavení musíte minimálně přidat typické „O aplikaci“, kde uživatel najde kontakt na technickou podporu a případně odkaz na dokument o ochraně osobních údajů, pokud ho aplikace vyžaduje.

image5

Integrace do nastavení se opět děje pomocí události.

app.onsettings = function (e) {
    e.detail.applicationcommands = {    
        "about": {
            href: "/pages/about/about.html",
            title: "About"
        }
    }
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

Tím jsme vytvořili položku s textem About v nastavení, která odkazuje na stránku /pages/about/about.html. Stránka about musí obsahovat element s id about, který je ovládací prvek WinJS.UI.SettingsFlyout.

<body>
    <div id="about" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
        <div class="SettingsPane">
            <div class="win-label">
                <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
                </button>
                <span class="SettingsTitle">About</span>
            </div>
            <article class="SettingsContent">
                <h2>Kontrakty</h2>
            </article>
        </div>
    </div>
</body>

POZOR! Výchozí barva textu je bílá na bílem pozadí. Je třeba změnit pozadí #about.

Zdrojové kódy z tohoto článku ke stažení.

Zatím nebyl přidán žádný komentář, buďte první!

Přidat komentář
Zdroj: https://www.zdrojak.cz/?p=7970