Home > {{category.CategoryName}} > Dojo Toolkit
Dojo Toolkit JavaScript App

Dojo Toolkit

by Dojo Toolkit

web app development JavaScript Tooklit
Helps with: Cross Platform Frameworks,JavaScript
Similar to: Flot App jQuery App jQuery Mobile App jQuery OSK App More...
Source Type: Open
License Types:
BSD
Supported OS:
Languages: C Java Script

What is it all about?

Dojo Toolkit is a cross-platform JavaScript library to creat quickly and efficiently web app. Language utilities, UI components, and more.

Key Features

Includes the following libraries: * dojo * dijit * dojox * utils Dojo widgets includes: * comprising JavaScript code * HTML markup * CSS style declarations.


Pricing

Yearly
Monthly
Lifetime
Free
Freemium
Trial With Card
Trial No Card
By Quote

Description

free - see site

Alternatives

View More Alternatives

View Less Alternatives

Product Analysis

JavaScript

Javascript frameworks and libraries

Dojo Toolkit

Dojo Toolkit

By Alvie Amar | 8/31/2016 | Product Analysis |Beginners

Dojo Toolkit (Dojo) is an advanced JavaScript toolkit which is lightweight, fast and free. It has many JavaScript components that help to create dynamic web applications. Dojo is officially released as open source software. Additionally, Dojo toolkit was originally designed in such a way as to fulfill all the needs of a large-scale client-side web development and to make an application that is cross-platform and JavaScript/Ajax-based.

 

On September 2004 the first version of Dojo was introduced. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others. When the time came, the stable release of Dojo Toolkit was announced on the 29th of March 2015.

 

The following are some features that makes Dojo Toolkit attractive

  • Highly evolved date, math, and string libraries
  • W3C DOM support in the Dojo
  • Regular expressions
  • Objects and Classes
  • Associative Arrays
  • Loosely typed variables

 

 

What is Dojo Toolkit good for?

 

Developers want to use a JavaScript toolkit which can help to save both time and effort and a toolkit that can provide everything they need to build a web application. So why use Dojo toolkit rather than other toolkits that are also available in the market?

 

Well, what set Dojo apart from the other toolkit is that Dojo is usually used for creating different dynamic web user interfaces because it provides high-level input and output abstraction and utilities.  Aside from that, Dojo toolkit helps shorten the time span between the idea and the implementation because this toolkit provides well-conceived APIs and set of tools fixing and assisting issues that a developer may experience every time.

 

Here are some advantages of Dojo Toolkit,

 

  • Dojo Toolkit is simple and easy to learn.
    • The learning curve of Dojo is not that steep, unlike with other frameworks
  • Dojo Toolkit provides Dojo API
    • It can be used directly to the application thus developers don’t need to invent something in composing their program.
  • Dojo provides higher abstraction layer
    • Helps developers build powerful functions very easy.
  • Dojo is simple and easy to learn
    • There are no additional requirements in learning Dojo since it is based on HTML and JavaScript.

 

 

Examples and Code Snippets

 

Let's assume that you have already downloaded or set up Dojo in your development environment.

 

Moving forward, the first example is creating a checkbox using Dojo. Just check the code below

 

 

<html>

<head>

<title> Create a checkbox</title>

<!-- check box -->

<script type="text/javascript">

dojo.require("dojo.parser");

dojo.require("dijit.form.CheckBox");

</script>

</head>

<body>

<h2> Creating a Check box</h2>

<input id="cb" dojotype="dijit.form.CheckBox" name="developer"

checked="checked" value="on" type="checkbox" />

<label for="cb"> Are you a Developer </label>

</body>

</html>

 

In this code, as we can see, for creating checkbox you’re require to use "dijit.form.CheckBox".

 

<script type="text/javascript">

dojo.require("dojo.parser");

dojo.require("dijit.form.CheckBox");

</script>

   

For the second example, we will have an example which creates a radio button. Just copy the code below:

 

 

