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 !!

Read More...

Summary only...

Dojo 0.9 M2 is out !!

Well Many of You already know that Dojo is on its way of a major release which is gonna affect our knowledge of applying dojo in our solutions. Dojo 0.9 Milestone 2 release is out and can be obtained from here.

Dojo Widget has its own new Name and will be called "Dijit" officially, Dojo core is slimmer and faster as per Alex Russel . I downloaded 24th May's nightly build and started looking in it and ran some tests, which were impressive and convincing for the widgets supported till now by dijit. I will start writing on small How To's here to show the usage of Dijit widget which is easier to understand and less clumsier than the overall bash of dojo 0.4 .

I will first cover form widgets of dijit and ways to use them in your pages and then we can move on to more fancy one like Editor and Tree's or we can mix the order, It all depend on the mood and time constraints.

Read More...

Summary only...

FeedControl update to Google AJAX Feed API

FeedControl was added recently by google to AJAX feed API which works like GSearchControl in Google AJAX Search API. This class makes it easier to add multiple feeds and to draw them up by basic predefined google CSS which can be overidden as needed.

FeedControl constructor doesnt take any argument and has three methods associated with it

1. addFeed(url,title)
2. draw(element,options)
3. setNumEntries(num)
4. setLinkTarget(Target)

There are already very good examples given by google AJAX API group which covers almost all methods and options of this new class. I specially liked to see the tabbed feed drawoption one, which looked very fancy and can be used effectively in creating neat and clean mashups.

Please look at the reference of this class to find out more on these methods but I will give a brief introduction of these methods although they dont require much explaination.

addFeed(url,title) : to add a new feed to your feedcontrol object and the second argument is used to give it a label which is displayed accordingly by the CSS attached to it.

draw(element,options): To load the feed and draw on the page, It takes the DOM element as its argument which will act as the container of the feed and also it takes a optional second argument which can instruct of other options of drawing, currently there is one option called DrawMode which can take two value

google.feeds.FeedControl.DRAW_MODE_TABBED
google.feeds.FeedControl.DRAW_MODE_LINEAR.

setNumEntries(num): Num of entries to be pulled when draw is called.

setLinkTarget(target): where should the link open when clicked. Default is the same window, Pl check the documentation for possible values.

ADVANTAGES:

few advantages that can be observed by addition of feedControl in feed API are:
>Simpler programming model
>Drawing is done by the API itself, which can be controlled by overidding the CSS
>Title now contains the link to the entry too :)
>Default CSS which can be used where no sophisticated layout is needed.

3 Examples are given by the Google team, which can be accessed from here

Read More...

Summary only...

Programming Mashups using Google Ajax Feeds API -- Part 2 of 2

Deviating from default:
In the previous part we learned how to pull a feed into a mashup using bare bones of the AJAX feed API.In this part we will see what customization is possible in the API and how !!

Things That can be changed:

• Number of entries in default pulling is 4, this can be changed
• Result format by default is JSON, this can be changed to XML

Changing Number Of Entries:
This can be changed by calling setNumEntries method of feed object. the argument of this methods is number of entries you wanna pull in each result object. This is a important method and would come in handy in almost all mashup programming.

feed.setNumEntries(7);

This method should be called before calling load.

Changing Result Format:
Like Number of entries this can also be changed by calling a method on the feed object, Method of interest in this regard is setResultFormat(format). Format can take one of the three values
1> google.feeds.Feed.JSON_FORMAT (default)
2> google.feeds.Feed.XML_FORMAT
3> google.feeds.Feed.MIXED_FORMAT

feed.setResultFormat(google.feeds.Feed.XML_FORMAT)

Example Mashup:
In this example we will try to use all the concepts learned till now, This will contain a mashup of 2 feeds, one pulled as JSON and other pulled as XML. More of number of entries will also be different in both the feeds. This should suffice the usage of all API's present in the armour.

Function to pull a feed with result in JSON format:

function pull_json(feed_url,container_id,num_entries)
{
var feed = new google.feeds.Feed(feed_url);
feed.setNumEntries(num_entries);
feed.load(function(result) {
if (!result.error) {
var feed_container = document.getElementById(container_id);
for (var i = 0; i <= result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement("a");
link.href=entry.link;
link.innerHTML=entry.title;
div.appendChild(link);
div.appendChild(document.createElement("br"));
div.appendChild(document.createTextNode(entry.contentSnippet));
feed_container.appendChild(div);
}
}
});
}


Function to pull a feed with result in XML Format:

function pull_xml(url,container_id,entries)
{
var feed = new google.feeds.Feed(url);
feed.setNumEntries(entries);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
var feed_container = document.getElementById(container_id);
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var titleElement = items[i].getElementsByTagName("title")[0];
var title = titleElement.firstChild.nodeValue;
var linkElements = items[i].getElementsByTagName("link")[0];
var link_url = linkElements.firstChild.nodeValue;
var descElements = items[i].getElementsByTagName("description")[0];
var desc = descElements.firstChild.nodeValue;
var div = document.createElement("div");
var link = document.createElement("a");
link.href=link_url;
link.innerHTML=title div.appendChild (link);
div.appendChild(document.createElement("br"));
div.appendChild(document.createTextNode(desc));
feed_container.appendChild(div);
}
}
});
}


Full Source with minimal layout can be found here
Sample Demo Of above mashup can be viewed here

Conclusion:
Mashup programming is made easy by Google AJAX Feed API, and we learned how !! This 2 article series covered the API with examples and I will soon put a cool sample mashup using google AJAX API as soon as I get time.

Read More...

Summary only...