Making a translatable login form
by Will Riley

Today I’m going to show you how to use dojo’s built in translation system. For this example, I’m going to make a simple login form widget, that we can translate into both english and spanish (and other languages, if we choose). This form will also validate what the user puts into the form, and inject what the user inputted into the translated text itself.

We’ll start off by making the following directory structure:

/dojotoolkit/login/
/dojotoolkit/login/Form.js
/dojotoolkit/login/Form.html
/dojotoolkit/login/nls/
/dojotoolkit/login/nls/Form.js
/dojotoolkit/login/nls/es/Form.js

Writing the translations

The first thing we should do is do our translations. /dojotoolkit/login/nls/Form.js will contain the default translation, which in most cases will be english.

({
	"submit": "Submit",
	"username": "Username:",
	"password": "Password:",
	"invalidUsername": "The username \"%s\" is not valid"
})

And in /dojotoolkit/login/nls/es/Form.js we’ll put our spanish translation. (sorry for my horrible translations, my spanish is rusty)

({
	"submit": "Envie",
	"username": "Nombre de usuario:",
	"password": "Contraseña:",
	"invalidUsername": "El nombre de usuario \"%s\" no es válido"
})

Making the template

Ok, so now we’ll make our template in /dojotoolkit/login/Form.html

<form class="dijitLoginForm" dojoAttachEvent="onsubmit:_onSubmit">
	<div class="dijitLoginError" dojoAttachPoint="errorNode"></div>
	<div class="dijitLoginLabel" dojoAttachPoint="usernameLabelNode"></div>
	<div class="dijitLoginInput"><input type="text" dojoAttachPoint="usernameInputNode" /></div>
	<div class="dijitLoginLabel" dojoAttachPoint="passwordLabelNode"></div>
	<div class="dijitLoginInput"><input type="password" dojoAttachPoint="passwordInputNode" /></div>
	<div><input type="submit" class="dijitLoginSubmit" dojoAttachPoint="sumbitButtonNode" /></div>
</form>

You’re probably noticing that I didn’t put any text in. I did this on purpose, you’ll see why in a little bit.

Making the dojo declaration

So now we’re going on to making our actual javascript declaration in /dojotoolkit/login/Form.js

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.parser");
//first thing we need to do is load the translations
dojo.requireLocalization("login", "Form");
 
dojo.declare("login.Form", [dijit._Widget, dijit._Templated], {
	action: "",
	method: "POST",
	postCreate: function() {
		//Now, we need to get the translations
		var nls = dojo.i18n.getLocalization("login", "Form");
		//now, the nls variable contains all of our translations.
		//We can put the translations in the right place now.
		this.usernameLabelNode.textContent=nls.username;
		this.passwordLabelNode.textContent=nls.password;
		this.submitButtonNode.textContent=nls.submit;
	},
	_onSubmit: function(e) {
		//get our translations first...
		var nls = dojo.i18n.getLocalization("login", "Form");
		//ok, so for validation we're just going to say that
		//if the username has spaces in it, don't submit it,
		//and alert the user that their username is incorrect.
		if(this.usernameInputNode.value.indexOf(" ") != -1) {
			//ok, we need to replace the '%s' in the translation with the inputted username
			this.errorNode.textContent = nls.invalidUsername.replace("%s", this.usernameInputNode.value);
			dojo.stopEvent(e);
			return false;
		}
		else
			this.errorNode.textContent = "";
	}
});

Testing

To test our new widget, we’ll make a simple login page. (I’m thinking of a particular Jonathan Coulton song right now)

<html>
	<head>
		<title>i18n Forms</title>
		<script type="text/javascript" src="dojotoolkit/dojo/dojo.js"></script>
		<script type="text/javascript">
			dojo.require("login.Form");
		</script>
	</head>
	<body>
		<form dojoType="login.Form" action="./somePage.php" method="POST"></form>
	</body>
</html>

Normally, dojo will automatically detect which translation it should use based on the browser’s locale settings, however, we need to test our spanish translations. To force dojo to do this, simply add this to the dojo’s script tag:

<script type="text/javascript" src="dojotoolkit/dojo/dojo.js" djConfig="locale:'es'"></script>

Making more translations

You can create more translations by copying /dojotoolkit/nls/Form.js into another directory, /dojotoolkit/nls/ja/ for example, and putting japanese translations into it.

And that’s how to make translatable widgets using dojo’s i18n system.

Tags: , , , ,

This entry was posted on Wednesday, April 23rd, 2008 at 9:05 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Making a translatable login form”

  1. seth Says:

    Your translations have a typo in them. It should be ‘password’ and not ‘passowrd’

  2. Laplix Says:

    Another typo: dojoAttachPoint=”sumbitButtonNode” should be dojoAttachPoint=”submitButtonNode”

Leave a Reply

You must be logged in to post a comment.