But I’m still not changing my RH9 server, for sentimental reasons…

Turns out it was just a case of setting up the location of the JW ImageRotator file.

Unfortunately the pretty ngg-gallery slideshow widget isn’t working since I upgraded, which just adds insult to injury.

As this system is turn based I intend to allow a turn period to be set as part of the starting parameters. But also provide the option to have this as a maximum turn duration, and process turns as soon as all players have submitted their turn. Since turn processing will take a matter of seconds and the next turn will start once processing has completed, it would actually be possible for all players to be logged in at the same time and submit turn after turn.

I was surprised to see how little documentation there is on the ‘BEFORE’ and ‘AFTER’ keywords. I was looking for something that would explain to me when I should use each of these, and wherever I found *something* on it, it wasn’t enough.

Through a little bit of testing however, I have found that using ‘AFTER’ delivers desirable results for Inserts, Updates and Deletes. Is it important? Well, considering that after performing the tasks of a ‘BEFORE’ trigger the actual Insert, Update or Delete might fail, but this doesn’t undo the effects of the trigger. Using ‘AFTER’ triggers ensures that the task has completed before we create the audit record.

An example of auditing triggers, for Insert, Update and Delete:

CREATE TRIGGER mytable_audit_trigger_insert
AFTER INSERT ON mytable
FOR EACH ROW BEGIN
    INSERT INTO mytable_audit (
        id, date, name
    )
    VALUES(
        NEW.id, NOW(), NEW.name
    );
END;

CREATE TRIGGER mytable_audit_trigger_update
AFTER UPDATE ON mytable
FOR EACH ROW BEGIN
    INSERT INTO mytable_audit (
        id, date, name
    )
    VALUES(
        NEW.id, NOW(), NEW.name
    );
END;

CREATE TRIGGER mytable_audit_trigger_delete
AFTER DELETE ON mytable
FOR EACH ROW BEGIN
    INSERT INTO mytable_audit (
        id, date, name
    )
    VALUES(
        OLD.id, NOW(), OLD.name
    );
END;

It would be nice to be able to query/edit triggers, but unfortunately you can only CREATE and DROP them, certainly within the MySQL Query Browser. I’ve not tried any 3rd party tools as I’m happy to keep .sql files, with the details of the CREATE TRIGGER statements so I know what’s in them.

This is why I chose to implement the SPI model for my browser-based application framework, primarily intended for strategy/RPG gaming. Since users will need to be authenticated by the application before they can use it, and once logged in they are presented with navigational controls via menus and other web controls, I see no real requirement for them to bookmark anything other than the main application page. Which they are free to do. Admittedly, particularly in the case of online gaming, there would generally be some content intended for non-members, introduction to the application and enticing screenshots etc, which they may feel the need to bookmark. But if a sufficiently intuitive public menu is on offer then bookmarking and browsing history is still not really necessary.

Anyway, enough of justifying my apparent laziness ;P Time for some code…

I devised an XMLHttpRequest model which uses a single Ajax callback function that receives XML containing individual page updates. For example I have started with a two part interface made up of a menu and main content area. When the user clicks on a menu option an XMLHttpRequest is sent to a specific server-side script for that menu option which will compile an XML update document and pass it back. This will then be picked up from my one, generic callback function. This will then extract each xml page update and perform each update on the page. These updates will specify an ID, which relates to an element on the page.

For example, consider a very simplified situation below, with 2 menu items for introduction and about us sections, a header section that just informs the user where they are in the application and a main content section initially displaying the introduction:

<html>
  <body>
    <div id="header">Introduction</div>
    <div id="menu">
      <div onclick="AjaxReq('intro');">Introduction</div>
      <div onclick="AjaxReq('about');">About Us</div.
    </div>
    <div id="main">
      This is the introduction page.
    </div>
  </body>
</html>

The AjaxReq function will then look at it’s one parameter and call the appropriate server-side script, in this case maybe either intro{.php,.asp,.aspx,etc.} or aboutus for example. The aboutus script might then return the following XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<updates>
  <update target="header">
    <![CDATA[
      About Us
    ]]>
  </update>
  <update target="main">
    <![CDATA[
      This is the about us page.
    ]]>
  </update>
</updates>

The generic callack function that receives this can then simply replace the contents of each of the html elements specified by the target attributes, with the contents of the CDATA sections. This will give a page that looks like:

<html>
  <body>
    <div id="header">About Us</div>
    <div id="menu">
      <div onclick="AjaxReq('intro');">Introduction</div>
      <div onclick="AjaxReq('about');">About Us</div.
    </div>
    <div id="main">
      This is the about us page.
    </div>
  </body>
</html>

So a single Ajax request-response can make several updates to the page. So we could expand this to also update the menu if we wanted to include sub-menus.

Also, a single section might have a specific layout and controls within the “main” element, whose controls make Ajax requests that return updates for elements specific to that “main” section. This is made easier by the addition of passing parameters in the request. So not only can you start with a simple menu-content layout, but each of those sections could load sub-sections whose content can be updated directly.

Time for an example of the Javascript Ajax request and callback functions that could be used in an application implementing this method. These also rely on the use of the prototype library. Here’s the Ajax request function:

function AjaxRequest(url, params, callBack) {
    new Ajax.Request(url, {
        parameters: params,
        onSuccess: callBack,
        onFailure: AjaxRequestError
    });
}

Here’s the generic callback function:

function AjaxResponse(req) {
    var xmlDoc = req.responseXML;
    var xhtmlUpdate = xmlDoc.getElementsByTagName("xhtmlupdate");
    var i,target;
    for(i=0; i<xhtmlUpdate.length; i++) {
        target = xhtmlUpdate[i].getAttribute("target");
        xhtml = GetNodeXML(xhtmlUpdate[i]);
        // Clear previous data.
        while($(target).hasChildNodes()) {
            $(target).removeChild($(target).lastChild);
        }
        // Add new data if there is any.
        if (xhtml != "") {
            var tmpDiv = document.createElement("div");
            tmpDiv.innerHTML = xhtml;
            $(target).appendChild(tmpDiv);
        }
    }
}

I’ve included a login section in my application framework, with the ability for a user to register an account and retrieve forgotten login details. I have also provided a public and private application menu depending on whether the user is currently logged in or not. I’m hoping to apply it to some game rules soon for a small SPI Ajax space colonisation strategy game. But I’m also thinking of moving from Prototype to JQuery.

What else have I been doing? Mostly PHP, JavaScript (although it’s on my list to give JQuery a try after listening to the FLOSS Weekly podcast no. 55), cURL, libxml2, mySQL, Visual Studio C++ 2008 Express (for my sins ;). Oh and I’ve converted myself to Gnome, after a long and painful struggle with KDE, swapping kate for gedit and not looking back, much.

Oh and more dabbling with Drupal, wrote a newsfeed reader module for grabbing news items for a website.

Well, that’s it for now, back to the grind…

Why should we restrict the locating of specific elements to just the id attribute? Why not any other attribute? If I have a grid of elements, for example text inputs, I might want to organise them into rows and columns.

<input type="text" id="cost" row="4" col="6"/>

Now if I want to reference this control from the entire page of controls by it’s position without knowing it’s id is ‘cost’, there’s no straightforward way of doing so. It feels like this should already be available to us. For example, perhaps the control directly below this (on row 5 col 6) has focus and we wish to be able to press the up cursor key and have the focus change to this control on row 4 col 6. This would be much like using cursor keys to move around a spreadsheet. If we could search for the controls by some other attribute like row and col this would be easy. Don’t get me wrong, this is completely possible using getElementById, you could simply encode the row and column into the id attribute, as I have done many times before.

<input type="text" id="r4c6"/>...
<input type="text" id="r5c6"/>...  control with current focus

