Des webapps suivant le modèle Android ICS

En parallèle de la mise en place d’une maquette de webapp pour mes projets personnels, j’ai récemement développé un début de maquette pour permettre de développer des webapps à la manière Android ICS (4.0 – Ice Cream Sandwich).

A l’heure actuelle, la maquette ne propose qu’un nombre limité de fonctionnalités à savoir :

  • Header android ICS Bleu
  • Menu latéral
  • Options de l’application
  • Blocs à la Google Now

L’objectif étant à terme d’arriver à proposer une maquette beaucoup plus complète, avec notamment

  • Indicateur de chargement Fait
  • Header dans les autres couleurs ICS Fait
  • Onglets Fait
  • Gestion des formulaires
  • Toute suggestion pertinente qui sera proposée.

Le projet est partagé en open source sur Github, n’hésitez pas à ajouter votre pierre à l’édifice et récupérer les sources pour vos propres développements !

Pour un premier aperçu des fonctionnalités, voici quelques captures d’écran :
Webapp Android - page par défaut

Webapp Android - menu latéral

Webapp Android - options

Edit 12/07/2013 : La démonstration online est maintenant disponible ici.

Publicités

Mettre en place un placeholder et son failback

Le HTML5 apporte un nouvel attribut aux champs input text et assimilés : placeholder.

Le principe de cet attribut est simple : lorsqu’un champ est vide, on affiche un texte de remplacement pour indiquer ce que doit contenir le champ. Il est très utilisé au niveau applicatif, comme dans l’omnibar de Firefox par exemple :

Placeholder de l'omnibar de Firefox

Le HTML5 nous permet de l’utiliser nativement. Cependant, cet attribut n’est pas encore disponible sous tout les navigateurs. L’objectif fixé par cet article est de mettre en place le système ainsi qu’un bon failback.

Pour effectuer tout ceci, j’utiliserais jQuery. Le script peut bien entendu être étendu à tout les framework, et je vous invite à mettre en commentaire le système avec d’autres systèmes.

Si l’on veut faire simple et tout gérer en JavaScript, il suffit d’écrire un code tel que le suivant :

$('input[type="text"]').blur(function() {
	if (this.value == '') {
		this.value = this.defaultValue;
	}
}).focus(function() {
	if (this.value == this.defaultValue) {
		this.value = '';
	}
})

Ce modèle présente une limitation, mais nous verons ça plus tard.

Le premier point à mettre en place est la reconnaissance de la présence du placeholder. On va ici utiliser la même méthode que Modernizr :

var input = document.createElement('input');
if (!('placeholder' in input)) {
	// Faire ici le traitement pour les navigateurs ne reconnaissant pas le placeholder
	// Il suffit d'y placer le code précédent par exemple !
} else {
	// On supporte le placeholder : on vide la valeur par défaut
	$('input[type="text"]').val('');
}

Et voilà, le système est en place et il suffit de mettre en application le placeholder sur le champ input :


Aller plus loin :

Les plus perspicaces vont tout de suite remarquer la limitation de cette méthode : Obligation de vider la valeur du champ de formulaire, dont pas de valeur par défaut possible, Impossible de rentrer le même texte que le placeholder, …

On peut aussi parler du l’interdiction du JavaScript, mais je considèrerais cela comme un détail sans importance : les plus grands sites (gmail, facebook, …) obligeant à l’utiliser, j’ommetrais les visteurs récalcitrants.

Les problèmes exposés, attaquons la première amélioration :

Afin d’éviter les problèmes de valeurs par défaut, je vais utiliser la trop peu connue fonction de jQuery data.

$('input[type="text"]').each(function () {
	var $this = $(this);
	var $default = $this.data('placeholder');
	if ($default === undefined) {
		return;
	}
	$this.data('placeholderactive', true);
	$this.focus(function () {
		if ($this.data('placeholderactive') === true && $this.val() == $default) {
			$this.val('').removeClass('placeholderactive').addClass('placeholderinactive');
			$this.data('placeholderactive', false);
		}
	}).blur(function () {
		if ($this.data('placeholderactive') === false && $this.val() == '') {
			$this.val($default).removeClass('placeholderinactive').addClass('placeholderactive');
			$this.data('placeholderactive', true);
		}
	}).val($default).removeClass('placeholderinactive').addClass('placeholderactive');
});

Et son nouveau champ input associé :


Pour mettre un style différent sur le champ placeholder, j’ai utilisé deux classes : placeholderactive et placeholderinactive qui s’occupent respectivement d’avoir un style en mode « placeholder » et un style hors de ce mode.

A vous de jouer et d’implémenter ce nouvel attribut HTML5 sur vos site !

N’hésitez pas à partager vos méthodes pour les autres framework JS ou les améliorations à apporter à mon script jQuery.