AwesomeScript Setup

Just including the Awesome.js is all you need to do. All code that utilizes AwesomeScript must appear after the inclusion of Awesome.js.

Executing code on page load

A lot of times you will want to execute code when the page is loaded. In regular JavaScript, you would include a function call in the onload attribute of the body tag. AwesomeScript provides a different Event model where functions and delegates can be added and removed from. For more information on events and delegates, read more. The “Page” object is a static object referring to  the body tag and has an "OnLoad" Event that you can subscribe to. All other references to all other elements just happen after Page.OnLoad. Below is a typical example of how one might use this

<html>
    <head>
        <script type="text/javascript" src="/scripts/Awesome.js"></script>
        <script type="text/javascript">
            Page.OnLoad.Add(function(){
                $Span("time").Text(DateTme.Now().ToString());
            });
        </script>
    </head>
    <body> 
        <h1>Hello world!</h1> 
        Today is <span id="time"></span>
    </body>
</html>

Remember, you can add inline functions, referenced functions (function names) or delegates to an Event, or even a mix of them.

Extensions scripts and order of inclusion

Your own code can appear anywhere after the initial Awesome.js inclusion, however, you cannot reference elements globally as the Awesome.Build() actually makes wrapper objects around all applicable elements, so referencing them before Awesome.Build() occurs will throw an error, so it’s a good idea to always make references to elements in Page.OnLoad events or in local functions. AwesomeScript objects can be created and used at any time.

Intellisense support

If you are using Visual Studio, you can get Intellisense support for the framework by including the various *-vsdoc.js files in the same folder as the scripts. Visual Studio will automatically detect these files and provide Intellisense support on pages and controls that include the various scripts.

To get Intellisene support on an external .js file, use the code below:

/// <reference path="~/path/Awesome.js" />

This is metadata that tells Intellisense to include the file provided. The ~/path/Awesome.js is the path to your JavaScript files. The tilde tells VS to start at the root, path is just the path to your scripts and Awesome.js is the file name.  You can include multiple files to get even more Intellisense support.

Sometimes you want Intellisense support on your user control but including the script in the user control will cause errors as the script is included twice, which will redefine everything and cause a lot of strange issues. To get Intellisense support without causing errors, use the code snippet below:

<% if(false) { %>
<script type="text/javascript" src="/scripts/Awesome.js"></script>
<% }%>

Last edited Sep 17, 2011 at 11:17 PM by dahrkdaiz, version 1

Comments

No comments yet.