Originally posted on www.dojotoolkit.org/forum
I put the following example together back in August as part of my ongoing effort to experiment with dojo. The example includes a loading page, followed by a login page which if the correct username and password are entered brings up a mock application page.
The work is in no way original as I made healthy use of the dojo forums and other examples that I found on the web. I hope by posting a working example here others may learn from what I learned from others.
If you have comments or suggestions I would be very interested in hearing them. If you have questions I will do my best to answer them.
<html>
<head>
<title>User Interface</title>
<!--Look for dojo on local server-->
<script type="text/javascript">
var dojoroot= 'http://' + window.location.hostname + '/dojo/js/dojo';
var ext='.js';
document.write('<link href="'+dojoroot+'/dojo/resources/dojo.css" type="text/css" rel="stylesheet">');
document.write('<link href="'+dojoroot+'/dijit/themes/soria/soria.css" type="text/css" rel="stylesheet">');
document.write('<script type="text/javascript" src="'+dojoroot+'/dojo/dojo'+ext+'" djConfig="debug: true, parseOnLoad: false"><\/script>');
</script>
<!--Check if dojo is loaded if not load from aol.-->
<script type="text/javascript">
if(typeof dojo == "undefined"){
dojoroot='http://o.aolcdn.com/dojo/1.1.1';
ext='.xd.js';
document.write('<link href="'+dojoroot+'/dojo/resources/dojo.css" type="text/css" rel="stylesheet">');
document.write('<link href="'+dojoroot+'/dijit/themes/soria/soria.css" type="text/css" rel="stylesheet">');
document.write('<script type="text/javascript" src="'+dojoroot+'/dojo/dojo'+ext+'" djConfig="debug: true, parseOnLoad: false"><\/script>');
}
</script>
<style>
html, body, #uigMainCnt, #uigAppPge, #loader{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
overflow: hidden; /* erase window level scrollbars */
padding: 0 0 0 0;
margin: 0 0 0 0;
top:0; left:0;
font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif;
position: absolute;
}
/* Start Loading Page */
#loader {
background:#ffffff;
z-index:999;
}
#loaderInner {
padding:5px;
position:relative;
left:0; top:40%;
width:100%;
background:#ffffff;
color:#fff;
}
/* End Loading Page */
/* Start Login Form */
#uigLoginFrm label,input {
display: block;
float: left;
margin-bottom: 10px;
}
#uigLoginFrm label {
text-align: left;
width: 50px;
padding-right: 20px;
}
#uigLoginFrm button {
margin-left: 50px;
}
#uigLoginFrm br {
clear: left;
}
#uigLoginMsg {
text-align: left;
padding-top: 5px;
color: red;
}
/*End Login Form */
/*Start App Main Page */
#uigAppPge{
visibility: hidden;
}
/*End App Main Page */
</style>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Form");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
dojo.require("dijit.Menu");
dojo.require("dijit.Tooltip");
//Using this function along with the dojo.connect in the dojo.addOnLoad allows the submit event to be stopped
//so that when the function completes it will not try and submit the form. There are a number of ways that
//this can be done but this appears to be the most common.
function uigLoginAuth(e){
//Stop the default action from happening when the function completes.
dojo.stopEvent(e);
console.log ('In uigLoginAuth...');
if(!dijit.byId('uigLoginFrm').validate()){
dojo.byId('uigLoginMsg').innerHTML='Invalid data, please correct';
return;
}
//Normally you would call a routine on the server to validate but for the example we will just simulate that.
//dojo.xhrPost ({
// url: 'uigLoginAuth.pl',
// form: 'uigLoginFrm',
// load: uigFireApp,
// error: function(response, ioArgs) {
// dojo.byId('uigLoginMsg').innerHTML='System error: '+ ioArgs.xhr.status;
// return;
// }
//});
//Emulate call to server
var user = dijit.byId('uiguser').getValue();
var pwd = dijit.byId('uigpwd').getValue();
if ((user=='test') && (pwd=='test')) {
uigFireApp('uigsuccess', 0);
return;
}
uigFireApp('uigLoginAuth-Fail, Login failed, try again!', 0);
}
function uigFireApp(response, ioArgs) {
if (response!='uigsuccess') {
dojo.byId('uigLoginMsg').innerHTML=response;
return;
}
//Hiding the dialog allows the page "below" it to become active and accept input and respond to the mouse.
dijit.byId('uigLoginDlg').hide();
//Clear the login form so the username and password are not stored after a successful authentication
uigLoginReset();
//To get the main application screen to fade in the CSS sets the uigAppPge to visibility: hidden.
//This function uses dojo to correctly set the opacity of the div based on browser independent logic
//and then makes the div visible and does the fade. This works for both IE and FF.
dojo.style(dojo.byId('uigAppPge'), "opacity", "0");
dojo.style(dojo.byId('uigAppPge'), "visibility", "visible");
dojo.fadeIn({
node: 'uigAppPge'
}).play();
}
function uigLoginReset () {
dojo.byId('uigLoginMsg').innerHTML=" ";
dojo.byId('uigLoginFrm').reset();
return false;
}
function uigLoginCancel () {
dojo.byId('uigLoginMsg').innerHTML=" ";
dojo.byId('uigLoginFrm').reset();
dijit.byId('uigLoginDlg').show();
return false;
}
//The logout function will need to make a call to the server to log the user out.
function uigLogout () {
dojo.fadeOut({
node: 'uigAppPge'
}).play();
dijit.byId('uigLoginDlg').show();
//Call to server to login the session out
}
dojo.addOnLoad(function(){
//Start Loading Page
dojo.parser.parse();
dojo.fadeOut({
node: 'loader',
onEnd: function(){
dojo.style(dojo.byId('loader'), "display", "none");
}
}).play();
//End Loading Page
//Start Login Form
dijit.byId('uigLoginDlg').show();
dojo.connect(dijit.byId('uigLoginDlg'), 'onCancel', uigLoginCancel);
//End Login Form
});
</script>
</head>
<body class="soria">
<!-- Start Loading Page -->
<div id="loader"><div id="loaderInner" align=center>
<img src="loading.gif"/>
<p style="color: #BCD5F0"><font face="Arial"><b>Loading</b></font></p>
</div></div>
<!-- End Loading Page -->
<div id="uigMainCnt" >
<!-- Start Login Form -->
<div id="uigLoginDlg" dojoType="dijit.Dialog" title="Login">
<form id="uigLoginFrm" dojoType="dijit.form.Form" action="" method="">
<label for="uiguser">Username</label>
<input id="uiguser" type="text" trim="true" required="true" invalidMessage="Username is Required!" dojoType="dijit.form.ValidationTextBox" value="" name="uiguser"/><br>
<label for="uigpwd">Password</label>
<input id="uigpwd" type="password" trim="true" required="true" invalidMessage="Password is Required!" dojoType="dijit.form.ValidationTextBox" value="" name="uigpwd"/><br>
<button dojoType="dijit.form.Button" onClick="uigLoginAuth">Login</button>
<button dojoType="dijit.form.Button" onClick="uigLoginReset">Reset</button>
<div id="uigLoginMsg"> </div>
</form>
</div>
<!--End Login Form -->
<!--Start App Main Page-->
<div id="uigAppPge" dojoType="dijit.layout.BorderContainer">
<div id="uigAppMenuBar" dojoType="dijit.Toolbar" region="top" class="menuBar">
<button dojoType="dijit.form.Button">
Logout
<script type="dojo/method" event="onClick">
uigLogout();
</script>
</button>
</div>
<div id="uigCenterCnt" dojoType="dijit.layout.ContentPane" region="center">
uigCenterCnt
</div>
<div id="uigBottomCnt" dojoType="dijit.layout.ContentPane" region="bottom"
style="height:100px;" splitter="true">
uigBottomCnt
</div>
<div id="uigSideCnt" dojoType="dijit.layout.ContentPane" region="left"
style="width:100px;" splitter="true">
uigSideCnt
</div>
</div>
<!--End App Main Page-->
</div>
</body>
</html>