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.

[inline: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:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<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?