Vu le très peu de documentation que j’ai pu trouvé au sujet du plugin sfFormExtraPlugin de symfony, voici un guide rapide qui vous permettra d’installer le plugin sfFormExtraPlugin et pouvoir afficher un calendrier pour les champs de type date grâce au widget sfWidgetFormJQueryDate, voici donc les étapes à suivre:

1 – Installer le plugin sfFormExtraPlugin

En mode console, positionnez vous sur le dossier d’installation du projet et exécuter :

./symfony plugin:install sfFormExtraPlugin

2 – Télecharger et mettre en place les librairies jQuery nécessaire

Malheureusement le plugin sfFormExtraPlugin n’inclue pas les librairies externes nécessaire au fonctionnement, il faut le faire à la main!

il faut donc télécharger JQuery et JQuery UI:

• Allez sur le site de jQuery UI
• Dans la liste des composants déchochez toutes les cases sauf Core et Datepicker
• Sélectionner le thème qui vous convient à droite et cliquez Télécharger

3 – Placé les fichiers téléchargés dans le dossier web et modifier le fichier view.yml

Décompresser jquery-ui-1.8custom.zip et copier les fichiers décompresser vers le dossier web ainsi:

• js/jquery-1.4.2.min.js et js/jquery-ui-1.8.custom.min.js dans le dossier /web/js
• css/jquery-ui-1.8.custom.css dans le dossier /web/css
• renommer le dossier css/theme/images/ en jquery-ui-images et mettez le dans /web/images/
• Ouvrez le fichier /web/css/jquery-ui-1.8.custom.css et remplacer « images/ » par « ../images/jquery-ui-images/ » pour corriger le chemin vers les images
• calendar.png une petite icône qu’on affiche à coté du champs pour faire joli :p (à mettre dans /web/images/)

Maintenant il faut inclure les fichiers javascript et css dans view.yml de notre application (par exemple /apps/backend/config/view.yml) :

Ajout du fichier javascript

    javascripts:    [jquery-1.4.2.min.js, jquery-ui-1.8.custom.min.js]

Ajout du fichier css

    stylesheets:    [jquery-ui-1.8.custom.css]

4 – Mise en place du Widget dans la classe du formulaire

class PrescripteursForm extends BasePrescripteursForm
{
  public function configure()
  {
    $this->widgetSchema['date_debut'] = new sfWidgetFormJQueryDate(array('image'=>'/images/calendar.png'));
    $this->widgetSchema['date_fin'] = new sfWidgetFormJQueryDate(array('image'=>'/images/calendar.png'));
  }
}

Et le tour est joué ;) ça devrai ressembler à ça :

Bonjour à tous!

Savez vous qu’avec jQuery il est possible d’enchainer plusieurs animations à la fois dans une seule instruction? alors la réponse est OUI, on peut même aller plus loin avec un peu d’imagination et c’est vraiment très facile à mettre en œuvre! En fait chaque méthode dans jQuery retourne l’objet lui-même, ainsi on peut enchaîner à une autre méthode :

Exemple :

<script type="text/javascript">// <![CDATA[
jQuery(window).ready(function(){
$('#testcode1').click(function(){
$('#mondiv').animate({width:'200px', fontSize: "18px", borderWidth:'3px', marginLeft:'100px', opacity:'0.8', padding:'10px'},2000)
.animate({width:'120px', marginLeft:'0', fontSize: "12px", borderWidth:0, opacity:'1', padding:'0'},2000);
return false;
});
});
// ]]></script>
<a id="testcode1">Tester le code</a>
<div id="mondiv" style="border: 1px solid #ffffff; background: #077f2e none repeat scroll 0% 0%; width: 120px; height: 120px;">Un div de test</div>

Resultat
Tester le code

La fonction animate() est une fonction native en jQuery, elle permet d’animer les propriétés CSS d’un objet jQuery dans une durée bien déterminée , la syntaxe comme dans l’exemple si-dessus est très simple!

On peut animer une seule, ou plusieurs propriétés CSS à la fois! Par exemple pour animer la largeur d’un div ayant l’id test et la mettre à 300px sur 2secondes le code sera :

