The "Hello World" of Ajaxna.

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. Create a new web site that uses Ajaxna. Here is your guide for doing that: Getting Started - Create a site that uses Ajaxna
  2. Right click on your web site in Solution Explorer and Select "Add new item...". Choose "JScript file" and call it, "HelloWorld.js"
  3. 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 :-)
  • Save the file and return to your Default.aspx page.
  • Open the "Smart Tag" of the Ajaxna control and click "Startup Scripts". In the dialog that opens click "Add", and in the properties section set the Path to "HelloWorld.js".
  • Notice that the AjaxnaControl in the designer will now say, "You have added 1 scripts".
  • Save the file and press F5. Click "OK" to enable debugging if needed.

YOU WILL GET AN ERROR!!!

The javascript 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 stop your debugging session and 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.

Last edited Aug 14, 2009 at 11:16 PM by VR2, version 10

Comments

No comments yet.