Algoria: Tablet-PC Anwendung für den Informatikunterricht
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
18 IMVS Fokus Report 2010
Algoria: Tablet-PC Anwendung für
den Informatikunterricht
Algoria ist eine neuartige, stiftbasierte Tablet-PC Anwendung für den Informatikunterricht. Sie ist in der
Lage im eng begrenzten Kontext der algorithmischen Datenstrukturen typische Skizzen von Arrays, Listen,
Bäumen und Graphen direkt während des Skizzierens zu erkennen, in entsprechende Datenstrukturen im
Hauptspeicher abzubilden und Algorithmen darauf anzuwenden. Die von den Algorithmen erwirkten An-
passungen der Datenstrukturen werden in Form von automatisch generierten Animationen dargestellt. In
diesem Artikel gehen wir hauptsächlich auf den Aufbau der Software und auf die eingesetzte GUI-Tech-
nologie WPF ein. Zudem zeigen wir, wie mit WPF eine konsequente Trennung zwischen GUI-Design und
-Verhalten erreicht werden kann.
Raphael Schweizer, Christoph Stamm, Beat Walti | christoph.stamm@fhnw.ch
2002 kamen die ersten Laptops mit berührungs von Laptops in Schulzimmern eliminieren kön
sensitivem Bildschirm, so genannte Tablet-PCs, nen, sondern darüber hinaus eine neuartige und
auf den Markt. Seit den vielen unterschiedlichen in der Informatik bisher selten erlebte Form des
Anpreisungen und Lobeshymnen sind die Geräte enaktiven Erlernens (durch Schülerhandlungen)
und die dazu notwendige Software ständig wei von rein abstrakten Abläufen mit entsprechender
terentwickelt worden. Mittlerweile haben sich Software ermöglichen. Das Arbeiten mit Stift und
auch Apple und RIM mit ihrem iPad bzw. Play- Touch-Screen erlaubt neben dem vereinfachten
Book der Sache angenommen und es ist abseh Zusammenarbeiten in Gruppen einerseits den
bar, dass der von Windows dominierte Tablet-PC Einsatz virtueller Leinwände und anderseits eine
Markt dadurch aufgefrischt wird. Eine solche eng verknüpfte Kombination des Skizzierens und
Auffrischung kann kaum schaden, denn bis heu gleichzeitigen Simulierens. Diese beiden Stär
te hat sich der Tablet-PC – zumindest im europä ken wollen wir mit unser neu entwickelten Lern
ischen Raum – nur in wenigen vertikalen Märkten software Algoria für Informatik-Dozierende und
durchgesetzt, etwa in Krankenhäusern oder in -Studierende exemplarisch demonstrieren und im
Industriebetrieben zur Steuerung und Überwa Unterrichtsfach „Algorithmen und Datenstruk
chung komplexer Abläufe. Konsumenten hingegen turen“ auch austesten.
haben den Tablet-PC bis heute nicht wirklich als Algoria ist in der Lage im eng begrenzten Kon
Laptop-Ersatz angenommen. Ist der Tablet-PC text der algorithmischen Datenstrukturen ty
demnach eine Fehlentwicklung oder erfüllen die pische Skizzen von Arrays, Listen, Bäumen und
Geräte die in sie gesteckten Erwartungen nicht? Graphen während der Erstellung zu erkennen und
In einem von der Haslerstiftung geförderten zu prozessieren. Die Art des Prozessierens geht
Projekt wollen wir exemplarisch aufzeigen, dass dabei über die bekannte Skizzenerkennung wie
Tablet-PCs im schulischen Umfeld ihre Berechti in [PH08, Rbe06, Ham07] beschrieben hinaus und
gung haben, dass die Schule wie so oft als Tech beinhaltet bei uns auch die abstrakte Abbildung
nologiewegbereiter dienen kann und dass die der Datenstruktur im Speicher und schafft da
Schlüsseltechnologie der Tablet-PCs – die Hand durch die Grundlage zur Simulation und Animati
schrifterkennung – mittlerweile die notwendige on von Algorithmen. Gerade die Animation der Al
Reife erlangt hat, um für eine Vorlesungsmit gorithmen, wie wir sie von unzähligen Applets im
schrift zu genügen. Im Gegensatz zu anderen For Internet kennen, z.B. [Muk], ist oft ein hilfreicher
schungsprojekten, welche den allgemeinen Nutzen Bestandteil fürs Verständnis. Damit sprengt Al
von Tablet-PCs im Lernprozess analysieren [AC10, goria auch das Spektrum von Anwendungen,
AU10, COP09] oder einen gezielten Umgang mit welches [KHPC08] mit ihrem System zur verein
Tablet-PCs im technischen Unterricht aufzeigen fachten Erstellung von Tablet-PC Anwendungen
[BBC10, KFE07], wollen wir zeigen, dass Tablet- anvisieren. Kurz gesagt, Algoria verschmelzt aus
PCs nicht nur einzelne negative Begleitumstände geklügelte Skizzenerkennung mit automatisch ge
nerierter, eindrucksvoller Animation.
Heutzutage wird zwischen reinen Tablets und Converti- In diesem Artikel beschreiben wir zuerst ein
bles unterschieden. Wir verwenden hier den Begriff Tablet-PC
paar Grundkonzepte, die bei der Entwicklung von
für beide Ausprägungen.
www.haslerstiftung.ch Tablet-PC-Anwendungen beachtet werden sollen,
Algoria: Tablet-PCs im Informatikunterricht; 2009 bis 2011 führen dann in die Skizzenerkennung ein und leiIMVS Fokus Report 2010 19
Abbildung 1: Algoria im praktischen Einsatz. Die Benutzerin verbindet die soeben gezeichneten Listenelemente „26“ und „27“ mit
einem Pfeil.
ten schliesslich zur Architektur von Algoria und kargem GUI sämtliche Funktionalität bequem
zu den verwendeten Technologien über. Dabei und per Stift intuitiv und mit kurzen Wegen er
richten wir unser Augenmerk auf das in Algoria reichbar machen kann.
verwendete GUI-Framework WPF. Mit einer ein Die aufgeworfene Fragestellung ist in verschie
fachen Beispielanwendung zur Listendarstellung densten Studien bereits untersucht worden, z.B. in
zeigen wir exemplarisch auf, wie WPF eine kon [GW00, Hop91, KB94]. In all diesen drei Ansätzen
sequente Trennung zwischen GUI-Design und wird ein Interface vorgeschlagen, welches sich in
-Verhalten ermöglicht. Den Bericht schliessen wir runder Form um die Stiftposition herum anord
mit einem kurzen Ausblick auf das weitere Pro net, so dass möglichst wenig Strecke mit dem Stift
jektvorgehen ab. zurückgelegt werden muss. Im Unterschied zum
Ansatz in [GW00] möchten wir nicht auf Klicks
Enge Platzverhältnisse verzichten, dafür aber auf das bewährte Popup-
Tablet-PCs haben üblicherweise kleine Bild Menü bei Rechtsklick , welches zur Reduktion der
schirme (ca. 11") mit einer oft bescheidenen Auf Handbewegung und zur Ausnutzung des Kontexts
lösung. Daher ist ein haushälterischer Umgang eingeführt wurde. Obwohl das Popup-Menü im
mit der Bildschirmfläche angebracht. Auf unnö Umgang mit der Maus eine sehr wertvolle Hilfe
tig breite Menübalken, wie man sie beispielswei darstellt, so ist der Rechtsklick mit einem Stift
se vom Ribbon-Control aus Microsoft Office 2007 eher schwierig vorzunehmen, da der zu betäti
kennt, sollte wenn möglich verzichtet werden. In gende Stiftknopf nur mühsam gedrückt werden
Algoria versuchen wir generell auf Toolbars und kann. Viele der kleinen Stiftbewegungen werden
Menübalken zu verzichten. Dies führt zu einem durch den Zeigefinger der Schreibhand gesteu
spartanischem GUI, aber genau das ist schliess ert. Wird der Zeigefinger nun zur Betätigung des
lich unser Ziel: viel Platz für das Wesentliche. Rechtsklicks abkommandiert, führt die Schreib-
Dabei stellt sich jedoch die Frage, wie man trotz
Apple verzichtete ursprünglich auf eine Maus mit mehre-
Das GUI in Office lässt sich auch so konfigurieren, dass ren Tasten und somit auch auf das Kontextmenu bei Rechts-
dieser Platz nicht oder nicht permanent beansprucht wird. klick.20 IMVS Fokus Report 2010
Animation
DataStructure • DataStructures
• Algorithms
• PlugͲIn
Symbol
• LADDER
3
Component
• Symbolizer
3
• InkAnalysis
• Componizer
Stroke
• Stift
Abbildung 2: Der Ablauf vom Strich über die Datenstruktur bis hin zum animierten Algorithmus
hand dennoch reflexartig eine Stiftbewegung Welche Komponenten für ein Symbol benö
aus, was zu einer leicht veränderten Bildschirm tigt werden und in welchen Beziehungen diese
position und somit zu einem Rechtsklick an einer Komponenten zueinander stehen, wird in aus
unerwünschten Position führen kann. Durch ein gelagerten LADDER-Dateien spezifiziert [HD03,
Redesign des Stiftes könnte dieser Nachteil allen Ham07b, Sch10]. Dadurch erreicht man eine kla
falls aus der Welt geschaffen werden. re Auftrennung zwischen abstraktem Symbol
Neben dem kleinen Stiftknopf unterstützt und seiner grafischen Darstellung. Diese Auf
Windows auch die Emulation eines Rechtsklicks teilung ist analog zur Definition von abstrakten
durch einen zeitlich verlängerten Linksklick. Schriftzeichen in Codierungsstandards und
Dieser Ansatz löst zwar das Problem der unge deren konkreter grafischen Umsetzung in Form
nügenden Präzision mit dem Stiftknopf, erzeugt von Schriftarten (Fonts). Eine solche Aufteilung
aber ein anderes: Beim Popup-Menü mit der Maus drängt sich aus zweierlei Gründen auf: erstens
hat man sich daran gewöhnt, dass dieses Menü weil es unterschiedliche Darstellungsarten für
unmittelbar nach dem Rechtsklick auftaucht und die gleichen Datenstrukturen gibt und zweitens
somit kann die Hand sofort mit einer seitlichen weil die gezeichnete Darstellung (Symboleingabe)
Bewegung zur Auswahl des Menüeintrags begin nicht unbedingt der grafischen Symbolausgabe
nen. Eine Abkehr von diesem zeitlichen Verhalten entsprechen muss. Gerade dieser zweite Grund
erschwert die Arbeit mit dem Stift unnötig, so erhebt das hier vorliegende virtuelle Zeichnen auf
dass eine Umstellung und vor allem ein häufiger eine höhere Abstraktionsstufe verglichen mit dem
Wechsel zwischen Maus und Stift sehr unange physischen Zeichnen z.B. auf Papier.
nehm sind. Aus den zuvor genannten Gründen Eine Datenstruktur besteht aus einer Menge
propagieren wir den Verzicht auf den Rechtsklick gleichartiger Elemente, die untereinander (se
in Tablet-PC-Anwendungen und untersuchen mantisch) verknüpft sind. In Abbildung 2 sehen
sinnvolle Alternativen. wir beispielsweise ein Element einer einfach ver
ketteten Liste. Ein solches Element kann jedoch
Vom Strich zur animierten Datenstruktur auch als vollständige, 1-elementige Datenstruk
Das Zeichnen einer Datenstruktur beginnt ganz tur betrachtet werden. Unter der Voraussetzung,
einfach mit einem Strich (Abb. 2). So ein Strich dass die Datenstrukturen in der Lage sind, sich
ist eine Punktekette, welche verschiedene For mit anderen Datenstrukturen zu verschmelzen,
men annehmen kann: Liniensegment, Kreis reicht es zur Beschreibung der Datenstruktur ein
bogen, Ellipse, Polygon, usw. Aus den Strichen einzelnes Datenstrukturelement als Kombination
werden geometrische Komponenten eines Sym von Symbolen oder als Symbol höherer Ordnung
bols abgeleitet, wobei jedes Symbol aus endlich zu beschreiben. Diese Beschreibung erfolgt nach
vielen Komponenten besteht. Beispielsweise be dem gleichen Prinzip wie die Beschreibung eines
steht das Symbol „Pfeil“ aus einer Pfeilspitze Symbols selber. Gegenüber dem Symbol legt die
und einem Schaft. Zusammen bestehen sie aus Datenstruktur jedoch zusätzlich noch das Ver
mehreren geometrischen Komponenten (z.B. drei halten ihrer Symbole fest. Typische Beispiele
Liniensegmente oder ein Liniensegment und ein
Dreieck). Unicode Standard, www.unicode.orgIMVS Fokus Report 2010 21
AlgoriaEngine
Input 16 21 37
InkCanvas
Strokes /
Gestures 3. 1. 2.
24
Componizer
Abbildung 4: Verschiedene Zustände während einer Einfüge-
Components(Line,Path,
Rectangle,…)
operation
zusätzlichen Animationscode und versucht statt
Symbolizer dessen, aus dem Programmcode des Algorithmus
Symbols den Animationscode automatisch zu generieren.
In Algoria gehen wir diesen zweiten Weg.
Algoria im Überblick
DataStructure UIElement
PlugͲIn In Abbildung 3 sehen wir den hauptsächlichen
Datenfluss in Algoria. Die von der Benutzerin
Abbildung 3: Datenflusses in Algoria eingegebenen Striche werden auf dem InkCanvas
erfasst und dahingehend untersucht, ob es sich
für Verhalten sind das Verschmelzen von Daten dabei um vordefinierte Gesten handelt. Erkannte
strukturen, die Akzeptanz von Texteingabe oder Gesten und unbekannte Strichfolgen werden an
die Bereitstellung von Geometriemanipulatoren. schliessend einer allenfalls bereits vorhandenen
Anders ausgedrückt, die Datenstruktur liefert die Datenstruktur übergeben, welche entscheidet,
Semantik zu einem Symbol. Der Pfeil in unserem ob sie die Eingabe verarbeiten kann, was zum
Listenelement wird dann beispielsweise zur Ver Beispiel bei handgeschriebenem Text innerhalb
kettung zweier Listenelemente. eines Listenelementes zum Tragen kommt. Für
Aus den gezeichneten und erkannten Sym den Fall, dass keine Datenstruktur für die Einga
bolen bzw. Datenstrukturelementen kann nun be zuständig ist oder eine zuständige Datenstruk
eine gesamtheitliche Datenstruktur im Haupt tur die übergebenen Striche nicht verarbeitet,
speicher des Systems aufgebaut werden. Damit versucht der Componizer die Eingabe zu neuen
ist die Grundlage zur Ausführung von Algorith Komponenten zu verarbeiten. Die Komponenten
men auf dieser Datenstruktur gelegt. Welche Al werden dann alleine oder mit anderen Komponen
gorithmen pro Datenstruktur jedoch angeboten ten zusammen durch den Symbolizer zu Symbolen
werden, ist individuell und lässt sich über einen kombiniert und der Datenstruktur übergeben.
eingebauten Plug-In-Mechanismus von aussen er Schliesslich sorgt die Datenstruktur dafür, dass
weitern. Normalerweise ist die Ausführung eines das skizzierte Symbol auf dem InkCanvas durch
Algorithmus für einen Betrachter nur indirekt eine verschönerte und für die Datenstruktur
über die Daten- oder Strukturveränderung er typische Repräsentation ersetzt wird.
sichtlich. Da jedoch längst nicht alle Algorithmen Die drei Module InkCanvas, Symbolizer und
die Struktur verändern und viele Datenverände Componizer bezeichnen wir als Algoria Engine.
rungen auf den ersten Blick chaotisch anmuten, Ausserhalb dieser Engine befinden sich indivi
ist eine visuelle Darstellung des algorithmischen duelle Plug-Ins, welche die unterschiedlichen Da
Ablaufs oft wünschenswert. Wir sprechen hierbei tenstrukturen kapseln und mit der Engine über
von einer Algorithmen-Animation. In den meisten vorgegebene Schnittstellen interagieren. Wie ein
eindrucksvollen Algorithmen-Animationen wird solches Zusammenspiel zwischen Plug-In und
für die eigentliche Animation ein Vielfaches an Engine im praktischen Ablauf aussehen kann,
Programmcode des ursprünglichen Algorithmus beschreiben wir hier für das konkrete Beispiel ei
benötigt. Dadurch wird der animierte Algorith ner einfach verketteten Liste beim Einfügen eines
mus zu einem aufgebauschten Kunstprodukt, das neuen Listenelementes.
nicht mehr einfach nur abläuft, sondern auf viel Nehmen wir an, dass bereits eine Liste mit drei
fältigste Art sich selbst (z.B. in Form von Quell Elementen gezeichnet und mittels Pfeilen verket
code) und seinen Ablauf visualisiert. Das Problem tet worden ist (Abb. 4). Zum Einfügen eines neuen
dabei ist, dass der Animationscode nicht aus dem Elementes „24“ zeichnen wir es in der Nähe der
Programmcode automatisch erzeugt werden kann, Einfügeposition und verbinden es anschliessend
was zur Folge hat, dass zum Algorithmus noch auf mit einem neuen Pfeil zum bereits vorhandenen
wendig hergestellter Animationscode mitgeliefert Element „37“. In einem dritten Schritt zeichnen
werden muss. Eine minimale Form der Algorith wir einen neuen Pfeil zwischen dem Element „21“
menanimation verzichtet grösstenteils auf solch und dem neuen Element und setzen so das neue22 IMVS Fokus Report 2010
Darstellung und Verhalten und sorgt dafür, dass
sich GUI-Elemente auf einfache Art (bidirekti
onal) an ein Datenmodell binden lassen. Gerade
das einfache Binding zwischen Datenmodell und
GUI erleichtert auch die Animation von Algorith
men, da die Algorithmen lediglich auf dem Daten
modell operieren müssen.
Abbildung 5: Einfache WPF-Beispielapplikation Windows Presentation Foundation
Mit Hilfe einer einfachen C# WPF-Applikation
Element als direkten Nachfolger von „21“. Gleich (Abb. 5) wollen wir die konsequente Trennung
zeitig entfernt Algoria die bisherige Verbindung zwischen Darstellung und Verhalten aufzeigen.
zwischen „21“ und „37“. Dieser beschriebene Ab Diese Beispielapplikation soll einerseits verschie
lauf entspricht der üblichen Vorgehensweise beim dene Techniken von WPF demonstrieren und an
Einfügen eines neuen Elementes in eine verkettete dererseits deren Nutzen oder Schwierigkeiten
Liste. In Algoria tritt jedoch dabei das Problem aufdecken. Ähnlich wie in ASP.Net werden pro
auf, dass nach dem zweiten Schritt zwei separate GUI-Komponente zwei separate Dateien angelegt:
Listen existieren, welche beide eine gemeinsame Das Design wird in einer XML-ähnlichen Spra
Fortsetzung (Listenelement „37“) haben. Dieser che, einer XAML-Datei (eXtensible Application
Umstand erschwert generell eine konsistente Vi Markup Language) beschrieben und das Verhal
sualisierung der Listen und muss mit passenden ten in einer so genannten Code-Behind Datei in C#
Massnahmen (z.B. kongruente visuelle Überde implementiert.
ckung der gemeinsamen Listenteile) gelöst wer In XAML wird der hierarchische und logische
den. Aufbau des GUIs (LogicalTree) oder der visuelle
Wie eingangs beschrieben, werden vordefi Aufbau einer Komponente (VisualTree) beschrie
nierte Strichfolgen vom InkCanvas als Gesten er ben. Im LogicalTree sind all jene abstrakten GUI-
kannt. Solche Gesten erlauben eine intuitivere Be Komponenten enthalten, die man als komplette,
dienung eines Touchscreens. In unserem Beispiel einzelne Bausteine verwendet, wie beispielswei
mit der Liste liesse sich etwa ein Listenelement se eine Schaltfläche oder ein Textfeld. Der Visu-
durch eine mindestens dreifache, horizontale alTree beinhaltet all jene visuellen Bestandteile,
Strichfolge entfernen. Diese Geste ist der Benut welche tatsächlich gezeichnet werden. Bei einer
zung eines Radiergummis nachempfunden. Schaltfläche ist dies nebst einem Rahmen auch
sein Hintergrund, der Text auf der Schaltfläche,
Verwendete Technologien ein Schatten, ein Mauseffekt usw. Der logische
Neben dem Zeichnen von Symbolen spielt auch die Baum kann also als generalisierter Baum aller vi
stiftbasierte Texteingabe und die dazugehörige suellen Komponenten gesehen werden.
Texterkennung eine wichtige Rolle in Algoria. Die Unsere Beispielapplikation soll in der Lage
Texterkennung wird nicht von Algoria selber er sein, eine veränderbare Liste darzustellen. Sie be
ledigt, sondern an das Tablet-PC API von Micro steht im Wesentlichen aus zwei Komponenten:
soft delegiert. Das Tablet-PC API, welches auch • einem InkCanvas und
schlecht lesbaren Text, verschiedene Sprachen und • einer beispielhaften Implementierung einer
einfachste Geometrien und Gesten erkennen kann, Liste.
ist seit der Windows XP Tablet-PC Edition im Be Das InkCanvas ermöglicht es uns, mittels Stift
triebssystem integriert. In anderen Betriebssyste oder Maus auf der gesamten Oberfläche der Ap
men wie Linux oder Mac OSX gibt es bislang ähn plikation zu zeichnen. Das Gezeichnete wird ana
liche Erweiterungen nur von Drittanbietern, was lysiert und falls es keiner der vier nachfolgenden
üblicherweise dazu führt, dass die gewünschte Gesten entspricht, verbleibt es als Strichfolge auf
Funktionalität nicht auf allen Installationen vor der Oberfläche:
handen ist oder sich inkonsistent verhält. • ScratchOut (mindestens dreifaches horizon
Auf das Tablet-PC API von Windows kann na tales links/rechts ziehen auf einer Höhe): es
tiv oder auch mittels .Net Code zugegriffen wer werden all jene Listenelemente gelöscht, die
den. Infolge der Aktualität des .Net Frameworks während der Geste berührt werden;
und der verbesserten Wartbarkeit des Codes ha • Left (schnelles nach links ziehen): das Daten
ben wir uns für eine Entwicklung in C# entschie modell wird reinitialisiert;
den. Als dazu passende GUI-Technologien bieten • Right (schnelles nach rechts ziehen): löscht alle
sich vor allem WinForms und Windows Presen- nicht verarbeiteten Striche vom InkCanvas;
tation Foundation (WPF) an. WPF ist die neuere • Tap (antippen): setzt den Fokus auf ein Listen
der beiden Technologien und kann als Ersatz von element oder entfernt ihn wieder.
WinForms angesehen werden. WPF überzeugt Während die beiden Gesten Left und Right nicht
vor allem durch seine konsequente Trennung von von der Datenstruktur selber verarbeitet werden,IMVS Fokus Report 2010 23
...
...
Listing 1: Design eines Listenelementes
sondern üblicherweise von einem Controller, da dieser Effekt elegant erzielt werden. Diese Deak
die visualisierte Datenstruktur während der Ge tivierung hat aber auch Einfluss auf die punktu
sten gar nicht berührt werden muss und somit elle Tap-Geste, welche üblicherweise im Innern
auch nicht die Ereignisse erhält, werden hingegen des Rahmens und somit auch innerhalb des Text
die beiden anderen Gesten (ScratchOut und Tap) blocks erfolgt. Durch die Deaktivierung wird der
direkt von der Datenstruktur bzw. deren Visuali Textblock beim Berührungstest nicht beachtet.
sierung verarbeitet. Dabei zeigt sich ziemlich gut, Stattdessen empfängt der dahinterliegende Rah
wie die Trennung von Verhalten und Darstellung men die Tap-Geste und verarbeitet sie oder leitet
zu verstehen ist. sie im VisualTree an sein umgebendes Element
Listing 1 implementiert das GUI eines Listene weiter. Eine Geste ist ein so genannter RoutedE-
lements, bestehend aus einem Rahmen und einem vent, der so lange im VisualTree nach oben wan
Textblock. Das Verhalten des Listenelementes dert, bis er in einem passenden Gesture-Hand-
wird durch die darauf anwendbaren Gesten ler verarbeitet wird. Dieses Konzept ist weitaus
(ScratchOut und Tap) und die damit ausgelösten praktikabler für GUIs als das Observer-Pattern,
Aktionen beschrieben. Diese Beschreibung wird bei dem sich Objekte für den Erhalt von Ereignis
mittels Trigger und Action angehängt und ist so sen speziell registrieren müssen.
mit weder im Datenmodell noch direkt in der Vi Die Darstellung der gesamten Liste beschränkt
sualisierung implementiert. Bei einer ScratchOut- sich auf wenige XAML-Zeilen, wie in Listing 2 er
Geste besteht das grundsätzliche Problem, dass sichtlich ist. Das Property ItemTemplate definiert
sie infolge ihrer räumlichen Ausdehnung mehrere die Darstellung eines einzelnen Listenelementes (wie
GUI-Komponenten erfassen kann. Falls mehre in Listing 1 gezeigt), ItemsSource bindet auf eine In
re Listenelemente gleichzeitig gelöscht werden stanz der Liste („MyList“) und ItemsPanel definiert
sollen, dann ist dieses Verhalten durchaus wün das Layout der Liste. Die Darstellung eines einzel
schenswert. Wenn aber ein Listenelement, wie nen Listenelementes ist also ganz unabhängig von
in unserem Fall, aus mehreren GUI-Komponen der Anordnung der Listenelemente und beide Teile
ten besteht, sollte darauf geachtet werden, dass können selber gestaltet werden. In unserem Beispiel
nur eine einzige Delete-Action für das gesamte verwenden wir nur für ein Listenelement ein eigenes
Listenelement ausgelöst wird. Durch die Deak Template. Für das Layout aller Listenelemente der
tivierung des HitTests auf einem Teil der Kom Liste greifen wir auf ein bereits vorhandenes Stack-
ponenten (im Beispiel auf dem TextBlock) kann Panel zur horizontalen Anordnung zurück.
Listing 2: Design der Liste24 IMVS Fokus Report 2010
Ein weiteres WPF Element, welches wir an List
dieser Stelle hervorheben wollen, ist der Ador-
ner. Ein Adorner kann man sich als Dekoration Controller Layout
für eine GUI-Komponente vorstellen, die relativ
zur dekorierten GUI-Komponente platziert wird.
In Abbildung 5 ist das Listenelement „20“ bei Control Template
spielsweise mit einem BorderAdorner hervorge
hoben. Adorner werden in einem eigenen Layer
im Vordergrund gezeichnet und können dadurch Animation
Animations
Processor
nicht durch GUI-Komponenten überdeckt werden.
Da allerdings mehrere Adorner gleichzeitig aktiv
sein können, kann es durchaus vorkommen, dass Algorithms NodeModel
mehrere Adorner einander überdecken. Obwohl
Adorner Teil der Visualisierung sind, werden
sie in C# und nicht in XAML implementiert. Dies Abbildung 6: Komponenten einer Listenimplementierung
hängt damit zusammen, dass Adorner primitive
FrameworkElemente sind und die Trennung zwi und somit auch eine erleichterte Erweiterbar
schen XAML- und C#-Code erst auf einer höheren keit. Während die Entwicklung einer neu zu un
Abstraktionsebene hinzukommt. terstützenden Datenstruktur einiges an Wissen
In unserer Beispielanwendung verwenden wir über Algoria voraussetzt, ist die Entwicklung und
den BorderAdorner aus Listing 3, um den Fokus Integration von neuen Algorithmen für die be
eines Listenelementes zu visualisieren. Im Kon stehenden Datenstrukturen auch für Entwickler
struktor wird ein Rechteck vorbereitet, welches ohne spezifisches Algoria-Wissen möglich.
dann später in der ArrangeOverride-Methode aus Das Plug-In der Datenstruktur „List“ besteht
gerichtet und (indirekt von WPF) gezeichnet wird. aus einem Controller, einem Layout, einem Con-
Damit WPF erkennt, dass der Adorner etwas zu vi trol, einem Template, einem NodeModel und ei
sualisieren hat, muss das Rechteck als VisualChild nigen Animationen (Abb. 6). Der Controller in
registriert werden. Dies geschieht mittels der bei stanziiert und initialisiert für jedes übergebene
den Properties Children und VisualChildrenCount Node-Symbol ein neues NodeModel und generiert
sowie der Methode GetVisualChild(int index). dazu passend das Control, welches die Visualisie
rung übernimmt. Das Control wendet dafür das
Plug-In Datenstruktur Template auf das NodeModel an und generiert
In Algoria bestehen alle unterstützten Daten so pro NodeModel eine eigenständige Visualisie
strukturen aus einem umfangreichen Set von rung, die dann wiederum mittels Layout inner
Programmkomponenten. Diese Funktionen und halb des Listen-Controls an der entsprechenden
Controls werden pro Datenstruktur zusammen Stelle gezeichnet wird. Bei animierten Algorith
gefasst und in ein oder mehrere separate Plug-Ins men entscheidet der AnimationProcessor, welche
ausgelagert. Eine solche Abtrennung von der Al Teilmenge der vom Algorithmus automatisch ge
goria Engine erlaubt eine separate Entwicklung nerierten Ereignisse wirklich animiert wird. Zu
public class BorderAdorner : Adorner {
protected VisualCollection Children { get; set; }
protected override Visual GetVisualChild(int index) { return Children[index]; }
protected override int VisualChildrenCount { get { return Children.Count; } }
private Rectangle rect;
public BorderAdorner(UIElement adornedElement) : base(adornedElement) {
Children = new VisualCollection(this);
rect = new Rectangle {
Stroke = new SolidColorBrush(Colors.DarkOliveGreen),
StrokeThickness = 3
};
Children.Add(rect);
}
protected override Size ArrangeOverride(Size finalSize) {
FrameworkElement fe = AdornedElement as FrameworkElement;
if (fe != null) {
rect.Arrange(new Rect(0, 0, fe.ActualWidth, fe.ActualHeight));
}
return base.ArrangeOverride(finalSize);
}
}
Listing 3: Ein einfacher Adorner, welcher einen Rahmen um ein bestehendes Listenelement zeichnet.IMVS Fokus Report 2010 25
public interface IDatastructureController {
BitmapSource Icon { get; }
string Name { get; }
string Description { get; }
bool IsLinked { get; }
IEnumerable SymbolsOfInterest { get; }
IDatastructure Create(ISymbolAnalysis sa);
bool TryMerge(ref IDatastructure first, ref IDatastructure second, ISymbolAnalysis link);
}
Listing 4: Der Einstiegspunkt in das Plug-In
dem wählt er die passenden Animationen aus und vom AnimationProcessor für die Animation ver
spielt diese ab. wendet werden können.
Im folgenden Abschnitt gehen wir auf den Das Layouten einer Datenstruktur ist eine
Controller, das Datenmodell und das Layout noch nicht triviale Angelegenheit. Einerseits darf das
etwas genauer ein. gezeichnete Element nach dem Zeichnen nicht
gleich davon springen (es könnte durch den Lay
Controller, Datenmodell und Layout out-Mechanismus an eine andere Position ge
Unter Verwendung des Controllers erstellt die zwungen werden), andererseits muss die Daten
Algoria Engine eine Instanz der als Plug-In gela struktur in der Lage sein, die Elemente sinnvoll
denen Datenstruktur. Das Interface des Control auszurichten und verschönert darzustellen. Die
lers ist in Listing 4 dargestellt. Die ersten drei Pro- sem Umstand Rechnung tragend unterscheidet
perties sind rein informativer Natur und werden das Layout-Panel typischerweise zwischen drei
von der Engine zur Auflistung der vorhandenen Modi: Position und Grösse unverändert überneh
Datenstrukturen genutzt. Die IsLinked Eigen men (Standard), Veränderungen an einem einzel
schaft definiert, ob ein Link notwendig ist, damit nen Element und drittens Veränderungen an der
eine Datenstruktur mit einer anderen zusammen ganzen Datenstruktur. Der letzte Modus wird bei
wachsen kann. Dies ist beispielsweise bei Listen spielsweise dann benötigt, wenn die Grösse der
und Bäumen der Fall, nicht jedoch bei Arrays. Das gesamten visualisierten Datenstruktur interak
Property SymbolsOfInterest beinhaltet eine Menge tiv verändert wird. Wiederum stellt das Algoria
von Symbolnamen, welche die Datenstruktur ver Framework einige AttachedProperties zur Verfü
arbeiten kann. Die Symbolnamen selber beziehen gung, die von den Plug-In-Entwicklern verwendet
sich auf die in LADDER definierten Symbole. werden sollen.
Sobald die Engine ein Symbol erkannt hat, ruft Zum jetzigen Zeitpunkt ist die Entwicklung und
sie die Create-Methode mit dem entsprechenden Integration einer neuen Datenstruktur in Algoria
Symbol als Argument auf. Die Create-Methode noch mit sehr viel Aufwand verbunden. Erst mit
generiert daraus eine neue Datenstruktur beste der Entwicklung von weiteren Datenstrukturen
hend aus genau einem Symbol. Anschliessend wird sich zeigen, in welchem Masse sich gemein
überprüft die Engine mit der TryMerge-Methode, same Teile separieren und abstrahieren lassen,
ob diese neu erzeugte Datenstruktur mit einer um fremden Datenstrukturentwicklern die Arbeit
bereits bestehenden zusammenwachsen kann. so weit wie möglich zu erleichtern. Im Gegensatz
Welche der bereits bestehenden Datenstrukturen dazu ist die Entwicklung neuer Algorithmen, die
für ein allfälliges Zusammenwachsen ausgewählt auf den bestehenden Datenstrukturen operieren,
werden, hängt von einer Analyse der nächsten relativ einfach und unterscheidet sich kaum, von
Nachbarn ab. Üblicherweise kommen nur Daten der herkömmlichen Implementierung in anderen
strukturen und Links in Frage, die sich entweder Software-Projekten.
berühren oder sehr nahe beinander liegen.
Die Modellierung einer Datenstruktur obliegt Zusammenfassung und Ausblick
dem Plug-In-Entwickler. Es empfiehlt sich jedoch, In der aktuellen Version von Algoria können Ar
das Modell so zu entwickeln, dass das GUI darauf rays und Listen von Hand skizziert, erkannt, mit
binden und die Algorithmen wie gewohnt darauf tels stiftfreundlichem Menü oder Gesten editiert
operieren können. Das Algoria Framework stellt und auf einfache Art animiert werden. Die zu er
lediglich einige primitive Datentypen zur Verfü kennenden Symbole sind von Algoria separiert
gung, die bei der Modellierung einer Datenstruk und in einer speziellen Symbolbeschreibungs
tur Verwendung finden. Zu diesen primitiven sprache (LADDER) abgelegt. Weitere Datenstruk
Datentypen gehören unter anderen AnimNumber turen wie Bäume und Graphen werden folgen. Alle
und AnimText, die beide von DependencyObject Datenstrukturimplementierungen inklusive Algo
erben und automatisch Ereignisse auslösen, die rithmen sind vom Algoria-Kern in separate Plug-26 IMVS Fokus Report 2010
Ins ausgelagert, um individuelle Erweiterungen Referenzen
zu ermöglichen. [AC10] Ambrósio, A.P.L., Costa, F. M. Evaluating the Impact of PBL
and Tablet PCs in an Algorithms and Computer Program-
Vorerst ist es noch notwendig, Algoria die zu
ming Course. Proc. of the 41st ACM technical symposium
erkennende Datenstruktur mitzuteilen. Entspre on computer science education, SIGCSE, 2010.
chende Vorarbeiten zur Eliminierung dieser Zu
[AU10] Ando, M., Ueno, M. Analysis of the Advantages of Using
standsabhängigkeit sind jedoch getroffen worden Tablet PC in e-Learning. 10 th IEEE International Conference
und sollen in den kommenden Versionen weiter on Advanced Learning Technologie, ICALT, 2010.
umgesetzt werden. [BBC10] Benlloch-Dualde, J.-V., Buendia, F., Cano, J.-C. Supporting
Bei der Animation der Algorithmen verfol instructors in designing Tablet PC-based courses. 10 th IEEE
gen wir einen minimalistischen Ansatz, welcher International Conference on Advanced Learning Technolo-
gie, ICALT, 2010.
ohne grossen Programmieraufwand auskommt.
[COP09] Casas, I. Ochoa, S.F., Puente, J. Using Tablet PCs and Pen-
Der grösste Teil der Animation wird aus der her
Based Technologies to Support Engineering Education.
kömmlichen Formulierung der Algorithmen in C# Human-Computer Interaction. 13 th Inter. Conf., 2009.
automatisch generiert.
[GW00] Guimbretière, F., Winograd, T. FlowMenu: Combining
Command, Text, and Data Entry. Proc. of the 13th Annual
ACM Symposium on User Interface Software and Technol-
ogy, 2000.
[Ham07] Hammond, T. Enabling Instructors to Develop Sketch
Recognition Applications for the Classroom. Frontiers in
Engineering, 2007.
[Ham07b] Hammond, T. LADDER: A Perceptually-Based Language
to Simplify Sketch Recognition User Interfaces Develop-
ment. MIT PhD Thesis, 2007.
[HD03] Hammond, T., Davis, R. LADDER. A Language to Describe
Drawing, Display, and Editing in Sketch Recognition. Int.
Joint Conf. on Artificial Intelligence, 2003.
[Hop91] Hopkins, D. The Design and Implementation of Pie Menus.
Dr. Dobb’s Journal, Dec. 1991.
[KB94] Kurtenbach, G., Buxton, W. User Learning and Perfor-
mance with Marking Menus. Proc. of CHI ’94, 1994.
[KFE07] Kurtz, B.L., Fenwick, J.B., Ellsworth, C.C. Using Podcasts
and Tablet PCs in Computer Science. Proc. of the 45th An-
nual Southeast Regional Conference, 2007.
[KHPC08] Kamin, S., Hines, M., Peiper, C., Capitanu, B. A System for
Developing Tablet PC Applications for Education. Proc.
of the 39 th SIGCSE Technical Symp. on Computer Science
Education, 2008.
[Muk] Mukundan, R. Java Applets Centre. University of Canter-
bury, Computer Science. http://www.cosc.canterbury.
ac.nz/mukundan/dsal/appldsal.html
[PH08] Paulson, B., Hammond, T. PaleoSketch: Accurate Primitive
Sketch Recognition and Beautification. Proc. of the 2008
Int. Conf. on Intelligent User Interfaces, 2008.
[Rbe06] Rbeiz, M.A. Semantic Representation of Digital Ink in the
Classroom Learning Partner. MIT MSc Thesis, Dept. of
Electrical Engineering and Computer Science, 2006.
[Sch10] Schweizer, R. Algoria – Skizzenerkennung für Tablet-PCs.
Symbolerkennung. Master Projekt P7a, 2010. http://weba-
pache.imvs.technik.fhnw.ch/~christoph.stamm/reports/
P7a_2010_Algoria.pdfSie können auch lesen
