📄 the room widget the dojo toolkit.mht
字号:
Operator Page</A> </LI></UL></LI></UL>
<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>The Room Widget</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by criecke on Sat, 11/24/2007 - =
21:58.</DIV>
<DIV class=3Dcontent>
<P>In previous examples, we have built a few widgets with the =
dojo.Declaration=20
tag. This is a fast way to add functionality, but the problem is sharing =
it with=20
other pages. Although Laura knows the Operator and Client pages will be=20
different, she senses common elements in the way they chat. So she will =
define a=20
widget class through JavaScript instead. That way, both pages can use =
it.</P>
<H2>The Widget Skeleton</H2>
<P>A widget is a way to tie Dojo API calls into one displayable element. =
The way=20
Laura designs it, the display is pretty much the same on both sides. The =
only=20
difference is the container. Here's a cocktail napkin view of the client =
side:</P><A title=3D"View: chat1.png"=20
href=3D"http://www.dojotoolkit.org/files/chat1.png"><IMG class=3Dinline=20
title=3Dchat1.png alt=3Dchat1.png=20
src=3D"http://www.dojotoolkit.org/files/chat1.png"></A>=20
<P>And the operator side:</P>
<P style=3D"BACKGROUND-COLOR: yellow">To be added once we get the public =
cometd=20
server up.</P>
<P>The message display area, the input box for messages and the send =
button are=20
exactly the same. So we can package those up as a widget, which we will =
call=20
dijit.demos.chat.room. Using a little object oriented analysis, Laura =
stubs out=20
the object code:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">dojo.<SPAN=20
class=3Dme1>provide</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dijit.demos.chat.room"</SPAN><SPAN class=3Dbr0>)</SPAN>; =
<BR=20
class=3Dgeshibr>dojo.<SPAN class=3Dme1>require</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dojox.cometd"</SPAN><SPAN =
class=3Dbr0>)</SPAN>;<BR>dojo.<SPAN=20
class=3Dme1>require</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dijit._Widget"</SPAN><SPAN =
class=3Dbr0>)</SPAN>;<BR>dojo.<SPAN=20
class=3Dme1>require</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dijit._Templated"</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR=20
class=3Dgeshibr>dojo.<SPAN class=3Dme1>declare</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dijit.demos.chat.Room"</SPAN>,<BR> <SPAN =
class=3Dco1>//=20
All widgets inherit from _Widget, and all templated widgets mix in=20
_Templated</SPAN><BR> <SPAN=20
class=3Dbr0>[</SPAN>dijit._Widget,dijit._Templated<SPAN=20
class=3Dbr0>]</SPAN>,<BR> <SPAN =
class=3Dbr0>{</SPAN><BR> =20
<BR> <SPAN class=3Dco1>// Username of=20
client</SPAN><BR> _username: <SPAN =
class=3Dkw2>null</SPAN>,<BR> =20
<BR> <SPAN class=3Dco1>// Default room =
id. =20
Will become the client's username for our tech support =
line</SPAN><BR> =20
roomId: <SPAN class=3Dst0>"public"</SPAN>,<BR> =
<BR> =20
<SPAN class=3Dco1>// For future expansion into =
public chat=20
rooms</SPAN><BR> isPrivate: <SPAN =
class=3Dkw2>false</SPAN>,<BR> =20
<BR> <SPAN class=3Dco1>//=20
Constant</SPAN><BR> <SPAN class=3Dkw3>prompt</SPAN>: <SPAN=20
class=3Dst0>"Name:"</SPAN>,<BR> <BR> join: =
<SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dkw3>name</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
<SPAN class=3Dco1>// Join a=20
room</SPAN><BR> <SPAN class=3Dbr0>}</SPAN>,<BR> =
=20
<BR> _join: <SPAN class=3Dkw2>function</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3DcoMULTI>/* Event */</SPAN>e<SPAN=20
class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR> =
=20
<SPAN class=3Dco1>// Respond to someone joining a room (only =
operator does=20
this)</SPAN><BR> <SPAN class=3Dbr0>}</SPAN>,<BR> =
=20
<BR> leave: <SPAN class=3Dkw2>function</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN> =
<BR> =20
<SPAN class=3Dco1>// leave a=20
room</SPAN><BR> <SPAN class=3Dbr0>}</SPAN>,<BR> =
=20
<BR> chat: <SPAN class=3Dkw2>function</SPAN><SPAN=20
class=3Dbr0>(</SPAN>text<SPAN class=3Dbr0>)</SPAN><SPAN =
class=3Dbr0>{</SPAN><BR> =20
<SPAN class=3Dco1>// Send a=20
message</SPAN><BR> <SPAN class=3Dbr0>}</SPAN>,<BR> =
=20
<BR> _chat: <SPAN class=3Dkw2>function</SPAN><SPAN=20
class=3Dbr0>(</SPAN>message<SPAN class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN><BR> <SPAN=20
class=3Dco1>// Receive a message</SPAN><BR> <SPAN=20
class=3Dbr0>}</SPAN>,<BR> <BR> startup: <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN> <BR> <SPAN =
class=3Dco1>// Required function for a widget. Called on=20
startup</SPAN><BR> <SPAN class=3Dbr0>}</SPAN>,<BR =
class=3Dgeshibr><SPAN=20
class=3Dbr0>}</SPAN><SPAN class=3Dbr0>)</SPAN>;</DIV>
<H2>The Widget Template</H2>
<P>As we did in Example 1 for i18n, we build a template for the widget.=20
Essentially this template will replace the tag with=20
dojoType=3D"dijit.demos.chat.room" </P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"${id}"</SPAN> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"chatroom"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A =
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoAttachPoint=3D<SPAN =
class=3Dst0>"chatNode"</SPAN>=20
<SPAN class=3Dkw3>class</SPAN>=3D<SPAN class=3Dst0>"chat"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoAttachPoint=3D<SPAN =
class=3Dst0>"input"</SPAN>=20
<SPAN class=3Dkw3>class</SPAN>=3D<SPAN class=3Dst0>"input"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoAttachPoint=3D<SPAN=20
class=3Dst0>"joining"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/span.html"><SPAN=20
class=3Dkw2><span></SPAN></A></SPAN>${prompt}<SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></span></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"username"</SPAN> dojoAttachPoint=3D<SPAN =
class=3Dst0>"username"</SPAN>=20
<SPAN class=3Dkw3>type</SPAN>=3D<SPAN class=3Dst0>"text"</SPAN> =
dojoAttachEvent=3D<SPAN=20
class=3Dst0>"onkeyup: _join"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN> =
<BR> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> dojoAttachPoint=3D<SPAN =
class=3Dst0>"joinB"</SPAN>=20
<SPAN class=3Dkw3>class</SPAN>=3D<SPAN class=3Dst0>"button"</SPAN> <SPAN =
class=3Dkw3>type</SPAN>=3D<SPAN class=3Dst0>"submit"</SPAN> <SPAN=20
class=3Dkw3>name</SPAN>=3D<SPAN class=3Dst0>"join"</SPAN> <BR> =
=20
<SPAN=20
class=3Dkw3>value</SPAN>=3D<SPAN class=3Dst0>"Contact"</SPAN> =
dojoAttachEvent=3D<SPAN=20
class=3Dst0>"onclick: _join"</SPAN>/<SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoAttachPoint=3D<SPAN =
class=3Dst0>"joined"</SPAN>=20
<SPAN class=3Dkw3>class</SPAN>=3D<SPAN class=3Dst0>"hidden"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text"</SPAN> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"phrase"</SPAN> dojoAttachPoint=3D<SPAN =
class=3Dst0>"phrase"</SPAN>=20
dojoAttachEvent=3D<SPAN class=3Dst0>"onkeyup: _cleanInput"</SPAN> /<SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"submit"</SPAN> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"button"</SPAN> <SPAN class=3Dkw3>value</SPAN>=3D<SPAN=20
class=3Dst0>"Send"</SPAN> dojoAttachPoint=3D<SPAN =
class=3Dst0>"sendB"</SPAN>=20
<BR> =20
dojoAttachEvent=3D<SPAN class=3Dst0>"onclick: =
_sendPhrase"</SPAN>/<SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> <SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN></DIV><BR>
<P>The placeholders ${id} and ${prompt} look familiar. These are =
replaced with=20
the properties id and prompt from the widget instance. A few of the =
properties=20
look unfamiliar, but they all start with the prefix "dojo".</P>
<UL>
<LI><B>dojoAttachPoint</B> creates a property in the widget containing =
the DOM=20
node. For example, the DIV tag with dojoattachpoint=3D"joining" =
creates a=20
joining property, which you can pick up with "this.joining" in your =
widget=20
code. You can do with anything you can do with a DOM node, for =
instance set=20
its styles or CSS class.=20
<LI><B>dojoAttachEvent</B> connects an event and DOM node with a =
function. So=20
dojoAttachEvent=3D"onkeyup: _cleanInput" means "when the onkeyup event =
happens=20
here, call _cleanInput." </LI></UL>
<P>Only one of the "joining" node:</P><A title=3D"View: chat2.png"=20
href=3D"http://www.dojotoolkit.org/files/chat2.png"><IMG class=3Dinline=20
title=3Dchat2.png alt=3Dchat2.png=20
src=3D"http://www.dojotoolkit.org/files/chat2.png"></A>=20
<P>and the "joined" node:</P><A title=3D"View: chat3.png"=20
href=3D"http://www.dojotoolkit.org/files/chat3.png"><IMG class=3Dinline=20
title=3Dchat3.png alt=3Dchat3.png=20
src=3D"http://www.dojotoolkit.org/files/chat3.png"></A>=20
<P>is visible at any one time. That gives the illusion that the "joined" =
and=20
"joining" nodes toggle back and forth, occupying the same screen real =
estate.=20
This is a fairly common trick in widget templates.</P>
<H2>Starting the Widget</H2>
<P>Every widget has extension points that get called during widget =
creation. The=20
widget class designer can hook into these by providing methods, as we do =
here=20
with startup():</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">startup: <SPAN =
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN> <BR> <SPAN =
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -