An AJAX enabled bible reader

Handbook

This is a small documentation for the online available Bible Reader at http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx.

The reader can be started just by opening a window with the given URL. The page loads completely and starts with one of the available versions (of course) on the first book, first chapter, first verse: "In the beginning...".

You can select one of the server-side installed bibles by using the first select box:

sf_kjv_strongs_rev1b:	A English version of the bible.
en_gb_KJV2000_1:	A more modern English version of the bible.
luther1912:	A German version of the bible.
biblehebr:	a Hebrew version of the bible.

Yes, it's right to left - Does it look right?
I see some differences between FireFox and IE.
Maybe anyone can help on that topic !

In the second select box you can choose one of the available book. Some bibles provide names for the books, others don't and you have to use the given numbers. The New Testament starts with book 40.

In the third select box you can choose the chapter you want to read and in the forth select box you can finally choose the verse.

As you change the values of these select boxes you will see that the select lists will be updated automatically so that only valid entries are available. If you choose a book, the list of chapters will be updated, If you choose a chapter, the list of verses will be updated...

In the big text box below the text of the selected verse will be shown.

It is possible to change the version without changing the selected book, chapter and verse so you can easily switch between German and English or different English versions.

Below the text boxes are 2 buttons that enables the forward and backward navigation cross all book and chapter boundaries in a given version.

You navigate across multiple 5 MByte sized books. Fast !

Technology

The published web page available at http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx is already a AJAX application and more than just a small technology driven demo page that shows how to use a specific control or piece of code.

I started working on this application to show how it all works together and to see where we need common functionality and what features we need within the controls.

Cascading Select Elements

The 4 select boxes at the top of the page are dynamically linked together by raising and listening to some page-level data connections. Together they form the cascading 4-level specification of the available verses.

Here, the AJAX Select box control is used together with a AJAX action and some JavaScript code. The chapter select box is defined by

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

and the JavaScript code just below it reacts on changes of the version or the book. The AJAX Action is used to fetch all the Chapters from the server by using the BibleData WebService and the ListChapters method.

<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>

Very similar scripts can be found for the other 2 cascaded select boxes.

Retrieving the Vers Text

To fetch the vers text, another AJAX action, named VersTextAction is used. The 4 properties version, book, chapter and vers are retrieved and passed to the BibleData WebService and the GetVers function. The returned text is then written into the text area.

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

A very similar AJAX Action is used to look for a Prolog Text that might be describing the current book. The rest of JavaScript programming is for the sequential navigation through the verses, chapters and books.

On the Server a ASP.NET WebService, written in C# with 5 methods is used to deliver all the data that is needed by the Bible Reader Web page. see: http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BibleData.asmx

That's all. All the source you need for this application has only about 15 kByte of text. You might not get any application of this functionality with less coding.

Programming AJAX Web Applications can be easy and without a lot of source code if you choose the right technology and level of programming.

posted by MatHertel @ 29.12.05,   0 comments links to this post  

Powerpoint Slides on AJAX

I had to give a speech at the Karlsruher Software Council about AJAX some days ago.

Now I've posted the Powerpoint slides titled "AJAX – Hype and Reality" on my site at PowerPoint Slides on AJAX

There are really a lot of low level articles on AJAX that explain how to use te xmlhttp object. My summary on that: Have a look at the productiviy of yourself or your programmers and find a useful level of abstraction above the native xmlhttp objects.

Maybe you find the slides useful.

posted by MatHertel @ 20.12.05,   0 comments links to this post  

JavaScript Proxies for WebServices extended

I updated the bits on the AJAX Engine site some days ago. There are some new features I want to let you know:

• WebServices with arrays of primitive types (strings, numbers etc) are now supported by the generator of the JavaScript Proxy objects and the client side runtime in ajax.js. Have a look into the inline comments.
• There is now a new sitemap available for the whole site. You can find the link on the home page at http://www.mathertel.de on the left side. It's very easy now to discover all the posted source code files.

posted by MatHertel @ 15.12.05,   5 comments links to this post