You may have noticed a small change in the Form Builder this week. You can now use 11 different styles for your web forms. A new stylesheet was kindly contributed by Patrick McNeil from Design Meltdown. The other additions are simple variations on the existing styles.

Here are some examples:

• “Black” theme with left aligned labels.
• “Black (alt)” theme with labels on top.
• “Bureaucrat (tooltip)” theme. To see the tooltip, click on the email field.

This update is a transition step toward a more flexible tool to manage the look&feel of your web forms. This tool will be available in the next release of the Form Builder later this year.

Feel free to leave a comment if you have any suggestions or problems with the look of your web forms. If you would like to contribute a stylesheet, please visit the Form Garden.

The purpose of this (small) update was to improve the form outline displayed on the left (the treeview). I rewrote the entire drag&drop functionality and added the possibility to expand/collapse form sections.

Give it a try and share your comments here. Thank you!

At the time I started working on the drag&drop feature I couldn’t find any good javascript library capable of sorting nested lists, so I ended-up writing my own. It’s now available as open-source (but not yet bug free).

The lastest version of the script.aculo.us library offers this functionality as well, so if you’re already using prototype, this is a good alternative.

Credits: some icons used in the form builder are courtesy of famfamfam.

wForms is a javascript library that enhances the web form experience without the need for any programming. If you’re not familiar with wForms, here’s a short overview of what it can do:

• show / hide conditional sections based on answers to multiple-choice questions;
• highlight contextual information when a field is in focus;
• validate fields and show appropriate error messages (available in 17 languages);
• repeat form fields;
• and simulate multi-page forms

wForms allows you to make your forms simpler, shorter and ultimately easier to fill out. It is also unobtrusive. If for some reason wForms doesn’t run in someone’s browser - javascript turned off for instance - your form will still work.

wForms 2.0 has improved supports for Mac browsers, a tighter and faster code and is also more modular, paving the road for further enhancements. I will be posting more specific information about the new features in the coming days.

In the meantime you can download it, read more about it and post your feedback here in the comments, or in the support forum.

wforms, web development

February is over and so far so good, the Form Assembly is on track. Over the last month a number of new features have been released: charts, an improved form builder, video tutorials and a spam/junk filter on the form processing service.

March is going to be hectic. First I’ll be presenting the Form Assembly at the Under The Radar Conference, in Mountain View, CA. Thanks a lot to Debbie Landa for the invitation! I’m looking forward meeting the other presenters and some of the best known people in the industry.

(On a side note, March 2nd will officialy put an end to 3 straight years without wearing a tie…)

Then I’m flying off to SXSW. If you happen to be there too and see a tall guy with an incomprehensible french accent, stop and say bonjour!

And before the month’s end, I’ll be off to some snowy slopes near Montreal. In between I hope to release wForms 2.0, the long planned update to the open-source javascript library for web forms.

Technorati Tags: Ajax, UnderTheRadar, Web2.0, wForms

If you’ve been following the whole Ajax thing for a while, you’ve certainly seen this few lines of code hundreds of times. You know, the ones that check the readyState and status properties of a xmlHttpRequest.

    if (req.readyState == 4) {
        if (req.status == 200) {
            // ...processing...
        } else {
            alert("There was a problem retrieving the XML data:n");
        }
    }

The status is the HTTP code returned by the web server (here 200, meaning that everything went fine). Normally, the status code is part of the private conversation between the browser and the web server. You don’t have to worry about it, unless of course you encounter the dreaded 404 Page Not Found.

Things change when you start developing Ajax-style with XmlHttpRequest. You are basically by-passing the browser native handling of HTTP and left dealing with the status code on your own. And, that’s a great opportunity. Why ? Because you can
use it to relay information about the execution of your server-side scripts.

The HTTP protocol defines many status codes. For a web developer some of the interesting ones are:

• 200 Ok
• 201 created
• 400 bad request
• 403 forbidden
• 500 internal server error

Most server-side scripting languages will let you modify the http response header and set just about any status code. For instance in PHP, if you were processing a request that looked suspicious (a tempered query string?) you could do:

< ?php
header('HTTP/1.0 400 Bad Request');
die('sorry, the execution failed for some reason..');
?>

If you are processing a login/registration form, you could use header('HTTP/1.0 200 Ok') for a successful login, header('HTTP/1.0 201 Created') if a registration was ok and an account was created, and maybe header('HTTP/1.0 403 Forbidden') for a wrong password or if the username was already taken.

Back to the javascript code, here’s now a smarter response handler for the authentication example.

switch (req.status) {
    case 200:
            // login ok, moving on...
            break;
    case 201:
            // was a registration.. will show a welcome message.
           showWelcomeMessage(req.reponseText);
           break;
    case 403:
           // authentication problem. The error message is in responseText
          showErrorMessage(req.responseText);
          break;
    default:
         // unknown error
         alert("There was a problem..");
    }

Remark: Safari will return a ‘undefined’ status code if the response content is empty, so make sure to have at least a space in the response (using echo "" in PHP for instance).

That’s it! Happy coding in 2006.

Background

Since I started working on the Form Builder, almost a year ago, I’ve adopted a radically different approach to web development. At that time, I had firmly embraced the concept of separating structure from presentation using valid XHTML and CSS. The next logical step was for me to catch up with the experienced web developers who preached the separation of data, business logic and presentation. The Model-View-Controller pattern was (and still is) big, but I was more impressed by the REST philosophy and the Service-Oriented Architecture style.

I gave a shot at building an application - the form builder - that would follow these principles. Coded in Javascript, it runs on the client and deals with web services using asynchronous HTTP GETs and POSTs. I found that writing REST services was dead simple. It’s like writing a regular server-side script but it doesn’t need to spit out a HTML page. You just output some HTTP headers and either plain text or a XML string.

Now, since the web services didn’t provide HTML, the client - the web browser - had to create it on its own. XSLT was the perfect candidate. It was a web standard and it was supported by 90% of the browser market (IE5+, Netscape 7+ / Mozilla).

By the time I had the Form Builder working, the Ajax term was coined and I was able to put a name on what I was doing.

Fast forward 10 months: more browsers now support XSLT and XMLHTTPRequest (Opera 9, and Safari - somewhat - ). The Form Builder is now at version 2.0 and so is the Time-Tracker - a small app that started as a proof-of-concept.

But it’s time to introduce Freja.

Framework

Freja is the fruit of this learning process. It is a lightweight and simple Javascript framework that facilitates the development of single-screen, zero-latency web applications.

It isn’t yet-another-Ajax-framework. It does things that no other Ajax tool does and it doesn’t do what most others do. It’s a companion for libraries like prototype and maybe for more complex frameworks like Dojo.

Freja stands for ‘Framework for REstful Javascript Applications’. At its core it’s a XML / XSLT engine, but it’s all abstracted into the Model-View-Controller pattern.

• A model is a XML document obtained from a URL (could be a web service or just a flat file).
• A view is a XSL template obtained also from a URL.
• The controller is the javascript code. Freja provides a set of convenient (did I say elegant?) functions for retrieving, rendering, updating and saving the models.

Learn More

Visit Freja’s home site for Documentation, Tutorials and download.

Technorati Tags: Ajax, Freja, REST, Web Development, Javascript

So, you’ve just tied up the loose ends and your project is finally ready to be introduced to the world. It could be a web application, a new website, or well, whatever it is, you feel it shouldn’t go unnoticed.
Here’s 10 tips that will (maybe) put you and your work in the spotlight.

1. Blog about it. There’s no way around it. Get yourself a blog if you don’t have one already and start talking about what you do.
2. Configure your blog software correctly:
   • Use relevant, keyword-based categories.
   • Make sure the permanent addresses for your posts (permalinks) contains the category and/or the post title.
   • Make sure your blog is configured to ping update services (like pingomatic.com)
   • Register your blog with Technorati
