DotNetMushroom RAD provides a good set of tools which can be used to fully integrate Javascript within its forms.

You start by adding a [DNMJAVASCRIPT] Tag in the Form Template. This can be done either manually, by typing in the '[DNMJAVASCRIPT::ID=ControlName]', or by selecting the 'DNMJAVASCRIPT' option from the Control Type Dropdown, entering the Control Name in the Textbox and pressing ADD.

Image 01: Including the DNMJAVASCRIPT Control Tag in the Template.

Once added and saved, the DNM RAD will include a Javascript Controls, along side the other controls on the Forms. I named my Javascript Control 'js_Script' (as seen above).

Image 02: Inserting the Javascript Code in the appropriate Javascript Control.

All you have to do is to type in the Javascript code that you require in the available space, and then press Space. Personally, I usually write out my Javascript code in NotePad and then paste it into DNM RAD, especially when handling big chunks of code.*

Once the Form Loads, the Javascript found within the Control is loaded in the Browser and can be used as per specs.

Now for the squishy bits.

Calling Javascript code from DNM Controls

In any HTML form, it is possible to call Javascript Functions using the control's Attributes [ onclick, onmouseover, onmouseout, so on, so forth ]. Fortunately, DNM RAD provides the means to make use of these attributes and its implementation only takes a couple of seconds to getting used to. In HTML, in order to run the Javascript Code "alert ('Hello.');" you needed to do the following:

Click Me

In DNM RAD, to achieve the same result on you need to do the following (as illustrated in the above below):

• Create a DNMLABEL control and name it 'lbl_ClickMe'
• Access the Control's Properties
• Set the following text in the 'Label Attributes' placeholder: onclick///alert ('Hello');

Image 03: Setting up the Attributes of the DNMLABEL Control.

Let us dissect the above line in order to understand the logic behind it.

• onclick///alert ('Hello');

When relating the above line to the basic HTML SPAN tag above it, one can immediately notice the following similiarities:

• 1. the "onclick" Html Attribute
• 2. the "alert ('Hello');" Javascript line

The big questionmark rests on the "///" barrier between the two.

The DNM RAD, takes the above line, and dissects the value based on the "///" escape sequence. The first part is taken to be the Attribute, while the second part is set as the Attribute Value. However, it is important to note that the DNM RAD supports multiple attributes as well. As such, in order to have both the 'onmouseover' and the 'onmouseout' defined, the following need to be set:

• "onmouseover///alert("IN");///onmouseout///alert("OUT");

Of course, it is possible to have complex Javascript commands set as the value of the attribute, and it is also possible to have multiple commands such as the following:

• "onclick///var i = 0; i += 3; alert ( i );"

It is advisable that the such attributes are kept clutter free and rather basic, so it is usually better to just call a Javascrit Function which is coded in the Javascript Control, such as:

Image 04: DNM RAD Control's Attribute value.

Image 05: Javascript Code in DNM RAD JAVASCRIPT Control.

Retrieving and using values of DNM RAD Controls in Javascript

When running Javascript Code from DNM RAD JAVASCRIPT Controls, it is possible to refer to the Controls created by DNM RAD and use the values contained within.

Usually, when trying to access the controls of an HTML page, one uses the "Document.getElementById" javascript function.
Although the DNM RAD Controls can still be accessed this way, it is not that elegant of a solution due to the IDs' of the said controls. (see below)

Image 06: An sample of the Name given to DNM Controls by ASP.Net during runtime.

ASP.Net assigns complex, long and near unreadable IDs to the controls, which would make the above method quite a headache. Instead, DNM RAD provides a shorthand method which, in the end, achieves the same 'end result'.

This is done by encapsulating the name of the DNM RAD control with '[[' and ']]'. As such, a Label Control named 'lbl_Title' will become '[[lbl_Title]]'.

::BEGIN SAMPLE JAVASCRIPT CODE::;

• LINE 01: var title = [[lbl_Title]];
• LINE 02: var showcase = document.getElementById ( 'showcase' );
• LINE 03:
• LINE 04: function SetShowcase( colour, text )
• LINE 05: {
• LINE 06: ChangeColour ( colour );
• LINE 07: title.innerHTML = text;
• LINE 08: }//SetShowcase
• LINE 09:
• LINE 10: function ChangeColour( colour )
• LINE 11: {
• LINE 12: showcase.style.backgroundColor = colour;
• LINE 13: }//ChangeColour

::END SAMPLE JAVASCRIPT CODE::

In the above code, Line 01 and Line 02 perform similiar functionality, but use a different syntax

• Line 01 initializes the variable 'title' and assigns it the DNM RAD Control 'lbl_Title'.
• Line 02 initializes the variable 'showcase' and assings it the DIV element who's ID is set as 'showcase';

The end result will be that both the title, and showcase variables will be initialized and will hold a reference to an Element from the Page.
The variable 'title' will refer to the DNM RAD lbl_Title Control, while the variable 'showcase' will refer a specific DIV element.

From here on, all the rules, restraints and functionality which affect the basic HTML DOM apply, as such it is important to keep track of the following:
 

• DNMLABEL controls translate into  SPAN¢ Tags
• DNMTEXTBOX controls translate into  INPUT¢ Tags
• DNMDROPDOWN controls translate into  SELECT¢ Tags, or if the Link Button option is selected,  A¢

There are some other controls which are made available by the DNM RAD, however you can find out yourselves into what they translate, I shouldn't spoon feed you that much.

* Although DNM RAD does not have a size limit on the content of the Javascript Control, it is advisable to split the Javascript code up into sizable parts in order for it to be easily maintainable. Ideally any long javascript coding having functions and no direct refers to DNM RAD controls will be put in a seperate '.js' file.