a programmer's best friend :: Entries from September 2004

Talking about what can be done with javascript... for the Game Manager I built to calculate the values of starting locations in the Galactic Civilizations PC game, I implemented language switching and skin switching entirely in javascript.

The whole tool is built on objects that tightly communicate amongst themselves - each star system, planet or game is an object and can render itself. The layout control is mostly implemented with stylesheets, the javascript only rendering a very simple html structure. The core is the gameManager class itself - it renders the main navigation elements, and provides a series of helper methods (like the button() method that is used to render a button).

The language switching was not too difficult - I first googled around but the generally used trick with document.write( '[script tag]' ); makes Mozilla reload the page. I found a nicer way to do this: create the script tag with the document.createElement() method, and append it to the document's head tag with document.getElementsByTagName('head')[0].appendChild( tag ); As my language files consist of one file with a list of variables, they simply get replaced when loading the new script. Updating the display is a breeze, I just have to tell the objects to redraw themselves

The skin (stylesheet) switching proved a little more annoying: it works the same way than the javascript include, by appending a link tag to the head - but the existing styles do not get replaced, they are overwritten and extended. Meaning that if in my standard stylesheet, the h1 tag has a padding but not in the second stylesheet, that padding will still be there... Solution: delete all styles before loading the new stylesheet. That's easy to do by accessing the document's styleSheets property, going through each stylesheet and deleting each style rule via document.styleSheets[x].deleteRule( x ); Peter-Paul Koch has an excellent reference on this.

Currently the Game Manager only works with gecko-based browsers like Mozilla or Firefox, as I use some specific methods like the addEventListener() method (to check when the external file has been loaded), and also because I used only the gecko implementation of the styleSheet access methods.

The result matches my expectations: a blazingly fast online tool, that would have taken a lot of time to build with a PHP/Javascript mixture and would not have been this fast. Now I only need to implement the save button and it's ready to really rock Implementing this would take a little time, but basically all I need is already there: if you clicked on one of the View XML buttons in the interface, you have seen that each object can render itself to XML too, so I would just have to submit that to a PHP script for storage, and parse existing XML to rebuild the needed settings... but that's for another blog entry

You can view the whole Game Manager package in my personal WebCVS.

With the current work on patForms, patTemplate and patBBCode, we have started unifying the example collections for all our tools. For this, we have built the patExampleGen class, which manages each collection by building the navigation and tabbed example pages automatically.

Using patExampleGen has several advantages:

- It gives us a comfortable way to manage all the examples for a tool by having all example descriptions in a central location.

- It makes it easier for the developers to view the examples, as you have both the output and highlighted source code for each example directly in the examples interface.

- Depending on the tool, some additional info like the template source code for patTemplate examples is also generated automatically via the extension features of the class that enable you to add your own dumpers.

- The actual source code in the examples is kept at a minimum to be easy to understand by having the exampes framework render any needed output like the frame of the html pages.

- The tabbed interface for each example is also extensible, making it easy to add specific information on a per-example basis (like adding some extra notes, for ex.).

If you want to take a look at it, you can grab a copy of the CVS version of patForms (WebCVS), or patBBCode (WebCVS) and have a look at the examples/patExampleGen folder in the distribution. It is not currently available as a separate tool for download, but may become in the future. We welcome any comments on patExampleGen in our forum!