Bookmarklet : injecter dojo dans n’importe quelle page internet

Il peut être parfois utile d’injecter dojo directement dans une page existante. Pour, par exemple, récupérer des informations, extraire du contenu, modifier le style de  la page, etc…
Pour ce faire, voici un petit bookmarklet qui injectera la version 1.9.1 de Dojo.

Installer le bookmarklet

Pour installer le bookmarklet, faites simplement glisser le lien suivant dans vos marques-pages : Injecter dojo 1.9.1

L’utiliser

Une fois installé, l’utilisation est simple. Il vous suffit de charger n’importe quelle page web et de cliquer sur le marque-page que vous venez d’ajouter.
Dojo sera alors dispoinible dans cette page.

Le code complet du bookmarklet

Le code est tout simple et en tant que développeur JavaScript, vous n’aurez aucun mal à le comprendre :

javascript:(function(){var s=document.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js';document.getElementsByTagName('head')[0].appendChild(s);})()
Tagués avec : ,
Publié dans astuces

HighCharts : Dojo Adapter

Pour ceux qui ne connaissent pas, Highcharts est une librairie très complète écrite en pure JavaScript et permettant de générer des graphiques.

Elle offre un des graphs intuitifs et interactifs.

Highcharts supporte de nombreux formats de graphs : line, spline, area, areaspline, column, bar, pie et scatter.

Cette librairie fonctionne nativement avec jQuery, mais est conçut pour s’interfacer avec d’autres libraires, en utilisant un Adapter.

Les releases actuelles (Highcharts 2.2.1Highstock 1.1.5) sont livrées avec un adapter Mootools et Prototype mais rien pour Dojo…

Alors… Je m’en suis occupé.

Vous pouvez trouver l’adapter sur GitHub : https://github.com/ben8p/highcharts-dojo-adapter

Tagués avec :
Publié dans code

Dojo version 1.6

 

Depuis le début de l’année 2011, deux versions de DojoToolkit sont sorties : la version 1.6.0 et la version 1.6.1.

 

Principales nouveautés et changements de la version 1.6.0

 

Navigateurs supportés

Il n’y a pas de changement par rapport à la version 1.5 excepté pour Chrome où l’on passe de la version 5 à la version 8 :

  • Firefox 3.6
  • Safari 4/Safari 5 and Chrome 8
  • IE6, IE7, IE8
  • Opera 10.50 and later (Dojo core seulement)

 

AMD

Préparation au support de AMD( Modules/AsynchronousDefinition). Cette fonctionnalité sera effective dans la version 1.7.

 

djConfig

L’utilisation de la variable djConfig n’est plus recommandée. Son utilisation ne sera plus possible à partir de Dojo v2.0. Il faut remplacer djConfig par dojoConfig.

var dojoConfig = { parseOnLoad:true }

 

Les attributs data de HTML5

Dojo permet de déclarer des widgets et d’indiquer d’autres informations directement dans  le HTML. Afin d’être compatible avec la syntaxe HTML 5, ces attributs sont préfixés par data-dojo- (cf spec HTML 5).

djConfig est remplacé par data-dojo-config

L’attribut jsId est remplacé par  data-dojo-id

<div data-dojo-id="bar" data-dojo-type="some.Thinger">I am exported to window.bar by reference</div>

 

L’attribut dojoType est remplacé par  data-dojo-type

<div data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, onClick: someNamedFunction">Click</div>

 

remarque : Tous les anciens attributs sont opérationnels jusqu’à la version 2.0

 

Graphiques

Deux nouveaux types de graphique ont été ajoutés : le graphique en radar (ou toile d’araignée) et le diagramme de Gantt.

Dojo Websockets

Dojo version 1.6 introduit une nouvelle api permettant une communication en temps réelle du style Comet. Cette api est basé sur la WebSocket api qui permet de réaliser une connexion bi-directionnelle idéale pour envoyé (push) en temps réel des messages du serveur vers le client.

 

Thème

L’adoption du framework Less va rendre plus facile et plus rapide la personnalisation des feuilles de style.

 

Object store

La réécriture des classes de stockage rend plus facile à utiliser dans la classe data.store

Changements de la version 1.6.1

Cette version étant une version mineure, elle apporte des corrections de bugs et quelques améliorations mineures. Cependant, il faut noter que Dojo supporte maintenant Internet Explorer 9 et Firefox 4.

 

Tagués avec :
Publié dans actualités

utiliser Dojo pour un site en plusieurs langues

Voici un petit tutoriel pour vous expliquer comment utiliser « requireLocalization » de Dojo pour un site en plusieurs langues.
Merci à ManiT4c

1. Création des fichiers langues


La première étape consiste à créer les fichiers langues et à les placer dans les bons dossiers. Pour notre exemple le site ne comportera que deux langues: l’Anglais et le Français.

  • Dans le dossier « dojo » créez un dossier nommé « langue » puis un sous dossier « nls » puis enfin un sous dossier par langue c’est à dire « en » et « fr » dans notre cas.
  • Dans chaque dossier « nls », « en » et « fr » vous devrez placer un fichier « langue.js »

Les fichiers « langue.js » contenu dans les dossiers « en » et « fr » seront respectivement utilisés pour les visiteurs anglophone et francophone, tandis que le fichier « langue.js » placé dans le dossier « nls » sera le fichier langue par défaut. C’est à dire celui qui sera utilisé si aucune langue n’est détectée.

2. Modification du djConfig

Maintenant il faut préciser à dojo la langue utilisée, vous avez pour cela deux possibilités: soit vous laissez dojo détecter la langue du navigateur, soit vous l’indiquez directement lors du chargement de dojo.


Pour ma part je préfère utiliser la seconde méthode. Pour cela il suffit de préciser lors de l’appel de dojo la langue utilisée dans l’attribut « djConfig ».

<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true, locale:'fr'"></script>

Il faut ici préciser la langue entre les guillemets ‘fr’ pour français ‘en’ pour anglais. Cela correspond au dossiers que vous avez précédemment créé dans ‘dojo/langue/nls’.

3. dojo.requireLocalization et dojo.i18n

Il faut maintenant demander à dojo de prendre en compte la localisation afin de charger le bon fichier de langue. Il suffit pour cela de rajouter (après avoir charger dojo bien sûr) les lignes suivantes.

dojo.require("dojo.i18n");
dojo.requireLocalization("langue", "langue");

Pour « requireLocalization » le premier argument sera le nom du dossier que vous avez créé dans « dojo ». Le second argument sera le nom du fichier à appeler (sans l’extension « .js »). C’est ce qui permettra à dojo de savoir où trouver le fichier langue adéquate.


Il cherchera donc le fichier « langue.js » dans « dojo/langue/nls » (« nls » étant ajouté automatiquement par dojo) et dans le dossier correspondant à la langue de l’utilisateur.


A noter: Il est important que les dossiers de langue (« en », « fr »,etc..) correspondent à la localisation indiquée dans « djConfig ».

4. Contenu des fichiers langues

Il faut maintenant remplir vos fichiers langues avec vos différents termes. Nous allons ici n’en ajouter que deux mais vous n’aurez bien évidemment aucune limite à ce niveau.


Contenu du fichier « langue.js » du dossier « fr »

({
bonjour:"Bonjour",
toi:"toi",
})

Contenu du fichier « langue.js » du dossier « en »

({
bonjour:"Hello",
toi:"you"
})

Pour le fichier « langue.js » contenu dans le dossier « nls » je vous propose de copier la même chose que pour le fichier compris dans le dossier « fr ». Nous considérerons ainsi que la langue par défaut sera le français.

5. Création et utilisation de l’objet « lang »

Maintenant que tout est prêt, vous pouvez utiliser vos différents fichiers de langue.


Voici une petite fonction pour tester tous ça:

function testLangue() {
var lang = dojo.i18n.getLocalization("langue", "langue");
alert(lang.bonjour+" "+lang.you);
}

Et voila il ne vous reste plus qu’à lancer cette fonction en faisant varier à chaque fois la localisation dans « djConfig » pour constater que le texte de l’alerte change.

Tagués avec :
Publié dans tutoriels

Créer un formulaire d’inscription avec dojo

Dojo est particulièrement efficace lorsqu’il s’agit de faire de la validation de formulaire.
Je vais ici vous proposer un tutoriel étape par étape qui va vous permettre de créer un formulaire d’inscription basique, avec les vérifications nécessaires.
Le formulaire en question ne comportera que 4 champs: Email, vérification de l’email, mot de passe et vérification du mot de passe.

Pour info: Je suis un webmaster indépendant situé en Normandie.

Etape 1

Téléchargez la dernière version de dojo (ici) et la décompresser dans le dossier comprenant votre site. Pour plus de simplicité je renomme le dossier « dojo-release-x.x.x » en dojo pour me retrouver avec comme arborescence:
monsite/dojo/dijit
monsite/dojo/dojo
monsite/dojo/dojox

Etape 2

Je créé mon fichier « acces_pro.php » (ouai, pour le coup, je vous fait le tuto en temps réel car je développe un site avec un accès professionnel. Libre à vous de renommer les fichiers comme bon vous semblera) et j’y insère les entêtes HTML nécessaires

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>

D’avance pour pas oublier je referme mes balises à la fin de mon fichier

</body>
</html>

Etape 3

J’appelle mon fichier dojo.js pour pouvoir utiliser les fonctions qu’il contiens, Pour cela je place entre les balises et de mon fichier le code suivant

<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>

djConfig= « parseOnLoad:true » indique à dojo de scanner le fichier une fois celui-ci chargé pour trouver des instructions « dojo ».

Etape 4

J’indique ensuite qu’elles sont les fonctions qui vont être utilisées dans mon fichier. Je rajoute donc le code suivant entre les balises

<head>

et

</head>
<script type="text/javascript">
   dojo.require("dijit.form.ValidationTextBox");
   dojo.require("dojox.validate.regexp");
   dojo.require("dijit.form.Form");
   dojo.require("dijit.form.Button");
</script>

dijit.form.ValidationTextBox permet d’utiliser les fonctions de validation des champ de texte.
dojox.validate.regexp contient des expression régulière toute faites (très utile dans notre cas).
dijit.form.Form permet de transformer le formulaire en widget.
dojo.require(« dijit.form.Button ») permet d’utiliser les widget bouton.

Etape 5

On ajoute maintenant les fichiers css nécessaires en plaçant ce code entre les balises

<head>

et

</head>
<link rel="stylesheet" href="dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" href="dojo/dijit/themes/tundra/tundra.css" />

tundra.css correspond au fichier css du thème tundra il en existe d’autre et vous pouvez créer vous même votre propre thème css.

Etape 6

On applique le thème tundra au document en ajoutant la class tundra sur la balise body

<body class="tundra">

Etape 7

On ajoute les balises qui vont créer le formulaire

<form action="acces_pro.php" method="post" enctype="multipart/form-data" id="formInscription" dojoType="dijit.form.Form">
</form>

l’id nous servira par la suite lors de la validation globale du formulaire
le dojoType permet de signaler à dojo que cet élément est un formulaire.

On placera les codes qui vont suivre à l’intérieur des balise

<form>

et

</form>

Etape 8

On place notre premier champ email en utilisant le code dojo suivant:

Email:
<input id="email1" type="text" name="email1" class="long" value=""
    dojoType="dijit.form.ValidationTextBox"
    regExpGen="dojox.validate.regexp.emailAddress"
    trim="true"
    required="true"
    invalidMessage="Email non valide." /><br />

- dojoType permet de signaler à dojo à quel type de champ on à a faire.
- RegExpGen permet de vérifier le format de ce qui sera tapé dans ce champ (ici un email)
- trim permet de supprimer les espaces avant et après le texte tapé dans le champ
- required indique que le champ ne peut rester vide
- invalidMessage vous permet d’indiquer le texte qui sera affiché si le champ est mal rempli.

Etape 9

On place le second champ email en ajoutant une vérification par rapport au premier.

Confirmation email:
    <input type="text" name="email2" class="long" value=""
	    dojoType="dijit.form.ValidationTextBox"
	    trim="true"
	    required="true"
	    validator="return this.getValue() == dijit.byId('email1').getValue()"
	    invalidMessage="Retapez votre email à l'identique ici" /><br />

- On a supprimer le regExpGen qui devient inutile (car on fait une vérification sur un champ sensé être valide)
- validator permet de vérifier que la valeur du champ est identique à celle du champ email précédent. On fait référence au premier champ email en utilisant l’id « email1 »

Etape 10

On ajoute notre premier champ mot de passe.

 mot de passe:
    <input type="password"
    	id="mdp1"
    	name="mdp1"
    	dojoType="dijit.form.ValidationTextBox"
    	required="true"
    	trim="true"
    	invalidMessage="Le mot de passe est nécessaire" /><br />

Rien de nouveau ici.

Etape 11

On ajoute notre champ de confirmation de mot de passe.

Confirmation mot de passe:  
	<input type="password"
    	name="mdp2"
    	dojoType="dijit.form.ValidationTextBox"
    	required="true"
    	trim="true"
    	validator="return this.getValue() == dijit.byId('mdp1').getValue()"
     	invalidMessage="Retapez votre mot de passe à l'identique ici" /><br />

Ici on utilise à nouveau validator pour vérifier que les champs mot de passe son identiques. L’idée utilisée pour faire référence au premier champ mot de passe est ici « mdp1 »

Etape 12

On ajoute un bouton qui va soumettre le formuaire après avoir vérifié que tous les champs étaient correctement remplis.

<input type="submit" label="inscription" dojoType="dijit.form.Button" onClick="dijit.byId('formInscription').validate();"/>

l’instruction dijit.byId(‘formInscription’).validate() ajouté dans le onclick permet de vérifier la validité de tous les champs du formulaire dont l’id est « formInscription » au moment du clic sur le bouton.

Voilà votre formulaire est terminé et les validations sont en place.

Tagués avec :
Publié dans tutoriels