cacert-testmgr/external/ZendFramework-1.9.5/externals/dojo/demos/mail/demo.html

271 lines
10 KiB
HTML
Raw Normal View History

<!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">
&nbsp;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>