31 May 2007 - Google Gears
Google released a new interesting technology to enable Offline Web Applications called
Google GearsGoogle Gears consists of three modules:
- LocalServer: Cache and Serve application resources locally
- Database: store data locally in a relationable database
- WorkerPool: make your application more responsive by performing resource-intensive operations asynchronously
This combined with a server answering json requests makes a great development platform
Comments (0) -
Leave a Comment
11 February 2007 - Javascript form validation
Recently I was asked to change the form validation code for a couple of websites.
It was the occasion to rewrite from scratch the validation code of an old library I've been using for several years.
The library (
sgForms.js) depends on
prototype and is released under the
Mozilla Public Library. You can download
sgForms along with a simple
test page.
To use the form validators you have to include the prototype library and sgForms in the html page:
<script src="prototype.js"></script>
<script src="sgForms.js"></script>
Here's an example form to check:
<form name="testForm" id="testForm" method="GET" action="#" onSubmit="return checkForm();">
<label>email</label> <input type="text" id="email" name="email" value=""><br>
<label>field 1</label> <input type="text" id="one" name="one" value=""><br>
<label>field 2</label> <input type="text" id="two" name="two" value=""><br>
<label>CheckBox</label> <input type="checkbox" id="myCheck" name="myCheck" title="CheckBox" value="whatever"><br>
<label>regex</label> <input type="text" name="regex" value=""><br>
<input type="submit" name="clickme" value="Check Form">
</form>
Each form field must have an id. I use the onSubmit event to check the form validity and based on the result to stop the submit or continue.
Here's the checkForm function where we define the validation rules for each field and call a function in the sgForms library that performs the validation:
<script language="javascript">
<!--
function checkForm() {
var rules = {'email':['notEmpty', 'email'], 'one':['notEmpty'], 'two':['notEmpty'], 'myCheck':['isChecked']};
return sgFormValidateAlert(rules, 'it');
}
//-->
</script>
rules is a javascript object which is transformed into an hash (associative array) using protype. Rules contains the ids of the fields to validate and the rules to apply to each field.
- 'notEmpty' rule means a field is required
- 'email' applies a regular expression to check for a valid email
- 'isChecked' applied to a checkbox field verifies the field is checked
- other rules are 'float' and 'number' to check for a float or number value respectively
You can supply custom validators defining a rule such as:
'myField': [myRuleValidator]
where myRuleValidator is a functions of three arguments
myRuleValidator(field, fieldValue, lang)
- field is a reference to the field we are validating (I use it to build error messages together with lang)
- fieldValue is the value of field
- lang is the language for the error messages ('en' for english, 'it' for italian)
sgForms contains a basic validator (sgFormValidate) which performs the validation and returns an empty list if all fields validated correctly, or a list with the errors. On this I've built a sgFormValidateAlert wich calls sgFormValidate and returns the errors if present in an alert window. There are also sgFormsValidateBrString returning a <br> separated string of errors and sgFormsValidateString returning a '
' separated string of errors. However you can use sgFormValidate to present errors in the way you prefer.
I've already used the library on some sites and it seems to work fine. My next steps will be to add some validators (e.g. a regex validator) and to teach its use to web designers to see if it's easy enough to be used also by a non-programmer.
Comments (2) -
Leave a Comment
19 July 2006 - Francesco Facchinetti
A lot of time since the last entry in the blog. In this time I was quite engaged working on the new site of
Francesco Facchinetti (dj francesco).
I developed the dynamic pages of the site using
python as usual. In the site there's also a forum (phpbb) and soon a chat.
For the chat I'm planning to use the jabber protocol. I have a
ejabberd server and I'm planning to use
jwchat (a client written in html and javascript) to connect to the server.
Soon updates on the chat.
Comments (0) -
Leave a Comment
31 May 2006 - Narrative JavaScript
From lambda-the-ultimate:
Narrative JavaScript is a small extension to the JavaScript language that enables blocking capabilities for asynchronous operations. This makes writing asynchronous code sequences easier and increases code readability.
It provides on the client side what continuation based web frameworksdo on the server side. Instead of manually splitting up your code intocallbacks and handlers for events, setTimeout, XMLHttpRequestcallbacks, etc you write your code in a sequential manner.
The code is CPS transformed and the continuations at the point of useof the new operator are used for the callbacks - allowing continuationof the function when done.
Comments (0) -
Leave a Comment
23 May 2006 - Sahi Web automation and testing tool tutorial [flash]
Sahi is an automation and testing tool for web applications, with
the facility to record and playback scripts.
Developed in java and javascript, this tool uses simple javascript
to execute events on the browser.
View the Flash tutorial.
Comments (0) -
Leave a Comment
10 May 2006 - Scheme Implementation in Javascript
A
scheme implementation written in javascript.
Read the article in the Bluish Coder blog.
Comments (0) -
Leave a Comment
2 March 2006 - Javascript Form Validator
One of the most common tasks in a web handling application is form field validation (e.g. checking that some fields are filled, correct email values, ecc...).
This is a tedious and repetitive task, so being a lazy programmer I tried to simplify and automatize it.
I had an old js library handling this task, used also by graphic designers wi th a litle training.
Recently I rewrote completly the code to improve it.
Here's what I came up with.
Note: this is the first rewrite. The code is evolving, so what is written in this blog entry may not correspond exactly to the software interfaces.
In the zip you find the library, and an html file containing an example. Let's see how the library is used. First of all here's the call to the validation function:
sgCheckForm('frmName', {callback: test(document.frmName.regex, /regex/), email: 'email', notEmpty: ['one', 'two']});
This is the function to call before the form is submitted. The first argument ('frmName') is the name of the form to validate. The second argument is an object containing the rules form the form validation. An optional third argument supplies the language used for error messages if a field is not valid.
The rules object can contain the following properties (more coming soon):
The value of each property can be a string containing the name of the field to validate or a list of strings one for each field to validate using the rule represented by the property name. In case of callback rules, the value is either a function to call, or a list of functions. The use of callback rules leaves a great deal of freedom to the user to define custom rules. In the example you see a callback that check a form field against a Regular Expression. Since this is a quite common task regex will soon become one of the predefined validator rules.
When a validator is called it checks his rule against the field specified. If the field value is not valid, an error message is displayed a false value is returned and validation is stopped. If all fields are valid the true value is returned, so the form can be submitted.
The library uses functional programming techniques as closures and forst class functions to get some flexybility. The same results could be ottained using an object oriented approach, but as you can see also from other entries in the blog I tend to prefer the functional approach.
The library can be improved a lot. It needs more default validators, error checking, better error message customization, etc... So comments and suggestions are wellcome.
Comments (0) -
Leave a Comment
21 February 2006 - Javascript Closures
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
An easier way to define closures is using the words of Paul Graham in On Lisp: "Closures are functions with local state".
Let's see a classical example:
function adder(n) {
function inner(x) {
return x+n;
}
return inner
}
Function adder takes an argument and returns a closure where the variable n is bound at the time the function is defined. So we can call adder many times and get different closures whose behaviour depends on the binding of n:
var adder2 = adder(2);
var adder10 = adder(10);
alert(adder2(5)); //alerts 7
alert(adder10(5)); //alerts 15
Closure are a powerfull and elegant tool in a programmer's toolbox. I find myself using them for a lot of different things from defining callback functions, to easy refactoring of code, define control structures, to customize function behavior by passing closures as arguments.
For me they are invaluable, so I'll be back on them soon.
Comments (0) -
Leave a Comment
22 July 2005 - Very Dynamic Web Interfaces (or Ajax before it was called Ajax)
Howto build dynamic web interfaces using XMLHttpRequest.
An article explaining the use of XMLHttpRequest before the word Ajax was introduced.
Comments (0) -
Leave a Comment
