Home

Behaviour et DOMBuilder : le duo gagnant

Submitted by PiTiLeZarD on Mon, 06/12/2006 - 11:17
Tagged:

En javascript on peut tout faire et tout refaire... On peut surtout perdre un temps dingue a faire des choses et à les rendre compatible par après...

C'est pourquoi je priviligie les framework qui font des choses simples mais qui se sont attelés à les faire bien et propre ! On bénéficie ainsi de tout le temps de développement ainsi que de tout le temps de débugage !

DOMBuilder est un petit outil rapide et léger permettant de construire aussi rapidement des éléments HTML. C'est très intuitifs, très pratique et c'est un outil redoutable quand on commence a faire des applis dynamique ...

Behaviour quant à lui, s'attèle a connecter des lien entre les éléments et des fonctions ... Il le fait d'une façon très particulière ! A la manière d'une feuille de style CSS. Pour ça, le découpage codehtml/javascript est parfait, évolutif et bien plus maintenable ...

Un exemple concret ? On veut faire un petit formulaire qui paye pas de mine mais qui permette d'ajouter autant d'adresses mail qu'on veut ... Je l'ai fait en 1h top chrono, comprenant le temps de comprendre comment utiliser ces deux API ...

Voici le code html original (ce qui permet également de modifier les emails si on initalise les deux champs hidden correctement!)

<html>

	<head>
		<title>Test emails</title>
		
		<script type="text/javascript" src="dombuilder.js"></script>
		<script type="text/javascript" src="behaviour.js"></script>
		<script type="text/javascript" src="scripts.js"></script>
	</head>

	<body>
	
		<form id="formEmails">
			<input type="hidden" name="emails" id="emails" value="email-1" />
			<input type="hidden" name="emailsCounter" id="emailsCounter" value="1" />
			<div class="field"><label for="email-1">Email</label><input type="text" size="35" maxlength="35" name="email-1" class="input" value="Test" /></div>
			<div class="field" id="afterLastEmail"><label for=""></label><input type="button" class="button addEmail" value="add" /></div>
		</form>
	
	</body>
	
</html>

Et voici le fichiers scripts.js qui n'a que deux liens: les add et les dels ! c'est tout bête ça ajoute un nouvel élément, en cherchat d'abord ou l'ajouter puis en créant un nouveau div (regardez avec quelle facilitée) :

var getSource = function(event) {
	if (!event) var event = window.event;
	
	var targ;
	if (event.target) targ = event.target;
	if (event.srcElement) targ = event.srcElement;
	if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
	
	return targ;
}

var rules = {

	'input.addEmail': function (elt) {
		elt.onclick = function(event) {
			
			var form = document.getElementById('formEmails');
			var fields = form.getElementsByTagName('div');
			var last = fields[fields.length - 1];
			var emailsCounter = document.getElementById('emailsCounter');
			++ emailsCounter.value;
			var name = 'email-' + emailsCounter.value;
			var newEmail = DIV({'class': 'field'}, 
					LABEL({'for': name}, 'Email'), 
					INPUT({'type': 'text', 'name': name, 'value': 'text', 'size': '35', 'maxlength': '35'}), 
					INPUT({'type': 'button', 'value': 'del', 'class': 'button delEmail'})
			);
			form.insertBefore(newEmail, last);
			
			var emails = document.getElementById('emails');
			emails.value += (';' + name);
			
			Behaviour.apply(rules);
		}
	},
	
	'input.delEmail': function (elt) {
		elt.onclick = function(event) {
			var emails = document.getElementById('emails');
			var div2delete = getSource(event).parentNode;
			var name = div2delete.getElementsByTagName('input')[0].name;
			
			div2delete.parentNode.removeChild(div2delete);
			
			var list = emails.value.split(';');
			var newList = new Array();
			for (i = 0; i < list.length; i++) {
				if (list[i] != name) {
					newList.push(list[i]);
				}
			}
			
			emails.value = newList.join(';');
		}
	}

}

DomBuilder.apply(window);
Behaviour.register(rules);