📄 hello world - dojo for the attention-impaired the dojo toolkit.mht
字号:
href=3D"http://dojotoolkit.org/docs">Documentation</A>=20
<LI id=3Dnav-support><A class=3Dplink=20
href=3D"http://dojotoolkit.org/support">Support</A>=20
<LI id=3Dnav-community><A class=3Dplink=20
href=3D"http://dojotoolkit.org/community">Community</A>=20
<LI id=3Dnav-fullmenu><A onclick=3D"return false;"=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/hello-world-tutorial#fu=
llmenu">Full=20
Menu</A> </LI></UL></DIV><!-- region_banner.php -->
<DIV class=3Dbanner-docs id=3Dbanner-block>
<DIV id=3Dsection-heading>
<P>Documentation</P></DIV>
<DIV id=3Dsection-subheading>
<P>learn about the dojo toolkit</P></DIV></DIV><!-- /region_banner.php =
-->
<DIV id=3Dtop-breadcrumb-block>
<DIV class=3Dbreadcrumb><A href=3D"http://dojotoolkit.org/">Home</A> =
=C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A> =C2=BB Hello=20
World - Dojo for the Attention-Impaired</DIV></DIV>
<DIV id=3Dcontent-block>
<DIV class=3Dcols-narrow-wide>
<DIV class=3D"col-a content-region-container" =
id=3Dsidebar-left-container>
<DIV class=3Dcontent-block><!-- Block: menu -->
<DIV class=3D"block block-menu" id=3Dblock-menu-572>
<H2 class=3Dtitle>The Book of Dojo</H2>
<DIV class=3Dcontent>
<UL class=3Dmenu>
<LI class=3Dexpanded id=3Dmenu-item-296><A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-312><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/quick-=
installation">Quick=20
Installation</A>=20
<LI class=3Dleaf id=3Dmenu-item-652><A class=3Dactive=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/hello-world-tutorial">H=
ello=20
World</A>=20
<LI class=3Dleaf id=3Dmenu-item-651><A=20
=
href=3D"http://dojotoolkit.org/book/book-dojo/part-4-meta-dojo-making-you=
r-dojo-code-run-faster-and-better/debugging-facilities/deb">Debugging=20
Tutorial</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-297><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/introduction">Introduct=
ion</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-324><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo-0">Par=
t 1:=20
Life With Dojo</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-298><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0">Part =
2:=20
Dijit</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-299><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo-0">Part=20
3: JavaScript With Dojo and Dijit</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-300><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo-0">Par=
t 4:=20
Testing, Tuning and Debugging</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-301><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-5-dojox-extensions=
-dojo-0">Part=20
5: DojoX</A> </LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-54><A title=3D"The Dojo Book, =
0.4"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-4">The Dojo Book, =
0.4</A>=20
</LI></UL></DIV></DIV></DIV></DIV>
<DIV class=3D"col-b content-region-container">
<DIV id=3Dmain-container><!-- main_content region -->
<H2>Hello World - Dojo for the Attention-Impaired</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by lance on Sun, 08/26/2007 - =
04:43.</DIV>
<DIV class=3Dtaxonomy>
<UL class=3D"links inline">
<LI class=3D"first last taxonomy_term_46"><A class=3Dtaxonomy_term_46 =
title=3D""=20
href=3D"http://dojotoolkit.org/information/general" =
rel=3Dtag>General</A>=20
</LI></UL></DIV>
<DIV class=3Dcontent>
<P>The purpose of this tutorial is to provide a starting point for users =
who are=20
new to Dojo. Whilst every effort is made to introduce as much as =
possible about=20
Dojo, it is impossible to include more of the detailed information since =
to do=20
so would be counterproductive and confusing to new users. For more =
information=20
on the concepts introduced here, please see the links to other resources =
at the=20
end of this document (Finding More Resources).</P>
<H2>Requirements</H2>
<P>Obviously, you need Dojo first! You can get the latest stable build =
from <A=20
href=3D"http://dojotoolkit.org/downloads">http://dojotoolkit.org/download=
s</A>.=20
Next you need a web server. Whether it's hosted offsite or onsite, on =
Linux or=20
Windows or Mac ... matters naught. The Dojo JavaScript library is simply =
pulled=20
from your web server to the browser as needed. However, the AJAX =
examples in=20
this document require a server-side scripting language like PHP or =
ASP.</P>
<P>The Dojo and Dijit code, which runs on the client browser, is =
certified to=20
run on IE 6 and 7, Firefox 2, and Safari. </P>
<H2>Setting Up Dojo</H2>
<P>First, you should create a directory on the web server. We'll call =
ours=20
HelloWorldTutorial. Then create a directory called dojoroot underneath =
it.=20
Finally, use your favorite unzipping tool to unzip Dojo into=20
/HelloWorldTutorial/dojoroot. It'll look like this when you're =
done:</P><A=20
title=3D"View: debugging9.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging9_0.png"><IMG =
class=3Dinline=20
title=3Ddebugging9.png alt=3Ddebugging9.png=20
src=3D"http://www.dojotoolkit.org/files/debugging9_0.png"></A>=20
<H2>Getting Started</H2>
<P>Once we have setup the directory and file structure for the tutorial, =
we will=20
need to setup the JavaScript component of our HTML page. Have a look at =
the code=20
below:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/html.html"><SPAN=20
class=3Dkw2><html></SPAN></A></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/head.html"><SPAN=20
class=3Dkw2><head></SPAN></A></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/title.html"><SPAN=20
class=3Dkw2><title></SPAN></A></SPAN>Dojo: Hello World!<SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></title></SPAN></SPAN><BR class=3Dgeshibr> =
<SPAN=20
class=3Dsc2><SPAN class=3DcoMULTI><!-- SECTION 1 =
--></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/style.html"><SPAN=20
class=3Dkw2><style</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/css"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
@import =
"dojoroot/dijit/themes/tundra/tundra.css";<BR> =20
@import =
"dojoroot/dojo/resources/dojo.css"<BR> =20
<SPAN class=3Dsc2><SPAN =
class=3Dkw2></style></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN> <SPAN =
class=3Dkw3>src</SPAN>=3D<SPAN=20
class=3Dst0>"dojoroot/dojo/dojo.js"</SPAN> <BR> =
=20
djConfig=3D<SPAN class=3Dst0>"parseOnLoad: =
true"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR> <SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></head></SPAN></SPAN><BR class=3Dgeshibr> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/body.html"><SPAN=20
class=3Dkw2><body</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"tundra"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> <SPAN=20
class=3Dsc2><SPAN class=3Dkw2></body></SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></html></SPAN></SPAN></DIV><BR>
<P>As it can be seen above, the page is a just a standard HTML skeleton =
with=20
three things:</P>
<UL>
<LI>A couple of CSS style sheets. The one marked Tundra is the =
<I>theme</I> we=20
will use from Dijit for this example. There are other themes =
available.=20
<LI>A script element inserted into the head section. This script =
element is=20
responsible for loading the base Dojo script that provides access to =
all the=20
other Dojo functionality that we will use.=20
<LI>Lastly, we place the tundra CSS class in the body tag. </LI></UL>
<H2>Creating a Button Widget</H2>
<P>Ok, now for the exciting part! In this example we're going to create =
a Button=20
widget with the text 'Hello World!'. In the case of the Button widget, =
three=20
visual states (mouseOut, mouseOver, and mouseDown) are available which =
means=20
that we are able to enhance the user's experience somewhat.</P>
<P>The first step in creating the widget is telling Dojo to load the =
appropriate=20
modules. In the header, add another section (hereafter referred to as =
section 2)=20
below section 1 as follows:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><SPAN=20
class=3DcoMULTI><!-- SECTION 2 --></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
// Load Dojo's code relating to the Button =
widget<BR> =20
dojo.require("dijit.form.Button");<BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></script></SPAN></SPAN></DIV><BR>
<P>The dojo.require line instructs Dojo to load the Button widget. If =
you were=20
to omit this line, the markup code for the button would not be evaluated =
by Dojo=20
upon loading, resulting in a plain HTML button instead of what you =
expect.</P>
<P>After making the changes, insert the following code into the body =
section of=20
the HTML:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2><button</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"helloButton"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN>Hello=20
World!<SPAN class=3Dsc2><SPAN =
class=3Dkw2></button></SPAN></SPAN></DIV>
<P>The key attribute of this HTML element to notice is the dojoType =
attribute.=20
The dojoType attribute is responsible for instructing Dojo on how to =
process the=20
element when the page is loading. In this case we've used a button =
element for=20
the button though we could have used an input element - Dojo will work =
with=20
either as long as the dojoType attribute is present. It is worth noting =
that if=20
we did use an input element, we would have to specify the button's text =
by using=20
adding a caption attribute that contained the desired text.</P>
<H2>Connecting an Event to the Widget</H2>
<P>A button is all well and good, but what about getting it to do =
something when=20
it's clicked? We could just specify an onClick event handler for the =
button, but=20
there's another, more efficient way - the Dojo event system!</P>
<P>The easiest way to attach an event to a button is through a script =
tag. But=20
not just any script tag ... this one has a type of dojo/method, like =
this:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2><button</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"helloButton"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
Hello World!<BR> <SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"onClick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =20
alert('You pressed the button');<BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></script></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></button></SPAN></SPAN><BR> =
=20
}</DIV><BR>
<P>Pretty simple, eh? Putting the script inside the tag body makes a =
good deal=20
of sense. And you can harness the full power of DOM Level 2 events =
inside the=20
script. That means you can detect SHIFT and CTRL keys, get all sorts of =
event=20
properties, and bubble events up through the HTML tree. If you've ever =
used=20
Level 2 events, you know how IE and Firefox use different syntax. In =
Dojo, the=20
same functions work in any supported browser. That's powerful stuff!</P>
<H2>Reading Data from the Server</H2>
<P>Having an alert pop up when we press the button is great, but what if =
we want=20
to retrieve some data from the server? Again, Dojo comes to the rescue =
with an=20
easy method of accomplishing this - dojo.xhrGet. For easy reference, the =
code=20
for this section is available as HelloWorld-Section5.html and =
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -