xitong
xitong

HelloWorld_dojo_新学的东东

HelloWorld

Version 59, changed by [email protected] 01/11/2007. Show version history

NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007

Table of Contents

Introduction

The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources).

Changelog

  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey)
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese)
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi)
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold)
  • 8th May 2006 - Initial Public Release

Notes / Requirements

Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address:

http://download.dojotoolkit.org/release-0.4.0/

Contacting the Author

Thinking of making modifications to this document? Want to make suggestions / constructive criticism?

If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks!

1. Setting Up Dojo

The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 

    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/

Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 

    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..

2. Getting Started

Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 

<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>

As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use.

3. Creating a Button Widget

Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat.

The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 

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

The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect.

After making the changes, insert the following code into the body section of the HTML: 

    <button dojoType="Button" widgetId="helloButton">Hello World!</button>

The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text.

Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named.

4. Connecting an Event to the Widget

A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system!

To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 

    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>

To be: 

    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>

Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 

    function helloPressed()
    {
      alert('You pressed the button');
    }

Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 

    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);

Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error.

Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup.

So, to recap, the Javascript code in the third section of the header should resemble: 

    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>


5. Reading Data from the Server

Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section.

Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality.

So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was.

The next step is to link the click of the button to the server request. To do this, modify the following code: 

      function helloPressed()
      {
        alert('You pressed the button');
      }

To resemble: 

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server.

Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'.

Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy!

So, to recap, the third Javascript section should resemble: 

    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>

Next, we'll look at doing something meaningful with that server request.


6. Sending Data to the Server Using GET

It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp').

Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 

    <button dojoType="Button" widgetId="helloButton">Hello World!</button>

to: 

    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">

Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

to: 

      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }

Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial.

In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 

    content: {myName: dojo.byId('name').value }

Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function.

Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box.

Next, we'll look at using POST data instead of GET data.

6.1 Using a PHP Server 

