Une zForm avec Mootools

Formation

En Ligne

Prix sur demande

Appeler le centre

Avez-vous besoin d'un coach de formation?

Cela vous aidera à comparer et à choisir le meilleur cours pour vous

Description

  • Typologie

    Formation

  • Méthodologie

    En ligne

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Questions / Réponses

Posez une question et d'autres utilisateurs vous répondront

Qui voulez-vous pour répondre à votre question?

Nous ne publierons que votre nom et votre question

Le programme

Introduction du cours

Bonjour à tous,
Nous allons nous entraîner à utiliser des objets du framework Mootools grâce à la création d'un ZForm avec une prévisualisation via Ajax. Ce mini-tuto vient en complément de « Découvrez mootools, ou bien commencer avec Javascript ».

Prérequis

  • Avoir des notions de programmation objet

  • Connaître le langage JavaScript

  • Connaître le langage PHP

  • Savoir utiliser les expressions régulières

  • Avoir lu le tutoriel : « Découvrez mootools, ou bien commencer avec Javascript »

  • Sujet traité en JavaScript natif : Insertion de balises dans une zone de texte

Le débugger

Pour pouvoir corriger vos scripts avec Mootools, je vous conseille d'utiliser un débugger du type Firebug.

Le ZForm

Téléchargez le framework Mootools en version core et more. Une fois que c'est fait, rassemblez les deux fichiers en un seul, appelé mootools.js, et placez-le dans un dossier public et un sous-dossier js.

Les différents éléments

Le ZForm va nous permettre d'insérer des balises destinées à mettre en forme un texte, à ajouter des images, des titres et autres. Notre ZForm va posséder plusieurs éléments HTML :

  • le champ de texte : le textarea ;

  • les boutons simples de mise en forme ;

  • les boutons avec choix de mise en forme ;

  • les listes de choix pour la mise en forme du texte.

Les boutons simples

Les boutons simples vont insérer, lors d'un clic, une paire de balises de mise en forme dans le champ de texte.

Par exemple, pour la propriété « texte en gras », lors du clic sur le bouton gras, notre ZForm va afficher à l'intérieur du champ de texte :

<gras>texte</gras>

Voici les listes des boutons simples de mise en forme dont nous aurons besoin :

  • gras ;

  • italique ;

  • barre ;

  • souligne ;

  • marge ;

  • erreur ;

  • infos ;

  • question ;

  • attention.

Voici les images que nous allons utiliser pour le TP :

Les boutons avec choix

La liste des boutons avec choix :

  • lien ;

  • lien vers une ancre ;

  • ancre ;

  • puce normale ;

  • puce numérique ;

  • tableau ;

  • citation ;

  • image ;

  • clip.

Je vous donne aussi les images correspondantes, je suis sympa :) :

Les listes de choix

Ces boutons vont, lors du survol, faire apparaître un menu de choix à cliquer ; ils seront utiles pour les couleurs, polices d'écriture…
Les boutons à menu :

  • police ;

  • taille du texte ;

  • position ;

  • flottant ;

  • couleur ;

  • avertissement : contiendra les boutons simples (question, erreur, infos, attention) ;

  • titre.

Les images pour les listes de choix :

