Ajax Aspekte: 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.

posted by MatHertel @ 1/29/2006,