<?php
  /*
  * HelloWorldResponseGET.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


   


    
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


    
Table of Contents 


    

    
 Introduction 


    
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


    
 Changelog 


    
     
     
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
     
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
     
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
     
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
     
  • 8th May 2006 - Initial Public Release 
    •  
    


    
 Notes / Requirements 


    
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


    
http://download.dojotoolkit.org/release-0.4.0/ 


    
 Contacting the Author 


    
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


    
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


    
 1. Setting Up Dojo 


    
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


    
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





    

    
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


    
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





    

    
 2. Getting Started 


    
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


    
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





    

    
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


    
 3. Creating a Button Widget 


    
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


    
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





    

    
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


    
After making the changes, insert the following code into the body section of the HTML: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





    

    
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


    
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


    
 4. Connecting an Event to the Widget 


    
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


    
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


    
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





    

    
To be: 


    
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





    

    
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


    
    function helloPressed()
    {
      alert('You pressed the button');
    }





    

    
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


    
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





    

    
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


    
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


    
So, to recap, the Javascript code in the third section of the header should resemble: 


    
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





    

    

    
 5. Reading Data from the Server 


    
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


    
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


    
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


    
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





    

    
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


    
The next step is to link the click of the button to the server request. To do this, modify the following code: 


    
      function helloPressed()
      {
        alert('You pressed the button');
      }





    

    
To resemble: 


    
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





    

    
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


    
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


    
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


    
So, to recap, the third Javascript section should resemble: 


    
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





    

    
Next, we'll look at doing something meaningful with that server request. 


    

    
 6. Sending Data to the Server Using GET 


    
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


    
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





    

    
to: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





    

    
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


    
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





    

    
to: 


    
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





    

    
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


    
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


    
    content: {myName: dojo.byId('name').value }





    

    
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


    
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


    
Next, we'll look at using POST data instead of GET data. 


    
 6.1 Using a PHP Server 


    
___FCKpd___19



    

    
 6.2 Using an ASP Server 


    
<%
  '
  ' HelloWorldResponseGET.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>





    

    
 6.3 Using a ColdFusion Server 


    
<!---
  /*
  * HelloWorldResponseGET.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' GET parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>





    

    
 6.4 Using a Java Server (JSP) 


    
<%
  /*
  ' HelloWorldResponseGET.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





    

    
 6.5 Using a Perl Server 


    
#!/usr/bin/perl
#
#  ' HelloWorldResponseGET.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





    

    
 7. Sending Data to the Server Using POST 


    
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


    
Firstly, we need to change the markup in the body of HelloWorld.html from: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





    

    
to: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    <form id="myForm" method="POST">
      Please enter your name: <input type="text" name="name">
    </form>





    

    
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


    
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





    

    
to: 


    
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponsePOST.php',
                       handler: helloCallback,
                       formNode: dojo.byId('myForm')
                    });
      }





    

    
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


    
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


    
 7.1 Using a PHP Server 


    
<?php
  /*
  * HelloWorldResponsePOST.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


      


       
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


       
Table of Contents 


       

       
 Introduction 


       
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


       
 Changelog 


       
     
        
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
        
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
        
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
        
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
        
  • 8th May 2006 - Initial Public Release 
    •  
       


       
 Notes / Requirements 


       
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


       
http://download.dojotoolkit.org/release-0.4.0/ 


       
 Contacting the Author 


       
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


       
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


       
 1. Setting Up Dojo 


       
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


       
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





       

       
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


       
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





       

       
 2. Getting Started 


       
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


       
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





       

       
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


       
 3. Creating a Button Widget 


       
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


       
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





       

       
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


       
After making the changes, insert the following code into the body section of the HTML: 


       
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





       

       
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


       
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


       
 4. Connecting an Event to the Widget 


       
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


       
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


       
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





       

       
To be: 


       
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





       

       
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


       
    function helloPressed()
    {
      alert('You pressed the button');
    }





       

       
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


       
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





       

       
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


       
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


       
So, to recap, the Javascript code in the third section of the header should resemble: 


       
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





       

       

       
 5. Reading Data from the Server 


       
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


       
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


       
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


       
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





       

       
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


       
The next step is to link the click of the button to the server request. To do this, modify the following code: 


       
      function helloPressed()
      {
        alert('You pressed the button');
      }





       

       
To resemble: 


       
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





       

       
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


       
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


       
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


       
So, to recap, the third Javascript section should resemble: 


       
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





       

       
Next, we'll look at doing something meaningful with that server request. 


       

       
 6. Sending Data to the Server Using GET 


       
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


       
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


       
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





       

       
to: 


       
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





       

       
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


       
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





       

       
to: 


       
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





       

       
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


       
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


       
    content: {myName: dojo.byId('name').value }





       

       
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


       
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


       
Next, we'll look at using POST data instead of GET data. 


       
 6.1 Using a PHP Server 


       
<?php
  /*
  * HelloWorldResponseGET.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


         


          
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


          
Table of Contents 


          

          
 Introduction 


          
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


          
 Changelog 


          
     
           
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
           
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
           
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
           
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
           
  • 8th May 2006 - Initial Public Release 
    •  
          


          
 Notes / Requirements 


          
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


          
http://download.dojotoolkit.org/release-0.4.0/ 


          
 Contacting the Author 


          
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


          
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


          
 1. Setting Up Dojo 


          
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


          
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





          

          
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


          
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





          

          
 2. Getting Started 


          
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


          
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





          

          
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


          
 3. Creating a Button Widget 


          
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


          
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





          

          
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


          
After making the changes, insert the following code into the body section of the HTML: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


          
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


          
 4. Connecting an Event to the Widget 


          
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


          
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
To be: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


          
    function helloPressed()
    {
      alert('You pressed the button');
    }





          

          
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


          
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





          

          
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


          
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


          
So, to recap, the Javascript code in the third section of the header should resemble: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          

          
 5. Reading Data from the Server 


          
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


          
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


          
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


          
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





          

          
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


          
The next step is to link the click of the button to the server request. To do this, modify the following code: 


          
      function helloPressed()
      {
        alert('You pressed the button');
      }





          

          
To resemble: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


          
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


          
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


          
So, to recap, the third Javascript section should resemble: 


          
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          
Next, we'll look at doing something meaningful with that server request. 


          

          
 6. Sending Data to the Server Using GET 


          
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


          
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
to: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





          

          
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
to: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





          

          
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


          
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


          
    content: {myName: dojo.byId('name').value }





          

          
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


          
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
Next, we'll look at using POST data instead of GET data. 


          
 6.1 Using a PHP Server 


          
___FCKpd___19



          

          
 6.2 Using an ASP Server 


          
<%
  '
  ' HelloWorldResponseGET.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>





          

          
 6.3 Using a ColdFusion Server 


          
<!---
  /*
  * HelloWorldResponseGET.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' GET parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>





          

          
 6.4 Using a Java Server (JSP) 


          
<%
  /*
  ' HelloWorldResponseGET.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





          

          
 6.5 Using a Perl Server 


          
#!/usr/bin/perl
#
#  ' HelloWorldResponseGET.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





          

          
 7. Sending Data to the Server Using POST 


          
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


          
Firstly, we need to change the markup in the body of HelloWorld.html from: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





          

          
to: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    <form id="myForm" method="POST">
      Please enter your name: <input type="text" name="name">
    </form>





          

          
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





          

          
to: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponsePOST.php',
                       handler: helloCallback,
                       formNode: dojo.byId('myForm')
                    });
      }





          

          
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


          
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
 7.1 Using a PHP Server 


          
___FCKpd___28



          

          
 7.2 Using an ASP Server 


          
<%
  '
  ' HelloWorldResponsePOST.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


            


             
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


             
Table of Contents 


             

             
 Introduction 


             
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


             
 Changelog 


             
     
              
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
              
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
              
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
              
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
              
  • 8th May 2006 - Initial Public Release 
    •  
             


             
 Notes / Requirements 


             
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


             
http://download.dojotoolkit.org/release-0.4.0/ 


             
 Contacting the Author 


             
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


             
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


             
 1. Setting Up Dojo 


             
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


             
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





             

             
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


             
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





             

             
 2. Getting Started 


             
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


             
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





             

             
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


             
 3. Creating a Button Widget 


             
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


             
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





             

             
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


             
After making the changes, insert the following code into the body section of the HTML: 


             
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





             

             
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


             
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


             
 4. Connecting an Event to the Widget 


             
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


             
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


             
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





             

             
To be: 


             
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





             

             
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


             
    function helloPressed()
    {
      alert('You pressed the button');
    }





             

             
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


             
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





             

             
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


             
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


             
So, to recap, the Javascript code in the third section of the header should resemble: 


             
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





             

             

             
 5. Reading Data from the Server 


             
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


             
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


             
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


             
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





             

             
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


             
The next step is to link the click of the button to the server request. To do this, modify the following code: 


             
      function helloPressed()
      {
        alert('You pressed the button');
      }





             

             
To resemble: 


             
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





             

             
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


             
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


             
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


             
So, to recap, the third Javascript section should resemble: 


             
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





             

             
Next, we'll look at doing something meaningful with that server request. 


             

             
 6. Sending Data to the Server Using GET 


             
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


             
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


             
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





             

             
to: 


             
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





             

             
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


             
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





             

             
to: 


             
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





             

             
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


             
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


             
    content: {myName: dojo.byId('name').value }





             

             
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


             
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


             
Next, we'll look at using POST data instead of GET data. 


             
 6.1 Using a PHP Server 


             
<?php
  /*
  * HelloWorldResponseGET.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


               


                
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                
Table of Contents 


                

                
 Introduction 


                
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                
 Changelog 


                
     
                 
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                 
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                 
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                 
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                 
  • 8th May 2006 - Initial Public Release 
    •  
                


                
 Notes / Requirements 


                
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                
http://download.dojotoolkit.org/release-0.4.0/ 


                
 Contacting the Author 


                
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                
 1. Setting Up Dojo 


                
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                

                
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                

                
 2. Getting Started 


                
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                

                
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                
 3. Creating a Button Widget 


                
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                

                
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                
After making the changes, insert the following code into the body section of the HTML: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                

                
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                
 4. Connecting an Event to the Widget 


                
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                

                
To be: 


                
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                

                
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                
    function helloPressed()
    {
      alert('You pressed the button');
    }





                

                
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                

                
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                
So, to recap, the Javascript code in the third section of the header should resemble: 


                
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                

                

                
 5. Reading Data from the Server 


                
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                

                
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                
      function helloPressed()
      {
        alert('You pressed the button');
      }





                

                
To resemble: 


                
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                

                
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                
So, to recap, the third Javascript section should resemble: 


                
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                

                
Next, we'll look at doing something meaningful with that server request. 


                

                
 6. Sending Data to the Server Using GET 


                
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                

                
to: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                

                
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                

                
to: 


                
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                

                
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                
    content: {myName: dojo.byId('name').value }





                

                
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                
Next, we'll look at using POST data instead of GET data. 


                
 6.1 Using a PHP Server 


                
___FCKpd___19



                

                
 6.2 Using an ASP Server 


                
<%
  '
  ' HelloWorldResponseGET.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>





                

                
 6.3 Using a ColdFusion Server 


                
<!---
  /*
  * HelloWorldResponseGET.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' GET parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>





                

                
 6.4 Using a Java Server (JSP) 


                
<%
  /*
  ' HelloWorldResponseGET.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





                

                
 6.5 Using a Perl Server 


                
#!/usr/bin/perl
#
#  ' HelloWorldResponseGET.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





                

                
 7. Sending Data to the Server Using POST 


                
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                

                
to: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    <form id="myForm" method="POST">
      Please enter your name: <input type="text" name="name">
    </form>





                

                
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                

                
to: 


                
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponsePOST.php',
                       handler: helloCallback,
                       formNode: dojo.byId('myForm')
                    });
      }





                

                
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                
 7.1 Using a PHP Server 


                
<?php
  /*
  * HelloWorldResponsePOST.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


                  


                   
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                   
Table of Contents 


                   

                   
 Introduction 


                   
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                   
 Changelog 


                   
     
                    
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                    
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                    
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                    
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                    
  • 8th May 2006 - Initial Public Release 
    •  
                   


                   
 Notes / Requirements 


                   
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                   
http://download.dojotoolkit.org/release-0.4.0/ 


                   
 Contacting the Author 


                   
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                   
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                   
 1. Setting Up Dojo 


                   
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                   
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                   

                   
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                   
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                   

                   
 2. Getting Started 


                   
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                   
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                   

                   
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                   
 3. Creating a Button Widget 


                   
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                   
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                   

                   
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                   
After making the changes, insert the following code into the body section of the HTML: 


                   
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                   

                   
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                   
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                   
 4. Connecting an Event to the Widget 


                   
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                   
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                   
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                   

                   
To be: 


                   
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                   

                   
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                   
    function helloPressed()
    {
      alert('You pressed the button');
    }





                   

                   
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                   
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                   

                   
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                   
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                   
So, to recap, the Javascript code in the third section of the header should resemble: 


                   
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                   

                   

                   
 5. Reading Data from the Server 


                   
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                   
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                   
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                   
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                   

                   
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                   
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                   
      function helloPressed()
      {
        alert('You pressed the button');
      }





                   

                   
To resemble: 


                   
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                   

                   
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                   
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                   
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                   
So, to recap, the third Javascript section should resemble: 


                   
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                   

                   
Next, we'll look at doing something meaningful with that server request. 


                   

                   
 6. Sending Data to the Server Using GET 


                   
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                   
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                   
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                   

                   
to: 


                   
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                   

                   
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                   
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                   

                   
to: 


                   
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                   

                   
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                   
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                   
    content: {myName: dojo.byId('name').value }





                   

                   
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                   
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                   
Next, we'll look at using POST data instead of GET data. 


                   
 6.1 Using a PHP Server 


                   
<?php
  /*
  * HelloWorldResponseGET.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


                     


                      
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                      
Table of Contents 


                      

                      
 Introduction 


                      
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                      
 Changelog 


                      
     
                       
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                       
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                       
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                       
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                       
  • 8th May 2006 - Initial Public Release 
    •  
                      


                      
 Notes / Requirements 


                      
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                      
http://download.dojotoolkit.org/release-0.4.0/ 


                      
 Contacting the Author 


                      
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                      
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                      
 1. Setting Up Dojo 


                      
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                      
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                      

                      
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                      
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                      

                      
 2. Getting Started 


                      
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                      
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                      

                      
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                      
 3. Creating a Button Widget 


                      
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                      
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                      

                      
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                      
After making the changes, insert the following code into the body section of the HTML: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                      
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                      
 4. Connecting an Event to the Widget 


                      
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                      
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
To be: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                      
    function helloPressed()
    {
      alert('You pressed the button');
    }





                      

                      
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                      
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                      

                      
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                      
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                      
So, to recap, the Javascript code in the third section of the header should resemble: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      

                      
 5. Reading Data from the Server 


                      
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                      
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                      
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                      
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                      

                      
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                      
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                      
      function helloPressed()
      {
        alert('You pressed the button');
      }





                      

                      
To resemble: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                      
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                      
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                      
So, to recap, the third Javascript section should resemble: 


                      
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      
Next, we'll look at doing something meaningful with that server request. 


                      

                      
 6. Sending Data to the Server Using GET 


                      
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                      
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
to: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                      

                      
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
to: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                      

                      
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                      
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                      
    content: {myName: dojo.byId('name').value }





                      

                      
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                      
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
Next, we'll look at using POST data instead of GET data. 


                      
 6.1 Using a PHP Server 


                      
___FCKpd___19



                      

                      
 6.2 Using an ASP Server 


                      
<%
  '
  ' HelloWorldResponseGET.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>





                      

                      
 6.3 Using a ColdFusion Server 


                      
<!---
  /*
  * HelloWorldResponseGET.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' GET parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>





                      

                      
 6.4 Using a Java Server (JSP) 


                      
<%
  /*
  ' HelloWorldResponseGET.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





                      

                      
 6.5 Using a Perl Server 


                      
#!/usr/bin/perl
#
#  ' HelloWorldResponseGET.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





                      

                      
 7. Sending Data to the Server Using POST 


                      
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                      
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                      

                      
to: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    <form id="myForm" method="POST">
      Please enter your name: <input type="text" name="name">
    </form>





                      

                      
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                      

                      
to: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponsePOST.php',
                       handler: helloCallback,
                       formNode: dojo.byId('myForm')
                    });
      }





                      

                      
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                      
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
 7.1 Using a PHP Server 


                      
___FCKpd___28



                      

                      
 7.2 Using an ASP Server 


                      
___FCKpd___29



                      

                      
 7.3 Using a ColdFusion Server 


                      
<!---
  /*
  * HelloWorldResponsePOST.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' POST parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #form.name#, welcome to the world of Dojo!
</cfsetting>





                      

                      
 7.4 Using a Java Server (JSP) 


                      
<%
  /*
  ' HelloWorldResponsePOST.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' POST parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





                      

                      
 7.5 Using a Perl Server 


                      
#!/usr/bin/perl
#
#  ' HelloWorldResponsePOST.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' POST parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





                     

GET parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


                     


                      
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                      
Table of Contents 


                      

                      
 Introduction 


                      
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                      
 Changelog 


                      
     
                       
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                       
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                       
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                       
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                       
  • 8th May 2006 - Initial Public Release 
    •  
                      


                      
 Notes / Requirements 


                      
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                      
http://download.dojotoolkit.org/release-0.4.0/ 


                      
 Contacting the Author 


                      
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                      
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                      
 1. Setting Up Dojo 


                      
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                      
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                      

                      
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                      
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                      

                      
 2. Getting Started 


                      
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                      
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                      

                      
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                      
 3. Creating a Button Widget 


                      
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                      
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                      

                      
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                      
After making the changes, insert the following code into the body section of the HTML: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                      
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                      
 4. Connecting an Event to the Widget 


                      
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                      
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
To be: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                      
    function helloPressed()
    {
      alert('You pressed the button');
    }





                      

                      
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                      
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                      

                      
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                      
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                      
So, to recap, the Javascript code in the third section of the header should resemble: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      

                      
 5. Reading Data from the Server 


                      
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                      
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                      
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                      
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                      

                      
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                      
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                      
      function helloPressed()
      {
        alert('You pressed the button');
      }





                      

                      
To resemble: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                      
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                      
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                      
So, to recap, the third Javascript section should resemble: 


                      
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      
Next, we'll look at doing something meaningful with that server request. 


                      

                      
 6. Sending Data to the Server Using GET 


                      
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                      
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
to: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                      

                      
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
to: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                      

                      
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                      
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                      
    content: {myName: dojo.byId('name').value }





                      

                      
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                      
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
Next, we'll look at using POST data instead of GET data. 


                      
 6.1 Using a PHP Server 


                      
___FCKpd___19



                      

                      
 6.2 Using an ASP Server 


                      
___FCKpd___20



                      

                      
 6.3 Using a ColdFusion Server 


                      
___FCKpd___21



                      

                      
 6.4 Using a Java Server (JSP) 


                      
___FCKpd___22



                      

                      
 6.5 Using a Perl Server 


                      
___FCKpd___23



                      

                      
 7. Sending Data to the Server Using POST 


                      
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                      
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                      
___FCKpd___24



                      

                      
to: 


                      
___FCKpd___25



                      

                      
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                      
___FCKpd___26



                      

                      
to: 


                      
___FCKpd___27



                      

                      
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                      
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
 7.1 Using a PHP Server 


                      
___FCKpd___28



                      

                      
 7.2 Using an ASP Server 


                      
___FCKpd___29



                      

                      
 7.3 Using a ColdFusion Server 


                      
___FCKpd___30



                      

                      
 7.4 Using a Java Server (JSP) 


                      
___FCKpd___31



                      

                      
 7.5 Using a Perl Server 


                      
___FCKpd___32



                     

GET['name']}, welcome to the world of Dojo!/n";
?>





                   

                   
 6.2 Using an ASP Server 


                   
___FCKpd___20



                   

                   
 6.3 Using a ColdFusion Server 


                   
___FCKpd___21



                   

                   
 6.4 Using a Java Server (JSP) 


                   
___FCKpd___22



                   

                   
 6.5 Using a Perl Server 


                   
___FCKpd___23



                   

                   
 7. Sending Data to the Server Using POST 


                   
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                   
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                   
___FCKpd___24



                   

                   
to: 


                   
___FCKpd___25



                   

                   
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                   
___FCKpd___26



                   

                   
to: 


                   
___FCKpd___27



                   

                   
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                   
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                   
 7.1 Using a PHP Server 


                   
___FCKpd___28



                   

                   
 7.2 Using an ASP Server 


                   
___FCKpd___29



                   

                   
 7.3 Using a ColdFusion Server 


                   
___FCKpd___30



                   

                   
 7.4 Using a Java Server (JSP) 


                   
___FCKpd___31



                   

                   
 7.5 Using a Perl Server 


                   
___FCKpd___32



                  

POST parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


                  


                   
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                   
Table of Contents 


                   

                   
 Introduction 


                   
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                   
 Changelog 


                   
     
                    
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                    
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                    
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                    
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                    
  • 8th May 2006 - Initial Public Release 
    •  
                   


                   
 Notes / Requirements 


                   
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                   
http://download.dojotoolkit.org/release-0.4.0/ 


                   
 Contacting the Author 


                   
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                   
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                   
 1. Setting Up Dojo 


                   
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                   
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                   

                   
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                   
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                   

                   
 2. Getting Started 


                   
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                   
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                   

                   
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                   
 3. Creating a Button Widget 


                   
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                   
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                   

                   
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                   
After making the changes, insert the following code into the body section of the HTML: 


                   
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                   

                   
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                   
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                   
 4. Connecting an Event to the Widget 


                   
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                   
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                   
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                   

                   
To be: 


                   
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                   

                   
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                   
    function helloPressed()
    {
      alert('You pressed the button');
    }





                   

                   
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                   
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                   

                   
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                   
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                   
So, to recap, the Javascript code in the third section of the header should resemble: 


                   
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                   

                   

                   
 5. Reading Data from the Server 


                   
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                   
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                   
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                   
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                   

                   
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                   
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                   
      function helloPressed()
      {
        alert('You pressed the button');
      }





                   

                   
To resemble: 


                   
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                   

                   
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                   
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                   
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                   
So, to recap, the third Javascript section should resemble: 


                   
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                   

                   
Next, we'll look at doing something meaningful with that server request. 


                   

                   
 6. Sending Data to the Server Using GET 


                   
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                   
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                   
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                   

                   
to: 


                   
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                   

                   
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                   
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                   

                   
to: 


                   
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                   

                   
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                   
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                   
    content: {myName: dojo.byId('name').value }





                   

                   
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                   
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                   
Next, we'll look at using POST data instead of GET data. 


                   
 6.1 Using a PHP Server 


                   
<?php
  /*
  * HelloWorldResponseGET.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


                     


                      
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                      
Table of Contents 


                      

                      
 Introduction 


                      
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                      
 Changelog 


                      
     
                       
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                       
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                       
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                       
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                       
  • 8th May 2006 - Initial Public Release 
    •  
                      


                      
 Notes / Requirements 


                      
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                      
http://download.dojotoolkit.org/release-0.4.0/ 


                      
 Contacting the Author 


                      
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                      
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                      
 1. Setting Up Dojo 


                      
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                      
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                      

                      
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                      
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                      

                      
 2. Getting Started 


                      
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                      
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                      

                      
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                      
 3. Creating a Button Widget 


                      
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                      
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                      

                      
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                      
After making the changes, insert the following code into the body section of the HTML: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                      
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                      
 4. Connecting an Event to the Widget 


                      
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                      
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
To be: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                      
    function helloPressed()
    {
      alert('You pressed the button');
    }





                      

                      
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                      
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                      

                      
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                      
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                      
So, to recap, the Javascript code in the third section of the header should resemble: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      

                      
 5. Reading Data from the Server 


                      
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                      
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                      
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                      
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                      

                      
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                      
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                      
      function helloPressed()
      {
        alert('You pressed the button');
      }





                      

                      
To resemble: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                      
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                      
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                      
So, to recap, the third Javascript section should resemble: 


                      
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      
Next, we'll look at doing something meaningful with that server request. 


                      

                      
 6. Sending Data to the Server Using GET 


                      
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                      
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
to: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                      

                      
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
to: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                      

                      
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                      
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                      
    content: {myName: dojo.byId('name').value }





                      

                      
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                      
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
Next, we'll look at using POST data instead of GET data. 


                      
 6.1 Using a PHP Server 


                      
___FCKpd___19



                      

                      
 6.2 Using an ASP Server 


                      
<%
  '
  ' HelloWorldResponseGET.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>





                      

                      
 6.3 Using a ColdFusion Server 


                      
<!---
  /*
  * HelloWorldResponseGET.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' GET parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>





                      

                      
 6.4 Using a Java Server (JSP) 


                      
<%
  /*
  ' HelloWorldResponseGET.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





                      

                      
 6.5 Using a Perl Server 


                      
#!/usr/bin/perl
#
#  ' HelloWorldResponseGET.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





                      

                      
 7. Sending Data to the Server Using POST 


                      
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                      
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                      

                      
to: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    <form id="myForm" method="POST">
      Please enter your name: <input type="text" name="name">
    </form>





                      

                      
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                      

                      
to: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponsePOST.php',
                       handler: helloCallback,
                       formNode: dojo.byId('myForm')
                    });
      }





                      

                      
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                      
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
 7.1 Using a PHP Server 


                      
___FCKpd___28



                      

                      
 7.2 Using an ASP Server 


                      
___FCKpd___29



                      

                      
 7.3 Using a ColdFusion Server 


                      
___FCKpd___30



                      

                      
 7.4 Using a Java Server (JSP) 


                      
___FCKpd___31



                      

                      
 7.5 Using a Perl Server 


                      
___FCKpd___32



                     

GET parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


                     


                      
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                      
Table of Contents 


                      

                      
 Introduction 


                      
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                      
 Changelog 


                      
     
                       
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                       
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                       
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                       
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                       
  • 8th May 2006 - Initial Public Release 
    •  
                      


                      
 Notes / Requirements 


                      
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                      
http://download.dojotoolkit.org/release-0.4.0/ 


                      
 Contacting the Author 


                      
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                      
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                      
 1. Setting Up Dojo 


                      
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                      
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                      

                      
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                      
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                      

                      
 2. Getting Started 


                      
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                      
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                      

                      
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                      
 3. Creating a Button Widget 


                      
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                      
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                      

                      
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                      
After making the changes, insert the following code into the body section of the HTML: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                      
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                      
 4. Connecting an Event to the Widget 


                      
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                      
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
To be: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                      

                      
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                      
    function helloPressed()
    {
      alert('You pressed the button');
    }





                      

                      
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                      
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                      

                      
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                      
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                      
So, to recap, the Javascript code in the third section of the header should resemble: 


                      
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      

                      
 5. Reading Data from the Server 


                      
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                      
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                      
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                      
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                      

                      
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                      
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                      
      function helloPressed()
      {
        alert('You pressed the button');
      }





                      

                      
To resemble: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                      
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                      
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                      
So, to recap, the third Javascript section should resemble: 


                      
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                      

                      
Next, we'll look at doing something meaningful with that server request. 


                      

                      
 6. Sending Data to the Server Using GET 


                      
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                      
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                      

                      
to: 


                      
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                      

                      
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                      
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                      

                      
to: 


                      
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                      

                      
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                      
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                      
    content: {myName: dojo.byId('name').value }





                      

                      
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                      
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
Next, we'll look at using POST data instead of GET data. 


                      
 6.1 Using a PHP Server 


                      
___FCKpd___19



                      

                      
 6.2 Using an ASP Server 


                      
___FCKpd___20



                      

                      
 6.3 Using a ColdFusion Server 


                      
___FCKpd___21



                      

                      
 6.4 Using a Java Server (JSP) 


                      
___FCKpd___22



                      

                      
 6.5 Using a Perl Server 


                      
___FCKpd___23



                      

                      
 7. Sending Data to the Server Using POST 


                      
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                      
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                      
___FCKpd___24



                      

                      
to: 


                      
___FCKpd___25



                      

                      
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                      
___FCKpd___26



                      

                      
to: 


                      
___FCKpd___27



                      

                      
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                      
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                      
 7.1 Using a PHP Server 


                      
___FCKpd___28



                      

                      
 7.2 Using an ASP Server 


                      
___FCKpd___29



                      

                      
 7.3 Using a ColdFusion Server 


                      
___FCKpd___30



                      

                      
 7.4 Using a Java Server (JSP) 


                      
___FCKpd___31



                      

                      
 7.5 Using a Perl Server 


                      
___FCKpd___32



                     

GET['name']}, welcome to the world of Dojo!/n";
?>





                   

                   
 6.2 Using an ASP Server 


                   
___FCKpd___20



                   

                   
 6.3 Using a ColdFusion Server 


                   
___FCKpd___21



                   

                   
 6.4 Using a Java Server (JSP) 


                   
___FCKpd___22



                   

                   
 6.5 Using a Perl Server 


                   
___FCKpd___23



                   

                   
 7. Sending Data to the Server Using POST 


                   
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                   
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                   
___FCKpd___24



                   

                   
to: 


                   
___FCKpd___25



                   

                   
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                   
___FCKpd___26



                   

                   
to: 


                   
___FCKpd___27



                   

                   
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                   
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                   
 7.1 Using a PHP Server 


                   
___FCKpd___28



                   

                   
 7.2 Using an ASP Server 


                   
___FCKpd___29



                   

                   
 7.3 Using a ColdFusion Server 


                   
___FCKpd___30



                   

                   
 7.4 Using a Java Server (JSP) 


                   
___FCKpd___31



                   

                   
 7.5 Using a Perl Server 


                   
___FCKpd___32



                  

POST['name']}, welcome to the world of Dojo!/n";
?>





                

                
 7.2 Using an ASP Server 


                
___FCKpd___29



                

                
 7.3 Using a ColdFusion Server 


                
___FCKpd___30



                

                
 7.4 Using a Java Server (JSP) 


                
___FCKpd___31



                

                
 7.5 Using a Perl Server 


                
___FCKpd___32



               

GET parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


               


                
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


                
Table of Contents 


                

                
 Introduction 


                
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


                
 Changelog 


                
     
                 
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
                 
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
                 
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
                 
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
                 
  • 8th May 2006 - Initial Public Release 
    •  
                


                
 Notes / Requirements 


                
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


                
http://download.dojotoolkit.org/release-0.4.0/ 


                
 Contacting the Author 


                
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


                
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


                
 1. Setting Up Dojo 


                
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


                
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





                

                
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


                
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





                

                
 2. Getting Started 


                
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


                
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





                

                
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


                
 3. Creating a Button Widget 


                
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


                
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





                

                
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


                
After making the changes, insert the following code into the body section of the HTML: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                

                
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


                
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


                
 4. Connecting an Event to the Widget 


                
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


                
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


                
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                

                
To be: 


                
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





                

                
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


                
    function helloPressed()
    {
      alert('You pressed the button');
    }





                

                
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


                
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





                

                
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


                
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


                
So, to recap, the Javascript code in the third section of the header should resemble: 


                
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                

                

                
 5. Reading Data from the Server 


                
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


                
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


                
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


                
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





                

                
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


                
The next step is to link the click of the button to the server request. To do this, modify the following code: 


                
      function helloPressed()
      {
        alert('You pressed the button');
      }





                

                
To resemble: 


                
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                

                
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


                
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


                
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


                
So, to recap, the third Javascript section should resemble: 


                
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





                

                
Next, we'll look at doing something meaningful with that server request. 


                

                
 6. Sending Data to the Server Using GET 


                
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


                
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





                

                
to: 


                
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





                

                
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


                
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





                

                
to: 


                
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





                

                
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


                
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


                
    content: {myName: dojo.byId('name').value }





                

                
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


                
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                
Next, we'll look at using POST data instead of GET data. 


                
 6.1 Using a PHP Server 


                
___FCKpd___19



                

                
 6.2 Using an ASP Server 


                
___FCKpd___20



                

                
 6.3 Using a ColdFusion Server 


                
___FCKpd___21



                

                
 6.4 Using a Java Server (JSP) 


                
___FCKpd___22



                

                
 6.5 Using a Perl Server 


                
___FCKpd___23



                

                
 7. Sending Data to the Server Using POST 


                
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


                
Firstly, we need to change the markup in the body of HelloWorld.html from: 


                
___FCKpd___24



                

                
to: 


                
___FCKpd___25



                

                
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


                
___FCKpd___26



                

                
to: 


                
___FCKpd___27



                

                
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


                
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


                
 7.1 Using a PHP Server 


                
___FCKpd___28



                

                
 7.2 Using an ASP Server 


                
___FCKpd___29



                

                
 7.3 Using a ColdFusion Server 


                
___FCKpd___30



                

                
 7.4 Using a Java Server (JSP) 


                
___FCKpd___31



                

                
 7.5 Using a Perl Server 


                
___FCKpd___32



               

GET['name']}, welcome to the world of Dojo!/n";
?>





             

             
 6.2 Using an ASP Server 


             
___FCKpd___20



             

             
 6.3 Using a ColdFusion Server 


             
___FCKpd___21



             

             
 6.4 Using a Java Server (JSP) 


             
___FCKpd___22



             

             
 6.5 Using a Perl Server 


             
___FCKpd___23



             

             
 7. Sending Data to the Server Using POST 


             
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


             
Firstly, we need to change the markup in the body of HelloWorld.html from: 


             
___FCKpd___24



             

             
to: 


             
___FCKpd___25



             

             
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


             
___FCKpd___26



             

             
to: 


             
___FCKpd___27



             

             
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


             
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


             
 7.1 Using a PHP Server 


             
___FCKpd___28



             

             
 7.2 Using an ASP Server 


             
___FCKpd___29



             

             
 7.3 Using a ColdFusion Server 


             
___FCKpd___30



             

             
 7.4 Using a Java Server (JSP) 


             
___FCKpd___31



             

             
 7.5 Using a Perl Server 


             
___FCKpd___32



            

POST parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.form("name") & ", welcome to the world of Dojo!/n")
%>





          

          
 7.3 Using a ColdFusion Server 


          
___FCKpd___30



          

          
 7.4 Using a Java Server (JSP) 


          
___FCKpd___31



          

          
 7.5 Using a Perl Server 


          
___FCKpd___32



         

GET parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


         


          
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


          
Table of Contents 


          

          
 Introduction 


          
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


          
 Changelog 


          
     
           
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
           
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
           
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
           
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
           
  • 8th May 2006 - Initial Public Release 
    •  
          


          
 Notes / Requirements 


          
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


          
http://download.dojotoolkit.org/release-0.4.0/ 


          
 Contacting the Author 


          
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


          
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


          
 1. Setting Up Dojo 


          
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


          
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





          

          
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


          
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





          

          
 2. Getting Started 


          
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


          
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





          

          
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


          
 3. Creating a Button Widget 


          
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


          
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





          

          
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


          
After making the changes, insert the following code into the body section of the HTML: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


          
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


          
 4. Connecting an Event to the Widget 


          
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


          
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
To be: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


          
    function helloPressed()
    {
      alert('You pressed the button');
    }





          

          
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


          
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





          

          
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


          
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


          
So, to recap, the Javascript code in the third section of the header should resemble: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          

          
 5. Reading Data from the Server 


          
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


          
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


          
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


          
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





          

          
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


          
The next step is to link the click of the button to the server request. To do this, modify the following code: 


          
      function helloPressed()
      {
        alert('You pressed the button');
      }





          

          
To resemble: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


          
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


          
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


          
So, to recap, the third Javascript section should resemble: 


          
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          
Next, we'll look at doing something meaningful with that server request. 


          

          
 6. Sending Data to the Server Using GET 


          
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


          
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
to: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





          

          
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
to: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





          

          
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


          
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


          
    content: {myName: dojo.byId('name').value }





          

          
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


          
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
Next, we'll look at using POST data instead of GET data. 


          
 6.1 Using a PHP Server 


          
___FCKpd___19



          

          
 6.2 Using an ASP Server 


          
___FCKpd___20



          

          
 6.3 Using a ColdFusion Server 


          
___FCKpd___21



          

          
 6.4 Using a Java Server (JSP) 


          
___FCKpd___22



          

          
 6.5 Using a Perl Server 


          
___FCKpd___23



          

          
 7. Sending Data to the Server Using POST 


          
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


          
Firstly, we need to change the markup in the body of HelloWorld.html from: 


          
___FCKpd___24



          

          
to: 


          
___FCKpd___25



          

          
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


          
___FCKpd___26



          

          
to: 


          
___FCKpd___27



          

          
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


          
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
 7.1 Using a PHP Server 


          
___FCKpd___28



          

          
 7.2 Using an ASP Server 


          
___FCKpd___29



          

          
 7.3 Using a ColdFusion Server 


          
___FCKpd___30



          

          
 7.4 Using a Java Server (JSP) 


          
___FCKpd___31



          

          
 7.5 Using a Perl Server 


          
___FCKpd___32



         

GET['name']}, welcome to the world of Dojo!/n";
?>





       

       
 6.2 Using an ASP Server 


       
___FCKpd___20



       

       
 6.3 Using a ColdFusion Server 


       
___FCKpd___21



       

       
 6.4 Using a Java Server (JSP) 


       
___FCKpd___22



       

       
 6.5 Using a Perl Server 


       
___FCKpd___23



       

       
 7. Sending Data to the Server Using POST 


       
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


       
Firstly, we need to change the markup in the body of HelloWorld.html from: 


       
___FCKpd___24



       

       
to: 


       
___FCKpd___25



       

       
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


       
___FCKpd___26



       

       
to: 


       
___FCKpd___27



       

       
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


       
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


       
 7.1 Using a PHP Server 


       
___FCKpd___28



       

       
 7.2 Using an ASP Server 


       
___FCKpd___29



       

       
 7.3 Using a ColdFusion Server 


       
___FCKpd___30



       

       
 7.4 Using a Java Server (JSP) 


       
___FCKpd___31



       

       
 7.5 Using a Perl Server 


       
___FCKpd___32



      

POST parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


      


       
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


       
Table of Contents 


       

       
 Introduction 


       
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


       
 Changelog 


       
     
        
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
        
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
        
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
        
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
        
  • 8th May 2006 - Initial Public Release 
    •  
       


       
 Notes / Requirements 


       
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


       
http://download.dojotoolkit.org/release-0.4.0/ 


       
 Contacting the Author 


       
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


       
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


       
 1. Setting Up Dojo 


       
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


       
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





       

       
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


       
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





       

       
 2. Getting Started 


       
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


       
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





       

       
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


       
 3. Creating a Button Widget 


       
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


       
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





       

       
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


       
After making the changes, insert the following code into the body section of the HTML: 


       
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





       

       
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


       
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


       
 4. Connecting an Event to the Widget 


       
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


       
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


       
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





       

       
To be: 


       
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





       

       
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


       
    function helloPressed()
    {
      alert('You pressed the button');
    }





       

       
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


       
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





       

       
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


       
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


       
So, to recap, the Javascript code in the third section of the header should resemble: 


       
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





       

       

       
 5. Reading Data from the Server 


       
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


       
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


       
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


       
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





       

       
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


       
The next step is to link the click of the button to the server request. To do this, modify the following code: 


       
      function helloPressed()
      {
        alert('You pressed the button');
      }





       

       
To resemble: 


       
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





       

       
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


       
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


       
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


       
So, to recap, the third Javascript section should resemble: 


       
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





       

       
Next, we'll look at doing something meaningful with that server request. 


       

       
 6. Sending Data to the Server Using GET 


       
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


       
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


       
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





       

       
to: 


       
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





       

       
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


       
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





       

       
to: 


       
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





       

       
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


       
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


       
    content: {myName: dojo.byId('name').value }





       

       
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


       
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


       
Next, we'll look at using POST data instead of GET data. 


       
 6.1 Using a PHP Server 


       
<?php
  /*
  * HelloWorldResponseGET.php
  * --------
  *
  * Print the name that is passed in the
  * 'name' 

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


         


          
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


          
Table of Contents 


          

          
 Introduction 


          
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


          
 Changelog 


          
     
           
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
           
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
           
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
           
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
           
  • 8th May 2006 - Initial Public Release 
    •  
          


          
 Notes / Requirements 


          
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


          
http://download.dojotoolkit.org/release-0.4.0/ 


          
 Contacting the Author 


          
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


          
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


          
 1. Setting Up Dojo 


          
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


          
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





          

          
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


          
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





          

          
 2. Getting Started 


          
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


          
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





          

          
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


          
 3. Creating a Button Widget 


          
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


          
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





          

          
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


          
After making the changes, insert the following code into the body section of the HTML: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


          
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


          
 4. Connecting an Event to the Widget 


          
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


          
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
To be: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


          
    function helloPressed()
    {
      alert('You pressed the button');
    }





          

          
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


          
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





          

          
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


          
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


          
So, to recap, the Javascript code in the third section of the header should resemble: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          

          
 5. Reading Data from the Server 


          
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


          
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


          
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


          
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





          

          
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


          
The next step is to link the click of the button to the server request. To do this, modify the following code: 


          
      function helloPressed()
      {
        alert('You pressed the button');
      }





          

          
To resemble: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


          
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


          
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


          
So, to recap, the third Javascript section should resemble: 


          
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          
Next, we'll look at doing something meaningful with that server request. 


          

          
 6. Sending Data to the Server Using GET 


          
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


          
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
to: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





          

          
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
to: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





          

          
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


          
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


          
    content: {myName: dojo.byId('name').value }





          

          
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


          
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
Next, we'll look at using POST data instead of GET data. 


          
 6.1 Using a PHP Server 


          
___FCKpd___19



          

          
 6.2 Using an ASP Server 


          
<%
  '
  ' HelloWorldResponseGET.asp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  '

  response.ContentType="text/plain"
  response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>





          

          
 6.3 Using a ColdFusion Server 


          
<!---
  /*
  * HelloWorldResponseGET.cfm
  * --------
  *
  * Print the name that is passed in the
  * 'name' GET parameter in a sentence
  */
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>





          

          
 6.4 Using a Java Server (JSP) 


          
<%
  /*
  ' HelloWorldResponseGET.jsp
  ' --------
  '
  ' Print the name that is passed in the
  ' 'name' GET parameter in a sentence
  */

  response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!





          

          
 6.5 Using a Perl Server 


          
#!/usr/bin/perl
#
#  ' HelloWorldResponseGET.pl
#  ' --------
#  '
#  ' Print the name that is passed in the
#  ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";





          

          
 7. Sending Data to the Server Using POST 


          
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


          
Firstly, we need to change the markup in the body of HelloWorld.html from: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





          

          
to: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    <form id="myForm" method="POST">
      Please enter your name: <input type="text" name="name">
    </form>





          

          
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





          

          
to: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponsePOST.php',
                       handler: helloCallback,
                       formNode: dojo.byId('myForm')
                    });
      }





          

          
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


          
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
 7.1 Using a PHP Server 


          
___FCKpd___28



          

          
 7.2 Using an ASP Server 


          
___FCKpd___29



          

          
 7.3 Using a ColdFusion Server 


          
___FCKpd___30



          

          
 7.4 Using a Java Server (JSP) 


          
___FCKpd___31



          

          
 7.5 Using a Perl Server 


          
___FCKpd___32



         

GET parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


         


          
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


          
Table of Contents 


          

          
 Introduction 


          
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


          
 Changelog 


          
     
           
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
           
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
           
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
           
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
           
  • 8th May 2006 - Initial Public Release 
    •  
          


          
 Notes / Requirements 


          
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


          
http://download.dojotoolkit.org/release-0.4.0/ 


          
 Contacting the Author 


          
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


          
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


          
 1. Setting Up Dojo 


          
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


          
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





          

          
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


          
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





          

          
 2. Getting Started 


          
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


          
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





          

          
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


          
 3. Creating a Button Widget 


          
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


          
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





          

          
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


          
After making the changes, insert the following code into the body section of the HTML: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


          
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


          
 4. Connecting an Event to the Widget 


          
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


          
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
To be: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





          

          
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


          
    function helloPressed()
    {
      alert('You pressed the button');
    }





          

          
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


          
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





          

          
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


          
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


          
So, to recap, the Javascript code in the third section of the header should resemble: 


          
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          

          
 5. Reading Data from the Server 


          
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


          
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


          
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


          
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





          

          
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


          
The next step is to link the click of the button to the server request. To do this, modify the following code: 


          
      function helloPressed()
      {
        alert('You pressed the button');
      }





          

          