3. Take advantage of the social bookmaking sites. By creating an account and bookmarking your own website you’ll get some visibility for a short time. Don’t abuse or spam the system, it will hurt you and is completly unnecessary. Your visibility will go up as other people notice and bookmark your site.
4. Follow the trends using Technorati and Del.ici.ous. You’ll find that sites who maintain directories regularly pop up among the most popular sites. They will be interested in listing you, as long as your work matches their theme. If they haven’t noticed you yet, drop them an email. Some sites even allow public post.
5. Comment on other people’s blogs. Dont’ try to pitch your website, just write if you have something relevant to say. Most comments systems will let you enter a website address in your signature. Use it and count on the curiosity of the readers, they’ll want to know who you are…
6. Make it easy for other bloggers to post about your work. Provide on your site a visible and short description of what your work is about. Bloggers are lazy and they will gladly reproduce your text as is
7. Do your homework and make sure your site is Search Engine friendly. Learn about Search Engine Optimization (SEO). It will help you in the long run.
8. Check your site stats. Find out who’s linking to you, returns the favor if appropriate (thank you emails are ok too). Follow up on emails and discussions. Show the motivated human being behind the work.
9. Write an article and try to get it published on one of the numerous webzines. If it doesn’t work out, you can always reuse the material on your own blog.
10. Write 10 tips about what you have learnt in the process. People love tips.

Technorati Tags: tips, web

I added a couple more CSS stylesheets to the Form Garden.

• timetrack is based on the look & feel of the time-tracker application.
• black is, guess what, a black variation of the stylesheet above.

Usage Remarks

All stylesheets in the Form Garden are free and should work with any web form.

The stylesheets are designed for forms built with semantic HTML (using tags like <label>, <fieldset>, <legend>, etc…)

The CSS also styles wForms related elements :

• .field-hint (instructions showing after a field)
• .errFld (field with a validation error)
• .errMsg (message reporting the validation error)
• .duplicateLink, .removeLink (links generated by wForms’ Repeat behavior)
• etc..

If you don’t use wForms, you can remove these definitions from the stylesheet.

CSS Conventions

Additionally, here are some of the conventions I adopted to allow for better control over the styling of a form.

• The label position, relative to the field, is indicated by the classes .preField and .postField. For instance:
  Field Label
  <label class="preField" ... >Field Label</label> <input type='text' ... />
  
  
  Field Label
  <input type='checkbox' ... /> <label class="postField" ... >Field Label</label>
• The primary action of a form, usually the submit button, is differentiated from less important actions (like cancel) by the use of the .primaryAction and .secondaryAction classes. The style for the .primaryAction class usually has a stronger visual weight (bolder or larger font for instance).

One last tip…

Vertical alignment of several fields can be achieved by using the width and inline-block CSS properties:
.preField {
display: -moz-inline-box; /* inline-block for firefox */
display: inline-block;
width: expression('7em'); /* Min-width for IE6 */
min-width: 7em;
}

Note: The CSS shown accounts for browser discrepancies

CSS, Web Form

One of the feature I decided early on to include in the Time-Tracker application was a type-ahead tool, akin to the famous Google Suggest. You can take a look at the old demo do get an idea of what I’m talking about.

After just a few weeks into the development of the Time-Tracker, the Type-Ahead script was ripe for refactoring. I needed a way to handle private suggestion lists as well as shared lists. I also wanted to use the same Type-Ahead object for several input fields.

The new version now runs smoothly in the Time-Tracker. Here’s how to use it in your own projects (licensed under the CC-GNU LGPL).

Source Files

• Client-side javascript: typeahead.js
• PHP script: srvc-type-ahead2.php

Writing the server-side script in a different language is quite trivial. You’re welcome to share your version in the comment form below (or send me a mail).

