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
of HTML and Javascript code. As we always expect that our MII UIs will be more
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
that.
Dojo is a set of tools that
helps you build better browser-based applications. Dojo is built mostly using
client-side JavaScript and today it is revolutionizing web development, and
gaining momentum fast. It packs the standard JavaScript library we have always
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
range etc.
0.1. Date
field always requires a Date Picker for which we need to write a hell lot of
Javascript, also require extra validations like Date Format.
0.1. For a
field like Functional Location we need to set a data format as well as user
entered value should have Hyphens (-).
After studying
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
implement all these validations? We can use JavaScript. Given the power of
JavaScript, the sky is the limit in terms of types of validations we can
perform. We can trigger a JavaScript function to run after the user enters a field,
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.
Problem solved,
correct? Not quite. The problem with depending on JavaScript as our validation
technique is that we have to write lots of code to implement the checks. JavaScript
code is required to perform the validation. Other JavaScript code tells the
validation when to run. And even more JavaScript code is needed to display the
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
HTML markup, but we'll let Dojo provide the complex JavaScript code
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
easily.
for="UoM">UoM:
type="text" id="UoM" size="20"
+ dojoType="dijit.form.ValidationTextBox"+
+ required="true"+
+ regExp="[\w]"
+ propercase="true"+
+ promptMessage="Enter
UoM(Unit of Measurement)"+
+ invalidMessage= "Invalid
UoM. Re-enter" +
+ trim="true/>+
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:
+dojoType="dijit.form.ValidationTextBox"
+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
string.
Figure 4
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
+ dojoType="dijit.form.NumberTextBox"+
+ name= "processOrder"+
+ promptMessage= "Enter a
Process Order"+
+ 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.
The Quantity
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"+
+
dojoType="dijit.form.NumberTextBox"+
+ name= "elevation"+
+ value="1"+
+ constraints=""+
+ 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.
!https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image005.jpg|alt=|src=https://weblogs.sdn....!
Figure 7
Easier Date Entry
Custom validation
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
load is pushed off to JavaScript for validation and custom formatting. Fortunately,
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>
<p>+ promptMessage="Enter
Functional Location (NNNN-NNN-NN-NN) following this format"+</p>
<p>+ invalidMessage="Invalid
zip code (NNNN-NNN-NN-NN)." />+</p>
<p> </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> </p>
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"</p>
<p>+
"http://www.w3.org/TR/html4/strict.dtd">+</p>
<p><html></p>
<p><head></p>
<p>+<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">+</p>
<p><title> Demo Input Form</title></p>
<p>+ <style
type="text/css">+</p>
<p>+ @import
"http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";+</p>
<p>+ @import
"http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"+</p>
<p>+ </style>+</p>
<p>+ <script
type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"+</p>
<p>+
djConfig="parseOnLoad: true"></script>+</p>
<p>+ <script
type="text/javascript">+</p>
<p>+
dojo.require("dojo.parser");+</p>
<p>+ dojo.require("dijit.form.Form");+</p>
<p>+
dojo.require("dijit.form.NumberTextBox");+</p>
<p>+
dojo.require("dijit.form.ValidationTextBox");+</p>
<p>+
dojo.require("dijit.form.DateTextBox");+</p>
<p>+ </script>+</p>
<p></head></p>
<p>+<body class="tundra"
bgcolor="#FFCC60">+</p>
<p>+<div dojoType="dijit.form.Form" id="testForm"
jsId=" testForm "+</p>
<p>+encType="multipart/form-data" action=""
method="">+</p>
<p><table></p>
<p><tr></p>
<p>+<td><label
for="UoM">UoM:</label></td>+</p>
<p>+<td><input type="text" id="UoM"
size="20"+</p>
<p>+ dojoType="dijit.form.ValidationTextBox"+</p>
<p>+ required="true"+</p>
<p>+ regExp="[\w]"</p>
<p>+ propercase="true"+</p>
<p>+ promptMessage="Enter
UoM(Unit of Measurement)"+</p>
<p>+ invalidMessage= "Invalid UoM.
Re-enter"+</p>
<p>+ trim="true"/>+</p>
<p></td></p>
<p>+<tr><td><label
for="ProcessOrder">Process Order:</label></td>+</p>
<p><td></p>
<p>+ <input
id="ProcessOrder" type="text"+</p>
<p>+
dojoType="dijit.form.NumberTextBox"+</p>
<p>+ name=
"elevation"+</p>
<p>+
promptMessage= "Enter a Process Order"+</p>
<p>+ required=
"true"+</p>
<p>+
invalidMessage= "Please enter a valid numeric Process Order"
/>+</p>
<p></td></tr></p>
<p>+<tr><td><label
for="MaterialQuantity">Material Quantity:</label></td>+</p>
<p><td></p>
<p>+ <input
id="MaterialQuantity" type="text"+</p>
<p>+
dojoType="dijit.form.NumberTextBox"+</p>
<p>+ name=
"elevation"+</p>
<p>+ value="1"+</p>
<p>+
constraints=""+
+
promptMessage= "Enter a valid Quantity between 1 and 20000"
+ required=
"true"+
+
invalidMessage= "Invalid Quantity. Re-enter" />+
</td></tr>
+
+
for="Date">Date: |
<td>
+ type="text" name="Date" value="2009-10-09"+
+
dojoType="dijit.form.DateTextBox"+
+
required="true" />+
</td></tr>
+
+
for="FunctionalLocation">Functional Location: |
<td></p>
<p>+<input type="text"
id="FunctionalLocation" size="30"+</p>
<p>dojoType="dijit.form.ValidationTextBox"
trim="true"
required="true"
regExp="\d[\-]\d[\-]\d (\-)\d"
+promptMessage="Enter Functional Location (NNNN-NNN-NN-NN)
following this format"+
invalidMessage="Invalid zip code (NNNN-NNN-NN-NN)."
/>
</td></tr>
</table>
</div>
</body></html>
This form is
easier to navigate, is easier for adding data, and is patient but firm about
accepting good data. Yet it takes only a few lines of JavaScript and some extra
HTML attributes. Dijit is a very powerful thing indeed!
<a name="_Toc243121861" title="_Toc243121861"></a>Getting Dojo
As Dojo is a client-side JavaScript toolkit, and its heart
lies in some well tuned JavaScript scripts. Technically, Dojo doesn't need a
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
official releases of the toolkit at http://dojotoolkit.org/downloads (http://dojotoolkit.org/downloads). Once you have downloaded Dojo, you might
initially be surprised that it's all not in one JavaScript file. A quick look
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.
