ASP.NET 2.0 Mise en place de la librairie atlas
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
ASP.NET 2.0
Mise en place de la librairie
atlas
Document
Auteur Franck GIL
Email franck.gil@free.fr
Version 1.0
Nombre de pages 15
Date de création 16/10/2007
2 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
Sommaire
1. Présentation _______________________________________ 3
2. L’AJAX____________________________________________ 4
2.1. Applications Ajax vs Applications web traditionnelles _________________ 4
2.1.1. Web traditionnel _______________________________________________________ 4
2.1.2. Ajax__________________________________________________________________ 5
2.2. Avantages et inconvénients _________________________________________ 5
3. ASP.NET 'ATLAS' ___________________________________ 7
3.1. Coté client _________________________________________________________ 7
3.2. Coté Serveur _______________________________________________________ 8
3.3. Diagramme de l'architecture _________________________________________ 9
4. Installation _______________________________________ 10
4.1. Microsoft Ajax Library _____________________________________________ 10
4.1.1. Afficher l’heure sans refresh :___________________________________________ 11
4.1.2. Utilisation d’UpdateProgress ___________________________________________ 12
4.2. AjaxControlToolKit ________________________________________________ 13
5. Conclusion _______________________________________ 15
2
3 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
1. Présentation
ASP.net Atlas est la réponse de Microsoft pour armer facilement vos
applications ASP.NET 2.0 avec de l'Ajax (Asynchronous JavaScript and XML).
Atlas fournit toutes les possibilités d'Ajax, et en plus améliore le concept et
réduit de manière significative la complexité de son développement.
Atlas permet :
• des développements orientés objets,
• une programmation familière,
• une compatibilité avec les différents navigateurs,
• la complexité des appels asynchrones par XMLHTTP, se fait simplement avec
quelques lignes de code,
• et évidemment tous les avantages de l’Ajax (moins de rechargement de page,
gain de bande passante, dynamisme de vos applications…).
Dans un premier temps nous rappellerons le principe de l’Ajax, ensuite nous
parlerons du projet « atlas » et enfin nous mettrons en place un exemple d’utilisation
d’atlas dans un projet ASP.NET 2.0.
3
4 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
2. L’AJAX
AJAX (« XML et JavaScript asynchrones ») est un acronyme désignant une
méthode informatique de développement d'applications Web.
AJAX n'est pas une technologie en elle-même, mais une architecture qui évoque
l'utilisation conjointe d'un ensemble de technologies couramment utilisées sur le
Web:
• HTML, XHTML, CSS pour la partie design;
• DOM et JavaScript pour le dynamisme de l’information sur la page;
• XML, XSLT et l'objet XMLHttpRequest pour échanger et manipuler les données
de manière asynchrone avec le serveur web (sans rechargement de page).
2.1. Applications Ajax vs Applications web traditionnelles
2.1.1. Applications Web traditionnelles
Dans les applications web traditionnelles, le parcours d’un formulaire est le suivant:
Etape 1 : le formulaire est validé, une requête est envoyée au serveur HTTP.
Etape 2 : Le serveur HTTP traite le formulaire.
Etape 3 : Le serveur HTTP répond en renvoyant une nouvelle page.
4
5 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
Dans ce parcours, de la bande passante est gâchée. En effet, le code HTML est
alors traîné dans le traitement. On remarquera aussi que l’utilisateur devra parfois
attendre la réponse du serveur http plus ou moins longtemps. L’application devient
alors lente (une requête http est réalisé à chaque interaction avec l’application).
2.1.2. Les applications Ajax
Les applications AJAX quant à elles n’ont pas vraiment d’étape. En effet, elles
peuvent en permanence envoyer une requête au serveur HTTP pour récupérer
uniquement les données nécessaires (en utilisant différents protocoles de
communication basé sur XML. Ex : SOAP) et du JavaScript côté client pour
interpréter la réponse du serveur HTTP.
Les applications Ajax permettent donc de ne pas gaspiller de bande passante.
On obtient alors une réactivité plus importante, puisque les requêtes http sont
réduites.
Les applications sont moins lentes pour l’utilisateur puisque la requête côté
serveur est réduite. En effet, une grande partie du traitement se fera du coté client.
2.2. Avantages et inconvénients
Dans le paragraphe précédent nous avons pu voir les avantages de l’Ajax :
• gain de bande passante,
• délais d’attente pour l’utilisateur diminué,
• surcharge du serveur http diminué,
• un plus grand dynamisme des pages pour l’utilisateur, dû à une réponse
instantanée.
5
6 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
Mais cette architecture a un point faible conséquent, c’est la complexité de sa
mise en place :
• une connaissance poussée du JavaScript,
• des tests importants afin de vérifier le bon fonctionnement (compatibilité des
navigateurs…),
• le support du JavaScript doit être activé dans le navigateur du client.
En conclusion, malgré les avantages reconnus de l’Ajax, il reste complexe à
mettre en place.
67 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
3. ASP.NET 'ATLAS'
Le projet ‘Atlas’ a donc pour but de récupérer tous les avantages de l’Ajax en
retirant ses inconvénients afin de créer facilement une application web interactive.
Pour cela, le package ‘Atlas’ incorpore de nombreux outils permettant une gestion
aisée des parties complexes de l’architecture Ajax (transfert des données,
compatibilité des navigateurs…) grâce à des contrôles serveurs, des web Services et
des librairies JavaScript.
Le projet asp.net ‘Atlas’ apporte dans la pratique :
• une augmentation de productivité (ligne de code moindre, des modèles pour
les scénarios communs sont disponibles),
• le développeur pourra facilement débuguer (Une programmation
familière, Orientée Objet),
• intégration simple et logique dans les pages asp.net,
• communication gérer intuitivement entre le JavaScript et les web services,
• fonctionne sur tous les navigateurs.
3.1. Coté client
‘Atlas’ fournit à travers une librairie importante de fichier JavaScript :
• la compatibilité sur tous les navigateurs,
• la gestion des classes et des namespaces,
• la gestion des événements,
• transmission des données,
• la fabrication en série d'objet,
• la communication avec les web services,
• …
Le diagramme suivant (pris sur atlas.asp.net) illustre l’architecture d’atlas du
coté client :
78 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
3.2. Coté Serveur
Le diagramme suivant (pris sur atlas.asp.net) illustre l’architecture d’atlas du
coté serveur :
89 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
L'un des fondements du projet asp.net ‘Atlas’ est la possibilité de créer des
comportements. Ces comportements pourront alors être appliqués à des éléments
de votre page. Par exemple, vous voulez ajouter la possibilité de déplacer votre objet
à l'intérieur de votre page. Ces comportements sont assimilés à des Behavior dans
‘Atlas’.
Actuellement le projet regroupe les Behavior suivant:
• Click behavior => rend un élément cliquable ;
• Floating behavior => permet de faire flotter un élément par-dessus d’autre
élément ;
• Hover behavior => rend le déplacement d’un élément possible (drag and drop) ;
• Opacity behavior => permet de jouer sur l’opacité d’un élément ;
• Popup behavior => permet de donner l’apparence d’une pop-up à un élément.
3.3. Diagramme de l'architecture
910 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
4. Installation
Le Framework Ajax de Microsoft est composé de deux éléments essentiels: le
Framework JavaScript (Microsoft Ajax Library) et les ASP.NET Ajax Control Toolkit.
Ces derniers sont à la base des contrôles serveur ASP.NET qui permettent d’étendre
le comportement côté client de certains contrôles ASP.NET 2.0. Ils sont compatibles
avec IE / FireFox / Opera / Safari.
4.1. Microsoft Ajax Library
Avant de commencer nous allons installer le FrameWork Ajax, il suffit d’aller sur
http://www.asp.net/ajax/downloads/ et de récupérer ASP.NET 2.0 AJAX Extensions
1.0.
Une fois le Framework installé vous aurez la possibilité de créer un autre type
de site web, comme l’illustre l’image suivante:
De plus, dans la boite d’outils vous devez retrouver cela:
• ScriptManager: permet d’inclure les bons fichiers JavaScripts par rapport au
navigateur. Obligatoire pour utiliser le Framework Microsoft Ajax Library.
Vous ne devez mettre qu’un seul script manager par page.
• UpdatePanel: Tout ce qu’il y’a à l’intérieur de cet objet sera traité en
asynchrone. C’est un peu l’Ajax du feignent. Il suffit d’y glisser vos
composants ASP.NET 2.0 pour qu’ils deviennent asynchrones. Merci Microsoft.
• UpdateProgress: Permet d’afficher une image pendant le traitement de la
requête. Il fonctionne associé avec un UpdatePanel.
1011 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
• ScriptManagerProxy: Il ne peut y avoir qu’un seul ScriptManager par page,
et il sera donc dans la Master Page, il faudra donc mettre des
ScriptManagerProxy dans toutes les pages enfants.
Pour expliquer cela, je vais vous faire 2 exemples très simple à comprendre.
4.1.1. Afficher l’heure sans refresh :
Exemple d’utilisation d’un UpdatePanel associé avec un ScriptManager et un
Timer pour avoir l’heure en temps réel.
Tout d’abord mettez un ScriptManager, un update panel puis un Timer sur votre
interface web. Ensuite, il va falloir ajouter l’événement entre le Timer et
l’UpdatePanel. Pour cela nous allons utiliser les triggers de l’UpdatePanel. Les
triggers permettent de lancer le rafraichissement de l’UpdatePanel. A chaque « Tick »
du timer, on aura un refresh.
Passons maintenant dans la source de notre page pour ajouter dans le
ContentTemplate le contenue de notre UpdatePanel. En l’occurrence, un label suivit
d’une fonction retournant l’heure.
1112 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
Il est : :
4.1.2. Utilisation d’UpdateProgress
Nous allons maintenant voir l’utilisation d’un updateProgress. Nous allons créer
une application qui retourne l’heure lorsque l’on clique sur un bouton, mais du coté
serveur, nous allons ralentir la réponse.
Code source de la page UpdateProgress.aspx :
asp:Literal>
En attente de la réponse...
Nous avons associé l’event Click du bouton à l’updatePanel, et nous avons mis
un Literal pour y écrire l’heure.
1213 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
Code behind de la page UpdateProgress.aspx :
public partial class UpdateProgress : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
Literal1.Text = DateTime.Now.ToLongTimeString();
}
}
A l’exécution, lorsque vous clicquerez sur le bouton « Donne-moi l’heure »,
l’UpdateProgress s’affichera jusqu’a ce que le serveur est retourné la réponse.
Une fois la réponse reçu l’update progres se masque et l’heure s’affiche. Seul
le contenu de l’UpdatePannel s’est rafraichit et non la page entière.
4.2. AjaxControlToolKit
Je ne m’étendrais pas trop sur le sujet de l’ajaxControlToolKit, vu que la
démonstration de chaque Extender ainsi que le code source sont présents à
l’adresse suivante : http://ajax.asp.net/ajaxtoolkit/.
Téléchargez le et décompresser l’AjaxControlToolKit dans le dossier de votre
choix (je vous conseille le AjaxControlToolkit-NoSource.zip si vous ne voulez pas
modifier l’existant). Une fois décompressé, lancez
.\AjaxControlExtender\AjaxControlExtender.vsi
1314 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
Parlons maintenant des Extender: ils sont désormais vos propres contrôles
ASP.NET 2.0 pour Ajax. Ils Permettent de dériver et d’ajouter des fonctions à des
contrôles ASP.NET 2.0.
Par exemple, il sera désormais possible d’étendre une textbox pour qu’elle nous
propose des choix par rapport à notre saisi.
Cependant, pour effectuer cet exemple, vous aller devoir mettre en référence la
dll: AjaxControlToolkit.dll. Dans votre projet, sous Visual studio, ajouter une
référence vers la dll. Ceci vous permettra d’utiliser tous les contrôles créés par le
Toolkit.
Garder à l’esprit que ce ToolKit est un projet communautaire en constante
évolution, pensez donc à aller faire un tour sur le site du projet ‘Atlas’ pour vous
tenir informé des nouveautés (modification ou ajout d’Extender).
1415 / 15
ASP.NET 2.0 – Mise en place de la librairie atlas
5. Conclusion
Le projet ASP.NET ‘Atlas’ va donc démocratiser l’utilisation de l’Ajax dans les
applications WEB.
En effet, il devient alors facile pour tout développeur d'implémenter cette
architecture dans son site web, afin de redonner une interactivité plus importante à
ses utilisateurs.
Un seul problème persiste !!! Le JavaScript peut être désactivé côté client ;-)
Documentation trouvée sur atlas.asp.net et Wikipedia
15Vous pouvez aussi lire