$('#test').animate({width':'300px'},2000);

Ainsi on peut enchainer autant qu’on veux, le reste dépend de votre imagination ^^, à noter que la durée de l’animation (2000) est en millisecondes, d’où 1 seconde = 1000 ms

Un autre Exemple d’enchainement d’animation

Dans cette exemple, on va animer un div ayant un arrière plan rouge, et une image d’étoile pour construire le drapeau du maroc à la fin de l’animation

Voir le resultat

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- 	www.mcherifi.org -->
	jQuery(window).ready(function(){
		$('#animationlink').click(function(){
			$('#mondiv').animate({left:'400px', opacity:'0.3', width:'40px', height:'70px', borderWidth:'20px'}, 1500)
				.animate({top:'300px', opacity:'0.8', left:'100px', width:'70px', height:'70px', borderWidth:'7px'}, 1500)
				.animate({top:'160px', opacity:'0.4', left:'500px', width:'170px', borderWidth:'3px'}, 1200)
				.animate({top:0,  opacity:'0.2',  left:0, width:'200px', height:'200px', borderWidth:'1px'}, 700)
				.animate({opacity:'1', borderWidth:'2px'}, 1000);

			$('#monetoile').css('opacity', 0).animate({left:'500px', top:'400px', opacity:'0.5', height:'80px', width:'100px'}, 1300)
				.animate({left:'260px', top:'250px', opacity:'0.8'}, 1000)
				.animate({left:'100px', width:'0', opacity:'0.2'}, 1200)
				.animate({width:'154px', top:'100px', left:'150px', opacity:'0.5'}, 1000)
				.animate({left:'30px', height:'135px', width:'154px', top:'30px', opacity:'1'}, 1200);

			return false;
		});
	});

</script>
<title>Mohammed CHERIFI - Enchainement d'une animation sous jQUery</title>
<style type="text/css">	

	#contenaire{
		position:relative;
		margin:10px;
	}

	#mondiv{
		background:#f00;
		width:150px;
		height:150px;
		border:1px solid #077F2E;
		position:absolute;
	}

	#monetoile{
		position:absolute;
		display:none;
	}

</style>
</head>
<body>

	<a href="#" id="animationlink">Animaer</a><br />

	<div id="contenaire">
		<div id="mondiv"></div>
		<img id="monetoile" src="star.gif" alt="I Love Morocco" width="154" height="135"/>
	</div>

</body>
</html>

Télécharger le code source de l’amination

Un framework JavaScript c’est quoi?

Un framework JavaScript est un ensemble d’applications et de fonctionnalités regroupés, c’est une sorte de boite à outils qui contient toutes les tâches répétitives et courantes, grâce aux frameworks, vous pouvez gagner beaucoup de temps dans vos développements, vous pouvez facilement manipuler le DOM, faire des requêtes AJAX, des animations et des effets superbes sur vos pages, et vous aurez tout le temps de vous concentrer sur des taches plus complexes et assez intéressantes ;)

Actuellement il existe plus de 500 frameworks JavaScript , ces frameworks qui ne cessent d’évoluer depuis l’apparition du WEB2.0

Faire du WEB2.0!

Il faut savoir que le WEB2.0 est concrètement basé sur le JavaScript du point de vue technique! particulièrement grâce à sa capacité de faire des appels asynchrones vers les serveurs WEB via l’objet XMLHttpRequest, inventé par Microsoft en 2001, ce dernier permet aux visiteurs d’accéder aux nouveaux contenus sans avoir à cliquer ou rafraichir la page, cette fonctionnalité a été implémenté dans le DHTML pour donner naissance au WEB2.0.

Cette expérience a permis de donner une nouvelle vision au WEB, qui est devenu de plus en plus dynamique, réactif et innovant

Pallier aux déficiences des navigateurs actuels

S’assurer que son code javascript est compatible avec tous les navigateurs modernes est l’une des tâches les plus pénibles pour un développeur WEB (cross-browsing), d’où le grand avantage des frameworks javascript: vous n’avez plus à gérer les dépendances entre les différents navigateurs (sélecteurs, gestion des évènements, méthodes de manipulation DOM..), votre framework javascript le fera à votre place et vous facilitera la vie ;)

Quel framework JavaScript utiliser?

Voici une liste des frameworks JavaScript les plus populaires :

• jQuery
• Prototype
• Yahoo! User Interface
• Dojo
• Mootools
• Ext JS
• …

Vu la qualité des outils proposés par les différents frameworks, il est difficile de recommander un en particulier, mais personnellement je préfère jQuery puis mootools grâce à leurs qualité de documentation, leurs communautés très large, et leurs simplicité!

Vous pourriez préférer d’autres mais je vous invite à les essayer tous et utiliser celui avec lequel vous vous sentez plus à l’aise!