Alors essayez Bitty.
Le navigateur inclus dans le navigateur qui fonctionne avec tous les navigateurs.
Ne vous inquiétez pas, moi aussi je trouve que c’est complétement débile comme idée. Certaines personnes l’utilisent vraiment sur leur site, comme ici : http://ba.manilasites.com/.
Techniquement, le projet doit quand même être relativement balaise pour gérer tout ça en Javascript, donc bravo au développeur.
Vu sur le blog de Fred Cavazza, ce site utilise le Flash d’une façon différente. Plutôt que d’ajouter une surcouche Flash avec des animations dans tous les sens qui améliorent rarement la lisibilité, ce site simule les sens de façon vraiment originale… A voir pour le concept : A-to-S .
Vu sur ce site : EGBG Anti-Telemarketing Contre-scénario
Ils proposent un contre scénario à utiliser lorsqu’un téléprospecteur téléphone chez vous. Pour cela ils fournissent une grille de réponses à donner prêt à l’emploi sur l’url :
http://www.xs4all.nl/~egbg/EGBGcontrescenario.pdf
Exemple :
Je me demande l’efficacité de cette approche mais c’est putôt rigolo comme idée. Si quelqu’un veut bien tester, qu’il n’hésite pas à commenter. Ces derniers temps je suis tranquille de ce coté là, et aucun coup de fil commercial pour tester…
Premier vrai et long article technique de ce blog…
Préambule
On trouve aujourd’hui beaucoup de références sur le net sur AJAX ( XmlHTTPRequest en réalité ) mais peu d’éléments sur l’intégration de AJAX sur le framework Struts. Concernant les ressources francaises sur le sujet, c’est quasi inexistant en recherche sur Google. Je me suis donc décidé à écrire ce petit article technique. Attention, cet article n’explique pas réellement le fonctionnement de la technologie AJAX mais plutôt de son intégration avec le framework Struts.
Concept
Pour rappeler très briévement la technologie AJAX, il s’agit de permettre au navigateur d’effectuer des requêtes HTTP sur le serveur en Javascript et de mettre à jour dynamiquement le contenu de la page (via DHTML) sans recharger toute la fenêtre.
Rappel des étapes :
Pour plus d’informations, il existe de nombreux sites en parlant mieux que moi…
Intégration avec Struts
Comme on peut le voir dans les étapes ci-dessus, l’intégration avec Struts ne se situe que lors de l’étape 4 puisque c’est la seule étape qui fait intervenir le serveur. Afin d’implémenter la réception des appels AJAX sur le serveur, plusieurs solutions sont possibles :
La 1ère solution étant à proscrire et la deuxième impliquant l’utilisation d’un framework tiers, la solution d’actions dédiées est parfaitement adaptée pour des petites extensions sur des projets existants comme cela est souvent le cas avec l’utilisation de AJAX.
Mon exemple sera l’implémentation d’une page donnant l’heure du serveur. C’est un exemple trivial mais il permet de mettre en place la chaîne complète, ce qui est l’intérêt de cet article.
Etape 1 : Ecriture de la page HTML
On commence par la page HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test AJAX et Struts</title> <script type="text/javascript"> <!- - Ici on placera le code Javascript --> </script> </head> <body> <div id="form"> <form action="#"> <input type="button" name="Envoyer" onclick="appelAjaxExemple();" value="Je veux l'heure du serveur" /> </form> </div> <hr /> <div id="resultat"> </div> </body> </html>
La page est la plus simple possible avec un simple bouton qui appelle la méthode Javascript et un DIV de résultat.
Ensuite on écrit le Javascript suivant entre les balises head :
// appelé dans la page function appelAjaxExemple()
{
ajaxCallRemotePage('ajaxAction.do');
}
Cette méthode est celle appelée par le bouton du formulaire. Il se contente d’appeler la méthode de traitement avec en paramètre l’action Struts qui traitera l’appel Asynchrone (voir plus bas)
// Methode d'appel a une page en XmlHttpRequest
function ajaxCallRemotePage(url)
{
if (window.XMLHttpRequest)
{
// Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);
}
else if (window.ActiveXObject)
{
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send();
}
else {
return; // Navigateur non compatible
}
}
Il s’agit de l’implémentation technique de la couche XmlHTTPRequest, on peut voir que le code est écrit pour gérer les navigateurs IE et les autres (dont Firefox). La requête sur le serveur est effectuée au moment du send(). On peut voir aussi que la méthode de callback processStateChange est défini. C’est la méthode qui est appelée lorsque l’état de la requête bouge. Voici son code :
// Methode private qui traite le retour de l'appel de "ajaxCallRemotePage"
function processStateChange()
{
if (req.readyState == 4)
{ // Complete
if (req.status == 200)
{ // OK response
// Pour le debug
alert("ok:"+req.responseText);
} else {
// Pour le debug
alert("Problem: " + req.statusText);
alert("status: " + req.status);
}
} }
L’algorithme est relativement simple. Si l’état de la requête est à 4 (terminée), on vérifie que le serveur nous a renvoyé un code HTTP de 200 qui correspond à un OK serveur. Alors dans ce cas, on affiche le résultat retourné par le serveur sinon on affiche l’erreur…
Etape 2 : configuration de Struts
Je considère dans ce chapitre que Struts est déjà correctement installé. Si vous avez besoin d’un projet vide, vous pouvez utiliser le Struts-Blank.
On commence par déclarer dans le fichier struts-config, une nouvelle action correspondant à notre appel depuis le javascript :
<action-mappings> <!- - Declaration de notre action Struts --> <action path="/ajaxAction" type="com.jc.AjaxAction" /> </action-mappings>
Le contenu de l’action mapping est relativement simple puisque on se contente d’appeler une classe Java qui effectuera le traitement serveur. On peut remarquer qu’il n’est pas nécéssaire de préciser une page jsp de résultat puisque c’est le code java qui écrit dans l’objet response.
Etape 3 : Ecriture de l’action Struts
Le code de l’action Struts est le suivant :
package com.jc; import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class AjaxAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
{
String valeur = "test";
// Write the text to response
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println(valeur);
out.flush();
return null;
}
}
Le code est relativement simple, dans le sens où il se contente d’écrire dans le flux de sortie de la requête HTTP. On peut remarquer que le return est null, car on ne suit pas la logique des mappings Struts et que le Javascript lira directement le flux provenant du serveur.
Etape 4 : Le test
En ouvrant le navigateur sur la page de test on tombe sur cet écran :
Après un clic sur le bouton, la popup d’alert s’affiche avec le résultat retourné par le serveur :
Parfait, maintenant on implémente un peu de fonctionnel…
Etape 5 : Implémentation de l’affichage de l’heure du serveur
Maintenant que l’aller retour serveur fonctionne, on peut ajouter un peu de code applicatif pour montrer l’intérêt de ce framework. Dans notre exemple, au clic sur le bouton, le serveur va retourner son heure système qui sera affiché sur la page.
La première modification concerne le code de l’action Java :
A la place de :
String valeur = "test";
Récupérons plutôt l’heure système (attention aux imports) :
Date date = GregorianCalendar.getInstance().getTime(); String valeur = SimpleDateFormat.getDateTimeInstance().format(date);
Il ne reste plus qu’à modifier le javascript de la page : Dans le traitement du résultat :
if (req.status == 200)
{ // OK response
// Pour le debug
alert("ok:"+req.responseText);
On remplace l’alert par :
// alert("ok:"+req.responseText);
var d = document.getElementById('resultat');
d.innerHTML = req.responseText;
résultat sur la page :
conclusion
Cette petite introduction sera j’espère pratique pour les personnes souhaitant d’intégrer rapidement des requêtes asynchrones sur des applications déjà existantes. Mais pour une intégration plus poussée, l’utilisation de frameworks dédiés sera un gros plus.
Source du projet développé sous WTP 1.0 : AjaxProject.zip
bugs possibles
var path = window.location.pathname; path = path.substring( 0, path.length - "actionCourante.do".length );
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
Références intéressantes
Preuve que mon blog est réellement visité , ou preuve que l’automatisation du spamming a fait de grands progrès, mon blog est maintenant spammé sur les commentaires.
J’ai donc mis en route le plugin Spamplemousse de dotclear.
Malgré le filtrage, il reste toujours des commentaires qui arrivent à passer régulièrement. J’affine donc au fur et à mesure la liste des mots interdits, mais si jamais ça ne suffit pas, j’ajouterais un joli Captcha !
Encore une fois désolé pour les fils RSS inutilement mis à jour…
Je profite de ce billet pour annoncer qu’enfin le calme commence à revenir.
En effet, très peu de temps après mon arrivée sur Bordeaux je suis parti 2 semaines en mission sur Poitiers. C’etait relativement dur étant donné que je venais à peine d’arriver sur Bordeaux mais j’ai quand même essayé de donner bonne impression de la part des bordelais aux poitevins !
En tout cas ma mission là bas est terminée et j’en reviens avec une super expérience technique que j’essaierais de partager ici avec deux trois articles si le temps me le permet et que la motivation y est (résolution 2006 programmée).
Sinon je peux donc maintenant vous parler de l’ambiance bordelaise de travail, qui se trouve être ma foi, très sympathique. Avec un taux d’apéros d’une excellente moyenne qui fait honneur à mon ancien travail 😉 L’équipe est vraiment sympa. Non je ne citerais pas l’employeur déontologie oblige 🙂 mais si vous cherchez du boulot comme développeur Web sur Bordeaux je ne suis pas contre une prime de cooptation => mon email est sur le cadre de droite 😉 .
La période est également propice à vous souhaiter, amis lecteurs (3 personnes perdues maximum 🙂 ) de bonnes fêtes !
Cela fait 5 jours que je suis arrivé. Le déménagement s’est bien passé grâce à la fine équipe recrutée.
En vrac :
Démarrage du prochaine taf jeudi neuf heures zéro zéro, je ne sais pas comment je vais faire pour être à l’heure (mes ex-collègues comprendront)
Et voilà, c’était aujourd’hui ma dernière journée au travail. Beaucoup d’émotions qu’on a essayé de partager ensemble autour d’un petit apéro… Je remercie chaleureusement tous ceux qui sont venus même si peu lisent ce blog.
Sinon, ces derniers jours étaient particulièrement chargés avec à gérer en parallèle le travail et le déménagement. Heureusement le téléphone nous est coupé demain à 6H. Au moins là, je suis sûr de passer ma journée à finir les cartons !
Alors vu qu’on ne se reverra pas d’ici là : * Au revoir Toulouse *
J’en profiterai pour refaire mon cadre « L’auteur »…
The score for http://julien.carnelos.free.fr/blog/ is 4 out of 10
Je suis déçu… j’aurais cru faire plus 🙂
* Attempts to be XHTML Strict ? Yes! * Refers to mash-ups ? No * Has a Blogline blogroll ? Yes! * Appears to be built using Ruby on Rails ? No * Refers to VCs ? No * Has that goofy 'My Blog is Worth' link ? No * Mentions Ruby ? Yes! * Has prototype.js ? No * Actually mentions Web 2.0 ? Yes! * Refers to del.icio.us ? No
J’aurais pu faire un petit effort et tenter le 6/10 en installant un blog en ruby mais ça sera pour la prochaine fois…
A vous de tester ! Web 2.0 validator (j’aime bien l’URL)
Vu sur Mitternacht.
Je viens de constater sur le IEBlog, qu’une version IE de la web developper toolbar est sortie. Bien que je n’utilise plus internet explorer pour le développement web, j’ai quand même installé la bête.
Voici une capture d’écran de la toolbar (clic pour agrandir):
Donc, en gros on retrouve les mêmes fonctionnalités que sur la celèbre toolbar de Firefox.
On retrouve toutes les options intéressantes comme la possibilité d’encadrer les éléments du DOM ou de modifier en temps réel les propriétés de ces éléments (très sympatique ça!).
A l’utilisation c’est plutôt pratique, fluide et il n’a pas planté durant mes 10 minutes d’utilisation.
En tout cas un bon point pour cet outil. Recommandé à tous les développeurs Web qui utilisent IE (et ils sont nombreux…).
Commentaires récents