8. díl - AJAX ve Windows Store aplikacích

JavaScript Windows 8 aplikace AJAX ve Windows Store aplikacích

XHR

XHR je zkratka pro XmlHttpRequest, tedy AJAX. Úplně nejlepší asi bude, když začneme programovat přímo ukázku – čtečku RSS. RSS vezmeme z asi nejznámějšího zpravodajského serveru v české republice, z novinky.cz. Mají dvě verze RSS, nám se bude víc hodit druhá verze. Otevřete si v nějakém prohlížeči jejich XML (třeba i Google Chrome) http://www.novinky.cz/rss2. Nyní si musíme poznamenat, jakou strukturu XML má. RSS má sice přesně definovaný standard, ale ne každý ho respektuje a navíc lze ještě používat starší verze tohoto standardu. Novinky.cz používají aktuální standard, XML je validní a vše souhlasí. Z XML nám budou bohatě stačit elementy item, ze kterých si vezmeme title, image a link. Pojďme začít.

Přidejte si styl Rss.css a script Rss.js, tyto skripty budou zpracovávat naši aplikaci. Do HTML stránky vložte header a do něj nadpis.

<header>
        <h1>Novinky.cz</h1>
</header>

V CSS posuňte header o 70px doprava a doleva, pak o 30 shora a zdola.

header {
        margin: 30px 70px;
}

Dále vložte do HTML div s identifikátorem newsList, tam budeme z JavaScriptu vkládat položky.

<div id="newsList"></div>

A přidáme AppBar s tlačítkem synchronizovat.

<div data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand"
                        data-win-options="{'label':'Synchronizovat', 'icon':'sync'}"
                        id="btnSynchronizovat"></button>
</div>

Nyní máme UI hotové, přejdeme k samotnému scriptu zpracovávajícího RSS. Přidejme si script NewsItem. Zde vytvořme objekt, který bude v konstruktoru přijímat element xml s novinkou. Z tohoto elementu vytáhneme pomocí querySelector() title, image a link, ty nám budou prozatím stačit.

function NewsItem(element) {
        this.title = element.querySelector("title").textContent
        this.image = element.querySelector("image").textContent
        this.link  = element.querySelector("link").textContent
}

Objektu přidáme metodu generate(), která připraví odkaz s figure, který bude zastupovat novinku. Výsledný element pro novinku bude vypadat následovně.

<a href=“odkaz“>
        <figure>
                <img src=“cestaKObrazku“ alt=“název“ />
                <h2>nazev</h2>
        </figure>
</a>

Kód pro generování bude následující:

NewsItem.prototype.generate = function () {
        var a = document.createElement("a")
        a.setAttribute("href", this.link)

        var element = document.createElement("figure");

        var img = document.createElement("img")
        img.setAttribute("src", this.image)
        img.setAttribute("alt", this.title)

        var h2 = document.createElement("h2")
        h2.innerText = this.title

        if (this.image != "") {
                element.appendChild(img)
        }

        element.appendChild(h2)
        a.appendChild(element)
        return a;
}

Nyní pojďme konečně pracovat s XHR. Do scriptu Rss.js si přidejte funkci Sync(). Uvnitř této funkce zavolejte WinJS.xhr(), které jako první parametr přidáte anonymní objekt, který bude obsahovat url a responseType. Url je jasná, ResponseType nastavíme na string s hodnotou document. Tím řekneme, že stahujeme dokument a ne třeba obrázek.

WinJS.xhr({
        url: "http://www.novinky.cz/rss2",
        responseType: "document"
})

Na tomto volání obsloužíme událost done. V prvním parametru první funkce dostaneme výsledek AJAXu, v druhé anonymní funkci obsloužíme chybu.

WinJS.xhr({
        …
}).done(

function (vysledek) {
        /* OK - stav se změnil */
}, function () {
        /* Chyba */
        var dialog = new Windows.UI.Popups.MessageDialog("Při stahování novinek došlo k chybě. V aplikační liště můžete opakovat akci.")
        dialog.showAsync();
})

V první anonymní funkci dostaneme výsledek a ten má hodnotu status, což je kód toho, jak požadavek dopadl. V našem případě bychom měli dostat vždy 200, protože víme, že vše funguje. V případě chyby nás to moc nemusí zajímat, protože skočíme do druhé anonymní funkce (té, kde vypisujeme dialog). Do první anonymní funkce si tedy přidáme podmínku, která bude ověřovat, že status je včetně datového typu 200. Pokud ano, vezmeme si z výsledku responseXml. Na to zavoláme metodu getElementsBy­TagName() a vyhledáme si všechny elementy item. Ty necháme cyklem zpracovat, vždy vytvoříme nový newsItem a na něj zavoláme metodu generate, která nám vygeneruje potřebné HTML. To vložíme do elementu newsList.

if (vysledek.status === 200) {
        var items = vysledek.responseXML.getElementsByTagName("item");
        for (var i = 0; i < items.length; i++) {
                var item = new NewsItem(items[i])
                newsList.appendChild(item.generate())
        }
}

Potřebný základ je hotový.

Jednoduchá RSS

Nyní si aplikaci ještě trochu ostylujeme. Seznam novinek (#newsList) odsadíme o 70px, nastavíme mu 2 sloupce, přetečení na scroll a výšku na 70%.

#newsList {
        margin: 70px;
        column-count: 2;
        overflow: scroll;
        height: 70%;
}

Figure bude 500px široký, vycpaný (padding) 10px, odsazený (margin) 5px, pozadí bude mít šedé a minimální výšku 80px.

figure {
        width: 500px;
        background-color: grey;
        padding: 10px;
        margin: 5px;
}

Obrázku ve figure omezíme šířku a výšku na maximálně 100px, nechme ho obtékat zprava (float:left) a zprava ho vycpeme o 10px.

figure img {
        max-width: 100px;
        max-height: 100px;
        float:left;
        padding-right:10px;
}

Nadpisu v figure nastavíme bílou barvu:

figure h2 {
        color: white;
}

Nyní již čtečka vypadá trochu k světu.

Ostylovaná jednoduchá čtečka RSS.

Živé dlaždice

Našemu objektu newsItem přidáme metodu setLiveTile(), která vytvoří živou dlaždici a odešle ji, to jsme si vysvětlili v minulém díle.

Spojování dvou dlaždic

Jestliže si vygenerujete notifikace dlaždice pro square (střední), tak nebude fungovat wide (široká). Pokud naopak vygenerujete wide, nebude fungovat square. Teoreticky můžeme každou odeslat zvlášť, ale existuje lepší varianta. Z katalogu dlaždic si vyberte šablony, které se vám zdají nejvhodnější. Vyberte si jednu pro střední a druhou širokou. Podívejme se na jejich XML, XML v naší aplikaci by mohlo vypadat následovně.

Široká:

<tile>
  <visual version="2">
    <binding template="TileWide310x150SmallImageAndText01" fallback="TileWideSmallImageAndText01">
      <image id="1" src="http://media.novinky.cz/747/417473-top_foto2-ebot5.jpg"/>
      <text id="1">Stěhovaví ptáci se už vracejí</text>
    </binding>
  </visual>
</tile>

Střední:

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" fallback="TileSquareText04">
      <text id="1">Stěhovaví ptáci se už vracejí</text>
    </binding>
  </visual>
</tile>

Tato dlaždice má základní element dokumentu tile, dále zde je element visual a ten obsahuje bindingy – to jsou naše dlaždice a my potřebujme dostat dva bindingy do jednoho visual. Zde by se mohlo zdát, že napíšeme xml1.appendChil­d(xml.2.get…), ale to nebude fungovat, protože přidáváme něco z jiného dokumentu. Nejprve si musíme získat element z jiného dokumentu pomocí importNode(), které musíme dát druhý parametr true. Tím řekneme ,že importujeme z jiného dokumentu.

var square = xmlWide.importNode(xmlSquare.getElementsByTagName("binding")[0], true)
xmlWide.getElementsByTagName("visual")[0].appendChild(square)

Tento kód importuje z dlaždice square její binding a ten přidává do elementu Visual v široké dlaždici. Toto XML systému odešlete. Ještě předtím ale systému řekněte, že má povolit frontu, aby dlaždice sami měnily informace – čili občas se na dlaždici změní aktualita. Povolení fronty se dělá přes metodu enableNotifica­tionQueue(), která v parametru bere true nebo false podle toho, zdali má být fronta povolena (true=povoleno; false=zakázáno).

var tile = notifikace.TileNotification(xmlWide);
notifikace.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
notifikace.TileUpdateManager.createTileUpdaterForApplication().update(tile)

Když aplikaci spustíte, živá dlaždice bude fungovat pouze pro střední velikost, široká se nám v seznamu možných ani nezobrazí, protože systém neví, jaký obrázek ji má nastavit na pozadí, když žádnou notifikace nemá. Proto přejděte do aplikačního manifestu a dlaždice Wide (310×150) přidejte nějaký obrázek. Nyní již by aplikace měla fungovat zcela správně a zobrazovat všechny stavy včetně notifikací pro střední a širokou dlaždici.

Možnost široké dlaždice
Živá dlaždice

Čtečku RSS máme hotovou, teda alespoň z části. Příště se podíváme na další ovládací prvky, které nám pomohou ještě více aplikaci zasadit do designu Modern UI.


 

Stáhnout

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

 

  Aktivity (1)

Č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 (2 hlasů) :
4.54.54.54.54.5


 



 

 

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