Elements

Reference functions

AwesomeScript extends and wraps most of the major elements used in web based applications. To access an element’s “wrapped” form, using the dollar sign ($) provided by the appropriate element name will retrieve the element with the given id and expose the properties, such as using $Anchor(), $TextBox() and $Div()

If you are using Visual Studio, including Awesome-vsdoc.js in the same directory as AwesomeScript.js is found will enable the provided intellisense. This will be extremely useful for finding the proper functions that you can use to make your programming easier.

 

Below is an example of using the $ syntax to retrieve an element as a wrapper object.

<a href="http://awesomescript.codeplex.com" id="anchor1">Test</a>
<script type="text/javascript">
    Page.OnLoad(function(){
        $Anchor("anchor1").Text("Anchor test");
    }
</script>

 

There are 3 kinds of reference functions: Generic, Strong and Object. Generic references give basic functions common to all of that type. An example is a div tag is consider both an Element and Content, so it can be referenced with $Element, $Content or $Div, each one provides a different set of Intellisene options. Object references just provide Intellisense for objects whose type cannot be inferred, such as parameters passed from functions.

Below are the three generic reference functions.

$Content Represents elements that normally have child elements such as div, span and body
$Element Represents all display elements
$Input Represents form controls such as inputs, selects and textareas.

 

This code example will set the anchor1’s text to “Another test”. Below is a list of all reference functions:

$Anchor  <a /> $Button  <input type=”button” />
$Cell  <td /> $CheckBox  <input type=”checkbox” />
$ComboBox <select /> $ContentButton  <button />
$Div <div /> $FileUpload <input type=”file” />
$Form  <form /> $HiddenField  <input type=”hidden” />
$Header  <th /> $Image <img />
$Label <label />    
$List  <ul /> or <ol /> $ListBox  <select multiple=”multiple” />
$ListItem  <li /> $Password  <input type=”password” />
$RadioButton  <input type=”radio” /> $Row  <tr />
$Span  <span /> $Table  <table />
$TableFoot  <tfoot /> $TableHead  <thead />
$TextArea  <textarea /> $TextBox  <input type=”text” />

 

ASP.NET ID References

Up until now, a major issue with ASP.NET web development has been the obfuscation of element ids in controls. ASP.NET does this to ensure unique ID names, but it can make referencing the right id a pain. With AwesomeScript, there is a static property called Awesome.DeobfuscateIds that is set to true by default. This property goes through all of the major elements and creates new references based on the Awesome.ObfuscationCharacter, which is ‘_’ by default. With this feature, note the example.

<asp:Panel id="Panel1" runat="server">
    <asp:TextBox id="TextBox1" runat="server" />
</asp:Panel>

<!-- renders as
    <div id="Panel1">
        <input name="Panel1$TextBox1" id="Panel1_TextBox1" type="text" />
    </div>
-->

<script type="text/javascript">
    Page.OnLoad.Add(function() {
        if($TextBox("TextBox1") == $TextBox("Panel1_TextBox1"){
            // is true
        }
    });
</script>

 

If you’re not using ASP.NET or use static ids, setting Awesome.DeobfuscateIds to false will disable this feature and speed up the initialization process.

 

Element Creation

The old style of creating elements was often cumbersome and required a working knowledge of the HTML DOM. With AwesomeScript, creating elements is a breeze. Except for the Image, using the reference function ($Anchor, $Div, etc) without the $ will create a new element. Any object that has an AddElement can be used to add the created element to the DOM. Below is an example.

<div id="div1"></div>

<script type="text/javascript">
    Page.OnLoad.Add(function(){
        var a = new Anchor("anchorTest");
        $Div("div1").AddElement(a);
    });
</script>

This results in a 3x3 table with a similar layout as a calculator. Similarly, you can remove elements provided the element you are removing is a child of the parent element. Below is a list of the objects you can use to create new elements.

Anchor()  <a /> Button()  <input type=”button” />
Cell() <td /> CheckBox() <input type=”checkbox” />
ComboBox() <select /> ContentButton() <button />
Div() <div /> FileUpload() <input type=”file” />
Form() <form /> HiddenField() <input type=”hidden” />
Header() <th /> ImageElement() * <img />
List() <ul /> or <ol /> ListBox() <select multiple=”multiple” />
ListItem() <li /> Password() <input type=”password” />
RadioButton() <input type=”radio” /> Row() <tr />
Span() <span /> Table() <table />
TableFoot() <tfoot /> TableHead() <thead />
TextArea() <textarea /> TextBox() <input type=”text” />

 

*ImageElement is used to create a new image since Image is already a  JavaScript object.

Last edited Jun 3, 2011 at 4:09 AM by dahrkdaiz, version 5

Comments

No comments yet.