Skip to main content

Learning Dojo: Improved Form Controls

Validating Fields
Client-side data validation is win-win: it helps you by keeping the data clean and helps the user by giving immediate, targeted feedback.

We need some data cleaning, so let's start with the fields on the Personal Data tab. First start with a regular <input> or <textarea> tag.

Add a dojoType= arrtibute of dijit.form.ValidationTextBox. Then add validations and filed-cleansing attributes:

<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" dojoType="dijit.form.ValidationTextBox" trim="true"
propercase="true" required="true" size="30" missingMessage="You must enter your first name" /><br/>

And don't forget to add dojo.require to the header:
dojo.require("dijit.form.ValidationTextBox" );

These extra attributes do an incredible amount of work:

  • required="true" makes the field required, of course. When the field is blank, the background is colored yellow, as is the case with any erroneous fields. 
  • trim="true" automatically removes leading and trailing spaces in the input.
  • Propercase="true" is similiar to trim. When the box loses focus, the first Letter is capitalized, and the rest are lowercased.
In a similar vein, we can validate the email address with ValidationTextBox's regular expression option:
<label for="email">Email:</label>
<input type="text" name="email" id="email" size="30" dojoType="dijit.form.ValidationTextBox" regExp=".*@.*" />

In our case, .*@.* matches all strings with any prefix(including an empty string), then @, and then any suffix.


Or using this: 
<input id="email" name="email" data-dojo-type="dijit.form.ValidationTextBox"
    data-dojo-props="validator:dojox.validate.isEmailAddress,invalidMessage:'This is not a valid email!'"     />

Easier Date Entry
<label for="date_move">Date of Move to this Address:</label>
<input type="text" name="date_move" id="date_move" size="11" 
dojoType="dijit.form.DateTextBox" /><br/>



Comments

Popular posts from this blog

Stretch a row if data overflows in jasper reports

It is very common that some columns of the report need to stretch to show all the content in that column. But  if you just specify the property " stretch with overflow' to that column(we called text field in jasper report world) , it will just stretch that column and won't change other columns, so the row could be ridiculous. Haven't find the solution from internet yet. So I just review the properties in iReport one by one and find two useful properties(the bold highlighted in example below) which resolve the problems.   example:
<band height="20" splitType="Stretch"> <textField isStretchWithOverflow="true" pattern="" isBlankWhenNull="true"> <reportElement stretchType="RelativeToTallestObject" mode="Opaque" x="192" y="0" width="183" height="20"/> <box leftPadding="2"> <pen lineWidth="0.25"/> …

JasperReports - Configuration Reference

Live - solving the jasper report out of memory and high cpu usage problems

I still can not find the solution. So I summary all the things and tell my boss about it. If any one knows the solution, please let me know.


Symptom: 1.The JVM became Out of memory when creating big consumption report 2.Those JRTemplateElement-instances is still there occupied even if I logged out the system
Reason:         1. There is a large number of JRTemplateElement-instances cached in the memory 2.The clearobjects() method in ReportThread class has not been triggered when logging out
Action I tried:      About the Virtualizer: 1.Replacing the JRSwapFileVirtualizer with JRFileVirtualizer 2.Not use any FileVirtualizer for cache the report in the hard disk Result: The japserreport still creating the a large number of JRTemplateElement-instances in the memory     About the work around below,      I tried: item 3(in below work around list) – result: it helps to reduce  the size of the JRTemplateElement Object                Item 4,5 – result : it helps a lot to reduce the number of  JRTemplateE…