head.WriteLine()

Montag, Mai 16, 2011

TT.UIA: Einführung

Die Idee hinter thinktecture UIAnnotations (TT.UIA) ist es, UI-Interaktionslogik zu kapseln und diese deklarativ an vorhandene Steuerelemente “anzuhängen”. Der Vorteil liegt hierbei in der flexiblen Anwendbarkeit. Wenn man zum Beispiel eine Textbox mit einem Wasserzeichentext (CueBanner) ausstatten will, gibt es mehrere Möglichkeiten.
  • Templating: Man erstellt ein Custom Template für die Textbox. Dies ist kein leichtes Unterfangen und ohne Code nur sehr schwer zu realisieren. Zudem muss das Template explizit oder implizit zugewiesen werden.
  • Vererbung: Hierbei wird eine Ableitung von Textbox erstellt und mit einem Custom Template verknüpft. Bei diesem Ansatz ist alles zwar schön gekapselt, jedoch funktioniert dies nur für Textboxen – Comboboxen, DatePicker und co. sind hiervon natürlich nicht betroffen. Daher müsste man den Vorgang für diese Controls wiederholen. Und wenn dann noch weitere Features implementiert werden sollen, ist man schnell dabei für die komplette Toolbox Ableitungen zu erstellen.
Noch schwieriger wird es, wenn die Erweiterungen nicht nur das Control selbst betreffen. Wenn zum Beispiel neben allen Input Controls, die an Pflichtfelder gebunden sind, ein entsprechendes Symbol erscheinen soll, müssten für alle Control-Typen Custom- oder User Controls erstellt werden.
Aus diesen (und vielen weiteren) Gründe liegt es nahe, die entsprechende Funktionalität mehr oder weniger Control-neutral abzubilden und diese dann im jeweiligen Fall an das gewünschte Control “anzuhängen”. Beispiel:
<TextBox uia:CueBanner="Enter your name!" />
CueBanner
In diesem Beispiel wird von TT.UIA ein WPF Adorner erzeugt, der direkt auf die Oberfläche des entsprechenden Controls zeichnet. Dies hat den Vorteil, dass keine Ableitung des Controls erforderlich ist. Zudem kann der Adorner auch außerhalb des Controls zeichnen, was eine leichte Kennzeichnung von Felder (Pflichtfeld, …) ermöglicht.
Für das “Anhängen” von UI-Funktionalität bietet TT.UIA zwei verschiedene Ansätze: Attached Properties und Expression Blend Behaviors. Beide Varianten haben Ihre Vor- und Nachteile.
  • Attached Properties bestechen durch ihre Einfachheit. Wie im oberen Beispiel dargestellt, können Sie sehr leicht an ein beliebiges Control angehängt werden. Doch der eigentliche Vorteil – gegenüber Behaviors – ist, dass sie auch per Style zugewiesen werden können.
  • Expression Blend Behaviors sind vor allem für Designer bzw. alle die vornehmlich in Expression Blend entwickeln interessant. Denn Blend bietet eine sehr gute Designer-Unterstützung für Behaviors. XAML-lastige Entwickler mögen sie wegen ihrer ausladenden Syntax hingegen eher weniger. Der wirkliche Vorteil gegenüber Attached Properties ist jedoch, dass man sie mit Events verknüpfen kann.
Hier ein Beispiel für die Deklaration eines TT.UIA-Behavior.
<TextBox>
  <i:Interaction.Behaviors>
    <behaviors:FocusBehavior HighlightBrush="Yellow" />
  </i:Interaction.Behaviors>
</TextBox>

FocusBehavior
Hier wird das FocusBehavior verwendet, welches das fokussierte Control in einer beliebigen Farbe einfärbt.
Im nächsten Post stelle ich die einzelnen Adorner und Behaviors von TT.UIA im Detail vor.

Labels: