Microsoft Expression Blend - používáme XML

V  dnešním článku vás naučím, jak přidat zdroj dat v XML do našeho projektu a jak následně tato data zpracovat a použít.

Jako vždy začneme vytvořením nového projektu. O XML bylo napsáno již dost článků. Vznik XML je webovými vývojáři přirovnáván k vynálezu knihtisku. WPF má výbornou podporu pro XML, takže blend nám ulehčí spoustu práce.

Pro náš příklad si vytvoříme následující XML soubor, který bude obsahovat seznam zboží s odkazy na obrázky:

<?xml version="1.0" encoding="UTF-8"?>
<pc>
  <notebooks>
    <notebook>
      <kod>LX.ALC0Y.621</kod>
      <nazev>Acer Aspire 5315</nazev>
      <popis>Intel Celeron M560 2.13GHz, paměť 1024MB DDR2 RAM, 15.4" WXGA displej, 160GB disk, DVD-RW/+RW mechanika, sdílená grafika Intel GMA X3100, kamera, WiFi, Windows Vista Home Basic.</popis>
      <img>image/56697.jpg</img>
      <cena>9776,-Kč</cena>
    </notebook>
    <notebook>
      <kod>APMCPRO15</kod>
      <nazev>Apple MacBook Pro 15"</nazev>
      <popis>MacBook s procesorem Intel Core 2 Duo T9300 (2.5GHz, 6MB L2 Cache, 800MHz FSB), 2GB RAM, pevný disk 250 GB, 15.4" WXGA+ displej 1440x900, grafika GeForce 8600M GT, DVD/RW DL mechanika, AirPort, BT, dálkový ovladač, Mac OS X.</popis>
      <img>image/54816m.jpg</img>
      <cena>62 584,-Kč</cena>
    </notebook>
    <notebook>
      <kod>R61e - NG1DPCV</kod>
      <nazev>Lenovo ThinkPad</nazev>
      <popis>Intel Celeron M 550, paměť 1024MB RAM, 15.4" WXGA displej, 160GB disk, DVD/RW mechanika, grafika integrovaná Intel X3100 až 256MB, WiFi-abg, GLAN, Windows Vista Business.</popis>
      <img>image/53767m.jpg</img>
      <cena>13 497,-Kč</cena>
    </notebook>
  </notebooks>
</pc>

Soubor uložte pod názvem notebook.xml někam na váš disk, ale tak, abyste ho za chvíli našli. Nyní se přepneme do spuštěného Blendu s nově vytvořeným projektem a zaměříme se v pravém sloupci na část Data.

Jak je z obrázku patrné, máme dvě možnosti, jak data do naší WPF aplikace přidat. Data můžeme číst ze souboru XML, nebo pomocí CLR objektu. My se zaměříme na variantu první, tou je právě XML.

1. Do našeho projektu přidáme námi vytvořený XML soubor. V Solution explorer klikneme pravým tlačítkem myši na naši aplikaci a zvolíme Add Existing Item…, pomoci Open dialogu najdeme a otevřeme náš XML soubor.

   

   

2. Teď klikneme na tlačítko + XML, které se nachází v části Data. Po kliknutí se nám zobrazí dialog, kde vyplníme Connection Name a URL for XML data. Do položky Connection Name vyplníme Notebook a do položky URL for XML data zapíšeme název souboru XML, který jsme vložili do projektu, v našem případě tedy notebook.xml. URL vyplníme ručně, tlačítko Browse nebudeme používat, jeho použitím by nám vedl na soubor XML absolutní odkaz, my potřebujeme relativní.

   

3. Jako další rozbalíme strukturu dat uzlu pc.

   

4. Pokud jsme strom rozbalili, chytneme myší uzel notebook(Array) a přetáhneme ho do okna naší WPF aplikace. Pokud tlačítko uvolníme, vyskočí nabídka s akcemi, které můžeme provést. My zvolíme ListBox.

   

5. Po uvolnění tlačítka se zobrazí okno, kde můžeme nastavit detaily výpisu dat z XML v ListBox. Zaškrtnutím/odškrtnutím můžeme určit, zda se daný uzel zobrazí, v select boxu můžeme určit typ uzlu a pomocí šípek ve spodní části okna můžeme určit pořadí uzlů.

   

6. Pokud jste dodrželi předchozí kroky, měli byste po stisknutí klávesy F5 vidět to samé, co já.

   

7. Zavřeme naší aplikaci a v Blendu vytvoříme vedle ListBox novou Grid.

   

8. Nyní nastavíme akci při kliknutí na položku v ListBox pro aktualizaci obsahu Grid. To uděláme tak, že vybereme Grid a v panelu Properties v sekci Comon Properties nastavíme vlastnost DataContext. Její vyhledání si usnadním zapsáním slova Data do políčka Search.

   

9. Klikneme na čtvereček, který se nachází za tlačítkem New, a vybereme položku Data Binding…

   

10. Zobrazí se nám okno, ve kterém se přepneme na záložku Element Property. V části Scene elements rozbalíme LayoutRoot. Vybereme [System.Windows.Controls.ListBox].

    

11. Pokud jste úspěšně provedli předchozí bod, nyní nastavíme v Properties vlastnost SelectedItem : (Object) a klikneme na tlačítko Finish.

    

12. Nyní dvojklikem na Gird ve stromu prvků Grid vybereme. Po vybrání se kolem Grid zobrazí žlutý rámeček.

    

13. Nyní si vytvoříme prostor pro zobrazení názvu z našeho zdroje dat. V panelu nástrojů vybereme TextBlock a umístíme do plochy Grid.

    

14. Námi vytvořený TextBlock vybereme pomocí nástroje Selection. Přejdeme na panel Properties. V části Common Properties klikneme na čtvereček vedle vlastnosti Text a vybereme Data Binding….

    

15. Na záložce Explicit Data Context rozbalíme položku pc → notebooks → notebook(Array). Vybereme nazev : (String) a klikneme na Finish.

    

16. Pokud vše dobře nastavíte a stisknete F5, uvidíte výsledek podobný tomu mému. Při klikání na jednotlivé položky se budou měnit i názvy v TextBlock.

    

17. Nyní náš postup zopakujeme pro položky kód, popis a cena. Vytvoření obrázku si popíšeme dále.
18. Stejně jako přidání XML souboru do našeho projektu, vytvoříme novou složku (Add New Folder), kterou pojmenujeme image.
19. Složku nyní naplníme obrázky, které si můžete stáhnout zde.
20. Obrázky po stažení rozbalte na disk a přidejte do projektu pomocí Add Existing Item….

    

21. Nyní si otevřeme Asset Library a vyhledáme prvek Image, který přidáme do Grid.

    

22. Data do prvku opět načteme pomocí Common Properties, s tím rozdílem, že místo vlastnosti Text použijeme vlastnost Source, pomocí malého čtverečku opět zvolíme Data Binding… a zvolíme uzel img.
23. Po stisku F5 máme před sebou hotovou aplikaci.

    

Závěr

Dnes jsme se naučili používat jednu z mocných stránek WPF. Jestliže jste došli až do těchto míst, gratuluji. U dalšího dílu na shledanou.