mardi 13 février 2007
jeudi 11 janvier 2007
Votre charpente tient-elle la route ?
La vague Web 2.0 déferle sur la toile, et apporte pour l'utilisateur une réelle valeur ajoutée à l'utilisation des applications Web .
Parmi les technologies utilisées, nous retrouvons Ajax, 1ère brique fondatrice du phénomène Web 2.0.
D'après 01net, "Ajax dope l'ergonomie des applications Web". Afin d'arriver à cet état de fait, les développeurs doivent se doter d'outils, notamment de frameworks Javascript. Ces frameworks doivent être capables de gérer toute la tuyauterie sous-jacente à Ajax (compatibilité des navigateurs, appels, rendus, ...), et donc in fine de simplifier son développement, sa maintenance, et sa capacité à évoluer.
Parmi les frameworks existants, on pourra citer :
- Atlas : le framework de Microsoft, qui sera bientôt intégré à l'IDE Visual Studio.
- Prototype : la librairie de bas niveau utilisée par bon nombre de librairies.
- Script.aculos.us : une librairie Javascript développée comme une sur-couche à Prototype : auto-remplissage, effets, drag & drop, ...
- Rico : Basée aussi sur Prototype, apporte un ensemble assez riche de composants : drag & drop, effets, ...
...il en existe une bonne cinquantaine, à vous de faire le bon choix selon vos besoins, et la qualité du module.
Script.aculo.us : auto-remplissage & ASP.NET
Premier test d'intégration d'un champ rempli automatiquement dans une page aspx : concluant !
L'objectif pour un projet (en ASP.NET), était de rendre plus ergonomique l'aide à la saisie concernant la sélection d'un intitulé. Pour cela, l'auto-remplissage sous forme d'un liste de choix est un bon moyen pour l'utilisateur de retrouver ce qu'il souhaite. Cette aide se déclenche au bout du 4ème caractère saisi.
J'ai utilisé Ajax.Autocompleter, méthode qui permet, de façon simple, d'appeler un script chargé de ramener une liste d'éléments, sous forme d'une liste <ul> <li>choix1</li><li>choix2</li> </ul>.
Le composant est utilisé dans une page aspx (ASP.NET V2), et appelle un handler, page ayant une extension .ashx, chargée d'interroger la base de données puis de ramener les propositions.
1ère étape : inclure les blibliothéques dans l'entête <head> déclaration </head> de la page :
<script type="text/javascript" src="/inc/script.aculo.us/prototype.js"></script> <script type="text/javascript" src="/inc/script.aculo.us/scriptaculous.js"></script>
2ème étape : positionner les éléments (<div>, controle textbox, ...) pour l'utilisation du composant :
1. <asp:textbox id=TBIntitule Runat="server" Columns="80" />
2. <span id="spinner" style="display: none"><img src="/images/spinner_orange.gif" alt="Recherche..." /></span>
3. <div id="autocomplete_choices" class="autocomplete"></div>
4. <script type="text/javascript"> //<![CDATA[ new Ajax.Autocompleter("<%=TBIntitule.ClientID %>", "autocomplete_choices", '<%=Page.ResolveUrl("~/Recherche/search.ashx") %>', {method: 'post', paramName: "searchvalue", minChars: 4, indicator: 'spinner', frequency: 0.4}); //]]> </script>
Explications :
1. le champ de saisie (sera transformé en <input type=text ...id='TBIntitule'>)
2. le bloc d'affichage de l'image d'attente (spinner) lors du déclenchement de la recherche (voir d'autres exemples d'images animées utilisées pour ce type de recherche)
3. le bloc où sera affichée la liste des propositions, sous forme <ul><li></li></ul>
4. le code script.aculo.us qui gère la mécanique d'appel Ajax et de retour des réponses à afficher, dans l'ordre des paramètres : le (DOM) id du champ de recherche, l'id de la <div> d'affichage, le script de recherche (ici un handler ashx, un web service, ou un aspx reste possible), les options du composant (méthode GET ou POST, paramètre passé au script, déclenchement au bout du minChars caractère, l'id du bloc spinner, et la fréquence de déclenchement 0.4 s).
3ème étape : écriture du script pour notre exemple
J'ai opté pour une solution simple : écriture d'un petit handler ashx pour répondre à la requête Ajax. L'avantage de ce type de script est qu'il est simple à mettre en oeuvre, et surtout peu coûteux en ressources (vs. un aspx ou un web service).
Source de la page search.ashx :
public class search : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
private string _search(string strSearch) {
IClassificationManager mgr = ClassificationMgr;
IIntitulePoste[] intitules = mgr.GetIntitulesPostesByString(strSearch, 4);
StringBuilder myreponse = new StringBuilder();
myreponse.Append("<ul>");
for (int i = 0; i < intitules.Length; i++)
myreponse.AppendFormat("<li>{0}</li>", ((IIntitulePoste)intitules[i]).Libelle); myreponse.Append("</ul>");
return myreponse.ToString();
}
public new void ProcessRequest(HttpContext context)
{
string strSearch = context.Request.Form["searchvalue"];
if (strSearch != null && strSearch != "")
context.Response.Write(_search(strSearch));
else
context.Response.Write("<ul></ul>"); }
public new bool IsReusable { get { return true; } }
}
4ème étape : affinage des résultats avec du style
Le résultat étant formé de <ul><li>, il faut y appliquer un style afin de rendre plus utilisable la liste (sans les points . , mettre une couleur sur le choix courant, ...). Le résultat est rendu dans <div id="autocomplete_choices" class="autocomplete">, appliquons un style à cette class :
div.autocomplete { position:absolute; width: 200px; background-color:white; border:1px solid #888; margin:0px; padding:0px; z-index: 1000 }
div.autocomplete ul { list-style-type:none; margin:0px; padding:0px; } div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li { list-style-type:none; display:block; margin:0; cursor:pointer; }
C'est fini ;)
Ce premier exemple, permet de voir très rapidement l'avantage et l'apport d'Ajax dans le Web 2.0, pour un meilleur service à l'utilisateur !
A vos claviers !
