A Compose Mail Widget

Next, Andy needs a Compose Mail window that looks like this:

[inline:mail_step4.png]

Hmmmm, composing HTML email looks like it might be a problem. There's that huge toolbar and all those display stuff. Well, to be honest, with Dojo that's the easiest part of this step. Simply write a template like this:

/* 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;}

<textarea dojoType="dijit.Editor" style="overflow:auto" 

        extraPlugins="[{name:'dijit._editor.plugins.LinkDialog'}]"

>

<i> This is just a sample message. There is email-address auto-complete in the to: field.

<br><br> give it a whirl.

</i>

</textarea>

And save it in the file mail/newMail.html on your server. The dijit.Editor widget sets up the word-processor like environment for you, complete with toolbar, accelerator keys, and a fairly full array of HTML tools. The LinkDialog plugin adds an "Add Link..." button to the editor. Wow! It's a 5 line word processor. Andy mentally files this away - it could come in handy for composing his heartfelt speech later!

Using Dijit components is fun in a geeky sorta way. Still, Andy was one of those kids who got bored with Lego's ... until he made new ones with a band saw and a soldering iron.

If there were only one Compose Mail screen at a time, he could model it as a single tab and show it when necessary. But we need more than one. Andy thinks ... if one could just make a Compose Mail widget, then you can create as many instances as you want.

You can do that! And just like you can create widget instances declaratively or programmatically, so you can create new widget classes declratively or programmatically. As you might guess, the declarative way is easier. You simply pull out the dijit.Declaration widget.

Dijit.Declaration defines a widget class using a familiar macro-like template. Let's take a look:

<div dojoType="dijit.Declaration" widgetClass="mail.NewMessage">

    <div dojoType="dijit.layout.LayoutContainer" dojoAttachPoint="container" 

            title="Composing..." closeable="true">

        <div dojoType="dijit.layout.LayoutContainer" layoutAlign="top" 

                style="overflow: visible; z-index: 10; color:#666; ">

            <table width=100%>

                <tr style="padding-top:5px;">

                    <td style="padding-left:20px; padding-right: 8px; text-align:right;">

                         <label for="${id}_to">To:</label>

                    </td>

                    <td width=100%>

                        <select dojoType="dijit.form.ComboBox" 

                                     id="${id}_to" hasDownArrow="false">

                            <option></option>

                            <option>adam@yahoo.com</option>

                            <option>barry@yahoo.com</option>

                            <option>bob@yahoo.com</option>

                            <option>cal@yahoo.com</option>

                            <option>chris@yahoo.com</option>

                            <option>courtney@yahoo.com</option>

                       </select>

                    </td>

                </tr>

                <tr>

                    <td style="padding-left: 20px; padding-right:8px; text-align:right;">

                          <label for="${id}_subject">Subject:</label>

                    </td>

                    <td width=100%>

                        <select dojoType="dijit.form.ComboBox" 

                                     id="${id}_subject" hasDownArrow="false">

                            <option></option>

                            <option>progress meeting</option>

                            <option>reports</option>

                            <option>lunch</option>

                            <option>vacation</option>

                            <option>status meeting</option>

                        </select>

                   </td>

                </tr>

            </table>

        <hr noshade size="1">

        </div>

        <div dojoType="dijit.layout.LayoutContainer" 

                layoutAlign="bottom" align=center>

            <button dojoType="dijit.form.Button" 

                          iconClass="mailIconOk">Send</button>

             <button dojoType="dijit.form.Button" 

                           iconClass="mailIconCancel">Cancel</button>

      </div>

        <!-- new messase part -->

        <div dojoType="dijit.layout.LayoutContainer" layoutAlign="client">

            <div dojoType="dijit.layout.ContentPane" href="mail/newMail.html"></div> 

        </div>    

    </div>

</div>

The HTML defined inside the dijit.Declaration tagis dropped in wherever the widget class "mail.newMessage" is requested. You could, in fact, drop one in like this:

<div dojoType="mail.newMessage" id="myNewMessage"></div>

You pass parameters to your new widget by using:

An attribute on the calling side: in our case, we set id="myNewMessage" to pass the parameter "id".
A ${___} on the declaration side: in our case, we have ${id} marked several places in the definition. These are substituted with myNewMessage in this call.

This declarative usage is neat, but not helpful in our case since we don't know how many newMessage components to create. Instead, we create instances programmatically using the Compose Mail button:

<button

        id="newMsg" dojoType="dijit.form.Button"

        iconClass="mailIconNewMessage">

        New Message

        <script type="dojo/method" event="onClick">

                /* make a new tab for composing the message */

                var newTab = new mail.NewMessage({id: "new"+paneId  }).container;

                dojo.mixin(newTab,

                        {

                                title: "New Message #" + paneId++,

                                closable: true,

                                onClose: testClose

                        }

                );

                tabs.addChild(newTab);

                tabs.selectChild(newTab);

        </script>

</button>

This new code creates a mail.NewMessage programmatically, then creates a Tab out of it and adds it to the TabContainer (specified by the JavaScript variable newTabs)

Add some declarations and a few supplemental variables to the header:

dojo.require("dijit.Declaration");
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.LinkDialog");

// Global var for new mail pane
var paneId=1;
        
// for "new message" tab closing
function testClose(pane,tab){
  return confirm("Are you sure you want to leave your changes?");
}

And now we can compose mail to people.