Tuesday, October 21, 2008

Simple Dojo Example for R&D (ripoff and duplicate) and/or Critiquing

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>