Login Register

Mail Folders and dojo.Data

JSON and dojo.data stores worked pretty well for address book data. Andy wonders whether they would work to send mail and folders too.

mail_step6.png

Not only is it possible ... you can pass all the data back in one fell swoop. This is possible because ItemFileReadStore and JSON handle heirarchical data with ease. In mail land, you have folders which contain other folders or mail items. In JSON notation, you can model folders like this:

{ 
identifier: 'id',
label: 'label',
items: [
	// Hierarchy of folders

	{ type: 'folder', id: 'mailbox', label:'Folders', folders: [
		{ type: 'folder', id: 'inbox', label:'Inbox', icon:'mailIconFolderInbox' },
		{ type: 'folder', id: 'deleted', label:'Trash', icon:'mailIconTrashcanFull' },
		{ type: 'folder', id: 'save', label:'Save',  folders:[
			{ id: 'work', label:'stuff for work'},
			{ id: 'fun', label:'stuff for fun'}
		]}
	]},

You can see how we nest objects within objects, like the "work" and "fun" folders underneath the "Save" folder. We can model mail like this:

// Flat list of messages (each message lists its folder)

	{ type: 'message', id: 'node1.1',
                  folder: 'inbox', label: "today's meeting", 
                  sender: "Adam Arlen", sent: "2005-12-19",
	          text: "Today's meeting is cancelled.
Let's do it tomorrow instead.

Adam" }, { type: 'message', id: 'node1.2', folder: 'inbox', label: "remaining work", sender: "Bob Baxter", sent: "2005-12-18", text: "Hey, we need to talk about who's gonna do all the left over work. Pick a day you want to meet:
" },

Now you have three types of objects, delineated by type: address, folder and message. Andy decides to stick them all in one JSON data message. That means only one trip ito the server grabs everything about the user's mail store. Gotta love that!

The actual folder listing looks a lot like the address book code. The getIconClass extension point draws the folder icons:

<div dojoType="dijit.layout.AccordionPane" title="Folders">
        <div dojoType="dijit.Tree" id="mytree" store="mailStore"
                labelAttr="label" childrenAttr="folders"
                query="{type:'folder'}" label="Folders">

                <script type="dojo/method" event="getIconClass" args="item">
                        return (item && mailStore.getValue(item, "icon"))
                                   || "mailIconFolderDocuments";
                </script>
        </div>
</div>

The "childrenAttr" in the Tree tag does all the sub-folder magic.

One more thing and he'd be ready to show it to Ms. Opulence: connect the folders to messages and the messages to a preview pane. Andy looks at his watch. He's got about 15 minutes before the el stops by his office. If he could catch it and get home early, that'd give him some serious writing and reflecting time. So let's make short work of this, shall we?

AttachmentSize
step6.html9.96 KB

Page display errors

Lots of errors displaying all of these examples in IE and Firefox.

Try the latest copy

... there a few fixes in it.

It still seems to have problems

Darn, a screen shot would really help. All I can say is that the panes don't seem to be working and the text is overlapped and messed up. I have looked at it with Firefox and Safari on the Mac.

mail.css is why I think

make sure to include the following in your page.

@import "dojo-release-1.0.2/dijit/demos/mail/mail.css";

problem with step6.html

step6.html has a problem...it is using src="http://dojotoolkit.org/dojoroot/dojo/dojo.js" for the parseOnLoad script tag instead of "http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" that the other pages used.