07.06.2010

dojo and Notes: Article 1 - Motivation and "Hello World" sample

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/dojo-1

Category: dojo, Web-Entwicklung, Entwicklung, Lotus Domino

As announced, the first article from the dojo-article series.

Before we deal with the actual technology, first the question "why"? There are a number of alternatives. So why should we use dojo as "our" JavaScript Framework?

OpenSource
That dojo is open source is certainly not a unique feature. Many of the JavaScript frameworks are also open source. However, dojo is used by AOL, IBM, Cisco, Sun and others, and supported by them.

Wide browser support
Anyone who has ever tried to get a solution from one browser to another browser to work, knows about the small but so much more insidious differences. dojo will deal with it so that we do not have to. And dojo supports my favorite browser Opera.

Various UI elements
dojo includes various UI elements. From well-designed tool tips, calendars to photo galleries dojo offers many things, which make up modern Web applications. Each element can be customized in look&feel. Gone are the times that you have found a nice calendar picker, but unfortunately it did not fit in appearance to the rest of the website.

Internationalization
Working with some JavaScript frameworks make me wonder, if the developers are aware that there are other non-US countries. dojo was built with that in mind. A dijit.form.NumberTextBox automatically detects whether to use as a comma or a decimal point as decimal separator.

Use in X-Pages
To be honest that was the main argument for me to take a closer look to dojo. The IBM uses dojo for X-Pages. So if you invested the effort to learn a JavaScript framework, why not in one, that you can use either in traditional Notes Web applications and in X-Pages applications.

Now to our promised "Hello World" example.

This is the HTML code:

1. <html>
2. <head>
3. <title>My First Dojo App</title>
4. <link rel="StyleSheet" type="text/css" href="/domjs/dojo-1.3.2/dojo/resources/dojo.css">
5. <link rel="StyleSheet" type="text/css" href="/domjs/dojo-1.3.2/dijit/themes/tundra/tundra.css">
6. <script type="text/javascript">
7. var djConfig = {
8. baseScriptUri : "/domjs/dojo-1.3.2/",
9. parseOnLoad : true,
10. extraLocale: en-us', 'zh-cn'br>11. };
12. </script>
13. <script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js"></script>
14. <script language="JavaScript" type="text/javascript">
15. dojo.require("dojo.parser");
16. dojo.require("dijit.form.Button");
17. dojo.require("dijit._Calendar");
18. </script>
19. </head>
20. <body class="tundra">
21. <div style="position:relative;top:10px;left:10px;width:80%;">
22. <button dojoType="dijit.form.Button" id="myButton">
23. Press me, NOW!
24. <script type="dojo/method" event="onClick">
25. alert('You pressed the button');
26. </script>
27. </button>
28. <br><br>
29. <table border="0"><tr>
30. <td valign="top">
31. <input id="calGerman" dojoType="dijit._Calendar" />
32. </td>
33. <td width="25"> </td>
34. <td valign="top">
35. <input id="calEnglish" dojoType="dijit._Calendar" lang="en-us" />
36. </td>
37. <td width="25"> </td>
38. <td valign="top">
39. <input id="calChinese" dojoType="dijit._Calendar" lang="zh-cn" />
40. </td>
41. </table>
42. </div>
43. </body>
44. </html>

Lets step through the code

4. <link rel="StyleSheet" type="text/css" href="/domjs/dojo-1.3.2/dojo/resources/dojo.css">
5. <link rel="StyleSheet" type="text/css" href="/domjs/dojo-1.3.2/dijit/themes/tundra/tundra.css">

In line 4 a simple CSS with some margin and other format definitions is loaded. In line 5 the CSS for the dojo theme "tundra" is loaded. Together with the class="tundra" entry in the body tag in line 20 this is every thing there is to do to show every visual element in the "tundra" look&feel.

20. <body class="tundra">

6. <script type="text/javascript">
7. var djConfig = {
8. baseScriptUri : "/domjs/dojo-1.3.2/",
9. parseOnLoad : true,
10. extraLocale: en-us', 'zh-cn'br>11. };
12. </script>

The configuration object djConfig must be defined before the dojo JavaScript library is loaded. The attribute baseScriptUri defines the path of dojo files. By setting the attribute parseOnLoad on true dojo automatically parses the HTML code for dojo attributes in HTML tags. More about that later. The attribute extraLocale ensures that in addition to the automatically identified language also the language support for American English and Chinese are loaded.

13. <script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js"></script>

In line 13 the base part of dojo is loaded. I will discuss the parts of dojo in the next article.

14. <script language="JavaScript" type="text/javascript">
15. dojo.require("dojo.parser");
16. dojo.require("dijit.form.Button");
17. dojo.require("dijit._Calendar");
18. </script>

By calling dojo.require("...") additional dojo packages are loaded. The dojo directory on the server has a size of approximate 13 MB. Loading everything just in case something might be needed what not be a good idea. The core of dojo is packed some 30KB. After that only the needed packages are loaded.

22. <button dojoType="dijit.form.Button" id="myButton">
23. Press me, NOW!
24. <script type="dojo/method" event="onClick">
25. alert('You pressed the button');
26. </script>
27. </button>

The lines 22 to 27 shows the effect of parsing the HTML code for dojo attributes. In this case the regular button is replaced with a more stylish version in the "tundra" look&feel. Additionaly an event handler for the "onClick" event is registered.

31. <input id="calGerman" dojoType="dijit._Calendar" />
35. <input id="calEnglish" dojoType="dijit._Calendar" lang="en-us" />
39. <input id="calChinese" dojoType="dijit._Calendar" lang="zh-cn" />

The magic of dojo could be seen even better in the lines 31, 35 and 39. Because of the dojo attributes dojoType="dijit._Calendar" the exisiting input elements are hidden and replaced with a calendar element. With the "lang" attribute the language configuration for the calendar element is defined. Frankly this sample makes more sense if you watch it in Europe. If you have installed support for Chinese characters, you will see them in the iframe above.

In the second dojo article - "Introduction to dojo" I talk about about the diffrent parts of dojo.

Comments

where is the Notes in 'dojo und notes'?

Posted by null At 21:27:43 On 07.06.2010 | - Website -

The Notes is coming in the later articles of the series. Starting with article 3 I will show how to enrich data coming from a Notes database with quite a bunch of interesting techniques. Emoticon