Microsoft Expression Blend - používáme XML
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Microsoft Expression Blend - používáme XMLMicrosoft Expression Blend - používáme XML

 

Microsoft Expression Blend - používáme XML

Google       Google       25. 8. 2008       18 374×

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.

Reklama
Reklama

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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Student ČVUT FJFI katedry softwarového inženýrství v ekonomii. Mezi jeho zájmy patří programování a sport. Autor má zkušenosti s PHP 5, MySQL, XHTML a CSS. Zajímá se o platformu .NET, jazyk C#, ASP.NET a WPF.
Web    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý