Skip to Content

h2. Introduction

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.

 !https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image001.jpg|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image001.jpg!

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.

 !https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image002.jpg|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image002.jpg!

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.sap.com/weblogs/images/251795964/clip_image005.jpg!

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 +(NNNNNNNNNNN). +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.

!https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image008.jpg|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251795964/clip_image008.jpg!</body>

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply