Saturday 12 April 2014

Getting Started with dojo : Part 1

DOJO

Dojo is a lightweight javascript library which have the following features:
  • Lightweight 
  • Provide object oriented features
  • Help to build AJAX rich application
  • Large scale web application can be built
  • Provide widget library 
  • Saves development time
  • Prevent cross browser inconsistency
  • And many more
Follow the instruction to get started with dojo :
  1. Download stable version of dojo from dojotoolkit.org
  2. In your www directory of wamp server make a folder named learndojo, in the folder learndojo make another directory dojoroot.
  3. Unzip the downloaded dojo library in this dojoroot directory, directory structure should be like www/learndojo/dojoroot/dojo/dojo.js . The file dojo.js is present in the dojo folder of your unzipped directories.
  4. In the learndojo directory make a file and named it index.html which have the following code.
  1. <html>
  2. <head>
  3. <title>Learning Dojo</title>
  4. <!--Below line includes the dojo.js files from the directory dojoroot/dojo/ -->
  5. <script src="dojoroot/dojo/dojo.js">
  6. </script>
  7. </head>
  8. <body>
  9. <h1>Learning Dojo</h1>
  10. <div id="message">Following are some features of dojo</div>
  11. <ul id="list">
  12. <li>Rich Internet application, saving development time</li>
  13. <li class="highlight">Dojo have widget library and object oriented features which helps to build a AJAX powered web application</li>
  14. <li>Extremely light-weight</li>
  15. </ul>
  16. </script>
  17. <script>
  18. /*Here dojo.onLoad is a function which will create a div on this page gets loaded and will add the text Hello learner.... to the body of this page. */
  19. dojo.addOnLoad(function() {
  20. dojo.create(
  21. "div",
  22. {
  23. "innerHTML": "Hello, Learner. I hope you are enjoying dojo!"
  24. },
  25. dojo.body()
  26. );
  27. });
  28. </script>
  29. </body>
  30. </html>

In the above code, the we have included dojo.js in the <head> section and we are using dojo to create a div dynamically when the web page gets loaded.
The dojo.onLoad function creates a div and add the text to the body "Hello learner, I hope you are enjoying  dojo".
The same working code you can fork from git also.

No comments:

Post a Comment