Saturday, May 26, 2007

Dijit Form Widgets Tutorial -- TextBox, CheckBox, Button

Lets quickly see these simple Dijit Form Elements, so that we will have more time to invest on fancier one's.
BOOTSTRAPPING:
BootStrapping is still done with good old dojo.js by sourcing this script file in our environment. It does all the work at the background to give u the dojo object.
<script type="text/javascript" src="www_root/js/dojo/dojo.js"></script>
This you will need in any dojo enabled page and dojo.js contain the most important and frequently functions.
DOJO REQUIRES:
To make dijit work You will need to import corresponding Widget Script File in your environment. To parse the widgets you need a parser JS file which can be obtained by
dojo.require ("dijit.util.parser");
This is needed in almost all markup based widget creation, where you create widgets by calling them in html tags.

GETTING STARTED WITH TEXTBOX, CHECKBOX AND BUTTONS:
To make Textbox, checkbox or Button work you will have to dojo require the appropriate JS file in your environment..

Lets see how to define a TextBox in a input tag ...
<input dojoType="dijit.form.Textbox" type=text name="name">


You can set following properties:

trim : Removes leading and trailing whitespace if true. Default is false.
ProperCase: Converts the first character of each word to uppercase if true.
upperCase : Converts all characters to uppercase if true. Default is false.
lowerCase:
Size: Size of the text Box

Following event handlers work as in normal textbox:

onfocus
onblur
onkeyup

Lets see how to use above info ...

<input dojoType="dijit.form.Textbox" type=text name="name" trim="true" propercase="true">

Similarly the obove eventhandlers can be used to call appropriate functions..

Some Functions of TextBox object are
getTextValue
getValue
setTextValue
setValue

Note: You can acess these functions when you create TextBox programatically

Making a TextBox Programatically :
function create_textbox()
{
var parameters = {
name:"email",
trim:"true",
propercase:"true"
};

var text = new dijit.form.Textbox(parameters,dojo.byId("hello"));
text.setTextValue("Value set by setTextValue");
}

<form >
<button dojoType="dijit.form.Button " onClick="create_textbox"> Textbox Programatically
</button>
</form>
</div>
<div id="hello"></div>

BUTTON:
Button is a very rich widget of dijit in terms of looks, functionality and flexibility, As button is used very often in pages the versatility is very much appreciated by developers.
Types of Button We can create are :
1> Normal Cickable Button
2> Drop Down Button ( Using DropDownButton and Menu Widget)
3>Combo Button (Using ComboButton and Menu Widget)

Normal Cickable Button:
We can create a Paser based mark up button as follow:

We need to dojo require the Button Js file by
dojo.require("dijit.form.Button ");

<button dojoType=" dijit.form.Button" onClick="create_textbox">
Click Me!
</button>


Other Attributes of Button are :
Caption: Set caption on button

Function Available to Override:
setCaption: set the caption on button
buttonClick: internal handling of button click

CallBack Funtion:
onClick: Called When button is Clicked

You can have image on button by using <img> tag before closing the button or input tag.

Creating Normal Clickable Button Programatically:
function create_button()
{
var parameters = {
caption:"I m programatically created. Please Click Me",
onClick:"call"
};

var but = new dijit.form.Button(parameters,dojo.byId("hello"));
}

You can call it as callBack handler on onClick or any other way you choose to.

Drop Down Button:
Drop Down Buttons are rendered with the help of Menu Widget and as the Drop Down Button class is in the same JS file as Button class therefore we dont need explicit dojo.require for it. It will come with dojo.require("dijit.form.Button").

Lets see how to create a Drop Down Button quickly ..

<button dojoType="dijit.form.DropDownButton" menuId='FileMenu'>
File </button>

<div dojoType="dijit.PopupMenu" id="FileMenu" toggle="fade" toggleDuration="500" style="display: none;">
<div dojoType=" dijit.MenuItem" caption="New" accelKey="Ctrl+N" onClick="new" </div>
<div dojoType="dijit.MenuItem" caption="Open" accelKey="Ctrl+o" onClick="loadFile"></div>
<div dojoType="dijit.MenuItem" caption="Save" accelKey="Ctrl+s onClick="send"></div>
</div>

dijit.PopMenu and dijit.MenuItem are sourced into environment by dojo.require("dijit.Menu");

Combo Button:
<button dojoType="dijit.form.ComboButton" menuId='FileMenu' onClick=file>
File </button>

and PopMenu can be defined as above in drop down Menu ..

CHECKBOX:
Checkboxes can be used simillarly, we need dojo.require("dijit.form.Checkbox")
They have the same properties as normal Html Checkboxes like

value
checked

<input dojoType="dijit.form.Checkbox" type="checkbox" name="vote" checked="true" value="on" onClick=alert( this.value)>

Other Callback Handlers are:

onChecked
mouseOver
mouseOut

RadioButtons:

<input dojoType=" dijit.form.RadioButton" type="radio" name="album" checked="true" value="snm" onClick=alert(this.value)>

<input dojoType="dijit.form.RadioButton" type="radio" name="album" value="load" onClick=alert( this.value)>

<input dojoType="dijit.form.RadioButton" type="radio" name="album" value="master of puppets" onClick=alert(this.value)>


Closing:
Whew !! Well I have covered almost all aspects of these widgets in accordance to nightly build of 23 May !! We will next see other form elements which are unique to dojo like InlineEditbox,
dateTextBox, CurrencyTextBox, Autocompleter etc ... Keep Checking this blog !!

5 comments:

Anthony said...

Very useful to us dojo newbies, thanks!

Adi..! said...

Hey Dipen,great article dude.I came to your Blog while searching on net about Dojo.Great to see your Blog.Hope the good work continues.

Aditya Bhatia

sayani mitra (sayani.mitra@aol.in;mitrasayani@gmail.com) said...

Hey Dipen really good & useful Dojo blog

I am Dojo fresher.
i wanted to know whats the advantage of using any simple DOjo widget like dijit radiobutton and button over a simple HTML button/radiobutton

I am not asking advantages of Dojo to HTML . I am asking in a situation like you are using Dojo lazyloading approach , and Creating complex widgets loading them to web pages through template string method . Inside acomplex widget there may be some very simple widgets like checkboxes textboxes what do u recommend in that scenario one should use simple HTML buttons or Dojo buttons

Jim said...

So how come dojo keeps changing? The require statement fails. It can't find a file dijit/util/parser.js.

This is with version 1.1.1.

Russel Woods said...

I need a simple click able button that will show how many clicks there have been. Our website is has videos that people can vote on their favorites.
rssllwds812@gmail.com