8. diel - Ajaxu vo Windows Store aplikáciách

XHR

XHR je skratka pre XMLHttpRequest, teda AJAX. Úplne najlepšie asi bude, keď začneme programovať priamo ukážku - čítačku RSS. RSS vezmeme z približne najznámejšieho spravodajského servera v českej republike, z novinky.cz. Majú dve verzie RSS, nám sa bude viac hodiť druhá verzia. Otvorte si v nejakom prehliadači ich XML (napríklad aj Google Chrome) http://www.novinky.cz/rss2. Teraz si musíme poznamenať, akú štruktúru XML má. RSS má síce presne definovaný štandard, ale nie každý ho rešpektuje a navyše možno ešte používať staršie verzie tohto štandardu. Novinky.cz používajú aktuálny štandard, XML je validný a všetko súhlasí. Z XML nám budú bohato stačiť elementy item, z ktorých si vezmeme title, image a link. Poďme začať.

Pridajte si štýl Rss.css a script Rss.js, tieto skripty budú spracovávať našu aplikáciu. Do HTML stránky vložte header a doň nadpis.

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

V CSS posuňte header o 70px doprava a doľava, potom o 30 zhora a zdola.

header {
    margin: 30px 70px;
}

Ďalej vložte do HTML div s identifikátorom newsList, tam budeme z JavaScriptu vkladať položky.

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

A pridáme AppBar s tlačidlom synchronizovať.

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

Teraz máme UI hotové, prejdeme k samotnému scriptu spracovávajúceho RSS. Pridajme si script NewsItem. Tu vytvorme objekt, ktorý bude v konstruktoru prijímať element xml s novinkou. Z tohto elementu vytiahneme pomocou querySelector () title, image a link, tie nám budú zatiaľ stačiť.

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

Objektu pridáme metódu Generate (), ktorá pripraví odkaz s figure, ktorý bude zastupovať novinku. Výsledný element pre novinku bude vyzerať nasledovne.

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

Kód pre generovanie bude nasledujúci:

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;
}

Teraz poďme konečne pracovať s XHR. Do scriptu Rss.js si pridajte funkciu Sync (). Vnútri tejto funkcie zavolajte WinJS.xhr (), ktoré ako prvý parameter pridáte anonymný objekt, ktorý bude obsahovať url a responseType. Url je jasná, ResponseType nastavíme na string s hodnotou document. Tým povieme, že sťahujeme dokument a nie napríklad obrázok.

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

Na tomto volanie obslúžime udalosť done. V prvom parametra prvá funkcia dostaneme výsledok AJAXu, v druhej anonymný funkciu obslúžime 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 prvej anonymný funkciu dostaneme výsledok a ten má hodnotu status, čo je kód toho, ako požiadavka dopadol. V našom prípade by sme mali dostať vždy 200, pretože vieme, že všetko funguje. V prípade chyby nás to moc nemusí zaujímať, pretože skočíme do druhej anonymné funkcie (tej, kde vypisujeme dialóg). Do prvej anonymný funkcie si teda pridáme podmienku, ktorá bude overovať, že status je vrátane dátového typu 200. Ak áno, vezmeme si z výsledku responseXml. Na to zavoláme metódu getElementsBy­TagName () a vyhľadáme si všetky elementy item. Tie necháme cyklom spracovať, vždy vytvoríme nový newsItem a naň zavoláme metódu generate, ktorá nám vygeneruje potrebné 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())
    }
}

Potrebný základ je hotový.

Teraz si aplikáciu ešte trochu ostylujeme. Zoznam noviniek (#newsList) odsadíme o 70px, nastavíme mu 2 stĺpce, pretečeniu na scroll a výšku na 70%.

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

Figure bude 500px široký, vypchatý (padding) 10px, odsadený (margin) 5px, pozadie bude mať šedej a minimálnu výšku 80px.

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

Obrázka vo figure obmedzíme šírku a výšku na maximálne 100px, nechajme ho obtekať sprava (float: left) a sprava ho vypchať o 10px.

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

Nadpisu v figure nastavíme bielu farbu:

figure h2 {
    color: white;
}

Teraz už čítačka vyzerá trochu k svetu.

Živé dlaždice

Nášmu objektu newsItem pridáme metódu setLiveTile (), ktorá vytvorí živú dlaždicu a odošle ju, to sme si vysvetlili v minulom diele.

Spájanie dvoch dlaždíc

Ak si vygenerujete notifikácia dlaždice pre square (stredná), tak nebude fungovať wide (široká). Pokiaľ naopak vygenerujete wide, nebude fungovať square. Teoreticky môžeme každú odoslať zvlášť, ale existuje lepší variant. Z katalógu dlaždíc si vyberte šablóny, ktoré sa vám zdajú najvhodnejšie. Vyberte si jednu pre stredné a druhú širokú. Pozrime sa na ich XML, XML v našej aplikácii by mohlo vyzerať nasledovne.

Š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>

Stredná:

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

Táto dlaždice má základný element dokumentu tile, ďalej tu je element visual a ten obsahuje Binding - to sú naše dlaždice a my potrebujem dostať dvaja binding do jedného visual. Tu by sa mohlo zdať, že napíšeme xml1.appendChild (xml.2.get ...), ale to nebude fungovať, pretože pridávame niečo z iného dokumentu. Najprv si musíme získať element z iného dokumentu pomocou importNode (), ktoré musíme dať druhý parameter true. Tým povieme, že importujeme z iné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 pridáva do elementu Visual v širokej dlaždicu. Toto XML systému odošlite. Ešte predtým ale systému povedzte, že má povoliť front, aby dlaždice sami menili informácie - čiže občas sa na dlaždicu zmení aktualita. Povolenie fronty sa robí cez metódu enableNotifica­tionQueue (), ktorá v parametri berie true alebo false podľa toho, či má byť fronta povolená (true = povolené; false = zakázané).

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

Keď aplikáciu spustíte, živá dlaždice bude fungovať len pre strednú veľkosť, široká sa nám v zozname možných ani nezobrazí, pretože systém nevie, aký obrázok ju má nastaviť na pozadí, keď žiadnu notifikácia nemá. Preto prejdite do aplikačného manifestu a dlaždice Wide (310 × 150) pridajte nejaký obrázok. Teraz už by aplikácia mala fungovať úplne správne a zobrazovať všetky stavy vrátane notifikácií pre stredné a širokú dlaždicu.

Čítačku RSS máme hotovú, teda aspoň z časti. Nabudúce sa pozrieme na ďalšie ovládacie prvky, ktoré nám pomôžu ešte viac aplikácii zasadiť do dizajnu Modern UI.

 

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