Sébastien Warin

Creative Technologist
& Chief Technology Officer

Tag: Web 2.0

Jan.21

21 janvier 2007

Visual WebGUI

Comme inscrit sur la homepage du site officiel :

Visual WebGui is an AJAX development framework that simplifies development of enterprise IT web applications to the simplest.

En fait pour être plus précis, le framework Visual WebGui propose un modèle de développement Winform, avec un designer Winform où l’on crée nos Forms, Dialogs ou UserControls avec des contrôles de type Winform (Label, Textbox, DateTimePiker, Listbox, combobox, etc…).

En gros on développe une application Winform MAIS au lieu de compiler un EXE, nous obtenons une application Web assez jolie avec AJAX inside pour gérer les contrôles.

Bien sur il ne faut pas trop regarder le HTML/Javascript produit surtout pour les amoureux des standards (et du beau code), et même si ce produit a encore pas mal de chose à revoir, je pense qu’il a un bon avenir dans le monde du développement d’application Web enfin Web 2.0 🙂

J’avais commencé la semaine dernière a créer un petit projet de test, une application de gestion de taches (gestion projets/milestones/taches). La rapidité de développement est assez impressionnante. Après avoir créé ma base SQL et DAL, il m’a fallu peu de temps pour placer mes contrôles (un tabControl, quelques listbox, textbox et button), un peu de code et créer une belle petite application Web.

A défaut d’avoir déployée l’application sur mon serveur de prod, une petite vidéo de présentation :

Bref, produit assez sympa, qui me rappelle Xamlon qui passé du Winform au Flash 🙂

Info,HighTech,.NET

AJAX,dotNET,Javascript,Web 2.0

Jun.02

2 juin 2006

0 Sebastien

Petit tour du côté d’Atlas

What is ATLAS ?

Atlas is a free framework for building a new generation of richer, more interactive, highly personalized standards based Web applications

En clair, Atlas est une plateforme gratuite pour concevoir des applications Web 2.0 utilisant les concepts de l’AJAX entre autre. Elle est encore en version beta (derniere version a ce jour : April CTP) et est édité par le geant Microsoft.
En une phrase, Atlas est le framework coté client de l’ASP.NET 2.0 mais attention, on est pas obligé de developper en ASP.NET 2.0 pour profiter des librairies Atlas !

Controls Toolkit
En plus des libraires que nous propose la plateforme Atlas, on peut aussi télécharger une panoplie de « Controls » pouvant etre integrés a VS.net. Parmis ces Controls, on y trouve :

DragPanel : permet de drag&dropper des Panels
DropShadow : permet de cacher des Panels avec animation
ModalPopup : permet de créer des « pseudo-fenêtre »
PopupControl : permet d’afficher des controls dynamiquement
Et bien d’autres….

Ce qui est génial, c’est que tout est automatique… J’ai réalisé une petite page avec un Panel deplacable où l’on veut sur la page, avec un calendrier affiché dynamiquement au clique d’un textbox, et plein de petit gadget en moins de 15min et avec 0 ligne de code juste en utilisant ma souris !!!!!

La fenêtre est déplacable, même les bords arrondis sont gérés par un des controls (RoundedCorners), le message est un ModalPopup et le calendrier (control Calendar) est affiché dynamiquement par le control PopupControl. Et je rappelle que je n’ai ecrit AUCUNE ligne de code pour faire cette simple page !! (….. »Que du bonheur » :-D)

Tous les controls Atlas et leur demo : http://atlas.asp.net/atlastoolkit/

Démarrer avec Atlas
Si vous voulez vous y mettre, j’espere que .net 2.0 & VS2005 sont déjà installés sur votre machine 🙂
Il vous faudra ensuite le framework Atlas et je vous conseille aussi de télécharger le ControlsToolkit :
http://atlas.asp.net/default.aspx?tabid…..
A regarder, la video de Scott Guthrier, le directeur général de .NET : http://download.microsoft.com/download/…../asp_net_atlas.wmv
Toutes les docs sur Atlas sont dispo ici : http://atlas.asp.net/docs/default.aspx

Des démos de sites
Enfin pour finir, voici quelques sites utilisant ATLAS :

Et sans oublier le site officiel : http://atlas.asp.net

.NET,Atlas

ASP.NET AJAX,dotNET,Microsoft,Web 2.0

Mar.16

16 mars 2006

5 Sebastien

AJAX, XMLHttp et le cache !!

En developpant le projet dotnet (lire mon post du 26/02/06) en XHTML/JS à la sauce AJAX, je me suis heurté à un problème de cache !
En effet que l’on utilise l’objet XMLHttpRequest pour Firefox & Co ou l’objet de IE (Microsoft.XMLHTTP), on appelle la méthode open et send pour récuperer un fichier XML par le code :

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);

objXMLHTTP.send(null);

objXML = objXMLHTTP.responseXML;