<html>

<head>

<title>Creating a Radio button</title>

<!-- radio -->

<script type="text/javascript">

dojo.require("dojo.parser");

dojo.require("dijit.form.*");

</script>

</head>

<body>

<h2>Creating a Radio button</h2>

<input dojoType="dijit.form.RadioButton" id="val1" name="group1"

checked="checked" value="Programmer" type="radio" />

<label for="val1"> Male</label>

<input dojotype="dijit.form.RadioButton" id="val2"  name="group1"

value="Designer" type="radio" />

<label for="val2"> Female</label>

<input dojotype="dijit.form.RadioButton" id="val3"  name="group1"

value="Developer" type="radio" />

<label for="val3"> Other

</label>

</body>

</html>

 

In this area, for creating a radio button you need "dijit.form.RadioButton".

 

<script type="text/javascript">

dojo.require("dojo.parser");

dojo.require("dijit.form.*");

</script>

 

For the last example, let's say hello to the world of Dojo. Just copy the code below.

 

 

<html>

<head>

<title>button</title>

<script type="text/javascript">

dojo.require("dojo.event.*");

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.Button");

function helloPressed()

{

alert('Click on the Welcome to the world of Dojo Button');

}

function init()

{

var helloButton = dojo.widget.byId('helloButton');

dojo.event.connect(helloButton, 'onClick', 'helloPressed')

}

dojo.addOnLoad(init);

</script>

</head>

<body bgcolor="#FFFFCC">

<p align="center"><font size="6" color="#800000">Welcome to Tutoriials4u Dojo Example</font></p>

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>

<br>

</body>

</html>

 

As what have you have noticed, To create a button in dojo you need to make a Button Widget that contains three visual states as: mouseOut, mouseOver and mouseDown.

 

<script type="text/javascript">

// Load Dojo's code relating to widget managing functions

dojo.require("dojo.widget.*");

// Load Dojo's code relating to the Button widget

dojo.require("dojo.widget.Button");

</script>

 

dojo.require("dojo.widget.*"): It instructs you to include the dojo widget (Not load all the widgets) for managing functions.

dojo.require("dojo.widget.Button"): This line instructs you to load the Dojo button widget.

 

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">

Hello World!

</button>

 In this section, we added a button to display Hello world.  Notice the one key attribute of this HTML element which is the dojoType attribute. This attribute is responsible for telling Dojo how to process when the page is loading. Easy right? These are just basic examples of using Dojo toolkit in your application.

 

Conclusion

 We hope that this basic introduction to Dojo Toolkit helps you understand the basic usage and functionality of the Dojo Toolkit. This toolkit is more than a DOM and Ajax library. Dojo toolkit has features that really help accomplish what a developer really wants to do and much more. Just remember that Dojo Toolkit is not a library nor a framework, it is a toolkit that is used for creating dynamic web applications. In the event that you want to learn more about Dojo toolkit, they have very informative documentation which can really help you get started.

 

By Alvie Amar | 8/31/2016 | Product Analysis

{{CommentsModel.TotalCount}} Comments

Your Comment

{{CommentsModel.Message}}

Top DiscoverSDK Experts

User photo
3355
Ashton Torrence
Web and Windows developer
GUI | Web and 11 more
View Profile
User photo
2340
Meir Rabinovich
Real time and embedded developer
Hardware and RT | General Libraries and 5 more
View Profile
User photo
1540
Nathan Gordon
Full Stack developer
Web | JavaScript and 1 more
View Profile
User photo
1490
Ronan McCarthy
Cross-Platform & Web developer.
Web | Mobile and 6 more
View Profile
Show All

Interested in becoming a DiscoverSDK Expert? Learn more

X

Compare Products

Select up to three two products to compare by clicking on the compare icon () of each product.

{{compareToolModel.Error}}

Now comparing:

{{product.ProductName | createSubstring:25}} X
Compare Now