Very often we face a challenge to design MII UIs with different
HTML controls, maintain appropriate layout and for these we need to write a lot
usable. This might manifest itself in a variety of ways. The UI should be
faster. It should be better looking. It should be easier to operate by the
user. It should help the user enter the required information properly, and the
page should be easier to navigate and to achieve all these we expect to write a
lot less code than if we were developing the functionality by writing it all
ourselves. Less code means less opportunity for error.
How do we make these gains in usability? Fortunately, we have an
answer to this and that is Dojo. Now
delivering powerful, good-looking, professional-quality web-based applications
is far easier than ever before. You are no longer on your own, required to
write every last bit of code. It’s thanks to things like Dojo that I can say
Dojo is a set of tools that
helps you build better browser-based applications. Dojo is built mostly using
wanted, the collection of standard UI Widgets which can easily replace the
customized HTML controls and CSS layout implemented again and again in
different projects. Performance
can be improved either by making things run faster or by making things appear
to run faster. Data validation can be improved by bringing the validation of data
closer to the entry of data. Can
Dojo really deliver? Let’s find out.
<a name=”_Toc243121855″ title=”_Toc243121855″></a>Plan for Enhancing a MII UI Input Form
We begin by
selecting a page from an MII application that will be the target for our Dojo
enhancements (see Figure 1.1). This page comes from an MII Application and
allows a user to enter Goods Issue Details at Shop Floor.
Figure 1: Basic Design
This page has a
very basic design-we start with this minimal design to keep the examples as
simple as possible. Let’s walk through each of the fields on this form and
discuss the usability problems. A discussion of how Dojo can solve these
problems then follows.
0.1. Next we
have a numeric field call Process Order an important input data and require
numeric entry only. Non numeric should not be allowed. We can also set an
additional check like the entry should be a 12 digit numeric value.
0.1. For the
Material quantity field let’s set validations like entered value should be
numeric, negative quantity should not be allowed; value should be within a
field always requires a Date Picker for which we need to write a hell lot of
0.1. For a
field like Functional Location we need to set a data format as well as user
entered value should have Hyphens (-).
the above input form we can see that almost all the fields require some input
validations, restrictions etc. Now it is a decision point how easily we
and that function can check to see if data is entered, check for a minimum or
maximum length, or even perform sophisticated pattern matching using regular expressions.
error messages back to the user. Code, code, and more code. Suddenly, this
approach doesn’t seem as desirable anymore.
But this is where
Dojo can come to the rescue. In this part of the tutorial, we explore how Dojo
can help us in providing basic client-side validations, change UI Layout very
easily. In other words, we’ll be able to turn on validation by using simple
automatically. Let’s get started.
<a name=”_Toc243121856″ title=”_Toc243121856″></a>Including
Dojo in the Form
<a name=”_Toc243121857″ title=”_Toc243121857″></a>Validate the UoM Field
Let’s look at the
“UoM” field first. As discussed in the previous section we will some validation
for this field. We turn on validation by using special attribute values in the
HTML markup for these fields. The following code will add validation very
type=”text” id=”UoM” size=”20″
UoM(Unit of Measurement)”+
+ invalidMessage= “Invalid
UoM. Re-enter” +
To summarize what
has happened: All we’ve done is add some new attributes to the
tag for the field. Each of the new attributes affects the validation in some
way. Notice the following line of code from the preceding example:
+The regular expression syntax *regExp=”[\w]“*
+removes white spaces entered
as wrong input. The regular expression also validates any white space even in
the text input and displays the invalidMessage
The setting for
propercase tells Dojo to make sure that the first letter is capitalized and
subsequent letters are in lowercase.
<a name=”_Toc243121858″ title=”_Toc243121858″></a>Validate the Process Order Field
+ name= “processOrder”+
+ promptMessage= “Enter a
+ required= “true”+
+ invalidMessage= “Please
enter a valid numeric Process Order” />+
In this case we
have used dojoType=”dijit.form.NumberTextBox“.
This is also set as a required field and if user enters non numeric value the
field will display the invalidMessage as an alert.
Fig 5: Tooltip message on focus.
Fig 6: Alert message on invalid entry
Validate the Quantity Order Field.
field also accepts numeric input similar to Process Order and we will also see
how can add an extra set of validation as discussed previously.
+ id=”MaterialQuantity” type=”text”+
+ name= “elevation”+
+ promptMessage= “Enter a
valid Quantity between 1 and 20000″+
+ required= “true”+
+ invalidMessage= “Invalid
Quantity. Re-enter” />+
This is the object
that contains properties used to validate the data for any widget. Here using
constraint we have set the min and max range of Quantity that user can enter.
If user tries to enter beyond range the invalid message will be displayed.
Easier Date Entry
routines for validating dates and times are another implementation detail that
just about any web developer who has been around a while has had to produce at
some point or another. Although dates and times have well-defined formats that
are quite universal, the generic HTML INPUT element offers no support, and the
Dijit makes picking dates and times just as easy as it should be. With Dijit,
you use dijit.form.DateTextBox to
turn any textbox into a widget with a calendar. First, add it to the header as shown here:h3. Validate the Functional Location Field
* *As discussed we
added some extra level of validation for this field. The input data format
should be like +(NNNN–NNN–NN–NN). +If we can come up with
a regular expression to test this format, then we can implement it very easily.
On gaining the focus the field displays a prompt alert with the appropriate
message. + regExp=”\d (\-)\d[\-]\d (\-)\d+“</p>
Functional Location (NNNN-NNN-NN-NN) following this format”+</p>
zip code (NNNN-NNN-NN-NN).” />+</p>
<a name=”_Toc243121860″ title=”_Toc243121860″></a>Wrapping It Up
<p>Well, that was a rush! Here’s the form
source code we’ve built bit by bit. You can save this code as an .irpt file and
make it run very easily after preparing the dojo environment.</p>
<p><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”</p>
<p><title> Demo Input Form</title></p>
<p>+<div dojoType=”dijit.form.Form” id=”testForm”
jsId=” testForm “+</p>
<p>+<td><input type=”text” id=”UoM”
UoM(Unit of Measurement)”+</p>
<p>+ invalidMessage= “Invalid UoM.
promptMessage= “Enter a Process Order”+</p>
invalidMessage= “Please enter a valid numeric Process Order”
promptMessage= “Enter a valid Quantity between 1 and 20000″
invalidMessage= “Invalid Quantity. Re-enter” />+
+ type=”text” name=”Date” value=”2009-10-09″+
+promptMessage=”Enter Functional Location (NNNN-NNN-NN-NN)
following this format”+
invalidMessage=”Invalid zip code (NNNN-NNN-NN-NN).”
This form is
easier to navigate, is easier for adding data, and is patient but firm about
HTML attributes. Dijit is a very powerful thing indeed!
<a name=”_Toc243121861″ title=”_Toc243121861″></a>Getting Dojo
web server. You can install Dojo into any directory, build Dojo-based web
applications, and load them all. Downloading the latest official Dojo release
is by far the most traditional way to prepare for development. You can find
at what unpacks reveals that the code base is broken into the same architectural
components -Base (dojo/dojo.js), Core (dojo), Dijit (dijit), Dojox(dojox), and
Util (util). To use dojo for developing MII UIs you need to import the
downloaded dojo toolkit .zip (dojo-release-1.3.1.zip)
as a project in MII Server. Go to Project Management perspective and import.