.comment-link {margin-left:.6em;}

Ajax Aspekte

  (goto the English blog)

Ein AJAX Framework: Eine AJAX Engine in JavaScript, XML, SOAP, WSDL und ASP.NET mit der Nutzung von Standard WebServices auf dem Server.

Eine Bibel-Applikation mit AJAX - II

Technologie

Die unter http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx verfügbare Seite ist bereits eine kleine AJAX fähige Applikation und damit mehr als nur eine kleine technologisch getriebene Demo Seite die nur ein bestimmtes Control oder ein Stück Code aufzeigen soll.

Ich hatte vor einiger Zeit bereits mit dieser Applikation begonnen um zu zeigen wie die Teile dieser AJAX Engine und die JavaScript Teile zusammen passen und um zu sehen wo eine gemeinsame Funktionalität benötigt wird und welche Features innerhalb der Controls benötigt werden.

Verkettete Select Elemente

Die 4 select Elemente am Begin der Seite sind miteinander verkettet indem Sie auf bestimmte data Connections der Seite hören und Daten an Data Connections weitergeben. Zusammen formen Sie die 4-Ebenen umfassende Spezifikation eines anzuzeigenden Verses.

Dazu wird ein AJAX Select Box Control zusammen mit einer AJAX Action und ein wenig JavaScript Code verwendet. Das Controls zur Auswahl des Kapitels ist z.B. so definiert:

<ajax:Select id="ChapterSelect" runat="server" pageproperty="chapter" style="width: 120px">
</ajax:Select>

Der folgende JavaScript Code registriert sich für Änderungen an dem Wert für das ausgewählte Buch "book". Die AJAX Action wird dann verwendet um die Kapitel diese Buches vom Server zu holen indem die Methode ListChapters des BibleData WebServices verwendet wird:

<script defer="defer" type="text/javascript">
  var obj = document.getElementById("ChapterSelect");
  obj.GetValue = function(prop, value) {
    if (((prop == "version") || (prop == "book")) && (jcl.DataConnections.GetPropValue(prop) != value)) {
      ajax.Start(this.ChapterAction, this);
    }
  }; // GetValue
  jcl.DataConnections.RegisterConsumer(obj, "*");

  obj.ChapterAction = {
    delay: 10,
    prepare: function(obj) {
      key = jcl.DataConnections.GetPropValue("version")
       + ";" + jcl.DataConnections.GetPropValue("book");
       return (key); },
    call: proxies.BibleData.ListChapters,
    finish: function (value, obj) {
      obj.CreateOptions(value);
      if (obj.selLast == true)
        obj.options[obj.options.length-1].selected = true; 
      obj.selLast = false;
    },
    onException: proxies.alertException
  }; // ChapterAction
</script>

Sehr ähnliche Scripten findet man bei den beiden anderen 2 verketteten Controls.

Ermitteln des Verse Textes

Um den Text eines Verses vom Server zu holen wird die weitere AJAX Action mit dem Namen VersTextAction verwendet. Die 4 Eigenschaften version, book, chapter und verse werden an die Methode GetVers des WebServices BibleData übergeben. Der zurückgegebene Wert wird in den Textbereich hineingeschrieben:

obj.VersTextAction = {
  delay: 10,
  prepare:
    function(obj) {
      key = jcl.DataConnections.GetPropValue("version")
       + ";" + jcl.DataConnections.GetPropValue("book")
       + ";" + jcl.DataConnections.GetPropValue("chapter")
       + ";" + jcl.DataConnections.GetPropValue("vers");
      return (key);
    }, // prepare
  call:
    proxies.BibleData.GetVers,
  finish:
    function (value, obj) {
      obj.style.direction = ((jcl.DataConnections.GetPropValue("version") == "biblehebr") ? "rtl" : "ltr");
      obj.innerHTML = value;
    },
  onException:
    proxies.alertException
}; // VersTextAction

Eine sehr ähnliche AJAX Action wird verwendet um den Prolog Text vom Server zu holen der eventuell existiert um ein Buch zu beschreiben. Der Rest der JavaScript Programmierung wird für das sequentielle Blättern durch die Verse, Kapitel und Bücher benötigt.

Auf dem Server wird ein einziger in C# geschriebener ASP.NET WebService mit 5 Methoden verwendet um die vom Bible Reader benötigten Daten auszuliefern. Siehe: http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BibleData.asmx.

Das ist Alles. Der komplette spezifische Code, der für diese Applikation benötigt wird, umfasst nur ca. 15 kByte Quelltext. Ich denke, dass man keine Applikation mit dieser Funktionalität mit weniger Quellcode realisieren kann.

Es ist möglich und es kann einfach sein AJAX Web Applikationen zu bauen denn mit der richtigen Technologie und dem richtigen Level der Programmierung kommt man ohne viel Quellcode aus.

Eine Bibel-Applikation mit AJAX - I

Handbuch

Hier ist nur eine kurze Dokumentation zu der online verfügbaren Bibel-Applikation bei http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx.

Der Bibel-Leser kann gestartet werden indem einfach diese URL in einem Browser Fenster geöffnet wird. Die Seite lädt sich vollständig und startet mit einer der verfügbaren Bibel-Versionen (natürlich mit 1. Mose 1 'Am Anfang...').

Es kann eine der auf dem Server installierten Bibeln mit der ersten Select Box ausgewählt werden:

sf_kjv_strongs_rev1bEine englische Version der Bibel.
en_gb_KJV2000_1Eine etwas modernere englische Version der Bibel.
luther1912Die Luther Übersetzung der Bibel.
biblehebrEine hebräische Version der Bibel.

Ja von rechts nach links! – Kennt sich irgendwer mit hebräisch aus und kann mir bestätigen ob das korrekt angezeigt wird?

Es gibt einige Unterschiede zwischen der Anzeige im FireFox und im IE.

In der zweiten Select Box kann eines der verfügbaren Bücher ausgewählt werden. Bei manchen Bibeln sind die Namen der Bücher verfügbar bei anderen nicht und es müssen die Nummern der Bücher verwendet werden. Das neue Testament startet mit der Nummer 40.

In der dritten Select Box kann das anzuzeigende Kapitel und in der vierten Select Box kann der Vers ausgewählt werden.

Wenn man diese Werte ändert wird automatisch die mögliche Auswahl der nächsten Select Boxen aktualisiert, indem die gültigen Werte im Hintergrund vom Server geholt werden. Wenn eine Bibel-version ausgewählt wird, dann wird die Liste der Bücher aktualisiert. Wenn ein Buch ausgewählt wird, dann wird die Liste der Kapitel aktualisiert...

In der großen Text Box unterhalb der Select Boxen wird der Text des ausgewählten Verses angezeigt.

Es ist möglich die Version der Bibel zu ändern ohne das aktuell selektierte Buch zu ändern. Damit kann schnell zwischen verschiedenen Bibel-Versionen hin und her geschaltet werden.

Die beiden Schaltflächen unterhalb des Textes ermögliche ein einfaches vorwärts blättern auch über die Grenzen von Kapiteln und Büchern hinweg.

Sie navigieren durch mehrere jeweils ca: 5 MByte große Bücher – Und das schnell !

Tuning TableData

After realizing the first working version of TableData I found several things that did not work as expected so I published a better version with some enhancements.

Speed