To resemble: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


          
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


          
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


          
So, to recap, the third Javascript section should resemble: 


          
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





          

          
Next, we'll look at doing something meaningful with that server request. 


          

          
 6. Sending Data to the Server Using GET 


          
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


          
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





          

          
to: 


          
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





          

          
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


          
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





          

          
to: 


          
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





          

          
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


          
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


          
    content: {myName: dojo.byId('name').value }





          

          
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


          
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
Next, we'll look at using POST data instead of GET data. 


          
 6.1 Using a PHP Server 


          
___FCKpd___19



          

          
 6.2 Using an ASP Server 


          
___FCKpd___20



          

          
 6.3 Using a ColdFusion Server 


          
___FCKpd___21



          

          
 6.4 Using a Java Server (JSP) 


          
___FCKpd___22



          

          
 6.5 Using a Perl Server 


          
___FCKpd___23



          

          
 7. Sending Data to the Server Using POST 


          
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


          
Firstly, we need to change the markup in the body of HelloWorld.html from: 


          
___FCKpd___24



          

          
to: 


          
___FCKpd___25



          

          
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


          
___FCKpd___26



          

          
to: 


          
___FCKpd___27



          

          
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


          
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


          
 7.1 Using a PHP Server 


          
___FCKpd___28



          

          
 7.2 Using an ASP Server 


          