Le problème de cela, c’est qu’une fois le XML téléchargé, le navigateur le met dans son cache ! Si par la suite vous modifiez votre XML, votre application web ne tiendra pas compte des modifications même en rechargant la page (F5) ce qui est un peu embêtant !
Pour remedier à cela, une technique consiste a appeler la methode setRequestHeader pour définir le Cache-Control à no-cache par le code :

 objXMLHTTP.setRequestHeader("Cache-Control","no-cache");

1	objXMLHTTP.setRequestHeader("Cache-Control","no-cache");

Le problème, c’est que ca marche PAS 😀 Enfin du moins sur pas mon Firefox…. ^^

La technique que j’ai implémenté est de passer des parametres uniques dans l’URL de notre fichier XML !
Je m’explique, les adresses URL http://monserveur/monfichier.xml?id=1 et http://monserveur/monfichier.xml?id=2 retourne tous les deux le même fichier à savoir monfichier.xml, ici les parametres n’ont aucune influence coté serveur mais pour le coté client, le navigateur (IE,FF,..) pense que ce sont 2 fichiers differentes car les URL ne sont pas identique et donc on contourne le problème de cache !!
Personnellement, j’utilise pour cela la fonction getTime() de l’objet Javascript Date qui retourne le nombre de millisecondes depuis le 1er Janvier 1970 ! On obtient bien un parametre unique a moins de déregler son horloge au millieme de seconde près ^^.
Le code final:

objXMLHTTP.open("GET", "http://localhost/mon_app/mon_fichier.xml?ms=" + new Date().getTime(), false); objXMLHTTP.setRequestHeader("Cache-Control","no-cache");
objXMLHTTP.send(null); objXML = objXMLHTTP.responseXML;

1 2	objXMLHTTP.open("GET", "http://localhost/mon_app/mon_fichier.xml?ms=" + new Date().getTime(), false); objXMLHTTP.setRequestHeader("Cache-Control","no-cache"); objXMLHTTP.send(null); objXML = objXMLHTTP.responseXML;

Elle est pas belle vie ?? ^^ 🙂

Perso,Dev

AJAX,Javascript,Web 2.0,XMLHttpRequest

Feb.26

26 février 2006

9 Sebastien

AJAX

Dans le cadre de mon projet Dotnet, je me suis mis a utiliser AJAX ^^ C’est pourquoi, je vais brievement vous exposer ce qu’est AJAX avec un petit exemple d’utilisation car je sais que tout le monde préfere la pratique que la théorie !!

AJAX késako ??
Non non je ne fais pas le ménage à l’eau de javel ^^ AJAX c’est tout simplement l’avenir du Web (concept Web 2.0) ! AJAX pour Asynchronous JavaScript And XML (en francais : « XML et Javascript asynchrones ») est une méthode de développement des applications Web !
En effet tous les échanges client<>serveur se font en arrière plan dans des fichiers XML pilotés avec des scripts JS !

Sans AJAX : actuellement, quand vous êtes sur une page A d’un site et que vous demandez la page B, votre navigateur web (IE, Firefox, ..) renvoie une requête HTTP demandant la page B, le serveur vous reponds en vous envoyant tout le code HTML (+ JS, images, CSS, …) de cette page !

Deux inconvenients :

on renvoie une requete HTTP, c’est long, le navigateur devient tout blanc, faut le temps qu’il charge la nouvelle page !!!
et surtout, c’est bête de tout recharger car en général sur un site, la difference entre 2 pages n’est que le contenu; les menus, l’habillage graphique (design) reste identique !!

Avec AJAX : maintenant grâce a AJAX on resoud ces deux problemes :

Avec navigateur charge tout le code HTML de la page A (+ images, css, et scripts JS nottament pour gérer l’AJAX)
Quand vous demandez la page B, votre navigateur ne bouge pas, c’est un script JS qui derrière va venir telecharger un fichier XML contenant juste le contenu de la novelle page !

Deux avantages :

Impression d’instantané, le contenu arrive sans voir le chargement !
Impression d’instantané renforcé par le fait que seul le fichier XML contenant le contenu de la nouvelle page transite par le reseau, ce qui reduit enormement les echanges client<>serveur (le design n’est chargé qu’une seule fois pour la 1er page !)

En une phrase, AJAX va donc révolutionner les applications Web 🙂

Pour plus d’info sur AJAX :http://fr.wikipedia.org/wiki/AJAX
Des exemples AJAX: http://fr.wikipedia.org/wiki/AJAX#Liens_externes

Bon passons à la pratique

Pour cet exemple, on nous allons créer une page qui liste les éléves de ma classe 🙂 Pour cela, nous créons un fichier XML contenant les données :

<?xml version="1.0" ?>
  <supinfo>
  	<student id="48759" sex="M" age="19">Sébastien Warin</student>
  	<student id="45813" sex="M" age="18">Kévin Drouvin</student>
  	<student id="47934" sex="M" age="18">Benoit Scourion</student>
  	<student id="47715" sex="M" age="19">Amaury Balmer</student>
  </supinfo>

<?xml version="1.0" ?>

<student id="48759" sex="M" age="19">Sébastien Warin</student>

<student id="45813" sex="M" age="18">Kévin Drouvin</student>

<student id="47934" sex="M" age="18">Benoit Scourion</student>

<student id="47715" sex="M" age="19">Amaury Balmer</student>

</supinfo>

Vous remarquerez que les ID, Sexe et Age sont contenu dans les attributs de la balise studient alors que les noms sont dans la balise ! (ps: désolé pour les autres éléves, je n’ai pas tout mis, ca veux pas dire que je ne vous aimes pas :-)) L’on nommera ce fichier : eleves.xml

Créons maintenant la page HTML de base doctypé en XHTML 1.0 Strict :

<!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 by Sebeuh</title>
  	<SCRIPT LANGUAGE="JavaScript">
  		function update()
  		{
  			// Script AJAX
  		}
  	</SCRIPT>
  </head>
  <body>
  	<h1>Test AJAX</h1>
  	<div id="contenu"></div>
  	<input type="button" name="update" value="Mise a jour AJAX" onclick="javascript:update();" />
  </body>
</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 by Sebeuh</title>

function update()

{

// Script AJAX

}

</SCRIPT>

</head>

<body>

</body>

</html>

Cette page contient une fonction Javascript : update() qui contiendra tout le code JS pour l’ AJAX, une balise DIV nommé contenu où sera affiché la liste des éléves ainsi qu’un bouton nommé update qui appelera notre fonction update().

Il nous reste plus qu’a ecrire le code de notre fonction update() ! Commencons par definir quelques variables que nous initialiserons :

var objXMLHTTP = null;
var objXML = null;
var browser = null;
if(window.XMLHttpRequest) // Pour Firefox
{
 	objXMLHTTP = new XMLHttpRequest();
 	objXML = document.implementation.createDocument('','doc',null);
 	browser = "FF";
}
else if(window.ActiveXObject) // Pour IE
{
 	objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
 	objXML = new ActiveXObject('Microsoft.XMLDOM');
 	browser = "IE";
}
else
 	alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

var objXMLHTTP = null;

var objXML = null;

var browser = null;

if(window.XMLHttpRequest) // Pour Firefox

{

objXMLHTTP = new XMLHttpRequest();

objXML = document.implementation.createDocument('','doc',null);

browser = "FF";

}

else if(window.ActiveXObject) // Pour IE

{

objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");

objXML = new ActiveXObject('Microsoft.XMLDOM');

browser = "IE";

}

else

alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

La variable browser nous permet de savoir si l’on utilise IE ou Firefox (and co comme Opera, etc…) ! En fonction du navigateur, l’on utilise soit l’ActiveX Microsoft XMLHTTP et XMLDOM pour IE ou XMLHttpRequest et createDocument pour les amis de Firefox !

Nous allons maintenant télécharger le XML grace a notre objet objXMLHTTP et stocker dans notre objet objXML grace au code :

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);

objXMLHTTP.send(null);

objXML = objXMLHTTP.responseXML;

Il nous reste plus qu’a exploiter le contenu du XML pour l’afficher ! Pour cela nous allons définir une variable out qui contiendra le code HTML a afficher dans notre balise DIV contenu ainsi qu’une variable nbEleves pour contenir le nombre d’eleves afin d’en faire une boucle.

var out = "";
var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

1 2	var out = ""; var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

Nous allons maintenant faire une boucle pour le nombre d’eleves de notre fichier XML et remplir notre variable out par le code :

for(var a = 0 ; a < nbEleves ; a++) {
 	var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");
 	var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");
 	var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");
 	if(browser == "IE")
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).text;
 	else
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;
 	out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";
}

for(var a = 0 ; a < nbEleves ; a++) {

var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");

var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");

var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");

if(browser == "IE")

var name = objXML.documentElement.getElementsByTagName("student").item(a).text;

else

var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;

out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";

}

Vous remarquerez que pour récuperer le contenu d’une balise (et non ses attributs) soit ici le nom de l’eleve, cela differt selon le navigateur que l’on utilise. Sous IE nous utilisons la proprieté text alors que sous Firefox & Co c’est la proprieté textContent.

Il nous reste plus qu’a afficher notre variable out dans notre DIV :

var today = new Date();
var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();
if (document.getElementById)
 	document.getElementById("contenu").innerHTML =  "Mise a jour : " + heure + "<br/>" + out;

var today = new Date();

var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();

if (document.getElementById)

document.getElementById("contenu").innerHTML = "Mise a jour : " + heure + "<br/>" + out;

J’ai rajouté l’heure, cela est biensur facultatif !!

Vous pouvez vous amusez à modifier le contenu dans notre fichier XML (eleves.xml) et cliquez sur le bouton « Mise a jour AJAX » de notre page pour voir que celle ci se met a jour sans pour autant faire un allé-retour sur le serveur 🙂

Cet exemple est certe très simple mais ouvre les pleins de voie, a vous de faire marcher votre imagination… Moi je dis, vive AJAX 😀

(Page complete : https://sebastien.warin.fr/…/ajax.txt)

Perso,Dev

AJAX,Javascript,Web 2.0