The first version (still available here) retrieved the row from the WebService one row each time. The time that is needed to update a page full of visible rows was only a second or two when developing on my local system but is about 4-6 second on the real internet. The reason for this slow down is the time a package needs to be transferred from the client to the server and back. You can use the tracert command (tracert http://mathertel.devhost1.centron.net) line tool to verify this timing. You can see how long an almost empty package needs to be transferred and that is extremely longer than a package that doesn't leave a development machine. Reducing the number of packages is the key and I decided to bundle the Fetch call for all newly visible rows together into a singe call to the server.

FireFox compatibility

After some months of working with both browsers (IE and FireFox) I've got some experience in implementing one source for both browsers - but forgot to test.

I fixed some minor things:

  • The parentElement attribute of the html dom should not be used. Use parentNode instead.
  • The firstChild attribute might get a text node in FireFox that is skipped or not existing in IE. Whitespace should not be used between a parent node and the fist child node.
  • The onscroll event it is not documented but works as expected in FireFox. Great !

Reusability

When trying to reuse the controls on a different project I found that I need more parameters to make them portable. The name (alias) of the service that is used for selecting and fetching the data is now configurable.

Anzeigen von sehr großen Tabellen mit AJAX

Es gibt viele Implementierungen für das ASP.NET Framework mit denen tabellarische Daten dargestellt werden können. Die meisten davon senden den Inhalt der Tabelle zusammen mit dem mit den anderen Anteilen der Seite an den Browser.

Wenn es dazu kommt Massendaten anzuzeigen bieten die meisten Implementierungen einen Mechanismus zur seitenweisen Navigation durch kleinere Anteile von Datensätzen indem die ganze Seite immer wieder gesendet wird.

Hier wird ein anderer Ansatz vorgestellt, der es ermöglicht seitenweises Blättern oder nahtloses Scrollen ermöglicht, ohne dass die ganze Seite erneut geladen werden muss indem AJAX Aufrufe an einen WebServer zum Holen der Daten verwendet wird.

Wenn Sie die Information dieses Blogs oder der Dokumentation auf der Beispiel - WebSeite verfolgen können sie den AJAX Anteil im Beispiel identifizieren. Der meiste Teil des JavaScript auf dem Client wurde benötigt um die Anwender-Ereignisse zu behandeln und das HTML DOM aufzubauen.

In der Tat findet man hier ein 3-stufiges Vorgehen:

  1. Wenn die Seite lädt, wird eine leere Tabelle an den Client gesendet, die als Vorlage für die Tabelle verwendet wird. Es wird keine Integration mit den Daten benötigt um diese Phase des Ladens anzuschließen.
  2. Wenn eine Suche gestartet wird, indem die Suchparameter an einen WebService übergeben werden, ermittelt die Select Methode des WebServices eine Liste aller anzuzeigenden Datensätze und liefert eine Liste von eindeutigen IDs auf den Client zurück.
  3. Jede Zeile, die darzustellen ist wird vom Server angefordert, indem ein die Fetch Methode des WebServices aufgerufen wird. Diese liefert ein XML Dokument mit dem Datensatz der Zeile zurück.

Der Umfang der Daten, die bis zur Darstellung der ersten Seite übertragen werden müssen ist etwas größer als bei den klassischen Realisierungen aber wenn man auf die nächste Seiten geht oder mit dem Scrollbalken nach untern scrollt, dann werden nur die neuen Datensätze vom Server geholt - deutlich weniger als ein erneutes Laden der ganzen Seite. Es wird noch besser, wenn man wieder zurück scrollt, denn bereits geladene Zeilen werden angezeigt ohne den Server überhaupt zu fragen.

Auch wenn man eine andere Suche mit einem anderen Suchkriterium ausführt werden die Zeilen, die bereits bekannt sind angezeigt ohne den Server zu fragen. Man kann sich leicht vorstellen, dass man mit diesem Verfahren sehr große Tabellen an den Client schicken kann ohne dass die umfangreichen Daten tatsächlich übertragen werden müssen.

Probieren Sie es aus auf der Beispiel Web Seite aus: http://www.mathertel.de/AjaxEngine/S03_AJAXControls/TableData.aspx

Zuerst selektieren Sie einige Daten mit der Hilfe einer der 3 Select Schaltflächen. Dann können Sie entweder seitenweise durch die Daten blättern oder (mein Favorit) Sie drücken die Schaltfläche [all] und scrollen durch die Tabelle. Jetzt können Sie das nachträgliche Laden der Datensätze beobachten.

Die Implementierung besteht aus einem WebService, 2 AJAX Controls und der AJAX Engine für die asynchrone Kommunikation und das Caching.

DataTablePager Control

Das DataTablePager Control implementiert den clientseitigen Controller des MVP Patterns und ist ein AJAX Controls das die AJAX Action implementiert mit der die Daten vom Server geholt werden.

Es sind einige Methoden verfügbar, mit denen bestimmte Ansichten geladen oder auch die Daten der Tabelle gelöscht werden können. Zusätzliche Schaltflächen können diese Methoden zum Suchen von Daten nutzen indem Filter und Sortierungskriterien mitgegeben werden.

Die Events, die durch das Scrollen der Tabelle entstehen können ebenfalls Methoden aufrufen um die notwendigen Daten vom Server zu holen.

DataTable Control

Das DataTable Control implementiert den clientseitigen View des MVC Patterns und ist dafür zuständig eine Tabelle dynamisch aufzubauen in der die Datensätze vom Server in der durch die Musterzeile vorgegeben Formatierung angezeigt werden.

Wenn die Seite geladen wird, wird das Muster gesichert und wenn neue Datensätze anzuzeigen sind wird dieses Muster für jede Zeile kopiert.

Aktuell ist nur eine sehr einfache Muster Funktionalität implementiert das Daten nur einfach als Text anzeigen kann. Das Muster wird auf dem Server aufgebaut indem das cols Attribut des Controls ausgewertet wird.

Jedes mal wenn eine neue Zeile sichtbar wird, wird die FetchRow Methode des DataTablePager Controls aufgerufen, damit die Daten vom Server geholt werden. Dieses ruft bei Verfügbarkeit von Daten die FillRow Methode des DataTable Controls auf um die Daten in die Zeile der Tabelle zu füllen.

Der TableData WebService

Der WebService der vom DataTablePager Control verwendet wird ist die serverseitige implementierung des model des MVP Patterns. Dieser WebService muss die Methoden implementieren die durch das Interface ITableData spezifiziert sind.

Um alle 3 Elemente zusammenzubinden sind nur einige Zeilen an Source Code in der HTML-Seite selbst notwendig, die nur die Controls und den Proxy zum WebService beinhaltet Nur einige spezifische Attribute sind zu setzen. - Schauen Sie mal rein.

Ich sehe noch Möglichkeiten der Optimierung indem die Daten der neu sichtbaren Zeilen gemeinsam vom Server geholt werden und dadurch die Anzahl der Aufrufe zum Server reduziert werden. - Stay connected.

CustomValidation AJAX Control Sample

Die ASP.NET Web Forms bieten im Standard Lieferumfang bereits eine Sammlung von Validierungs-Controls zur Überprüfung der Werte in den Feldern eines Formulars. Dabei werden 2 Vorgehensweisen unterstützt:

  • Wenn die Daten eines Formulars an den Server zurückgesendet werden wird eine bestimmte serverseitige Funktionalität des Controls oder der Seite aufgerufen.
  • Wenn der Benutzer den Wert eines Feldes ändert und das Feld verlässt wird eine bestimmte clientseitige Funktion aufgerufen.

Mit der Hilfe von AJAX und der Möglichkeit von asynchronen Aufrufen auf den Server im Hintergrund kann ohne große Anstrengung eine dritte Art der Validierung implementiert werden bei der die großen Möglichkeiten einer serverseitigen Überprüfung mit den Vorteilen einer guten Anwendererfahrung durch die schnelle und unmittelbare Überprüfung auf dem Client kombiniert werden.

Wenn der Benutzer den Wert eines Feldes ändert und das Feld verlässt wird ein bestimmter WebService aufgerufen, der den Wert überprüft.

Die Implementierung ist offensichtlich.

1. Man benutzt den vorhandenen CustomValidator um eine clientseitige Funktion anzubinden:

<input autocomplete="off" id="EMAIL_IN" runat="server" name="EMAIL" />
<asp:CustomValidator ID="CustomValidator1" runat="server"
  ControlToValidate="EMAIL_IN"
  ErrorMessage="Please enter a valid e-mail address."
  ClientValidationFunction="validateEMail">*</asp:CustomValidator>

2. Die im Attribut ClientValidationFunction spezifizierte clientseitige Überprüfung die von dem Control verwendet wird lässt das arguments.isvalid Flag auf true gesetzt (default) um alle aktuell angezeigten Fehler zu löschen und startet dasnn eine AJAX Action mit dem source Object als Parameter.

function validateEMail(source, arguments) {
  ajax.Start(validateAction, source);
} // validateEMail

3. Die AJAX Action wird deklariert. Sie basiert auf einigen Implementierungsdetails der clientseitigen Fehleranzeige:

var validateAction = {
  delay: 0,
  prepare: function (source) {
    // from the Validator Common JavaScript
    return(ValidatorGetValue(source.controltovalidate));
  },
  call: proxies.ValidatorDemo.ValidateEMail,

  finish: function (val, source) {
    // from the Validator Common JavaScript
    source.isvalid = val;
    if (! val)
      Page_IsValid = false;
    ValidatorUpdateDisplay(source);
    ValidationSummaryOnSubmit(null);
    },
  onException: proxies.alertException
} // validateAction

Diese Deklaration beinhaltet keine für die Überprüfung spezifischen Code bis auf den Verweis auf den WebService um eine E-Mail Adresse zu verifizieren so dass diese Deklaration auch für andere Zwecke wieder verwendet werden kann.

Die Integration der AJAX Action ist ein wenig trickreich, denn die eingebaute Validierung in den ASP.NET Validierungen erwarten keine asynchrone Bearbeitungen sondern wollen eine unmittelbare Entscheidung und die Validierungs-Übersicht aktualisiert sich leider nicht immer korrekt.

Der WebService selbst kann nun tun, was immer auch zu tun ist. In meinem Beispiel benutze ich die Dns Klasse um den Domänennamen aufzufinden und um damit zu prüfen ob sie überhaupt deklariert ist. Das kann nicht auf dem Client gemacht werden und ist ein Beispiel für die starken Möglichkeiten, die man auf dem Server aber nicht auf dem Client zur Verfügung hat.

Das Beispiel findet man in: http://www.mathertel.de/AjaxEngine/S03_AJAXControls/ValidatorDemo.aspx

Verwendung von AJAX fähigen Controls in ASP.NET Forms

Die Verwendung von Formularen ist für viele Web Applikationen die wichtigste Funktionalität. Sie verlassen sich sehr darauf denn diese Funktionalität war bereits in den alten Browsern implementiert und auch die modernen unterstützen diese Funktionalität immer noch.

AJAX Funktionalitäten in Web Applikationen zu verwenden bedeutet nicht dass alles re-implementiert werden muss. Mit AJAX Funktionalitäten können diese Applikationen leicht um Controls mit asynchronen Hintergrundsfunktionalitäten erweitert werden ohne die aktuelle Applikationsstruktur aufzubrechen:

  • eines Feldes können sofort auf dem Server überprüft werden ohne dass das ganze Formular neu geladen werden muss.
  • Benutzer kann Hilfe zur Eingabe der richtigen Werte angeboten werden indem ein Feld um eine spezielle Lookup Funktionalität erweitert wird.
  • Felder können in Abhängigkeit von bereits eingegebenen Werten angezeigt oder verborgen werden.
  • Felder können in Abhängigkeit von bereits eingegebenen Werten vorbelegt werden.
  • Die Optionen von SELECT Elementen können in Abhängigkeit von bereits eingegebenen Werten belegt werden.

Gemeinsam für diese Szenarien ist, dass eine reine clientseitige Implementierung oft schwer zu realisieren oder gar unmöglich ist, da die benötigten Daten oder Funktionalitäten auf dem Client nicht direkt zur Verfügung stehen. Auf dem Server ist im Gegensatz dazu die Information verfügbar und wird in den herkömmlichen normalen Web Forms verwendet um die Eingaben des Anwenders zu prüfen bevor die weitere Funktionalität ausgeführt wird.

Wenn man AJAX fähige Controls in eine existierenden Web Applikation integriert ist es möglich die Formulare entgegenkommender zu gestalten und durch eine schnellere Rückkopplung dem Benutzer zu helfen. Die Ausführung der Web Form kann so bleiben sie sie ist indem die Daten des Formulars an den Server übermittelt und dort verarbeitet wird.

Auf der Beispiel Website zu diesem Blog, siehe http://www.mathertel.de/AJAXEngine/Default.aspx, sind einige Beispiele enthalten die die Verwendung von AJAX in normalen Web Formularen veranschaulichen:

Validator Demo

http://http://www.mathertel.de/AJAXEngine/S03_AJAXControls/ValidatorDemo.aspx zeigt, wie man eine serverseitige DNS Überprüfung verwendet um zu prüfen ob der Servername einer to E-Mail Adresse auf dem Web bekannt ist ohne das Formular neu zu laden.

Bible Reader

http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx hier wird u.a. gezeigt, wie man Optionen von HTML SELECT Elementen in Abhängigkeit von anderen Werten setzen kann ohne das Formular neu zu laden.

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.

AJAX = Asynchronous JavaScript And XML (+ DHTML)

Über dieses Blog

XML

Die Programmierung im Ajax Stil ist eine interessante Art der Programmierung von Web Applikationen unter Verwendung der stabilen Internet Technologien wie HTML und Javascript. In diesem BLOG will ich meine Erfahrungen auf diesem Gebiet und einige interessante Aspekte mit einfachen wie auch fortgeschrittenen Themen beleuchten.

Downloads:

AjaxEngine.zip (39 kByte)

This Zip-File contains the core files of the AJAX engine and the AJAX controls.

Ajax.zip (164 kByte)

This Zip-File contains the ASP.NET 2.0 web project that builds this side. All samples are included.

Sample WebSite:

Die Beispiele sowie den ausführlichen Sourcecode findet man auf der Beispiel Website:
http://www.mathertel.de
/AjaxEngine/Default.aspx
.

Documentation:

See http://www.mathertel.de/AJAX

License

Creative Commons License
This work is licensed under a Creative Commons Attribution 2.0 Germany License.

Letzte Posts

Name: MatHertel
Standort: Germany

Impressum

Archiv

Powered by Blogger