Getting Started with Ajaxna - Hello World

Coordinator
Nov 2, 2008 at 3:39 AM
Edited Nov 4, 2008 at 1:06 AM

The "Hello World" of Ajaxna.

This tutorial is deprecated. Please follow the "Tutorials" link from the Ajaxna home page

Follow these steps to begin using Ajaxna.

This tutorial will show you how to begin using Ajaxna classes, making use of Intellisense and Dynamic Class Loading.

  1. Download Ajaxna.dll & save it to your HDD. Open the folder in Windows Explorer.
  2. Create a new Web Site in VWD 2008
  3. Open the VWD toolbox, right click and select "Add Tab", Give it a name, like "Ajaxna".
  4. Drag the Ajaxna.dll from Windows Explorer into your new toolbox Tab. Two controls will appear, "AjaxnaControl" and "CustomTypeUIExample". You can ignore the latter.
  5. Drag the AjaxnaControl into the top of your page (so it is added just after the Form tag in your page).
  6. Open the "smart tag" for the control (if not already open) and click the link, "Register Ajaxna as resource handler (required)". This will add an HTTP handler to your web.config file to handle server requests back into the library (ajax http requests).
  7. Now click the "View javascript references" link. A dialog form will open containing a list of javascript references.
  8. Click the "Copy to Clipboard" button and then "OK".
  9. Right Click on your web site in Solution Explorer and Select "Add new item...". Choose "JScript file" and call it ,"_namespace.js"
  10. When the file has open, press CTRL+V to paste the references in. This file contains your Ajaxna references. Save the file.
  11. Right click again on your web site in Solution Explorer and Select "Add new item...". Choose "JScript file" and call it, "HelloWorld.js"
  12. When the file opens up, drag your "_namespace.js" file from Solution Explorer into it. This will add a reference to the "_namespace.js" file, which contains your Ajaxna references.

Now it's time to write some code.

Type in the following code (after the "_namespace.js" reference):

/// <reference path="_namespace.js" />

function main(e, r)
{
    var console = new ajax.windows.Console(document);
    console.showCentered();
    console.writeLn("Hello Ajaxna World!");
}

$getEvent(window, window, "onload").addListener(main);

I urge you *NOT* to just cut/paste this code, type it and see the intellisense :-)

  1. Save the file and return to your Default.aspx page.
  2. Open the "Smart Tag" of the Ajaxna control and click "Scripts". In the dialog that opens click "Add", and in the properties section set the Path to "HelloWorld.js".
  3. Save the file and press F5. Click "OK" to enable debugging if needed.

YOU WILL GET AN ERROR!!!

The error is because Ajaxna only downloads bootstrapper code/classes into the client, but you are now using the "ajax.windows.Console" class (and any classes THAT class uses).

So go back and change the line of code:

var console = new ajax.windows.Console(document);

to these two lines:

var console = $new("ajax.windows.Console", document);
console = ajax.windows.Console.cast(console);

The $new method is one of the built in ways you can create an instance of a class without having to worry about if it is loaded into the client or not.
The ajax.window.Console.cast() method is how you can "cast" javascript types, so that intellisense can determine for you the type of variable that it is. This is because $new() returns a generic object type (there are no Generics here).

Press F5 and see the application running.

You should see a "console window" appear with your "Hello World!" message displayed.

Click the "Options" menu on this window and select "Debug Output Target". A message "debug output set to this window" will display under your message. Ajaxna debug logging is now routed to this window.

Now select "Object Viewer..." from the same menu. A new window will appear over the top of your console window. Move it out of the way and notice the HTTP logging messages in your console window. This is notifying you of all the additional classes just downloaded in order to create an instance of the "Object Viewer" form.

Feel free to browse the Treeview presented in the "Object Viewer" form and select nodes to see all the Javascript classes currently loaded into the client.