Le formulaire html<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ZForm</title> <script type="text/javascript" src="public/js/mootools.js"></script> <script type="text/javascript" src="public/js/zform.js"></script> <link href="public/css/zform.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript"> window.addEvent('domready', function () { var form = new ZForm(); form.listeningEvent(); }); </script> </head> <body> <div id="main"> <form id="zform" action="" method="post"> <fieldset><legend>ZForm</legend> <!-- Boutons simples --> <img data-bt="gras" class="splButtons bt-code" src="public/images/boutons/bt-gras.gif" alt="Gras" title="Gras" /> <img data-bt="italique" class="splButtons bt-code" src="public/images/boutons/bt-italique-black.gif" alt="Itlalique" title="Italique"/> <img data-bt="souligne" class="splButtons bt-code" src="public/images/boutons/bt-souligne.gif" alt="Souligné" title="Souligner"/> <img data-bt="barre" class="splButtons bt-code" src="public/images/boutons/bt-surligne.gif" alt="Barré" title="Barrer" /> <img data-bt="marge" class="splButtons bt-code" src="public/images/boutons/bt-marge.gif" alt="Marge" title="Marge" /> <img data-bt="gras" class="splButtons bt-code" src="public/images/boutons/bt-gras.gif" alt="Gras" title="Gras" /> <!-- Boutons choix --> <img data-bt="liste" class="dlgButtons bt-code" src="public/images/boutons/bt-puce.gif" alt="Listes" /> <img data-bt="listnum" class="dlgButtons bt-code" src="public/images/boutons/bt-pucenum.gif" alt="Listes Numériques" /> <img data-bt="tableau" class="dlgButtons bt-code" src="public/images/boutons/bt-tableau.gif" alt="Tableau" /> <img data-bt="url" class="dlgButtons bt-code" src="public/images/boutons/bt-lien.gif" alt="lien" /> <img data-bt="ancre" class="dlgButtons bt-code" src="public/images/boutons/bt-ancre.gif" alt="Ancre" /> <img data-bt="urlancre" class="dlgButtons bt-code" src="public/images/boutons/bt-urlancre.gif" alt="Lien vers une ancre" /> <img data-bt="citation" class="dlgButtons bt-code" src="public/images/boutons/bt-citation.gif" alt="Citation" /> <img data-bt="image" class="dlgButtons bt-code" src="public/images/boutons/bt-image.gif" alt="Images" /> <img data-bt="clip" class="dlgButtons bt-code" src="public/images/boutons/bt-clip.gif" alt="Clip Video" /> <!-- Boutons listes --> <img data-bt="police" class="bt-code listButtons" src="public/images/boutons/bt-font.gif" alt="Police" title="Police" /> <div class="sliderBox"> <a class="slider-link" rel="Arial">Arial</a> <a class="slider-link" rel="Comic Sans MS">Comic Sans MS</a> <a class="slider-link" rel="Verdana">Verdana</a> <a class="slider-link" rel="Times New Roman" >Times New Roman</a> <a class="slider-link" rel="Rockwell Extra Bold">Rockwell Extra Bold</a> </div> <img data-bt="taille" class="bt-code listButtons" src="public/images/boutons/bt-size.gif" alt="Taille de la police" title="Taille de la police" /> <div class="sliderBox"> <a class="slider-link" rel="xx-small">Très très petit</a> <a class="slider-link" rel="x-small">Très petit</a> <a class="slider-link" rel="small">Petit</a> <a class="slider-link" rel="medium">Normal</a> <a class="slider-link" rel="large">Grand</a> <a class="slider-link" rel="x-large">Très grand</a> <a class="slider-link" rel="xx-large">Très très grand</a> </div> <img data-bt="couleur" class="bt-code listButtons" src="public/images/boutons/bt-color.gif" alt="Couleur de la police" title="Couleur de la Police" /> <div class="sliderBox"> <a class="slider-link bgWhite" rel="#FFFFFF">&nbsp;</a> <a class="slider-link bgGray" rel="#CCCCCC">&nbsp;</a> <a class="slider-link bgRed" rel="#FF0000">&nbsp;</a> <a class="slider-link bgOrange" rel="#FF6600">&nbsp;</a> <a class="slider-link bgYellow" rel="#FFCC00">&nbsp;</a> <a class="slider-link bgGreen" rel="#33CC00">&nbsp;</a> <a class="slider-link bgBlue" rel="#0000CC">&nbsp;</a> <a class="slider-link bgMarine" rel="#000033">&nbsp;</a> <a class="slider-link bgBlack" rel="#000000">&nbsp;</a> </div> <img data-bt="titre" class="bt-code listButtons" src="public/images/boutons/bt-titre.gif" alt="Titre" title="Titre" /> <div class="sliderBox"> <a class="slider-link" rel="h1">Titre 1</a> <a class="slider-link" rel="h2">Titre 2</a> <a class="slider-link" rel="h3">Titre 3</a> </div> <img data-bt="position" class="bt-code listButtons" src="public/images/boutons/bt-position.gif" alt="Position du texte" /> <div class="sliderBox"> <a class="slider-link" rel="gauche">Gauche</a> <a class="slider-link" rel="center">Centrer</a> <a class="slider-link" rel="droite">Droite</a> <a class="slider-link" rel="justifier">Justifier</a> </div> <img data-bt="flottant" class="bt-code listButtons" src="public/images/boutons/bt-float.gif" alt="Couleur de la police" /> <div class="sliderBox"> <a class="slider-link" rel="gauche">Flottant à gauche</a> <a class="slider-link" rel="droit">Flottant à droite</a> </div> <img data-bt="avert" class="bt-code listButtons" src="public/images/boutons/bt-avert.gif" alt="Avertissements" /> <div class="sliderBox"> <img data-bt="question" class="splButtons bt-code" src="public/images/boutons/bt-question.gif" alt="Question" /> <img data-bt="attention" class="splButtons bt-code" src="public/images/boutons/bt-attention.gif" alt="Attention" /><br /> <img data-bt="infos" class="splButtons bt-code" src="public/images/boutons/bt-infos.gif" alt="Infos" /> <img data-bt="erreur" class="splButtons bt-code" src="public/images/boutons/bt-erreur.gif" alt="Erreur" /> </div> <div class="block"> <textarea id="text" name="text" cols="100" rows="10"></textarea> </div> <div id="control"> <input type="reset" value="effacer" /> <input type="submit" value="Valider" /> </div> </fieldset> </form> <div id="prev"> <h4>Prévisualisation : </h4> </div> </div> </body> </html>

Une petite précision ici, nous instancions et utilisons notre objet de cette manière :

<script type="text/javascript"> // Lorsque le dom est lu window.addEvent('domready', function () { var form = new ZForm(); // On crée notre objet ZForm form.listeningEvent(); // On écoute les événements du ZForm }); </script> La feuille de style#parser { margin: auto; width: 80%; } fieldset { margin: auto; width: 70%; } #control { float: none; display: block; clear: both; margin-left : 3%; } table { background-color: #ccc; padding : 1%; } td { border : 1px solid #eee; background-color: #fff; } .title-citation { background-color: #eee; font-weight: bold; border: #ccc 1px solid; border-bottom: none; text-indent : 1%; width: 20%; margin:0; margin-top : 1%; } .citation { margin:0; border: #ccc 1px solid; padding: 1%; } #prev { border: 1px solid #999; margin:...

Appeler le centre

Avez-vous besoin d'un coach de formation?

Cela vous aidera à comparer et à choisir le meilleur cours pour vous

Une zForm avec Mootools

Prix sur demande