Ajax Aspekte: Verbindungen zwischen Controls

Das Trennen und Einkapseln von Funktionalität in Komponenten hilf sehr dazu ein wieder verwendbares Framework aufzubauen. Die meisten Komponenten existieren aber nicht für sich alleine sondern müssen an andere Komponenten angebunden werden.

Der klassische Ansatz

Wenn man die Standard Controls von ASP.NET verwendet benutzt man die serverseitigen Ereignisse der Controls, Schaltflächen, Felder und der Seite und man schreibt kleine Methoden die auf diese Events reagieren. Innerhalb dieser Ereignis Funktionen referenziert man die anderen Objekte direkt, da sie ein Teil der Seite oder der Control Klasse sind über ihre id oder zur Laufzeit über eine Such Methode.

Diese Ereignis Funktionen werden ausgeführt da ein submit() der HTML Form ausgeführt wird; eine Situation die in AJAX Applikationen nicht vorkommen sollte. Aus diesem Grund benötigt man eine Verbindung auf dem Client Anteil der Applikation in JavaScript.

Man kann den Ansatz, der vom Server her bekannt ist, auch auf dem Client implementieren indem man Event Funktionen für die HTML Ereignisse der HTML Objekte anbindet.

Der Nachteil dieser Architektur ist dass bei komplexen controls die HTML Objekte, die die Ereignisse zur Verfügung stellen eventuell innere HTML Objekte eines Controls sind, ohne eigene feste id oder auch nicht einmal vorhanden, wenn die Seite geladen wird.

Wenn man diesem Ansatz folgen will kann man die Metode jcl.AttachEvent verwendet, Diese Methode aus dem jcl.js Include file kann man dafür benutzen. Sie funktioniert auch auf den verschiedenen Browser Plattformen und erlaubt mehrere gleichzeitige Ereignis Registrierungen.

Selbst wenn man alle inneren Details eines Controls kennt möchte man dieses Wissen nicht außerhalb verwenden denn man gibt damit die Chance auf das Control zu re-implementieren ohne die Implementierungen der Seiten ebenfalls ändern zu müssen.

Der Web-Part Ansatz

Mit Sharepoint und den ASP.NET 2.0 WebPart Framework kam ein anderer Mechanismus um Komponenten zu verbinden indem ein "Provider-Subsription" Pattern verwendet wird. Komponenten können sich selbst registrieren um Änderungen von Werten von Eigenschaften zu veröffentlichen (Provider) oder zu konsumieren (Subscription). Jedes mal, wenn eine Eigenschaft über einen Provider ihren Wert ändert werden alle Subscibers über diese Änderung informiert.

Mit diesem Ansatz ergeben sich einige Vorteile:

• Der Mechanismus funktioniert sogar, wenn die Controls auf der Seite zur Compiler-Zeit nicht bekannt sind. (Sharepoint)
• Mehrere Controls können auf einfach Art die gleiche Eigenschaft veröffentlichen.
• Mehrere Controls können einfach die gleiche Eigenschaft konsumieren.
• Man benötigt die Browser spezifischen Events nicht.
• Die IDs der Objekte müssen nicht bekannt sein.

Wie man passt ist dieser Ansatz auf einem höheren Niveau besser zu dem Problembereich der Komponenten basierten Entwicklung von Seiten und Portalen und kann des weiteren auch mit dem Event-Modell der HTML Objekte kombiniert werden.

Das Beispiel zu Verbindungen

Das Beispiel benutzt 4 unterschiedliche Arten von Controls die mit in JavaScript Behaviours implementiert sind um aufzuzeigen (und zu testen) wie die clientseitlige Implementierung und Verwendung von Verbindungen funktioniert. Es gibt 3 Eigenschaften auf der Seite (x, y und z) die mit 2 unterschiedlichen Controls verändert werden können und die zusätzlich mit einem einfachen Bar-Chart angezeigt werden.

Ein weiteres Control protokolliert alle Änderungen der Eigenschaften.

See: http://www.mathertel.de/AJAXEngine/S03_AJAXControls/ConnectionsTestPage.aspx

PropInput Control

Diese Control erzeugt ein HTML input Element das mit einem JavaScript Behaviour erweitert wurde um die Änderungen des Wertes als Änderung einer Eigenschaft weiterzugeben.

Der Name der Eigenschaft wird durch das name-Attribut des Controls festgelegt.

Dieses Control registriert sich selbst auch als Subscriber um den aktuellen wert anzuzeigen, wenn er von einem anderen Control aus verändert wurde.

PropHSlider

Dieses Control implementiert ein horizontal verschiebbares Rechteck das als Schieber verwendet wird um eine Eigenschaft im Bereich von 0 bis 100 zu ändern.

Der Name der Eigenschaft wird durch das name-Attribut des Controls festgelegt.

Dieses Control registriert sich selbst auch als Subscriber um den aktuellen Wert anzuzeigen, wenn er von einem anderen Control aus verändert wurde.

PropBarChart

Diese Control implementiert ein einfaches Balkendiagramm, um mehrere Werte anzuzeigen. Die Namen der Properties werden unter den Balken angezeigt.

Die Namen der Properties können durch das Attribut "Properties" angegeben werden, indem man eine durch Semikolon getrennte Liste von Namen verwendet. Die maximale darstellbare Zahl kann durch das "maxvalue" Attribut spezifiziert werden. Dieser Wert wird als Skalierungsfaktor für die Anzeige verwendet.

PropEventLog

Dieses Control protokolliert jede Änderung einer Property property und zeigt den neuen Wert auf der Seite an.

DataConnections Reference

Die Namen der Properties werden von den DataConnections Funktionen immer in Kleinbuchstaben konvertiert und müssen deshalb vor Vergleichen mit anderen Namen ebenfalls immer in immer Kleinbuchstaben verglichen werden.

DataConnections.RegisterProvider(obj, propName)

Ein Objekt, das eine Property publiziert, muss sich mit dieser Funktion registrieren.

Der Name der Eigenschaft kann als '*' angegeben werden, um das Objekt für alle existierende Eigenschaften zu registrieren.

DataConnections.RegisterConsumer(obj, propName)

Ein Objekt, das über eine Property Änderung informiert werden soll, muss sich mit dieser Funktion registrieren.

Der Name der Eigenschaft kann als '*' angegeben werden, um das Objekt für alle existierende Eigenschaften zu registrieren.

DataConnections.Raise(propName, propValue)

Diese Funktion muss aufgerufen werden um die Änderung einer Eigenschaft bekant zu geben. Bei allen für diese Eigenschaft registrierten Objekten wird die GetValue Funktion sofort aufgerufen.

DataConnections.GetPropValue(propName)

Diese Funktion kann benutzt werden um den aktuellen Wert einer Eigenschaft abzufragen. Damit ist es nicht mehr notwendig dass sich mehrere Controls sich die aktuellen Werte merken müssen.

DataConnections.PersistPropValue(propName)

Mit dieser Funktion kann eine Property in einem Cookie zwischengespeichert werden und wird beim nächsten Betreten der Seite wieder auf diesen Wert gesetzt. Das hilft dabei das erneute Laden von Seiten zu überleben.

Das verwendete Cookie ist nicht permanent so dass der Wert nicht mehr verfügbar ist nachdem der Browser geschlossen wurde.

control.GetValue(propName, propValue)

Diese Funktion muss von den Objekten implementiert werden die über Änderungen des Wertes von Eigenschaften informiert werden wollen.

posted by MatHertel @ 9/19/2005,