Silverlight 2 Digg klient - 3. díl

Na pořadu dne je naprogramování komunikace s Digg API a zpracovávání výsledků hledání pomocí LINQu.

Silverlight 2 má vestavěná API pro práci s REST, SOAP/WS, RSS, JSON a XML HTTP službami a další API pro práci se sockety (System.Net.Sockets), díky kterému můžeme vytvářet aplikace, které komunikují po nějakém ne-HTTP protokolu (ideální pro například chatovací aplikace).

Aplikace v Silverlightu mohou volat adresy na jiné doméně, podle práv nastavených v XML na té dané doméně. V tomto je Silverlight stejný jako Flash a to je jen dobře, administrátoři serveru jen pomocí XML nastaví přístupová práva a Silverlight i Flash se podle těchto pravidel řídí.

Server Digg.com má sadu dobře zdokumentovaných API zveřejněných pomocí HTTP. Mají také nastavená práva pro připojování z jiných domén pro Flash, takže to „zneužijeme“ i pro naši Silverlight aplikaci.

Digg.com List Stories API

Chceme, aby náš uživatel mohl do hledacího políčka zadat například slovo „programming“ a tím mu vylezly záznamy z Digg.com, které to slovo obsahují.

Za tímto účelem využijeme List Stories API. V URL můžeme zadat jako parametr hledané téma a na oplátku dostaneme výpis výsledků ve formátu XML (tedy například požádáme o GET /stories/topic/programming a vrátí se nám výpis výsledků na téma „programming“).

System.Net.WebClient pro asynchronní získání XML

Logickým krokem je zachycení události Click na tlačítku Hledat (viz obrázek výše). To bude probíhat tak, že vezmeme obsah vyhledávacího TextBoxu, dotážeme se Digg serveru na výsledky a on nám je s radostí pošle zpět ve formě XML.

Silverlight tento úkon usnadňuje pomocí třídy WebClient v namespace System.Net (tuto třídu můžete znát i z čistokrevného .NET Frameworku). Pomocí třídy WebClient můžeme asynchronně (to znamená, že stahování může běžet na pozadí a aplikace bude mezitím normálně fungovat) stahovat obsah zadané URL. Ještě před tím, než začneme pomocí metody DownloadStringAsync něco stahovat, musíme zaregistrovat handler události DownloadStringCompleted, ve kterém budeme s výsledným XML dále pracovat. Následuje kód:

private void SearchBtn_Click(object sender, RoutedEventArgs e)
{
    // Získání textu z TopicTB TextBoxu
    string topic = TopicTB.Text;

    // Vytvoření URL pro stažení výsledků z Digg.com
    string diggUrl =
        string.Format(
            "http://services.digg.com/stories/topic/{0}?count=20&appkey=http%3A%2F%2Fprogramujte.com", topic);

    // Práce s WebClientem
    WebClient diggService = new WebClient();
    diggService.DownloadStringCompleted += DiggService_DownloadStoriesCompleted;
    diggService.DownloadStringAsync(new Uri(diggUrl));
}

private void DiggService_DownloadStoriesCompleted(object sender,DownloadStringCompletedEventArgs e)
{
    if (e.Error == null)
    {
        string result = e.Result;

        // Todo: Zpracování XML uloženého v result
    }
}

Povšimněte si použité URL v proměnné diggUrl. Tato URL neslouží pro vyhledávání konkrétních příspěvků na Diggu, ale jejich témat, jejichž aktuální seznam je k vidění ZDE. Klíčová slova, která můžete pro vyhledávání použít, jsou uvedená v druhém sloupci na odkazované stránce.

Parsování XML pomocí LINQ to XML

V této kapitolce si vytvoříme třídu DiggStory, jejíž instance budou reprezentovat jednotlivé výsledky hledání. Z XML souboru, který jsme dostali z výše uvedeného kódu, pomocí LINQu získáme potřebné informace, podle nich vytvoříme instance právě zmíněné třídy a celou tuto kolekci objektů navážeme jako zdroj dat pro ovládací prvek DataGrid, který umožňuje vypisovat data v tabulce.

Začneme popořadě – nejdříve vytvoříme třídu DiggStory a v ní nadefinujeme několik vlastností:

namespace DiggKlient
{
    public class DiggStory
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set;}
        public int NumDiggs { get; set; }
        public Uri HrefLink { get; set; }
        public string ThumbNail { get; set; }
        public string UserName { get; set; }
    }
}

Teď už můžeme za pomoci LINQu získat data pro jednotlivé vlastnosti z XML souboru. Pokud nevíte, co to LINQ je, tak vězte, že je to technologie, která umožňuje dotazovat se proti nejrůznějším druhům dat pomocí syntaxe podobné SQL. Dále existují tzv. provideři, neboli poskytovatelé, kteří určují „specializaci“ LINQu. My dnes využijeme LINQ to XML (kdo uhodne proč? :-)), ale mezi další a hojně používané patří například LINQ to Objects a LINQ to SQL. O LINQu snad později, v nějakém dalším seriálu. Teď si ukážeme zdrojový kód, který projde staženým XML souborem, dostane z něj data a ta přiřadí do instancí třídy DiggStory (je nutné přidat do projektu referenci na System.Xml.Linq.dll!):