___FCKpd___29



          

          
 7.3 Using a ColdFusion Server 


          
___FCKpd___30



          

          
 7.4 Using a Java Server (JSP) 


          
___FCKpd___31



          

          
 7.5 Using a Perl Server 


          
___FCKpd___32



         

GET['name']}, welcome to the world of Dojo!/n";
?>





       

       
 6.2 Using an ASP Server 


       
___FCKpd___20



       

       
 6.3 Using a ColdFusion Server 


       
___FCKpd___21



       

       
 6.4 Using a Java Server (JSP) 


       
___FCKpd___22



       

       
 6.5 Using a Perl Server 


       
___FCKpd___23



       

       
 7. Sending Data to the Server Using POST 


       
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


       
Firstly, we need to change the markup in the body of HelloWorld.html from: 


       
___FCKpd___24



       

       
to: 


       
___FCKpd___25



       

       
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


       
___FCKpd___26



       

       
to: 


       
___FCKpd___27



       

       
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


       
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


       
 7.1 Using a PHP Server 


       
___FCKpd___28



       

       
 7.2 Using an ASP Server 


       
___FCKpd___29



       

       
 7.3 Using a ColdFusion Server 


       
___FCKpd___30



       

       
 7.4 Using a Java Server (JSP) 


       
___FCKpd___31



       

       
 7.5 Using a Perl Server 


       
