Notification Service: Example notice send page
25 November 2008With the completion of the SendNotificationServlet, it was a simple matter of creating a brief page and an accompanying script to create a small example of sending out a notice via the service. The script simply collects all of the input fields on the page and POSTs them as parameters to the new servlet, which sends out the message:
// notice_send_example.js
var dataURI = '/notify/send/';
var userId = '';
var userURI = '';
var userName = '';
var inputErrors = '';
/**
* Initialize the page
*/
function initPage() {
ajaxGet('/id/whoami', 'initPageCont','ajaxError');
}
/**
* Initialize the page (continued)
*/
function initPageCont(xmlDoc) {
var root = xmlDoc.documentElement;
userId = root.getElementsByTagName('remoteUser')[0].attributes[0].value;
userURI = root.getElementsByTagName('remoteUser')[0].attributes[1].value;
userName = root.getElementsByTagName('remoteUser')[0].firstChild.data;
var userLink = '<a class="action" href="javascript:popUpUserData(userURI);" title="' +
userName + '">' + userName + '</a>';
document.getElementById('userLink').innerHTML = userLink;
}
/**
* Opens up a new window to display the details of the current user
*/
function popUpUserData(uri) {
var userWindow = window.open(uri, 'userWindow', 'toolbar=no,directories=no,status=no,
scrollbars=yes,resizable=yes,resize=yes,menubar=no,height=400,width=500');
if (window.focus) {
userWindow.focus();
}
}
/**
* Saves the edited data
*/
function saveForm() {
inputErrors = '';
if (!(document.getElementById('sendTo').value > '')) {
addInputError('E-mail address is required');
}
if (!(document.getElementById('name').value > '')) {
addInputError('Name is required');
}
if (!(document.getElementById('description').value > '')) {
addInputError('Description is required');
}
if (inputErrors.length > 0) {
sendInputErrors();
} else {
saveUserInput();
}
}
/**
* Adds one input error to the list of errors
*/
function addInputError(errorMessage) {
if (inputErrors.length > 0) {
inputErrors += '\n';
}
inputErrors += errorMessage;
}
/**
* Send input errors
*/
function sendInputErrors() {
var errorMessage = 'The following error(s) have been detected:\n\n';
errorMessage += inputErrors;
errorMessage += '\n\nPlease correct the error(s) and resubmit.';
alert(errorMessage);
}
/**
* Saves the user input
*/
function saveUserInput() {
var parameters = 'templateId=test/test&sendTo=' + document.getElementById('sendTo').value;
parameters += '&name=' + document.getElementById('name').value;
parameters += '&description=' + document.getElementById('description').value;
parameters += '&address=' + document.getElementById('address').value;
parameters += '&city=' + document.getElementById('city').value;
parameters += '&stateProvince=' + document.getElementById('stateProvince').value;
parameters += '&postalCode=' + document.getElementById('postalCode').value;
ajaxPost(dataURI, parameters, 'sendSuccessful','ajaxError');
}
/**
* Notifies the user of a successful send operation
*/
function sendSuccessful() {
alert('The notice has been successfully sent.');
history.back();
}
The page itself is modeled off of all of the other recent sample pages, and looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Company: Notice Send Example</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script type="text/javascript" src="scripts/notice_send_example.js"></script>
<script type="text/javascript" src="/core/scripts/ajaxcall.js"></script>
</head>
<body onload="initPage();">
<div id="wrap">
<div id="header">
<h1><a href="#">Sample Company</a></h1>
<h2>Example pages to demonstrate various services and functions</h2>
<div id="identity"><span id="userLink"></span></div>
</div>
<div id="intro">
<p>The examples on these pages are representative of the types of things that can be done
with the various components employed. They are only examples, however, and are not intended
to illustrate the full range of possiblities available for any or all of the software
products in use on these pages.</p>
<br/>
<p>The Open Source page template utilized for these example pages was designed by <a
href="http://www.free-css-templates.com/">Free CSS templates</a>.</p>
</div>
<div id="content">
<h2>Notice Send Example</h2>
<p>
<strong>Note:</strong>
This example will send out an e-mail using the Notification Service. Please ensure that you
have the mail server setting set up correctly in the Spring configuration before using this
example.
</p>
<div class="articles">
<fieldset>
<legend>Message Details</legend>
<label for="id">E-mail Address:</label>
<input type="text" name="sendTo" id="sendTo"/>
<br/>
<label for="name">Name:</label>
<input type="text" name="name" id="name"/>
<br/>
<label for="description">Description:</label>
<input type="text" name="description" id="description"/>
<br/>
<label for="address">Address:</label>
<input type="text" name="address" id="address"/>
<br/>
<label for="city">City:</label>
<input type="text" name="city" id="city"/>
<br/>
<label for="stateProvince">State/Province:</label>
<input type="text" name="stateProvince" id="stateProvince"/>
<br/>
<label for="postalCode">Postal Code:</label>
<input type="text" name="postalCode" id="postalCode"/>
<br/>
<a class="button" href="javascript:saveForm();">Send Notification</a>
<a class="button" href="javascript:history.back();">Cancel</a>
</fieldset>
</div>
<div style="clear: both;"> </div>
<div id="footer">
Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>, Thanks to
<a href="http://www.dubaiapartments.biz/">Dubai Villas</a>
</div>
</div>
</body>
</html>
For now, I just hard-coded the template id in the script, but on second thought, that should probably have been an input field as well so that you could try out different templates, but it’s just a sample, so I think I may just leave that for others to play around with. It does the job for now of demonstrating all of the parts working together, and that’s really all I was after anyway.
Leave a reply
You must be logged in to post a comment.