private void DisplayStories(string xmlContent)
{
    // Nezapomeňte importovat System.Xml.Linq.dll!
    // Nutné je přidat namespace System.Xml.Linq

    // Ze stringu zkopírujeme text jako XML
    XDocument xmlStories = XDocument.Parse(xmlContent);


    // Jednotlivé stringy v závorkách jsou odkazy na tagy v XML souboru, viz Digg API
    var stories = from story in xmlStories.Descendants("story")
                  // Zvol každého potomka elementu "story"...
                  where story.Element("thumbnail") != null && // který má něco v elementu "thumbnail"...
                        !story.Element("thumbnail").Attribute("src").Value.EndsWith(".gif")
                  // a jeho atribut "src" nekončí na .gif
                  select new DiggStory // Přiřazení obsahu různých tagů do vlastností
                             {
                                 Id = (int) story.Attribute("id"),
                                 Title = ((string) story.Element("title")).Trim(),
                                 Description = ((string) story.Element("description")).Trim(),
                                 ThumbNail = story.Element("thumbnail").Attribute("src").Value,
                                 HrefLink = new Uri((string) story.Attribute("link")),
                                 NumDiggs = (int) story.Attribute("diggs"),
                                 UserName = story.Element("user").Attribute("name").Value,
                             };
}

Zobrazení dat v DataGridu

Jak už jsme si řekli, získaná data zobrazíme v DataGridu. Je to jednoduché, stačí nastavit doslova jednu vlastnost a máme hotovo. Nejdříve ale musíme ten DataGrid do aplikace vůbec dostat – uděláme to přes Toolbox. Díky tomu, že ho jen přetáhneme, se nám do elementu UserControl sama přidá reference na požadovaný namespace (pokud Toolbox nevidíte, otevřete ho pomocí Ctrl +  Alt +  X). Výplňový TextBlock s textem „Zde budeme vypisovat výsledky“ teď už můžeme smazat, více snad napoví tento kousek kódu:

<!--Toto-->
<TextBlock Grid.Row="1" Margin="10" Foreground="White">
    Zde budeme vypisovat výsledky
</TextBlock>
<!--Nahraďte tímto-->
<data:DataGrid x:Name="StoriesList" Grid.Row="1" Margin="5" >
</data:DataGrid>

DataGrid nám dovoluje nastavit jednotlivé sloupce a podobně, ale my se spokojíme s hodnotami, které si vytvoří on sám. Stačí totiž nastavit vlastnost ItemSource na kolekci objektů DiggStory a schéma tabulky se vytvoří samo podle vlastností třídy DiggStory. Kód tedy vypadá takto a pro dnešek máme hotovo (ještě si všimněte lehce upravené metody DiggService_DownloadStoriesCompleted).

private void DiggService_DownloadStoriesCompleted(object sender,DownloadStringCompletedEventArgs e)
{
    if (e.Error == null)
    {
        DisplayStories(e.Result);
    }
}

private void DisplayStories(string xmlContent)
{
    // Nezapomeňte importovat System.Xml.Linq.dll!
    // Nutné je přidat namespace System.Xml.Linq

    // Ze stringu zkopírujeme text jako XML
    XDocument xmlStories = XDocument.Parse(xmlContent);


    // Jednotlivé stringy v závorkách jsou odkazy na tagy v XML souboru, viz Digg API
    var stories = from story in xmlStories.Descendants("story")
                  // Zvol každého potomka elementu "story"...
                  where story.Element("thumbnail") != null && // který má něco v elementu "thumbnail"...
                        !story.Element("thumbnail").Attribute("src").Value.EndsWith(".gif")
                  // a jeho atribut "src" nekončí na .gif
                  select new DiggStory // Přiřazení obsahu různých tagů do vlastností
                             {
                                 Id = (int) story.Attribute("id"),
                                 Title = ((string) story.Element("title")).Trim(),
                                 Description = ((string) story.Element("description")).Trim(),
                                 ThumbNail = story.Element("thumbnail").Attribute("src").Value,
                                 HrefLink = new Uri((string) story.Attribute("link")),
                                 NumDiggs = (int) story.Attribute("diggs"),
                                 UserName = story.Element("user").Attribute("name").Value,
                             };
    StoriesList.SelectedIndex = -1; // Jen detail, díky tomuto bude zvolená poslední položka tabulky
    StoriesList.ItemsSource = stories;
}

Zkuste si aplikaci spustit, zadat třeba slovo „programming“ (protože se skládá už hotová URL, je nutné zadat požadové slovo přesně) a kliknout na Hledat. Měli byste dostat podobné výsledky jako na obrázku:

A to je konec tohoto dílu, v příštím, kratším, díle se ponoříme do hlubin souboru Page.xaml a naučíme se pracovat se styly.