___FCKpd___32



      

POST['name']}, welcome to the world of Dojo!/n";
?>





    

    
 7.2 Using an ASP Server 


    
___FCKpd___29



    

    
 7.3 Using a ColdFusion Server 


    
___FCKpd___30



    

    
 7.4 Using a Java Server (JSP) 


    
___FCKpd___31



    

    
 7.5 Using a Perl Server 


    
___FCKpd___32



   

GET parameter in a sentence
  */

  header('Content-type: text/plain');
  print "Hello {

HelloWorld 


Version 59, changed by [email protected] 01/11/2007.  Show version history 


   


    
NOTE: This page is currently undergoing modification/updating. It should be finished no later than 30th January 2007 


    
Table of Contents 


    

    
 Introduction 


    
The purpose of this tutorial is to provide a starting point for users who are new to Dojo. Whilst every effort is made to introduce as much as possible about Dojo, it is impossible to include more of the detailed information since to do so would be counter productive and confusing to new users. For more information on the concepts introduced here, please see the links to other resources at the end of this document (Section 8 - Finding More Resources). 


    
 Changelog 


    
     
     
  • 28th June 2006 - Addition of Perl Server examples for GET and POST (courtesy of Gareth Tansey) 
    •  
     
  • 21th June 2006 - Modification for compatibility with 0.3.x release (Bill Keese) 
    •  
     
  • 22th May 2006 - Addition of Java Server (JSP) examples for GET and POST (courtesy of Kexi) 
    •  
     
  • 19th May 2006 - Addition of ColdFusion examples for GET and POST (courtesy of Matthew Reinbold) 
    •  
     
  • 8th May 2006 - Initial Public Release 
    •  
    


    
 Notes / Requirements 


    
Since this tutorial makes use of Dojo's event, IO, and widget systems, it is important that the "Kitchen Sink" Dojo build version 0.4.0 is utilised. This can be found at the following address: 


    
http://download.dojotoolkit.org/release-0.4.0/ 


    
 Contacting the Author 


    
Thinking of making modifications to this document? Want to make suggestions / constructive criticism? 


    
If so, please contact me (Lance Duivenbode) at dojo AT duivenbode DOT id DOT au. Feedback is always welcome since it helps me improve my documentation - both now and in the future. Thanks! 


    
 1. Setting Up Dojo 


    
The first step to use Dojo in this tutorial is to create the directory structure and set up the location of the files. To achieve this, you will need to create the following directory structure in the location of your choice (which for the purposes of this example will be called 'HelloWorldTutorial'). 


    
    - HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/





    

    
Once this has been done, grab the latest 'Kitchen Sink' build from http://dojotoolkit.org/download/ and decompress it into the HelloWorld/js/dojo/ directory. You should now have a directory structure that is similar to the following (where '..' indicates that there are more files under that directory, but that they are not shown here): 


    
    - HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..





    

    
 2. Getting Started 


    
Once we have setup the directory and file structure for the tutorial, we will need to setup the Javascript component of our HTML page. Have a look at the code below: 


    
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
  </head>

  <body>
  </body>
</html>





    

    
As it can be seen above, the page is a just a standard HTML skeleton with a script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use. 


    
 3. Creating a Button Widget 


    
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat. 


    
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows: 


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





    

    
The first dojo.require lines instructs Dojo to include the widget managing functions (it does NOT load all the widgets!) , whilst the second dojo.require line instructs Dojo to load the Button widget. If you were to omit the second line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect. 


    
After making the changes, insert the following code into the body section of the HTML: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





    

    
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text. 


    
Note: Whilst in this example we have used widgetId="helloButton", this could be replaced with id="helloButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named. 


    
 4. Connecting an Event to the Widget 


    
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system! 


    
To get started we need to modify the Javascript headers once more to include the event modules. So change the following: 


    
    <!-- SECTION 2 -->
    <script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





    

    
To be: 


    
    <!-- SECTION 2 -->
    <script type="text/javascript">
        dojo.require("dojo.event.*");
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.Button");
    </script>





    

    
Notice the .* on the end of dojo.event? That tells Dojo to include all the event functions just as we have included all the widget related functions (but NOT all the widgets) by specifying dojo.widget.*. The next step is to write a function that will be called by the button when it is clicked. For now the following will do, so insert that into the last Javascript section, after the code that already exists. 


    
    function helloPressed()
    {
      alert('You pressed the button');
    }





    

    
Pretty simple - just what you'd normally expect. Now we need to hook up the button to the function. However, in order for it to work, we need to do this after the widgets have been created by Dojo. Don't worry though - Dojo has it covered! Simply insert the following code into the last Javascript section: 


    
    function init()
    {
      var helloButton = dojo.widget.byId('helloButton');
      dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }

    dojo.addOnLoad(init);





    

    
Firstly, the line dojo.addOnLoad(init); tells Dojo to call the init function when it has finished loading correctly. This is very important! If the init function was called before Dojo has finished parsing the HTML it would fail since the Button widget would not exist at that point in time - causing a nasty error. 


    
Once Dojo has finished loading and the init function is being run, the first line of the function (var helloButton = ...) gets a Javascript object reference to the created Button widget. Using document.getElementById will not work since the DOM has been modified by Dojo. Instead, Dojo keeps a reference of all widgets it has created that can be accessed with the dojo.widget.byId function - providing you specify either the widgetId or id attribute in your markup. 


    
So, to recap, the Javascript code in the third section of the header should resemble: 


    
    <!-- SECTION 2 -->
    <script type="text/javascript">
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        alert('You pressed the button');
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





    

    

    
 5. Reading Data from the Server 


    
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.io.bind. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section. 


    
Before going further, it is worth noting that dojo.io.bind can be a complex function - and one that would take a lot of writing to explain. However, such a document does exist at http://dojotoolkit.org/docs/intro_to_dojo_io.html. This tutorial does not go into great detail - it will simply show how to achieve common functionality. 


    
So, to get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the last Javascript section in the header: 


    
      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }





    

    
The three arguments to the function (type, data, and evt) are important - don't leave any of them out! The first argument (type), specifies the return type - which is usually 'load' on success or 'error' on error. The second argument (data) contains the data sent back from the server, whilst the third argument contains a Dojo event object. In the above function, we've used the type argument to determine whether the request was successful, displaying an error message if it wasn't or the returned data if it was. 


    
The next step is to link the click of the button to the server request. To do this, modify the following code: 


    
      function helloPressed()
      {
        alert('You pressed the button');
      }





    

    
To resemble: 


    
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





    

    
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server. 


    
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'. 


    
Now, when the button is clicked, a Javascript alert should display the text from the response.txt file. Dojo-Easy! 


    
So, to recap, the third Javascript section should resemble: 


    
    <!-- SECTION 3 -->
    <script type="text/javascript">
      dojo.require("dojo.io.*");
      dojo.require("dojo.event.*");
      dojo.require("dojo.widget.*");
	  dojo.require("dojo.widget.Button");

      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

      function helloCallback(type, data, evt)
      {
        if (type == 'error')
          alert('Error when retrieving data from the server!');
        else
          alert(data);
      }

      function init()
      {
        var helloButton = dojo.widget.byId('helloButton');
        dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      }

      dojo.addOnLoad(init);
    </script>





    

    
Next, we'll look at doing something meaningful with that server request. 


    

    
 6. Sending Data to the Server Using GET 


    
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET.<type> where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp'). 


    
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>





    

    
to: 


    
    <button dojoType="Button" widgetId="helloButton">Hello World!</button>
    <br>
    Please enter your name: <input type="text" id="name">





    

    
Once this has been done, we will also need to change the code in the last section of Javascript in the header from: 


    
      function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }





    

    
to: 


    
      function helloPressed()
      {
        // Don't forget to replace the value for 'url' with
        // the value of appropriate file for your server
        // (i.e. 'HelloWorldResponseGET.asp') for an ASP server
        dojo.io.bind({
                       url: 'HelloWorldResponseGET.php',
                       handler: helloCallback,
                       content: {name: dojo.byId('name').value }
                    });
      }





    

    
Before we go any further - it is important to mention that the url property in the dojo.io.bind function call must be set to the file that is appropriate to your environment. If you are using an ASP server then the value must read 'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' Likewise, if you are using a ColdFusion server then the value must read 'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. Finally, if you are using a Java server (JSP) then the value must read 'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or if you are using a Perl server then the value must read 'HelloWorldResponseGET.pl' instead of 'HelloWorldResponseGET.pl'. The code for these files is in the sections below, and is also available as attachments to this tutorial. 


    
In the code above, you will notice that there is a new property that has been passed to the dojo.io.bind function. This property - content - allows the programmer to send arbitary values to the server as parameters. In this case, since we are using the default method of dojo.io.bind which is GET, the server side script will have the value of the textbox available to it as a the GET parameter 'name'. It is worth mentioning that if the script expected the parameter under a different name (such as 'myName'), we would simply change the content property to be (note the change of 'name' to 'myName' on the left of the assignment operator ':'): 


    
    content: {myName: dojo.byId('name').value }





    

    
Since we've not used it before, it is also worth noting the call dojo.byId('name').value. Quite simply, this call is a shortcut for the standard document.getElementById(..) function. 


    
Finally, if you enter your name into the text box and you click the 'Hello World' button, an alert box should appear with the message 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


    
Next, we'll look at using POST data instead of GET data. 


    
 6.1 Using a PHP Server 


    
___FCKpd___19



    

    
 6.2 Using an ASP Server 


    
___FCKpd___20



    

    
 6.3 Using a ColdFusion Server 


    
___FCKpd___21



    

    
 6.4 Using a Java Server (JSP) 


    
___FCKpd___22



    

    
 6.5 Using a Perl Server 


    
___FCKpd___23



    

    
 7. Sending Data to the Server Using POST 


    
Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment. 


    
Firstly, we need to change the markup in the body of HelloWorld.html from: 


    
___FCKpd___24



    

    
to: 


    
___FCKpd___25



    

    
Next we need to change the helloPressed function of the last Javascript section in the document's head from: 


    
___FCKpd___26



    

    
to: 


    
___FCKpd___27



    

    
As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead. 


    
As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box. 


    
 7.1 Using a PHP Server 


    
___FCKpd___28



    

    
 7.2 Using an ASP Server 


    
___FCKpd___29



    

    
 7.3 Using a ColdFusion Server 


    
___FCKpd___30



    

    
 7.4 Using a Java Server (JSP) 


    
___FCKpd___31



    

    
 7.5 Using a Perl Server 


    
___FCKpd___32



   

GET['name']}, welcome to the world of Dojo!/n";
?>

6.2 Using an ASP Server 

___FCKpd___20

6.3 Using a ColdFusion Server 

___FCKpd___21

6.4 Using a Java Server (JSP) 

___FCKpd___22

6.5 Using a Perl Server 

___FCKpd___23

7. Sending Data to the Server Using POST

Using GET data is all well and good, but sometimes you want to use Dojo to improve the user's experience when using a traditional HTML form. As usual, Dojo has a very nice way of making this easier. Again, the code for these files is in the sections below, and are also available as attachments to this tutorial. Additionally, as with the last section, you will need to change the 'url' property to point to the file that is appropriate to your environment.

Firstly, we need to change the markup in the body of HelloWorld.html from: 

___FCKpd___24

to: 

___FCKpd___25

Next we need to change the helloPressed function of the last Javascript section in the document's head from: 

___FCKpd___26

to: 

___FCKpd___27

As it can be seen from the code above, we've removed the 'content' property of the dojo.io.bind call and replaced it with a new property 'formNode'. This basically informs the dojo.io.bind function that it needs to use the form 'myForm' as the source for the data in the call. In the case of this form, the method has been set to 'POST' so Dojo will in turn use POST when submitting the data. If the form's method was either missing or set to 'GET', Dojo would use the GET method instead.

As with the last section, entering your name and clicking 'Hello World!' should yield a message such as 'Hello <name>, welcome to the world of Dojo!' where <name> is the name you entered into the text box.

7.1 Using a PHP Server 

___FCKpd___28

7.2 Using an ASP Server 

___FCKpd___29

7.3 Using a ColdFusion Server 

___FCKpd___30

7.4 Using a Java Server (JSP) 

___FCKpd___31

7.5 Using a Perl Server 

___FCKpd___32

你可能感兴趣的:(helloworld)

  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 20个新手学习c++必会的程序 输出*三角形、杨辉三角等（附代码） X_StarX c++学习算法大学生开发语言数据结构
    示例1:HelloWorld#includeusingnamespacestd;intmain(){coutusingnamespacestd;intmain(){inta=5;intb=10;intsum=a+b;coutusingnamespacestd;intfactorial(intn){if(nusingnamespacestd;voidprintFibonacci(intn){intt
  • Python位置参数、默认参数、可变参数、关键字参数、命名关键字参数、命名位置参数 西二旗王员外 Python综合python开发语言numpy
    前言学习python，一定会使用函数、方法，在使用过程中，会使用到参数，参数在不同的编程上下文中有不同的名字，一起学习下那些耳熟能详的参数位置参数默认参数可变参数关键字参数命名关键字参数命名位置参数创建一个拥有4个参数的函数deftemp(first,second="HelloWorld",*args,**kwargs)print(first)print(second)print(args)pri
  • 判断包含关系 周bro 前端javascript开发语言
    //-----------------------------------判断某个字符串是否包含某字符------------------------------------//使用includes()方法//letstr="Helloworld!";//letcharToFind="a";//if(str.includes(charToFind)){//console.log(`字符串"${st
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • Java之String类 不互关就取关 javapython开发语言
    一、String类常用方法1.引用类型的比较我们知道在Java中两个引用遍历是不能用"=="号来比较的，而String类重写了父类objects的equals方法，实现了引用类型的比较例子importjava.util.Scanner;publicclassMain{publicstaticvoidmain(String[]args){Stringstr1="helloworld";Strings
  • SharedPreferences hdychi
    一、简介在Android中，主要有以下几种存储方式：1、SharedPreferences，在键值对中存储私有原始数据。2、内部存储，在设备内存中存储私有数据。官方示例：StringFILENAME="hello_file";Stringstring="helloworld!";FileOutputStreamfos=openFileOutput(FILENAME,Context.MODE_PRI
  • 用前端的语言写后端——Node.js之Express tabzzz 前端前端node.jsexpress
    ExpressExpress是一种流行的模型视图控制器(MVC)Node.js框架，具有快速、极简和灵活的优点，为Web和移动应用程序开发提供了强大的功能集合。最受欢迎的Node.js框架！文章目录Express安装ExpressHelloWorld路由中间件全局中间件应用中间件开放跨域请求几种常用的Express内置中间件函数1.JSON格式数据中间件函数2.静态文件中间件函数3.路由中间件函数
  • Swift初学笔记之Swift基础语法 _迦与迦若 Swift编程语言swiftiosxcode
    一、变量声明与oc相比更简洁，编译时的检错机制更完善1、let声明常量，var声明变量varmyVariable=42myVariable=50letmyConstant=422、如果初始化时直接赋值可以不声明类型，swift会自己识别（即类型推断）。反之需要用冒号:声明变量类型letmyString="HelloWorld"print(myString);//;加不加都可以，不会报错letmSt
  • c++20 std::format 格式化说明 zhenghe12365 c++20
    在标头定义()功能很强大，它把字符串当成一个模板，通过传入的参数进行格式化，并且使用大括号‘{}’作为特殊字符代替‘%’。1、基本用法（1）不带编号，即“{}”（2）带数字编号，可调换顺序，即“{1}”、“{2}”std::stringstr=std::format("{}{}!","Hello","world","something");//OK，产生"Helloworld"std::strin
  • JavaSE:1、程序代码基本结构 _Power_Y JavaSEjava开发语言
    1、固定模式publicclassMain{publicstaticvoidmain(String[]args){System.out.println("HelloWorld!");}}System.out.println是换行输出System.out.printf可以按照C语言方式输出System.out.print是正常输出2、注释行注释publicclassMain{publicstatic
  • Delta3d 简单的控制物体例子 Sunday Delta3D
    //Inthistutorial,youwillchangethepreviousHelloWorldapplicationto//furtheryourunderstandingofmotionmodels.Previouslyyoulearnedhowtoplacea//camerainasceneandmovethecamerapositionviamouseandkeyboardinput
  • Java学习路线：从零基础到高级开发者的完整指南 何遇mirror java
    初学者入门指南1.环境搭建安装JDK:下载并安装最新版本的JDK（JavaDevelopmentKit）。配置环境:设置JAVA_HOME环境变量，并将bin目录添加到PATH中。选择IDE:使用Eclipse、IntelliJIDEA或其他任何你喜欢的Java集成开发环境。2.Java基础知识HelloWorld:编写你的第一个Java程序。基本语法:学习变量、数据类型（原始类型、包装类型）、运
  • 怎么确认python安装成功_如何验证python安装成功 weixin_39751871 怎么确认python安装成功
    windows系统，运行—cmd，进入dos窗口，输入python，安装成功的话可以看到版本信息并进入编程模式，如下图（我安装的版本是python2.7.13）输入:print'helloworld'，按回车。成功打印。没有报错，说明Python已经成功安装了。内容扩展：什么是一个好的方法来检查一个包是否在Python脚本内安装？我知道这很容易从解释器，但我需要在一个脚本中这样做。我想我可以检查在
  • 第一个C++程序 Ronaldinho Gaúch C++基础c++算法开发语言
    打印helloworld#includeusingnamespacestd;intmain(){cout是引入输入输出，这样才可以在控制台上输出helloworlduseingnamespacestd:用于简化标准库中组件的引用。当在C++代码中使用这个语句时，它告诉编译器随后的代码将使用标准库std中的标识符，这意味着可以不用在前面加上std::这个前缀就可以直接使用标准库中的诸多功能和对象，例
  • C# VScode MacOS 啊哈JC熙
    如何让在MacOS上运行C#.netcore去官网下载.NetCoreSDKhttps://www.microsoft.com/net/download/macos傻瓜式安装一键“继续”到底打开VScode下载C#新建文件HelloWorldC#然后用VScode打开打开终端输入dotnetnewconsole常见控制台工程dotnetnew查看可以创建什么.Net项目运行C#程序运行结果
  • Kotlin 极简小抄 P1（变量与常量、基本数据类型、流程控制） 我命由我12345 Kotlin-极简小抄kotlin开发语言android后端学习javajava-ee
    一、KotlinKotlin由JetBrains开发，是一种在JVM（Java虚拟机）上运行的静态类型编程语言Kotlin旨在提高开发者的编码效率和安全性，同时保持与Java的高度互操作性Kotlin是Android应用开发的首选语言，也可以与Java一样用于服务器端开发二、Kotlin极简小抄1、初体验funmain(){println("HelloWorld")}2、注释//这是单行注释/*这
  • 3.引入自定义的组件 jqClub
    0.在src/components/left.vue，添加所需要的内容left-contentexportdefault{name:'HelloWorld',data(){return{msg:'WelcometoYourVue.jsApp'}}}1.在src/components/HelloWorld.vue中顶部引入(记住，引入不存在的组件，会直接报错)importleftfrom'./lef
  • python——字符串&切片 其实@qq.com python
    字符串对象：1、字符串定义：(1)定义：字符串就是一系列字符，在python中，用引号(单引号，双引号，三引号都可以)括起来的都是字符串。例如：“kaikai”，“helloworld”，“xixiisagirl”(2)输出字符串直接在print函数中输出字符串。如：print(“kaikai”)(3)拼接字符串python中使用加号(+)来拼接字符串。如：2.字符串的常见方法：(1)字符串大小写
  • Python 入门的60个基础练习 金汤肥牛面. pythonjava数据库开发语言机器学习算法前端
    文章目录01-HelloWorld02-print函数03-基本运算04-input05-输入输出基础练习06-字符串使用基础07-列表基础08-元组基础09-字典基础10-基本判断11-条件表达式、三元运算符12-判断练习：用户名和密码是否正确13-猜数：基础实现14-成绩分类115-成绩分类216-石头剪刀布17-改进的石头剪刀布18-猜数，直到猜对19-猜数，5次机会20-while循环，累
  • Java 正则表达式 南风_001
    正则表达式定义了字符串的模式。正则表达式可以用来搜索、编辑或处理文本。正则表达式并不仅限于某一种语言，但是在每种语言中有细微的差别。正则表达式实例一个字符串其实就是一个简单的正则表达式，例如HelloWorld正则表达式匹配"HelloWorld"字符串。.（点号）也是一个正则表达式，它匹配任何一个字符如："a"或"1"。下表列出了一些正则表达式的实例及描述：正则表达式描述thisistext匹配
  • 4. Fabric 动画和事件 Lanwarf-前端开发 Fabricfabricjavascript
    1.动画//添加文本lettext=newfabric.FabricText('helloworld',{left:100,top:100})canvas.add(text)text.animate({left:300,top:200,fontSize:48,fill:'blue'},{duration:2000,//设置动画的持续时间为2000毫秒onChange:canvas.renderAl
  • Python中字符串计数常用的方法！ 老男孩IT教育 python开发语言
    在Python中，字符串计数是非常基本的操作，使用率极高，可用于多种情况，更是每个Python开发工程师必须掌握的基础技能之一，那么Python中如何进行字符串计数?以下是常用方法介绍。1、使用count()方法Python中的字符串类型具有count()方法，该方法可以返回特定子字符串在字符串中出现的次数。例如，以下代码计算字符串"helloworld"中字母i的出现次数：'''s='hello
  • PDF标准详解（三）—— PDF坐标系统和坐标变换 aluluka PDF相关技术pdf
    之前我们了解了PDF文档的基本结构，并且展示了一个简单的helloworld。这个helloworld虽然只在页面中显示一个helloworld文字，但是包含的内容却是不少。这次我们仍然以它为切入点，来了解PDF的坐标系统以及坐标变换的相关知识图形学中二维图形变换中学我们学习了平面直角坐标系，x轴沿着水平方向从左往右递增，Y轴沿着竖直方向，从下往上坐标递增。而PDF的坐标系与数学中的坐标系相同。但
  • PDF标准详解（二）——PDF 对象 aluluka PDF相关技术pdf
    上一篇文章我们介绍了一个PDF文档应该包含的最基本的结构，并且手写了一个最简单的“HelloWorld”的PDF文档。后面我们介绍新的PDF标准给出示例时将以这个文档为基础，而不再给出完整的文档示例，小伙伴想自己测试可以根据上一节的文档来进行配置。对象上一节我们看到一个个奇奇怪怪的元素，可能也好奇它们的写法，现在我们来正式介绍它们的相关内容，它们就是PDF文档中一个个的对象。PDF支持5种基本对象
  • error C2664: “void std::_Pmf_wrap qqbaby2005 cocos2d-xcocos2dxvs2013erro
    使用vs2013编写cocos2dx的代码：_touchListener=EventListenerTouchOneByOne::create();_touchListener->setSwallowTouches(true);_touchListener->onTouchBegan=CC_CALLBACK_2(HelloWorld::onTouchBegan,this);_touchListen
  • QT之QML从入门到精通（第二章） only-lucky qt开发语言
    本章介绍QML部件（component）和加载（Loader）的基本使用引言importQtQuick2.12importQtQuick.Window2.12importQtQuick.Controls2.12Window{visible:truewidth:640height:480title:qsTr("HelloWorld")Component.onCompleted:{console.lo
  • Office·Word高级·VBA基础概念语法 SCscHero #VBAWindowsOFFICEVBA办公自动化办公软件OfficeWord
    阅文时长|5.21分钟字数统计|1823字符『Office·Word高级·VBA基础概念语法』编写人|SCscHero编写时间|Monday,June29,2020文章类型|系列完成度|待完善座右铭每一个伟大的事业，都有一个微不足道的开始。HelloWorld！常量与变量完成度：80%基础概念宏方法和自定义函数宏方法定义指令：Sub[宏方法名称]()[内容]EndSub自定义函数定义指令：Func
  • Swift量值与基本数据类型 KobeBrant
    1、变量与常量1.1定义变量varstr:Stringstr="HelloWorld"print(str)1.2Bool类型Bool类型十分严格,只有true和false两种2、元组//定义一个车类型的元组varcar:(name:String,price:Int)=("哈弗",80000)//获取车的名称varname=car.name//获取车的价格varprice=car.priceprin
  • SpringBoot学习（12）测试打包部署 星河漫漫l springboot学习开发语言运维开发java
    开发阶段单元测试在开发阶段的时候最重要的是单元测试了，SpringBoot对单元测试的支持已经很完善了。1、在pom包中添加spring-boot-starter-test包引用org.springframework.bootspring-boot-starter-testtest2、开发测试类以最简单的helloworld为例，在测试类的类头部需要添加：@RunWith(SpringRunner
  • 辗转相处求最大公约数 沐刃青蛟 C++漏洞
    无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
  • F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
    一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
  • Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
    本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
  • 初始线程 15700786134
          暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
  • Linux的tcpdump 被触发 tcpdump
    用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
  • 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
    最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
  • 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
    (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
  • gradle上传jar到nexus 矮蛋蛋 gradle
    原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
  • 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
    从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
  • JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
    这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
  • MO、MT解读 bijian1013 GSM
    MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
  • 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
    下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
  • 【Thrift二】Thrift Hello World bit1129 Hello world
    本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
  • 【Avro一】Avro入门 bit1129 入门
    本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
  • 安装nginx+ngx_lua支持WAF防护功能 ronin47
    需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
  • java-5.查找最小的K个元素-使用最大堆 bylijinnan java
    import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
  • TCP的TIME-WAIT bylijinnan socket
    原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
  • jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
       checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
  • Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
    都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
  • websocket dalan_123 websocket
    一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
  • 菜鸟分析网络执法官 dcj3sjt126com 网络
      最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
  • Android相对布局属性全集 dcj3sjt126com android
    RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
  • Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
    Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
  • Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
    Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
  • weblogic创建JMC i5land weblogicjms
    进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
  • 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
    上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
  • sql添加、删除表中的列 macroli sql
    添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
  • PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
    <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
  • hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
    一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
  • Spring Boot 1.2.4 发布 wiselyman spring boot
    Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他