271 lines
10 KiB
HTML
271 lines
10 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Demo Mail Application</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="demo.css">
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../dojo/dojo.js" charset="utf-8"></script>
|
||
|
|
<script type="text/javascript" src="src.js" charset="utf-8"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="soria" role="application">
|
||
|
|
<div id="preLoader"><p></p></div>
|
||
|
|
<div dojoType="dojo.data.ItemFileWriteStore" jsId="mailStore"
|
||
|
|
url="mail.json"></div>
|
||
|
|
<div dojoType="dojo.data.ItemFileWriteStore" jsId="contactStore"
|
||
|
|
url="contacts.php"></div>
|
||
|
|
|
||
|
|
<!-- Inline declaration for programmatically created "New Message" tabs -->
|
||
|
|
<div dojoType="dijit.Declaration"
|
||
|
|
widgetClass="mail.NewMessage">
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" dojoAttachPoint="container" title="Composing..." closeable="true">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top" style="height:60px; 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%>
|
||
|
|
<input dojoType="dijit.form.ComboBox" id="${id}_to" hasDownArrow="false" store="contactStore" searchAttr="display"
|
||
|
|
style="width: 40em;">
|
||
|
|
</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" style="width: 40em;">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- new message part -->
|
||
|
|
<div dojoType="dijit.Editor" region="center" style="overflow:hidden"
|
||
|
|
extraPlugins="['createLink','insertImage',{name:'dijit._editor.plugins.FontChoice', command: 'fontName', generic: true},'fontSize']"
|
||
|
|
|
||
|
|
>
|
||
|
|
<i> This is just a sample message. There is email-address auto-complete in the to: field.
|
||
|
|
<br><br> give it a whirl.
|
||
|
|
</i>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="bottom" style="height:32px" align="center">
|
||
|
|
<button dojoType="dijit.form.Button" iconClass="mailIconOk"
|
||
|
|
>Send
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var toField = dojo.byId("${id}_to");
|
||
|
|
if (toField.value == ""){
|
||
|
|
alert("Please enter a recipient address");
|
||
|
|
}else{
|
||
|
|
showSendBar();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button" iconClass="mailIconCancel"
|
||
|
|
>Cancel
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
tabs.closeChild(tabs.selectedChildWidget);
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" id="main">
|
||
|
|
|
||
|
|
<!-- toolbar with new mail button, etc. -->
|
||
|
|
<div dojoType="dijit.Toolbar" region="top">
|
||
|
|
<div id="getMail" dojoType="dijit.form.ComboButton"
|
||
|
|
iconClass="mailIconGetMail" optionsTitle="Mail Source Options">
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
fakeDownload();
|
||
|
|
</script>
|
||
|
|
<span>Get Mail</span>
|
||
|
|
<ul dojoType="dijit.Menu">
|
||
|
|
<li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">Yahoo</li>
|
||
|
|
<li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">GMail</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<span dojoType="dijit.Tooltip" connectId="getMail">Click to download new mail.</span>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<span dojoType="dijit.Tooltip" connectId="newMsg">Click to compose new message.</span>
|
||
|
|
|
||
|
|
<button id="options" dojoType="dijit.form.Button" iconClass="mailIconOptions">
|
||
|
|
Options
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dijit.byId('optionsDialog').show();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<div dojoType="dijit.Tooltip" connectId="options">Set various options</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs" region="center">
|
||
|
|
<!-- main section with tree, table, and preview -->
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" id="inbox" title="Inbox" design="sidebar">
|
||
|
|
<div dojoType="dijit.layout.AccordionContainer" id="accordion"
|
||
|
|
region="leading" minSize="20" style="width:20%;" splitter="true">
|
||
|
|
<div dojoType="dijit.layout.AccordionPane" title="Folders">
|
||
|
|
<div dojoType="dijit.Tree" id="mytree" store="mailStore"
|
||
|
|
childrenAttr="folders" query="{type:'folder'}" label="Folders">
|
||
|
|
<script type="dojo/method" event="onClick" args="item">
|
||
|
|
if(!item){
|
||
|
|
return; // top level node in tree doesn't correspond to any item
|
||
|
|
}
|
||
|
|
/* filter the message list to messages in this folder */
|
||
|
|
table.setQuery({
|
||
|
|
type: "message",
|
||
|
|
folder: mailStore.getValue(item, "id")
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script type="dojo/method" event="getIconClass" args="item">
|
||
|
|
return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments";
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.AccordionPane" title="Search Messages">
|
||
|
|
<form dojoType="dijit.form.Form" jsId="searchForm">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td><label for="subjectSearch">Subject:</label></td>
|
||
|
|
<td><input dojoType="dijit.form.TextBox" id="subjectSearch" name="label"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><label for="senderSearch">Sender:</label></td>
|
||
|
|
<td><input dojoType="dijit.form.TextBox" id="senderSearch" name="sender"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><label for="bodySearch">Message text:</label></td>
|
||
|
|
<td><input dojoType="dijit.form.TextBox" id="bodySearch" name="text"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan=2 align=center><button dojoType="dijit.form.Button" onClick="searchMessages">Search</button></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div> <!-- end of Accordion -->
|
||
|
|
|
||
|
|
<!-- list of messages pane -->
|
||
|
|
<table dojoType="dojox.grid.DataGrid"
|
||
|
|
region="top" minSize="20" splitter="true"
|
||
|
|
jsId="table"
|
||
|
|
id="table"
|
||
|
|
store="mailStore" query="{ type: 'message' }"
|
||
|
|
onRowClick="onMessageClick"
|
||
|
|
style="height: 150px;">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th field="sender" width="10%">Sender</th>
|
||
|
|
<th field="label" width="80%">Subject</th>
|
||
|
|
<th field="sent" width="10%" formatter="formatDate">Date</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
</table> <!-- end of listPane -->
|
||
|
|
|
||
|
|
<!-- message preview pane -->
|
||
|
|
<div id="message" dojoType="dijit.layout.ContentPane" region="center" role="region" aria-live="assertive" aria-atomic="true" minSize="20">
|
||
|
|
<p>
|
||
|
|
This is a simple application mockup showing some of the dojo widgets:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>layout widgets: BorderContainer, AccordionContainer</li>
|
||
|
|
<li>TooltipDialog, Tooltip</li>
|
||
|
|
<li>Tree</li>
|
||
|
|
<li>form widgets: Button, DropDownButton, ComboButton, FilteringSelect, ComboBox</li>
|
||
|
|
<li>Editor</li>
|
||
|
|
</ul>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
<!-- TODO: delete button (we can delete since we are using ItemFileWriteStore -->
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span style="font-family: 'Comic Sans MS',Textile,cursive; color: blue; font-style: italic;">-- Bill</span>
|
||
|
|
</p>
|
||
|
|
</div> <!-- end of "message" -->
|
||
|
|
|
||
|
|
</div> <!-- end of inbox -->
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" title="Contacts">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top">
|
||
|
|
<center id="contactIndex"></center>
|
||
|
|
</div>
|
||
|
|
<table dojoType="dojox.grid.DataGrid" jsId="contactTable" store="contactStore" region="center" editable="true">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th field="first" width="25%" editable="true">First Name</th>
|
||
|
|
<th field="last" width="25%" editable="true">Last Name</th>
|
||
|
|
<th field="email" width="50%" editable="true">Email Address</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
</table>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="bottom">
|
||
|
|
Edit your contact information from this page by clicking entries in the table above.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div> <!-- end of TabContainer -->
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="bottom" id="footer" align="left">
|
||
|
|
<span style="float:right;">DojoMail v1.2 (demo only)</span>
|
||
|
|
<div id="fetchMail" style="opacity:0;visibility:hidden">
|
||
|
|
<div id="fakeFetch" dojoType="dijit.ProgressBar" style="height:15px; width:275px;" indeterminate="true" report="fakeReport"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> <!-- end of main -->
|
||
|
|
|
||
|
|
<div dojoType="dijit.Dialog" id="optionsDialog" title="Options:">
|
||
|
|
<table>
|
||
|
|
<tr><td style="text-align:right;"><label for="option1">Transport type:</label></td><td>
|
||
|
|
<select id="option1" dojoType="dijit.form.FilteringSelect">
|
||
|
|
<option value="pop3">POP3</option>
|
||
|
|
<option value="imap">IMAP</option>
|
||
|
|
</select></td></tr>
|
||
|
|
<tr><td style="text-align:right;"><label for="option2">Server:</label></td><td><input id="option2" dojoType="dijit.form.TextBox" type="text">
|
||
|
|
</td></tr>
|
||
|
|
|
||
|
|
<tr><td style="text-align:right;"><input type="checkbox" id="fooCB" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB">Leave messages on Server</label></td></tr>
|
||
|
|
<tr><td style="text-align:right;"><input type="checkbox" id="fooCB2" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB2">Remember Password</label></td></tr>
|
||
|
|
|
||
|
|
<tr><td colspan="2" style="text-align:center;">
|
||
|
|
<button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk">OK</button>
|
||
|
|
<button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel">Abort</button>
|
||
|
|
</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.Dialog" id="sendDialog" title="Sending Mail">
|
||
|
|
<div id="sendMailBar" style="text-align:center">
|
||
|
|
<div id="fakeSend" dojoType="dijit.ProgressBar" style="height:15px; width:175px;" indeterminate="true" ></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|