| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Demo Mail Application</title> |
|---|
| 6 | |
|---|
| 7 | <style type="text/css"> |
|---|
| 8 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 9 | @import "../../../dijit/themes/soria/soria.css"; |
|---|
| 10 | @import "mail/mail.css"; |
|---|
| 11 | </style> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript" src="../../../dojo/dojo.js" |
|---|
| 14 | djConfig="isDebug: true, parseOnLoad: true, defaultTestTheme: 'soria'"></script> |
|---|
| 15 | <script type="text/javascript" src="../../../dijit/tests/tests/_testCommon.js"></script> |
|---|
| 16 | <script type="text/javascript"> |
|---|
| 17 | // Use profile builds, if available. Since we use pretty much all of |
|---|
| 18 | // the widgets, just use dijit-all. A custom profile would provide some |
|---|
| 19 | // additional savings. |
|---|
| 20 | dojo.require("dijit.dijit"); |
|---|
| 21 | dojo.require("dijit.dijit-all"); |
|---|
| 22 | |
|---|
| 23 | dojo.require("dojo.parser"); |
|---|
| 24 | dojo.require("dojo.data.ItemFileWriteStore"); |
|---|
| 25 | |
|---|
| 26 | dojo.require("dijit.dijit"); |
|---|
| 27 | dojo.require("dijit.Declaration"); |
|---|
| 28 | dojo.require("dijit.Menu"); |
|---|
| 29 | dojo.require("dijit.Tree"); |
|---|
| 30 | dojo.require("dijit.Tooltip"); |
|---|
| 31 | dojo.require("dijit.Dialog"); |
|---|
| 32 | dojo.require("dijit.Toolbar"); |
|---|
| 33 | dojo.require("dijit.Calendar"); |
|---|
| 34 | dojo.require("dijit.ColorPalette"); |
|---|
| 35 | dojo.require("dijit.Editor"); |
|---|
| 36 | dojo.require("dijit._editor.plugins.LinkDialog"); |
|---|
| 37 | dojo.require("dijit.ProgressBar"); |
|---|
| 38 | |
|---|
| 39 | dojo.require("dijit.form.ComboButton"); |
|---|
| 40 | dojo.require("dijit.form.ComboBox"); |
|---|
| 41 | dojo.require("dijit.form.CheckBox"); |
|---|
| 42 | dojo.require("dijit.form.FilteringSelect"); |
|---|
| 43 | dojo.require("dijit.form.Textarea"); |
|---|
| 44 | |
|---|
| 45 | dojo.require("dijit.layout.LayoutContainer"); |
|---|
| 46 | dojo.require("dijit.layout.SplitContainer"); |
|---|
| 47 | dojo.require("dijit.layout.AccordionContainer"); |
|---|
| 48 | dojo.require("dijit.layout.TabContainer"); |
|---|
| 49 | dojo.require("dijit.layout.ContentPane"); |
|---|
| 50 | dojo.require("dojox.xml.Script"); |
|---|
| 51 | |
|---|
| 52 | |
|---|
| 53 | |
|---|
| 54 | var paneId=1; |
|---|
| 55 | |
|---|
| 56 | // for "new message" tab closing |
|---|
| 57 | function testClose(pane,tab){ |
|---|
| 58 | return confirm("Are you sure you want to leave your changes?"); |
|---|
| 59 | } |
|---|
| 60 | |
|---|
| 61 | // fake mail download code: |
|---|
| 62 | var numMails; |
|---|
| 63 | var updateFetchStatus = function(x){ |
|---|
| 64 | if(x == 0){ |
|---|
| 65 | dijit.byId('fakeFetch').update({ indeterminate: false }); |
|---|
| 66 | return; |
|---|
| 67 | } |
|---|
| 68 | dijit.byId('fakeFetch').update({ progress: x }); |
|---|
| 69 | if (x == numMails){ |
|---|
| 70 | dojo.fadeOut({ node: 'fetchMail', duration:800, |
|---|
| 71 | // set progress back to indeterminate. we're cheating, because this |
|---|
| 72 | // doesn't actually have any data to "progress" |
|---|
| 73 | onEnd: function(){ |
|---|
| 74 | dijit.byId('fakeFetch').update({ indeterminate: true }); |
|---|
| 75 | dojo.byId('fetchMail').style.visibility='hidden'; // remove progress bar from tab order |
|---|
| 76 | } |
|---|
| 77 | }).play(); |
|---|
| 78 | } |
|---|
| 79 | } |
|---|
| 80 | var fakeReport = function(percent){ |
|---|
| 81 | // FIXME: can't set a label on an indeterminate progress bar |
|---|
| 82 | // like if(this.indeterminate) { return " connecting."; } |
|---|
| 83 | return "Fetching: "+(percent*this.maximum) + " of " + this.maximum + " messages."; |
|---|
| 84 | } |
|---|
| 85 | var fakeDownload = function(){ |
|---|
| 86 | dojo.byId('fetchMail').style.visibility='visible'; |
|---|
| 87 | numMails = Math.floor(Math.random()*10)+1; |
|---|
| 88 | dijit.byId('fakeFetch').update({ maximum: numMails, progress:0 }); |
|---|
| 89 | dojo.fadeIn({ node: 'fetchMail', duration:300 }).play(); |
|---|
| 90 | for (var i=0; i<=numMails; i++){ |
|---|
| 91 | setTimeout("updateFetchStatus("+i+")",((i+1)*(Math.floor(Math.random()*100)+400))); |
|---|
| 92 | } |
|---|
| 93 | } |
|---|
| 94 | // fake sending dialog progress bar |
|---|
| 95 | var stopSendBar = function(){ |
|---|
| 96 | dijit.byId('fakeSend').update({indeterminate: false}); |
|---|
| 97 | dijit.byId('sendDialog').hide(); |
|---|
| 98 | tabs.selectedChildWidget.onClose = function(){return true;}; // don want confirm message |
|---|
| 99 | tabs.closeChild(tabs.selectedChildWidget); |
|---|
| 100 | } |
|---|
| 101 | |
|---|
| 102 | var showSendBar = function(){ |
|---|
| 103 | dijit.byId('fakeSend').update({ indeterminate: true }); |
|---|
| 104 | dijit.byId('sendDialog').show(); |
|---|
| 105 | setTimeout("stopSendBar()", 3000); |
|---|
| 106 | } |
|---|
| 107 | |
|---|
| 108 | </script> |
|---|
| 109 | </head> |
|---|
| 110 | <body class="soria"> |
|---|
| 111 | <script type="text/xml" dojoType="dojox.xml.Script"> |
|---|
| 112 | <ui xmlns:dojo="dojo" xmlns="html"> |
|---|
| 113 | <dojo:data.ItemFileWriteStore jsId="mailStore" url="mail/mail.json"/> |
|---|
| 114 | </ui> |
|---|
| 115 | </script> |
|---|
| 116 | |
|---|
| 117 | <!-- Inline declaration of a table widget (thanks Alex!) --> |
|---|
| 118 | <script type="text/xml" dojoType="dojox.xml.Script"> |
|---|
| 119 | <ui xmlns:dijit="dijit" xmlns:html="html" xmlns:dojo="dojo" xmlns="html"> |
|---|
| 120 | |
|---|
| 121 | <table dojoType="dijit.Declaration" |
|---|
| 122 | widgetClass="demo.Table" class="demoTable" |
|---|
| 123 | defaults="{ store: null, query: { query: { type: 'message' } }, columns: [ { name: 'From', attribute: 'sender' }, { name: 'Subject', attribute: 'label' }, { name: 'Sent on', attribute: 'sent', |
|---|
| 124 | format: function(v){ return dojo.date.locale.format(dojo.date.stamp.fromISOString(v), {selector: 'date'}); } |
|---|
| 125 | } ] }"> |
|---|
| 126 | <thead dojoAttachPoint="head"> |
|---|
| 127 | <tr dojoAttachPoint="headRow"></tr> |
|---|
| 128 | </thead> |
|---|
| 129 | <tbody dojoAttachPoint="body"> |
|---|
| 130 | <tr dojoAttachPoint="row"></tr> |
|---|
| 131 | </tbody> |
|---|
| 132 | |
|---|
| 133 | <html:script type="dojo/method"> |
|---|
| 134 | <![CDATA[ |
|---|
| 135 | dojo.forEach(this.columns, function(item, idx){ |
|---|
| 136 | var icn = item.className||""; |
|---|
| 137 | // add a header for each column |
|---|
| 138 | var tth = document.createElement("th"); |
|---|
| 139 | tth.innerHTML = "<span class='arrowNode'></span>"+ item.name; |
|---|
| 140 | tth.className = icn; |
|---|
| 141 | dojo.connect(tth, "onclick", dojo.hitch(this, "onSort", idx)); |
|---|
| 142 | this.headRow.appendChild(tth); |
|---|
| 143 | |
|---|
| 144 | // and fill in the column cell in the template row |
|---|
| 145 | this.row.appendChild(document.createElement("td")); |
|---|
| 146 | this.row.lastChild.className = icn; |
|---|
| 147 | }, this); |
|---|
| 148 | this.runQuery(); |
|---|
| 149 | ]]> |
|---|
| 150 | </html:script> |
|---|
| 151 | <html:script type="dojo/method" event="onSort" args="index"> |
|---|
| 152 | <![CDATA[ |
|---|
| 153 | var ca = this.columns[index].attribute; |
|---|
| 154 | var qs = this.query.sort; |
|---|
| 155 | // clobber an existing sort arrow |
|---|
| 156 | dojo.query("> th", this.headRow).removeClass("arrowUp").removeClass("arrowDown"); |
|---|
| 157 | if(qs && qs[0].attribute == ca){ |
|---|
| 158 | qs[0].descending = !qs[0].descending; |
|---|
| 159 | }else{ |
|---|
| 160 | this.query.sort = [{ |
|---|
| 161 | attribute: ca, |
|---|
| 162 | descending: false |
|---|
| 163 | }]; |
|---|
| 164 | } |
|---|
| 165 | var th = dojo.query("> th", this.headRow)[index]; |
|---|
| 166 | dojo.addClass(th, (this.query.sort[0].descending ? "arrowUp" : "arrowDown")); |
|---|
| 167 | this.runQuery(); |
|---|
| 168 | ]]> |
|---|
| 169 | </html:script> |
|---|
| 170 | <html:script type="dojo/method" event="runQuery"> |
|---|
| 171 | <![CDATA[ |
|---|
| 172 | this.query.onBegin = dojo.hitch(this, function(){ dojo.query("tr", this.body).orphan(); }); |
|---|
| 173 | this.query.onItem = dojo.hitch(this, "onItem"); |
|---|
| 174 | this.query.onComplete = dojo.hitch(this, function(){ |
|---|
| 175 | dojo.query("tr:nth-child(odd)", this.body).addClass("oddRow"); |
|---|
| 176 | dojo.query("tr:nth-child(even)", this.body).removeClass("oddRow"); |
|---|
| 177 | }); |
|---|
| 178 | this.store.fetch(this.query); |
|---|
| 179 | ]]> |
|---|
| 180 | </html:script> |
|---|
| 181 | <html:script type="dojo/method" event="onItem" args="item"> |
|---|
| 182 | <![CDATA[ |
|---|
| 183 | var tr = this.row.cloneNode(true); |
|---|
| 184 | dojo.query("td", tr).forEach(function(n, i, a){ |
|---|
| 185 | var tc = this.columns[i]; |
|---|
| 186 | var tv = this.store.getValue(item, tc.attribute)||""; |
|---|
| 187 | if(tc.format){ tv = tc.format(tv, item, this.store); } |
|---|
| 188 | n.innerHTML = tv; |
|---|
| 189 | }, this); |
|---|
| 190 | this.body.appendChild(tr); |
|---|
| 191 | dojo.connect(tr, "onclick", this, function(){ this.onClick(item); }); |
|---|
| 192 | ]]> |
|---|
| 193 | </html:script> |
|---|
| 194 | <html:script type="dojo/method" event="onClick" args="item"> |
|---|
| 195 | <![CDATA[ |
|---|
| 196 | // user should override |
|---|
| 197 | console.log("click on item " + item); |
|---|
| 198 | ]]> |
|---|
| 199 | </html:script> |
|---|
| 200 | </table> |
|---|
| 201 | </ui> |
|---|
| 202 | </script> |
|---|
| 203 | |
|---|
| 204 | <script type="text/xml" dojoType="dojox.xml.Script"> |
|---|
| 205 | <ui xmlns:dijit="dijit" xmlns:html="html" xmlns:dojo="dojo" xmlns="html"> |
|---|
| 206 | <!-- Inline declaration for programmatically created "New Message" tabs --> |
|---|
| 207 | <dijit:Declaration widgetClass="mail.NewMessage"> |
|---|
| 208 | <dijit:layout.LayoutContainer dojoAttachPoint="container" title="Composing..." closeable="true"> |
|---|
| 209 | <dijit:layout.LayoutContainer layoutAlign="top" style="overflow: visible; z-index: 10; color:#666; "> |
|---|
| 210 | <table width="100%"> |
|---|
| 211 | <tbody> |
|---|
| 212 | <tr style="padding-top:5px;"> |
|---|
| 213 | <td style="padding-left:20px; padding-right: 8px; text-align:right;"><label for="${id}_to">To:</label></td> |
|---|
| 214 | <td width="100%"> |
|---|
| 215 | <dijit:form.ComboBox id="${id}_to" value=" " hasDownArrow="false"> |
|---|
| 216 | <option></option> |
|---|
| 217 | <option>adam@yahoo.com</option> |
|---|
| 218 | <option>barry@yahoo.com</option> |
|---|
| 219 | <option>bob@yahoo.com</option> |
|---|
| 220 | <option>cal@yahoo.com</option> |
|---|
| 221 | <option>chris@yahoo.com</option> |
|---|
| 222 | <option>courtney@yahoo.com</option> |
|---|
| 223 | </dijit:form.ComboBox> |
|---|
| 224 | </td> |
|---|
| 225 | </tr> |
|---|
| 226 | <tr> |
|---|
| 227 | <td style="padding-left: 20px; padding-right:8px; text-align:right;"><label for="${id}_subject">Subject:</label></td> |
|---|
| 228 | <td width="100%"> |
|---|
| 229 | <dijit:form.ComboBox id="${id}_subject" value=" " hasDownArrow="false"> |
|---|
| 230 | <option></option> |
|---|
| 231 | <option>progress meeting</option> |
|---|
| 232 | <option>reports</option> |
|---|
| 233 | <option>lunch</option> |
|---|
| 234 | <option>vacation</option> |
|---|
| 235 | <option>status meeting</option> |
|---|
| 236 | </dijit:form.ComboBox> |
|---|
| 237 | </td> |
|---|
| 238 | </tr> |
|---|
| 239 | </tbody> |
|---|
| 240 | </table> |
|---|
| 241 | <hr noshade="true" size="1"/> |
|---|
| 242 | </dijit:layout.LayoutContainer> |
|---|
| 243 | |
|---|
| 244 | <!-- new messase part --> |
|---|
| 245 | <dijit:layout.LayoutContainer dojoType="dijit.layout.LayoutContainer" layoutAlign="client"> |
|---|
| 246 | <dijit:layout.ContentPane href="mail/newMail.xml"/> |
|---|
| 247 | </dijit:layout.LayoutContainer> |
|---|
| 248 | |
|---|
| 249 | <dijit:layout.LayoutContainer dojoType="dijit.layout.LayoutContainer" layoutAlign="bottom" align="center"> |
|---|
| 250 | <dijit:form.Button iconClass="mailIconOk" label="Send"> |
|---|
| 251 | <html:script type="dojo/method" event="onClick"> |
|---|
| 252 | var toField = dojo.byId("${id}_to"); |
|---|
| 253 | if(toField.value == ""){ |
|---|
| 254 | alert("Please enter a recipient address"); |
|---|
| 255 | }else{ |
|---|
| 256 | showSendBar(); |
|---|
| 257 | } |
|---|
| 258 | </html:script> |
|---|
| 259 | </dijit:form.Button> |
|---|
| 260 | <dijit:form.Button iconClass="mailIconCancel" label="Cancel"> |
|---|
| 261 | <html:script type="dojo/method" event="onClick"> |
|---|
| 262 | tabs.closeChild(tabs.selectedChildWidget); |
|---|
| 263 | </html:script> |
|---|
| 264 | </dijit:form.Button> |
|---|
| 265 | </dijit:layout.LayoutContainer> |
|---|
| 266 | |
|---|
| 267 | </dijit:layout.LayoutContainer> |
|---|
| 268 | </dijit:Declaration> |
|---|
| 269 | |
|---|
| 270 | <dijit:layout.LayoutContainer id="main"> |
|---|
| 271 | <!-- toolbar with new mail button, etc. --> |
|---|
| 272 | <dijit:Toolbar dojoType="dijit.Toolbar" layoutAlign="top" style="height:25px;"> |
|---|
| 273 | <dijit:form.ComboButton id="getMail" |
|---|
| 274 | iconClass="mailIconGetMail" optionsTitle="Mail Source Options"> |
|---|
| 275 | <html:script type="dojo/method" event="onClick"> |
|---|
| 276 | fakeDownload(); |
|---|
| 277 | </html:script> |
|---|
| 278 | <span>Get Mail</span> |
|---|
| 279 | <dijit:Menu dojoType="dijit.Menu"> |
|---|
| 280 | <dijit:MenuItem iconClass="mailIconGetMail">Yahoo</dijit:MenuItem> |
|---|
| 281 | <dijit:MenuItem iconClass="mailIconGetMail">GMail</dijit:MenuItem> |
|---|
| 282 | </dijit:Menu> |
|---|
| 283 | </dijit:form.ComboButton> |
|---|
| 284 | <dijit:Tooltip connectId="getMail">Click to download new mail.</dijit:Tooltip> |
|---|
| 285 | |
|---|
| 286 | <dijit:form.Button |
|---|
| 287 | id="newMsg" |
|---|
| 288 | iconClass="mailIconNewMessage" |
|---|
| 289 | label="New Message"> |
|---|
| 290 | <html:script type="dojo/method" event="onClick"> |
|---|
| 291 | /* make a new tab for composing the message */ |
|---|
| 292 | var newTab = new mail.NewMessage({id: "new"+paneId }).container; |
|---|
| 293 | dojo.mixin(newTab, |
|---|
| 294 | { |
|---|
| 295 | title: "New Message #" + paneId++, |
|---|
| 296 | closable: true, |
|---|
| 297 | onClose: testClose |
|---|
| 298 | } |
|---|
| 299 | ); |
|---|
| 300 | tabs.addChild(newTab); |
|---|
| 301 | tabs.selectChild(newTab); |
|---|
| 302 | </html:script> |
|---|
| 303 | </dijit:form.Button> |
|---|
| 304 | <dijit:Tooltip dojoType="dijit.Tooltip" connectId="newMsg">Click to compose new message.</dijit:Tooltip> |
|---|
| 305 | |
|---|
| 306 | <dijit:form.Button label="Options" iconClass="mailIconOptions"> |
|---|
| 307 | <html:script type="dojo/method" event="onClick"> |
|---|
| 308 | dijit.byId('optionsDialog').show(); |
|---|
| 309 | </html:script> |
|---|
| 310 | </dijit:form.Button> |
|---|
| 311 | <dijit:Tooltip connectId="options">Set various options</dijit:Tooltip> |
|---|
| 312 | </dijit:Toolbar> |
|---|
| 313 | |
|---|
| 314 | <dijit:layout.TabContainer dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs" layoutAlign="client"> |
|---|
| 315 | <!-- main section with tree, table, and preview --> |
|---|
| 316 | <dijit:layout.SplitContainer |
|---|
| 317 | orientation="horizontal" |
|---|
| 318 | sizerWidth="5" |
|---|
| 319 | activeSizing="0" |
|---|
| 320 | title="Inbox" |
|---|
| 321 | > |
|---|
| 322 | <dijit:layout.AccordionContainer sizeMin="20" sizeShare="20"> |
|---|
| 323 | <dijit:layout.AccordionPane title="Folders"> |
|---|
| 324 | <!--<span id="treePlaceHolder" |
|---|
| 325 | style="background-color:#F00; color:#FFF;"> |
|---|
| 326 | Loading tree widget... |
|---|
| 327 | </span>--> |
|---|
| 328 | <dijit:Tree id="mytree" store="mailStore" |
|---|
| 329 | labelAttr="label" childrenAttr="folders" query="{type:'folder'}" label="Folders"> |
|---|
| 330 | <html:script type="dojo/method" event="onClick" args="item"> |
|---|
| 331 | if(!item){ |
|---|
| 332 | return; // top level node in tree doesn't correspond to any item |
|---|
| 333 | } |
|---|
| 334 | /* filter the message list to messages in this folder */ |
|---|
| 335 | table.query.query = { |
|---|
| 336 | type: "message", |
|---|
| 337 | folder: mailStore.getValue(item, "id") |
|---|
| 338 | }; |
|---|
| 339 | table.runQuery(); |
|---|
| 340 | </html:script> |
|---|
| 341 | <html:script type="dojo/method" event="getIconClass" args="item"> |
|---|
| 342 | <![CDATA[ |
|---|
| 343 | return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments"; |
|---|
| 344 | ]]> |
|---|
| 345 | </html:script> |
|---|
| 346 | </dijit:Tree> |
|---|
| 347 | </dijit:layout.AccordionPane> |
|---|
| 348 | <dijit:layout.AccordionPane title="Address Book"> |
|---|
| 349 | <span dojoType="demo.Table" store="mailStore" |
|---|
| 350 | query="{ query: { type: 'address' }, columns: [ {name: 'User name', attribute: 'label'} ], sort: [ { attribute: 'label' } ] }" |
|---|
| 351 | id="addresses" style="width: 100%" > |
|---|
| 352 | <html:script type="dojo/method" event="preamble"> |
|---|
| 353 | this.query = { type: "address" }; |
|---|
| 354 | this.columns = [ |
|---|
| 355 | { |
|---|
| 356 | name: "Name", |
|---|
| 357 | attribute: "label" |
|---|
| 358 | } |
|---|
| 359 | ]; |
|---|
| 360 | </html:script> |
|---|
| 361 | <html:script type="dojo/method" event="onClick" args="item"> |
|---|
| 362 | table.query.query.sender = mailStore.getValue(item, "sender"); |
|---|
| 363 | delete table.query.query.folder; |
|---|
| 364 | table.runQuery(); |
|---|
| 365 | </html:script> |
|---|
| 366 | </span> |
|---|
| 367 | </dijit:layout.AccordionPane> |
|---|
| 368 | </dijit:layout.AccordionContainer> |
|---|
| 369 | |
|---|
| 370 | <dijit:layout.SplitContainer |
|---|
| 371 | id="rightPane" |
|---|
| 372 | orientation="vertical" |
|---|
| 373 | sizerWidth="5" |
|---|
| 374 | activeSizing="0" |
|---|
| 375 | sizeMin="50" sizeShare="85" |
|---|
| 376 | > |
|---|
| 377 | <dijit:layout.ContentPane id="listPane" sizeMin="20" sizeShare="20"> |
|---|
| 378 | <span dojoType="demo.Table" store="mailStore" |
|---|
| 379 | query="{ query: { type: 'message' }, sort: [ { attribute: 'label' } ] }" |
|---|
| 380 | id="foo" jsId="table" style="width: 100%"> |
|---|
| 381 | <html:script type="dojo/method" event="onClick" args="item"> |
|---|
| 382 | var sender = this.store.getValue(item, "sender"); |
|---|
| 383 | var subject = this.store.getValue(item, "label"); |
|---|
| 384 | var sent = dojo.date.locale.format( |
|---|
| 385 | dojo.date.stamp.fromISOString(this.store.getValue(item, "sent")), |
|---|
| 386 | {formatLength: "long", selector: "date"}); |
|---|
| 387 | var text = this.store.getValue(item, "text"); |
|---|
| 388 | |
|---|
| 389 | var messageInner = "<span class='messageHeader'>From: " + sender + "<br>" + |
|---|
| 390 | "Subject: "+ subject + "<br>" + |
|---|
| 391 | "Date: " + sent + "<br><br></span>" + |
|---|
| 392 | text; |
|---|
| 393 | dijit.byId("message").setContent(messageInner); |
|---|
| 394 | </html:script> |
|---|
| 395 | </span> |
|---|
| 396 | </dijit:layout.ContentPane> |
|---|
| 397 | <dijit:layout.ContentPane id="message" sizeMin="20" sizeShare="80"> |
|---|
| 398 | <p> |
|---|
| 399 | This is a simple application mockup showing some of the dojo widgets: |
|---|
| 400 | </p> |
|---|
| 401 | <ul> |
|---|
| 402 | <li>layout widgets: SplitContainer, LayoutContainer, AccordionContainer</li> |
|---|
| 403 | <li>TooltipDialog, Tooltip</li> |
|---|
| 404 | <li>Tree</li> |
|---|
| 405 | <li>form widgets: Button, DropDownButton, ComboButton, FilteringSelect, ComboBox</li> |
|---|
| 406 | <li>Editor</li> |
|---|
| 407 | </ul> |
|---|
| 408 | <p> |
|---|
| 409 | The message list above originally contains all the messages, but you can filter it by clicking on items in the left Accordion. Then click on the messages in the above list to display them. There's no server running, so the app is just a facade and it doesn't really do anything. |
|---|
| 410 | <!-- TODO: delete button (we can delete since we are using ItemFileWriteStore --> |
|---|
| 411 | </p> |
|---|
| 412 | <p> |
|---|
| 413 | <span style="font-family: 'Comic Sans MS',Textile,cursive; color: blue; font-style: italic;">-- Bill</span> |
|---|
| 414 | </p> |
|---|
| 415 | </dijit:layout.ContentPane> |
|---|
| 416 | </dijit:layout.SplitContainer><!-- end of vertical SplitContainer --> |
|---|
| 417 | </dijit:layout.SplitContainer><!-- end of horizontal SplitContainer --> |
|---|
| 418 | </dijit:layout.TabContainer><!-- end of TabContainer --> |
|---|
| 419 | |
|---|
| 420 | <dijit:layout.ContentPane layoutAlign="bottom" id="footer" align="left"> |
|---|
| 421 | <span style="float:right;">DojoMail v1.0 (demo only)</span> |
|---|
| 422 | <div id="fetchMail" style="opacity:0;visibility:hidden"> |
|---|
| 423 | <dijit:ProgressBar annotate="true" id="fakeFetch" style="height:15px; width:275px;" indeterminate="true" report="fakeReport"/> |
|---|
| 424 | </div> |
|---|
| 425 | </dijit:layout.ContentPane> |
|---|
| 426 | </dijit:layout.LayoutContainer> <!-- end of Layoutcontainer --> |
|---|
| 427 | |
|---|
| 428 | <dijit:Dialog id="optionsDialog" title="Options:"> |
|---|
| 429 | <table> |
|---|
| 430 | <tbody> |
|---|
| 431 | <tr> |
|---|
| 432 | <td style="text-align:right;"> |
|---|
| 433 | <label for="option1">Transport type:</label> |
|---|
| 434 | </td> |
|---|
| 435 | <td> |
|---|
| 436 | <dijit:form.FilteringSelect id="option1" value=" "> |
|---|
| 437 | <option value="pop3">POP3</option> |
|---|
| 438 | <option value="imap">IMAP</option> |
|---|
| 439 | </dijit:form.FilteringSelect> |
|---|
| 440 | </td> |
|---|
| 441 | </tr> |
|---|
| 442 | <tr> |
|---|
| 443 | <td style="text-align:right;"> |
|---|
| 444 | <label for="option2">Server:</label> |
|---|
| 445 | </td> |
|---|
| 446 | <td> |
|---|
| 447 | <dijit:form.TextBox id="option2" type="text"/> |
|---|
| 448 | </td> |
|---|
| 449 | </tr> |
|---|
| 450 | |
|---|
| 451 | <tr> |
|---|
| 452 | <td style="text-align:right;"> |
|---|
| 453 | <dijit:form.CheckBox type="checkbox" id="fooCB"/> |
|---|
| 454 | </td> |
|---|
| 455 | <td> |
|---|
| 456 | <label for="fooCB">Leave messages on Server</label> |
|---|
| 457 | </td> |
|---|
| 458 | </tr> |
|---|
| 459 | <tr> |
|---|
| 460 | <td style="text-align:right;"> |
|---|
| 461 | <dijit:form.CheckBox type="checkbox" id="fooCB2"/> |
|---|
| 462 | </td> |
|---|
| 463 | <td> |
|---|
| 464 | <label for="fooCB2">Remember Password</label> |
|---|
| 465 | </td> |
|---|
| 466 | </tr> |
|---|
| 467 | |
|---|
| 468 | <tr> |
|---|
| 469 | <td colSpan="2" style="text-align:center;"> |
|---|
| 470 | <dijit:form.Button iconClass="mailIconOk" onclick="dijit.byId('optionsDialog').hide();">OK</dijit:form.Button> |
|---|
| 471 | <dijit:form.Button iconClass="mailIconCancel" onclick="dijit.byId('optionsDialog').hide();">Abort</dijit:form.Button> |
|---|
| 472 | </td> |
|---|
| 473 | </tr> |
|---|
| 474 | </tbody> |
|---|
| 475 | </table> |
|---|
| 476 | </dijit:Dialog> |
|---|
| 477 | |
|---|
| 478 | <dijit:Dialog dojoType="dijit.Dialog" id="sendDialog" title="Sending Mail"> |
|---|
| 479 | <dijit:ProgressBar id="fakeSend" style="height:15px; width:175px;" indeterminate="true" ></dijit:ProgressBar> |
|---|
| 480 | </dijit:Dialog> |
|---|
| 481 | </ui> |
|---|
| 482 | </script> |
|---|
| 483 | </body> |
|---|
| 484 | </html> |
|---|
