The Xanjax HowTo


Getting Started

How To Think "Xanjax"

For effective use of Xanjax, a Web Designer should think in terms of their web content being quite isolated from the Xanjax control framework, even though at first glance it will appear as if the two are inseperably melded as one. Navigation should be conceived of as another separate layer. Again, it won't look that way at first.

A Xanjax website is just a single persistent page. Yes, the entire website content is delivered that way! That might seem quite radical at first, but its actually a natural extension of fully exploiting AJAX techniques. Xanjax javascript functions first initiate XML content download, or document modification actions, in response to user input events; they then exploit Document Object Model (DOM) techniques to insert downloaded content directly into the page, and/or alter it in some other visual way.

In Xanjax, new content (even a full new page) is always dynamically embedded into the original index page. There's no other way to do it. (Just correctly follow the instructions as to how to author pages and include links. It's not hard!)

The original single page must be persistent for Xanjax to work. Content on the other hand, is dynmically added, deleted, replaced, updated or changed as required. The Xanjax control structure itself can also be expanded dynamically to perform additional functions, but obviously a minimum structure must always persist to support navigation, content requests, and content embedding.

Even though it sounds complicated, Xanjax comes prebuilt as a full framework for straightforward website design like the one you're reading this on. The process is really very uncomplicated, probably simpler than conventional site design in many ways.

See 'How To Create' below to get started.

A few over-riding principles for more complex design:

How To Get Started

There is a working skeleton website you can download - xanjax sitekit. It's easiest if you get this going first just as it is; then make changes and see how things work.

Xanjax relies on XMLHttpRequest which MUST make requests to a web server. It cannot work directly with a file system.

You must have a functional webserver such as Apache to serve your files else Xanjax will not work.

Finally, do ALL your initial testing with Firefox. Then ALWAYS use it first during the design phase, followed by Internet Explorer. Using W3C web standards usually just works in Firefox but may need customising for IE. The best way to do this is to use another W3C method to achieve the same result that also works in IE. But you need your idea working before you can think about alternative methods. Firefox validifies your idea quickly, then you can search for an alternative common way if necessary. Xanjax was designed like this, and contains very little browser specific code.

How To Create A Basic Website

To get started, you just need to author as many separate valid XHTML pages as you want your users to see (just start with 2 or 3). If you use CSS to style the content, link to a CSS file in the normal way in the head of the document.

Most importantly, validate each page using the W3C XHTML validation service. Don't just rely on your authoring program for valid XHTML output. Xanjax will always reject invalid XHTML. Be Warned!

Name your valid XHTML pages as you please, but they MUST have a .xml extension. Also you MUST link to each .xml file with a file system link (not web page link) of the same name but with a .html extension. This ensures search engines will find and correctly index your content. It also ensures primary progressive enhancement - even text only browsers or mobile phones will be able to read your content. (Windows Users Note: Windows might not give you a way to create file system links to files; just make a copy with an extension of .html This is inefficient, so Linux and Mac users will prefer to use symbolic links as suggested.)

Finally, edit or add links to the menu of the index.html page provided with Xanjax. They MUST point to the .html file, NOT the .xml file. Xanjax takes care of the rest.

CSS Note: If you want to create a different layout to the template provided, you can edit xanjax.css and iebugfix.css as required so long as you don't alter anything under html, body {} or #virtualbody {}. You must also leave all other existing selector names unchanged. You can change most properties. For trivial changes such as colours, fonts and so on it's usually better to attach you own css file to your authored pages as would normally be done.

JavaScript Note: If you want to add your own JavaScript, put it all in a separate file and reference it on the index.html page after the xanjax.js entry, OR load it inline with a script src= statement. IE security restrictions prevent ALL other DOM inserted inline JavaScript from working.

In General: If you have to do something which would screw up Xanjax, load it in an object instead of a div. but having said that, most things can be achieved in a div and it's much more flexible.

How To Include Legacy Or Other HTML In An Object

Xanjax is perfect for updating a legacy site incrementally, or including old HTML pages in a new site. It is only necessary to implement a navigation framework, using blank XHTML pages which point the built in object container to your legacy HTML page. Then the legacy HTML is rendered within the object container.

Look at the page xanblog.xml which calls the Xanjax blog for an example. You will see that it calls loadobject.js by referencing it with a script src="loadobject.js" statement. Presently loadobject.js does not scale. This will be fixed in a later release. For now, you'll need to create your own loadobject.js file with a different name, and it's function call loadObject("http://xanjax.org/xanblog/") will need to be changed to reference your html file.