Implementing the client applications for Web 2.0 channel

After implementing the server side’s business logic, you can use DOJO as client side framework to implement views.

Take login.jsp as an example.
  1. Import DOJO related CSS and the JavaScript library:
    <style type="text/css">
      @import "dojo/js/dijit/themes/tundra/tundra.css";
      @import "dojo/js/dijit/themes/soria/soria.css";
      @import "css/btt.css"; 
    </style> 
    <script type="text/javascript" src="dojo/js/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true">
    </script> 
    <script type="text/javascript">
      dojo.require("dojo.parser"); 
      dojo.require("dijit.Dialog");
      dojo.require("dijit.layout.ContentPane"); 
      dojo.require("dijit.layout.LayoutContainer");
      dojo.require("dijit.layout.AccordionContainer"); 
      dojo.require("dijit.TitlePane"); 
      dojo.require("dijit.form.TextBox");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.form.Form"); 
      dojo.require("dijit.form.ValidationTextBox");
      dojo.require("dojox.data.XmlStore"); 
      dojo.require("dijit.form.ValidationTextBox");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.registerModulePath("btt", "../../../btt"); 
      dojo.require("btt.data.XmlStore"); 
      dojo.addOnLoad(function(){ loginDialog.show();}); 
    </script>
  2. Create login dialog:

    DOJO provides a dialog widget, you can use it directly. See the following diagram for more information:

    Diagram showing how to use the DOJO dialog widget

  3. Send data to server side asynchronously and parse the response XML:

    DOJO provides data store function. Dojo.java is a uniform data access layer that removes the concepts of database drivers and unique data formats. All data is represented as an item or as an attribute of an item. With this presentation, data can be accessed in a standard fashion. Out of the box, dojo.java provides a basic ItemFileReadStore for reading a particular format of JSON data. The DojoX project provides more stores (for example, a simple XmlStore, a CsvStore, and an OpmlStore) for working with servers that can output data in such format. In addition, dojo.java is an API that other users can write to, so you can write one for a custom data format, a specific subset of all dojo.java APIs, or any other sort of customized data handling service you want to work with. After you have your custom format accessible using a datastore, widgets that are aware of datastores, and other such code, can then access your data without having to learn new APIs specific to your data. BTT provides a custom data store to format the client side data to XML and then send it to the server side. You can find the source from the following location: <toolkit_root>/samples/BTTMultiChannleSample/BTTSampleWeb/WebContent/btt/data/XmlStore.js.

  4. Implement the login JavaScript function. As shown in the following figure, if the response's status is OK, it switches to main.jsp, otherwise it shows the error message.

    Screen capture showing the JavaScript function