Usage Notes

Add the following javascript code to your page to add the Type-Ahead behavior to any text field.

/* Wait for the page to finish loading */
XBrowserAddHandler(window,'load', function() {

/* Instanciate the TypeAhead object */
var typeAhead = new TypeAhead('listName', 'groupName');

/* Assign the TypeAhead Object to an input field */
typeAhead.initInput('inputFieldID');

} );

The listName / groupName pair identifies the list of suggestion in the database. If you omit the groupName parameter the list will be shared by everyone. If you set the groupName to something unique, like a username or userid, you’ll have a distinct list per user (or group, whatever…).

The second line binds the object to an input field. As a reference, here’s the HTML markup for the input field. Note that the value of the id attribute is the one used in the binding above.
<input type="text" id="inputFieldID" name="..." ... />

The Type-Ahead object can be binded to only one input at a time, but it can be reassigned to a different field easily and quickly, for instance when the field gets the focus:

document.getElementById('inputFieldID').onfocus = function() {
typeAhead.initInput('inputFieldID') };
document.getElementById('anotherFieldID').onfocus = function() {
typeAhead.initInput('anotherFieldID') };

Database Structure

The ‘USER’ column has been added to the SUGGESTIONS table since the last version . Here’s the SQL statement for MySQL:

CREATE TABLE `SUGGESTIONS` (
`ID` int(11) NOT NULL uto_increment,
`FIELD_ID` varchar(100) NOT NULL default '',
`VALUE` varchar(255) NOT NULL default '',
`USER` varchar(255) NOT NULL default '',
`FREQUENCY` int(11) NOT NULL default '1',
PRIMARY KEY (`ID`))
TYPE=MyISAM AUTO_INCREMENT=1 ;

You’ll need to create a database with this table and change the connection settings in the PHP file (database name, username and password).

Browsers Supported

The type-ahead functionality works with IE5.5+, Safari 1.2+, Gecko-based browsers (Firefox, Mozilla, Netscape 7+, … ) and Opera 7+(*).

(*) Prior to Opera 8.1, user inputs are not recorded in the database.

Note: Comments are now closed. Please visit the discussion board if you want to discuss the subject of this post. Thank you.

Technorati Tags: Ajax, Suggest

On most recent browsers, you can use a non-rendered DOM Document to load, hold and modify the data of your web application. So far, I’ve been using the Sarissa wrapper to get a simple, unified syntax that works for Gecko-based browsers (Firefox..) and Internet Explorer. Unfortunately Opera and Safari were left out.

Today I’ll show how you can extend support to Opera by using its implementation of the DOM 3 Load & Save specifications.

In short, here’s what we’re trying to do:

1. Instantiate a non-rendered DOM Document.
2. Populate the document with XML data loaded asynchronously from the server.
3. Use regular DOM Scripting to store and update application data in the document.

The code


if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature('LS', '3.0')) {
var domDoc = null; // will hold our XML
var parser = document.implementation.createLSParser(document.implementation.MODE_ASYNCHRONOUS,null);
parser.addEventListener("load", loadHandler , false);
try {
parser.parseURI('/time-tracker/srvc-tracker.php?taskId=0');
} catch (e) {
alert('error:'+e.code);
}
function loadHandler(e) {
domDoc = e.newDocument;
}
}


The ‘Load & Save’ parser (LSParser) instantiates the DOM Document and takes care of the asynchronous load. The document can be retrieved, once the loading is complete, in the event’s ‘newDocument’ property.

At this point you can use any DOM Scripting method to access and modify the data. See my previous post for more details.

If you need to serialize the document back to a string, use:

var serializer = document.implementation.createLSSerializer();
var xmlstring = serializer.writeToString(domDoc);
alert(xmlstring);


Note: Code samples for a synchronous load can be found on molily’s site (in german) and on Grauw’s web spot.

Technorati Tags: Opera, Load and Save, Ajax