Am 19.März 2009 veröffentlichte Microsoft neben der Betaversion von Silverlight 3, auch Expression Blend 3 in der Preview-Version (CTP) auf der MIX09. Bei Expression Blend 3 hat sich einiges getan, was auf den ersten Blick nicht so ersichtlich ist. Ganz besonders erfreut bin ich über die neue Data sources Integration.

In der Vergangenheit hatte Microsoft nur zwei unterschiedliche Entwicklungswege Unterstützt, das wären die Datengetriebene- und Frontendgetriebene-Entwicklung (Data-DD, FDD). Wie derzeit die BETA-Version von Microsoft Visual Studio 2010 zeigt, wird für die Zukunft, nun auch verstärkt die Testgetriebene-Entwicklung (TDD) unterstützt, womit die Entwicklung von Businesslogikgetriebenes-Design (DDD) erst fachgemäß umgesetzt werden kann. Nicht nur daran ist dies ersichtlich, sondern auch an der Vision: Trennung von Design und Logik. Der Designer soll sich unabhängig vom Entwickler um das Frontend kümmern und der Entwickler soll sich nur um seine Programmierung beschäftigen.

Leider konnte derzeit diese Vision nicht „wirklich“ unabhängig nachgekommen werden. Zugegeben, mit der XAML-Technologie ist es auf Technischer ebene bereits möglich, dennoch mussten für das Design immer wieder Daten für die Designer bereitgestellt werden, außer der Designer wusste sich selbst mit Visual Studio Abhilfe zu schaffen, oder durch Stubs Bereitstellungen der Entwickler.

Doch bei Expression Blend 3 kann diese gegenseitige Abhängichkeiten nun endlich durch Data sources gelöst werden. Mittels Data sources kann der Designer sich unterschiedliche Daten selbst zur Verfügung stellen. Auch für Frontendgetriebene-Entwicklung ist dies ein erfreuliches Feature.

Data sources erstellen

In diesem Beispiel wird ein Silverlight 3-Projekt mit den Namen SilverlightDataSourcesExample erstellt. Anschließend wird die ListBox aus dem Asset Library ausgewählt, und auf die Silverlight-Oberfläche gezogen.

Abb.1.1. – Neues Silverlight 3 Projekt.

Abb.1.2. – ListBox einfügen.

Damit die ListBox die Informationen erhält, wie der Inhalt später richtig angezeigt werden soll, muss ein Data-Template erzeugt werden. Um das Umzusetzen macht man ein Rechtsklick auf der erzeugten ListBox und geht im Menü unter „Edit Other Templates“, „Edit Generated Items (ItemTemplate)“ und „Create Empty“ (siehe Abb.1.3).

Abb.1.3. – Data-Template für die ListBox definieren.

Daraufhin kommt das Fenster „Create DataTemplate Resource“ wo der Name auf „DataTemplateExample“ unbenannt wird. Bei „Define in“ wird für dieses Dokument die ListBox ausgewählt.

Abb.1.4. – Data-Template für die ListBox erstellen

Daraufhin öffnet sich eine leere graue Oberfläche, wo ein Grid ohne Arbeitsfläche angezeigt wird. Um etwas Platz zu gewinnen, muss nur auf das Grid geklickt werden und links unten bei „Objects and Timeline“ das Objekt [Grid] gewählt sein, damit rechts unter „Properties“ die Eigenschaften für das Objekt angezeigt werden. Dort werden die Breite 200 und die Höhe von 30 definiert.

Abb.1.5. – Data-Template unter Expression Blend einrichten

Damit im Grid später zwei unterschiedliche Texte angezeigt werden, soll das Grid nun aufgeteilt werden mit einem Klick in der Mitten vom oberen Rand (siehe kleinen Pfeil mit der Linie, Abb.1.6). Anschließend sollen Links und Rechts TextBlöcke eingefügt werden, die im Toolbox Menü links zu finden sind. Der erste TextBlock bekommt den Namen „TextBlockFirma“ und der zweite „TextBlockName“. Der Name wird rechts oben unter Properties definiert.

Abb.1.6. – Zwei TextBlöcke anlegen

Data sources verwenden

Um jetzt für jeden einzelnen TextBlock einen Text zur Verfügung zu stellen, geht dies unabhängig vom Entwickler oder benötigten Programmierkenissen. Dafür geht man rechts oben im Menü auf „Data“. Hier können nun die Daten für die gesamte Anwendung (Application) oder für das aktuelle Fenster (This Document) Definieren werden. Für dieses Beispiel werden nur Daten für das jeweilige Fenster benötigt. Zum Hinzufügen von Daten bekommt man rechts oben weitere Auswahlmöglichkeiten. Dabei können beim ersten Icon „Add sample data source“ ein neues Daten-Objekt (Define New Sample Data) erzeugt werden, oder beim zweiten Punkt kann ein Daten-Objekt von einer XML (Import Sample Data from XML) Generiert werden. Sollte man bestehende Daten-Objekte benötigen, wählt man diese mit dem anderen Icon „Add live data source“ aus. Für das Beispiel wird hier „Define New Sample Data“ ausgewählt.

Abb.1.7. – „Define new Sample Data“

Im folgenden Fenster kann für das Daten-Objekt ein Name und der Verfügbarkeitsbereich eingestellt werden. Außerdem wird abgefragt ob die Daten auch während der Ausführung der Anwendung bereitgestellt werden sollen. Es wird alles belassen und auf OK geklickt.

Abb.1.8. – Erstelle Daten-Objekt

Danach wird rechts unter dem „This document“ die erste SampleDateSource mit einer ersten Collection angezeigt (Abb.1.9). Mit einem Klick auf den Namen Collection kann auch ein neuer Name definiert werden. Hier wird der Name Kunden vergeben. Dann hat die neue Kunden-Collection eine Standard Property1. Mit einem Klick auf das kleine Icon „ABC“ daneben, können zu diesem Property Einstellungen bearbeitet werden. Als erste Auswahl stehen die Typen (String, Number, Boolean und Image). Der Wert String soll bleiben. Dann kommt die Auswahl vieler Formate. Hier wird „Company Name“ verwendet, das für den TextBlockFirma dient (Abb.1.10). Der Name wird dann von Property1 in FirmenName geändert. Bei der Kunden-Collection wird mittels Plus-Icon ein weiteres Property „Add Simple Property“ angelegt. Der Name auf KundenName geändert. Unter den Einstellungen wird das Format auf Namen ausgewählt, das dann für TextBlockName bedacht ist (Abb.1.11).

Abb.1.9. – Erste Daten-Collection

Abb.1.10. – Für TextBlockFirma das erste Property Definieren.

Abb.1.11. – Das zweite Property für TextBlockName

Um die Test-Daten einsehen und auch bearbeiten zu können, kann bei der Kunden-Collection auf dem Datenbankicon „Edit sample values“ ein weiteres Fenster aufrufen (Abb.1.12). Beim „Edit Sample Values“-Fenster wird zum Test der Firmenname oder Kundenname beliebig geändert und die Anzahl der Daten weiter unten auf 50 erhöht, dann mit OK beendet. (Abb.1.13.).

Abb.1.12. – Edit sample values öffnen

Abb.1.13. – Die Generierten Daten

Als letzter Schritt wird den TextBlöcken die einzelnen Property-Daten aus der Kunden-Collection mittels Data-Binding gebunden. Dazu wird noch einmal beim Data-Template auf den ersten TextBlockFirma geklickt, damit werden die Properties passend angezeigt. Dort wird beim Element „Text“ das Data-Binding Menü auf dem keinen Punkt daneben aufgerufen (siehe Abb.1.14).

Abb.1.14. – Data-Binding für „Text“ Definieren

Beim folgenden Fenster „Create Data Binding“ wird sofort SampleDataSource angezeigt. Bei einer Auswahl wird rechts auch schon die Kunden-Collection angeboten. Dort wird dann FirmenName für den TextBlock benötigt.

Abb.1.15. – Die Kunden-Collection zur Auswahl

Derselbe Schritt wird bei dem anderen TextBlock auch ausgeführt. Dann werden beim Data-Template die ersten Daten sofort ersichtlich. Um nun die Liste mit Daten sehen zu können, wird zur zurück zur Liste gewechselt. Dazu muss oben in der Mitte auf [ListBox] geklickt werden (siehe Abb.1.16).

Abb.1.16. – Zur Liste zurück wechseln

Obwohl die Daten bereits im Data-Template angezeigt wurden, ist leider noch nichts davon in der Liste ersichtlich. Das liegt daran, dass dieser Liste selbst explizit kein Data-Binding definiert wurde. Dafür muss mittels Rechtsklick auf die ListBox auf „Bind ItemSource to Data“ die Kunden-Collection definiert werden.

Abb.1.17. – Bind ItemSource to Data

Abb.1.18. – Kunden-Collection auswählen

Nun wird in der Liste trotz Data-Template Definition nur der Objektname der Collection angezeigt. Das Data-Template muss wiederholt für die Liste Definiert werden. Dazu wird noch einmal mittels Rechtsklick auf die ListBox unten auf „Edit Other Templates“, „Edit Generated Items“ und unter „Apply Resource“ das DataTemplateExample ausgewählt.

Abb.1.19. – DataTemplateExample für die Liste zuweisen

Jetzt zeigt die Liste die zur Verfügung gestellten Texte an. Er hat automatisch erkannt, dass es einen manuellen Eintrag gab und hat diesen Bevorzugt wiederholt. Ob das mit Absicht so bedacht war oder ob dies ein Preview-Fehler ist, war leider nirgends ersichtlich.

Abb.1.20. – Die fertige Liste mit Daten befühlt

Wenn das Programm mit der Taste [F5] gestartet wird, werden die Daten nicht angezeigt. Dies kann aber auch unter „Data“ bei den „Data source options“ (Datenbank-icon) eingeschalten werden.

Abb.1.21. – Daten in der Liste während der Laufzeit anzeigen lassen

Data sources Technologie-Background

Beim erzeugen einer Data source wird dem Projekt ein neues Verzeichnis mit SampleData angelegt. In diesem Verzeichnis befinden sich mehrere Dateien. Beginnend bei der SampleDataSource.xsd, die einen Index aller Daten sources und Collections bereitstellt. Die Data Sources bestehen hier aus zwei Dateien, einer XAML und Code-Behind-Datei. Die XAML-Datei beinhaltet alle Daten, die durch ein erweitertes Control SampleData definiert werden. Dieses Control wird vom Namespace Expression.Blend.SampleData.SampleDataSource bereitgestellt. Allerdings ist die XAML Datei nicht in einem Designer bearbeitbar. Die Code-Behind-Datei steht als Generiertes ViewModel zur Verfügung. Es wird sich hier um die Verarbeitung und Bindung der Daten gekümmert. Wobei die Datei nicht bearbeitbar ist, da diese für dementsprechende Funktionen von Blend Generiert wird.

Fazit

Mit den Data Source-Feature kommt bei Expression Blend 3 ein lang erwarteter Wunsch von mir persönlich mit. Zusätzlich mit dem neuen Sketch-Flow, können Anwendungen erst einmal als Skizze verbildlicht Visualisiert werden, gemeinsam mit Data Source stehen nun auch Daten zur Verfügung. Meiner Meinung nach geht Microsoft mit Expression Blend genau den richtigen Weg und ich persönlich möchte viele Features nicht mehr missen.

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.