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 8 - AJAX ve Windows Store aplikacích

V předchozím díle, Dlaždice a toastové notifikace, jsme si oživili dlaždici naší aplikace a zobrazíme uživateli toastovou notifikaci.

Dnes se podíváme na 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 - Tvorba Windows 8 store aplikací v JavaScriptu

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

Ž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 - Tvorba Windows 8 store aplikací v JavaScriptu
Živá dlaždice - Tvorba Windows 8 store aplikací v JavaScriptu

Čtečku RSS máme hotovou, teda alespoň z části.


 

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

 

Předchozí článek
Dlaždice a toastové notifikace
Všechny články v sekci
Tvorba Windows 8 store aplikací v JavaScriptu
Článek pro vás napsal Michal Žůrek - misaz
Avatar
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