Jay Kimble -- The Dev Theologian

Philosophizing about the .Net religion

Setup Aptana for building Ajax components with MS Ajax Extensions

First of all (in case you don't know about it), Aptana is a great Javascript IDE for building client script libraries. It comes stock with a number of popular Javascript libraries (like Dojo, Prototype, Scriptaculous, YUI, etc.), so you can easily create a start working with the library of your choice to build script applications/libraries with full intellisense(!!)

One of the libraries that doesn't come out of the box is the MS Ajax Extensions (I know you are probably sick of me talking about them). Anyway, the docs are pretty good for telling you how to add your own libraries, but getting the "planets aligned" for intellisense is not always simple.

Basically, you have to create a directory that contains a template site (complete with subdirectories, etc). You put these libraries in the "...\Aptana\plugins\com.aptana.ide.documentation_XXXXXXX\libraries" (where "...\Aptana" is the directory where your Apatana.EXE is and where XXXXXXX is a version number (I have two versions because I upgraded to the "next version"). So in this directory (mine is "C:\Program Files\Aptana\plugins\com.aptana.ide.documentation_0.2.8.13698\libraries) you need to create an "Ms Ajax Extensions v1.0" directory. In this directory, I created a "_script" subdirectory which contains all the MS Ajax Extensions JavaScript (debug) files.

The final step is to put an HTML file in the "Ms Ajax Extensions v1.0." This file needs to reference the scripts. Here's what my file looks like.

<html><head>
       <script type="text/javascript" src="_script/MicrosoftAjax.js"></script>
       <!--script type="text/javascript" src="_script/MicrosoftAjaxTimer.js"></script-->
       <!--script type="text/javascript" src="_script/MicrosoftAjaxWebForms.js"></script-->

</head>

<body>

</body><script type="text/javascript">
       function pageLoad()

        {
          // wire up your behavior here
        }

</script>

<script type="text/javascript">
      
 // Create your behavior/control here (when you are done you'll want to 

// move this script's text to a separate file

        Type.registerNamespace("My.Namespace")        

        My.Namespace.MyBehavior = function(element)

        {

                My.Namespace.MyBehavior.initializeBase(this, [element]);

          // Static fields

         // var staticVar = 1;

         // Instanced fields

         // this.instancedVar = 1;

         // Event Handler objects

          // this._myEventHandler = null;      

   }

        My.Namespace.MyBehavior.prototype = {

 // private functions
       

 // initializer (activator)

          initialize : function()

                {

 // this must be the first line

                  My.Namespace.MyBehavior.callBaseMethod(this, "initialize");

 // initial component activation

                       // - create "delegate" event handlers

                  // ---- Example

                  // this._myEventHandler = Function.createDelegate(this, this._someEventHandlerFunction);

                  // ----

                  // - create needed associated controls

                  // - create needed components



                  // - attach event handlers

                  // ---- Example

                  // this._someDomElement.attachEvent('onSomeEvent', this._myEventHandler);

                  // ----

          },

                dispose : function()

                {

 // clean up the component as it is being destroyed

                  // - remove event handlers that were added

                  // ---- Example

                  //   if (this._myEventHandler) {



                  //   this._someDomElement.detachEvent('onSomeEvent', this._myEventHandler);

                  //           this._myEventHandler = null;

                  //   }

                  // ----

                  // - dispose associated components

                  

 // this must be the final line

                  My.Namespace.MyBehavior.callBaseMethod(this, "dispose");

                }//,

          

 // event handler functions

 // properties

          // get_MyProperty : function() 

          // {

          //           return this._someValue;

          // }

          // set_MyProperty : function(value) 

          // {

          //           this._someValue = value;

          //           this.raisePropertyChanged("MyProperty");

          // }//,


        }

        

 // Optional descriptor for JSON serialization.

  /*

        My.Namespace.MyBehavior.descriptor = {

        properties: [ 

           {name: 'MyProperty', type: String},

           {name: 'MyProperty2', type: Number} 

       ]

   }

        */

        My.Namespace.MyBehavior.registerClass("My.Namespace.MyBehavior", Sys.UI.Behavior);

 // Control registration

  //My.Namespace.MyBehavior.registerClass("My.Namespace.MyBehavior", Sys.UI.Control);

 // // notify ScriptManager that we're done loading (if in file)

  //if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

</script></html>