Then by parsing the id of the control which currently has focus into row and column variables (r5c6 becomes row=5 and col=6) we can simply subtract 1 from the row, re-encode the id (which would now be r4c6). But the problem is you might want the id to have more meaning than just the position of the control, perhaps calculations are done using several different controls on the page. If you then need to move a control to a different row and/or column you would then need to change all calculations to reference the new grid position. Surely it would be better to reference controls in calculations by a more meaningful id, like ‘travelCost’, ‘hourPerDay’, ‘distance’, etc.

…And this is the very problem that drove me to write the following function, giving the ability to gain a reference to an HTML element via any attribute it might have.

function getElementByAttr(attrName, attrValue)
{
    var tags = document.getElementsByTagName("*");
    var result = [];
    var elem, attr;
    var regex = RegExp("^"+attrValue+"$");
    var i = 0;

    while(elem = tags.item(i++))
    {
	attr = elem.getAttribute(attrName);
	if (attr != null)
	    if (regex.test(attr))
		result.push(elem);		
    }

    return result[0];
}

This is great for picking out elements by a single attribute, but in the case of the row and col scenario it really doesn’t help a lot. So I’m thinking a few more functions are needed for a complete coverage of functionality. What I could do with is a function that can return a subset of the elements, for example an entire row. So I need a getElementsByAttr(attrName, attrValue) (notice the plural Element*s*) function. This would then allow us to do the following which would return an array of references to all elements where the row number is 4 and store them in the variable ‘myRow’:

var myRow = getElementsByAttr("row", "4");

. But we still need to root out the correct column from that row, so another function is needed, or rather an extension of the original as getElementByAttr(attrName, attrValue, arrayOfElements). Then this would allow us to restrict the search to only those elements currently in the arrayOfElements.

//Grab all the elements on row 4.
myRow = getElementsByAttr("row", "4");
//Grab the column 6 element from the array of row 4 elements.
myElement = getElementByAttr("col", "6", myRow);

Additionally the getElementsByAttr function would have it’s uses in instances where you might want to process an entire row or column. E.g. summing the values in a single column.

Assuming a grid with columns and rows numbered from 1 onwards.

total = 0;
myCol = getElementsByAttr("col","9");
for(i=1; i<=myCol.length; i++)
{
    newVal = parseFloat(myCol[i].value);
    total += (isNaN(newVal))?0:newVal;
}
alert("Total for column 9 = "+total);

When I get chance I’ll post the getElementsByAttr and extended getElementByAttr, but for the last one I need to decide whether to split getElementByAttr(attrName, attrValue) and getElementByAttr(attrName, attrValue, arrayOfElements) into two differently named functions or combine them and allow ‘null’ to be passed for the array when it’s not required.

I hope to spend more time on the AJAX framework I’ve been developing, well it’s more of a framework + design pattern combined and focuses on web applications completely produced from a single page. Basically you navigate to the site and every navigation within that site from then on is handled using AJAX, there is no loading of a new page. Unless of course the user forces a page reload, in which case the session state defines what the user was seeing before and recreates the page as it was before. This also means that during the current session the user never loses their state. It’s based on PHP for the server side scripting and it’s something I started a couple of years ago and keep chipping away at it now and then.

So far I’ve got login functionality, allowing users to register an account, login/logout and viewing public/private “screens” depending on whether they are logged in or not.

I’ve not got anything online as yet, only running on my private RedHat 9 LAMP server.

Just catching up on a whole backlog of GeekBrief.TV episodes, so I’m overdosing on new tech, but after loading more wood on a skip and stripping wallpaper it’s a nice chance to geek-out for a bit. I’ll probably listen to the final podcast from LUGRadio in the morning, it’s a real shame they’re packing it all in just a couple of months after I discovered it.

Hmmm… 3 monitors is very tempting, GuildWars on 2 monitors is great apart from having your character (and view) split in half…

Wide Widescreen