Paru le 16 avril 2007
Par Pierre Lagarde
Sur cette page
.gif)
Introduction
Pourquoi les méthodes $
La programmation Objet
Insertion en PHP
Conclusion
Introduction
Cet article explique comment utiliser Microsoft Ajax Library avec la technologie PHP.
Microsoft Ajax Library est un sous ensemble d’ASP.NET 2.0 Ajax Extensions 1.0. ASP.NET 2.0 Ajax Extensions est le Framework Ajax de Microsoft sur la technologie ASP.NET v2. Mais comme tout Framework Javascript lié avec une technologie serveur (ici ASP.NET v2), le Framework est découpé en 2 parties distinctes :
1. Un Framework JavaScript (Microsoft Ajax Library)
2. Des composants serveurs ASP.NET v2 s’appuyant sur ce Framework JavaScript
Dans un contexte Php on ne s’intéressera qu’au Framework JavaScript. Qui n’est en définitive que des fichiers JavaScript (.js)
Le Framework est compatible IE / FireFox / Opera / Safari.
Contenu de Microsoft Ajax Library
Après avoir téléchargé Microsoft Ajax Library voila ce que vous obtiendrez :
.jpg)
3 fichiers JavaScript :
1. MicrosoftAjax.js (Le noyau du Framework Ajax)
Le fichier MicrosoftAjax.debug.js est le même fichier mais avec les retours à la ligne.
2. MicrosoftAjaxTimer.js (Objet Timer Javascript)
Le fichier MicrosoftAjaxTimer.debug.js est le même fichier mais avec les retours à la ligne.
3. MicrosoftAjaxWebForms.js (Javascript de gestion de « l’update panel »
Le fichier MicrosoftAjaxWebForm.debug.js est le même fichier mais avec les retours à la ligne.
Ici on voit leur taille compressée car dans la très grande majorité des cas le serveur envoie les fichiers JavaScript compressés au navigateur client.
Les fichiers qui nous intéresseront dans le cadre PHP sont bien sûr les fichiers MicrosoftAjax.js et MicrosoftAjaxTimer.js. Quand au fichier MicrosoftAjaxWebForms.js, étant étroitement lié à ASP.NET, il ne nous intéressera pas dans notre contexte.
Tour d’horizon de Microsoft Ajax Library
Le fichier MicrosoftAjax.js amène les bases du Framework JavaScript de Microsoft. Il amène à lui seul :
Pourquoi les méthodes $
Les méthodes $ servent à fournir au développeur JavaScript des raccourcis de programmation.
Par exemple s’abonner à un événement click d’un bouton html pour que le code soit mutli-browser. D’un côté il faudra s’abonner au ‘onclick’ et de l’autre coté au ‘click’ en passant par les méthodes $ cela peut s’écrire de cette façon :
<html>
…
<input type="button" id="bt" value="Click me!" />
</html>
function pageLoad(){
$addHandler($get('bt'), 'click', OnClick);
}
function OnClick(sender){
…
}
Pour être sûr que le Framework a bien fini d’être chargé, on s’accrochera on click dans la fonction pageLoad() qui sera appelée une fois que tous les fichiers JavaScript seront chargés et exécutés.
On peut aussi passer par un délégué si on travaille dans un objet ou un control :
var delegatebtClick = Function.createDelegate(this, OnClick);
$addHandler($get('bt'), 'click', delegatebtClick);
Le $addHandler va s’adapter au navigateur pour s’attacheràa l’événement qui correspond.
La programmation Objet
La programmation orientée objet en JavaScript va se traduire par des contraintes d’écriture qui simuleront la programmation orientée objet.
Ecriture d’une classe
//Création du Namespace Demo
Type.registerNamespace('Demo');
//Nouvelle classe Person
Demo.Person = function(name) {
Demo.Person.initializeBase(this);
this._name = name;
this._events = null;
}
//Extention de méthode pas la méthode prototype en JavaScript
Demo.Person.prototype = {
get_name : function(){
return this._name;
},
set_name : function(value){
if (this._name !== value) {
this._name = value;
}
}
}
//Enregistrement de la classe dans le Framework
Demo.Person.registerClass('Demo.Person');
Appel de cette classe
var p = new Demo.Person('Christophe');
alert(p.get_name());
alert(Object.getTypeName(p));
p.set_name('Christophe2');
.jpg)
Héritage
Demo.Programmer = function(name, language) {
//Appel de la méthode de base
Demo.Programmer.initializeBase(this, [name]);
this._language = language;
}
Demo.Programmer.prototype = {
//Override
get_name: function() {
//Appel de la méthode de base
var name = Demo.Programmer.callBaseMethod(this, 'get_name');
return name + '(Programmateur)';
},
get_language: function() {
return this._language;
}
}
//Enregistrement dans la classe dans le Framework. Heritage de ‘Demo.Person’
Demo.Programmer.registerClass('Demo.Programmer', Demo.Person);
Appel de cette classe
var p2 = new Demo.Programmer('Christophe', 'JavaScript');
alert(p2.get_name());
alert(p2.get_language());
alert(Object.getTypeName(p2));
.jpg)
Interface + Evénement
On va repartir de la classe Person et on va lui faire implémenter l’interface INotifyPropertyChange
Demo.Person = function(name) {
Demo.Person.initializeBase(this);
this._name = name;
this._events = null;
}
Demo.Person.prototype = {
get_name : function(){
return this._name;
},
set_name : function(value){
if (this._name !== value) {
this._name = value;
//Lève l’événement de changement de propriété
this.raisePropertyChanged("name");
}
},
get_events : function(){
//Singleton
if (!this._events) {
this._events = new Sys.EventHandlerList();
}
return this._events;
},
add_propertyChanged : function(handler) {
this.get_events().addHandler("propertyChanged", handler);
},
remove_propertyChanged : function(handler) {
this.get_events().removeHandler("propertyChanged", handler);
},
raisePropertyChanged : function(propertyName) {
if (!this._events) return;
var handler = this._events.getHandler("propertyChanged");
if (handler) {
handler(this, new Sys.PropertyChangedEventArgs(propertyName));
}
}
}
//Person implemente l’interface INotifyPropertyChange
Demo.Person.registerClass('Demo.Person',null, Sys.INotifyPropertyChange);
Appel de la classe
//Création d’une instance de Person
var p = new Demo.Person('Christophe');
//Abonnement au changement de propriété si p implemente INotifyPropertyChange
if (Sys.INotifyPropertyChange.isImplementedBy(p))
{
p.add_propertyChanged(onChange);
}
p.set_name('Christophe2');
//Fonction appelé quand une propriété est changé
function onChange(sender, property)
{
alert(property.get_propertyName());
Sys.Debug.traceDump(sender);
}
Tout le Framework est écrit sur cette base de Namespaces, de classes, d’héritages, d’interfaces et d’énumérés.
Le code source du Framework est un bon exemple de meilleure pratrique sur la manipulation de ces notions. Toute l’aide est disponible en ligne ou en téléchargement
Insertion en PHP
Maintenant la seule chose qu’il reste à faire pour bénéficier de ce Framework en PHP est d’inclure le fichier MicrosoftAjax.js dans la page php.
<script type="text/javascript" src="ScriptLibrary/MicrosoftAjax.js"></script>
Conclusion
Nous avons simplement parcouru les notions principales de Microsoft Ajax Library ce qui va nous permettre d’utiliser d’une part les Extendeurs des Contrôles ToolKit mais aussi le Framework étendu de Microsoft Ajax Library (Preview) avec la Base Class Library (BCL)