Oct.22

[Atlas] UpdatePanelAnimation : la galere des animations OnUpdating/ed

Est-ce un bug, un oublie ou juste moi qui me prend la tête pour rien ? Les UpdatePanelAnimation sont des extendeurs du controle UpdatePanel nous permettant de jouer une animation au rafraichissement d’un UP.

Je mets donc un ScriptManager, 2 UpdatePanel en mode Conditional et 2 UpdatePanelAnimationExtender mappés sur les UP respectifs (TargetControlID= »…. »). Je remplis en suite une animation sur le OnUpdating pour faire un FadeOut de l’UP et sur le OnUpdated un FadeIn.

Wahou c’est beau… La page disparait en fondu, se met à jour et hop reapparait 🙂

OUI, mais voila, le problème est que ces animations sont joués à chaque AsyncPostBack pour tous les UpdatePanels.
Dans mon cas les animations s’executés sur les deux UpdatePanels alors qu’un seul d’entre eux etaient mis a jour ! 🙁

On peux tester cela très facilement en rajoutant un Button sur la page qu’on enregistre à son chargement comme controle AsyncPostBack (ScriptManager1.RegisterAsyncPostBackControl(monButton)).
Sur le code du bouton on change le contenu d’un labelA d’un UpdatePanelA et met à ajout un UpdatePanelB (UpdatePanelB.Update()).
On constatera que le labelA n’a pas changé (vu que le UpdatePanelA n’a pas été Update()) mais l’animation sur celui ci c’est quand même executé.

Alors là, expliquez moi l’interet de jouer les animations qui portent le nom: OnUpdating et OnUpdated sur un UpdatePanel qui ne s’est pas Updating/Updated ?!?!?%% J’utilise la beta 1 fraichement téléchargé de vendredi, avait-on ce probleme avant ?

Enfin soit, ma petite astuce pour pouvoir me sortir de cette galere et controler l’execution des animations à été de poser une condition dans la sequence des animations:

Et dans ma page un petit script JS :

Enfin j’ajoute l’attribut OnClick sur les triggers de mon UpdatePanel A et B pour appeler la fonction setUPtoPlay :

De tel maniere chaque controle émettant un ASyncPostBack appele la fonction setUPtoPlay() qui stoque coté client le nom de l‘UpdatePanel qui est mis à jour et doit jouer l’animation.

Pour revenir sur ce que je disais au debut : Est-ce un bug, un oublie ou juste moi qui me prend la tête pour rien ??? 🙂

Dev,Atlas

Oct.18

[JS] Le scrolling : Plein de scrollers prêt à l’emploi

Bon je ne vais pas revenir sur ce qu’est le scrolling ou un scroller mais rapidement c’est qu’il vous permez de faire défiler du contenu (texte, image, etc…) à l’ecran 🙂
Certe votre navigateur préféré vous offrent de belles barres grises pour pouvoir faire défiler les pages mais dans certains sitse, pour mieux intégrer le design, l’on developpe notre propre systeme de scrolling… C’est ce que je fais nottament avec un site d’un client où je propose de belles petites fleches (qui ne sont ni plus ni moins que des images) pour pouvoir faire defiler le contenu (en fait je deplace juste un div).

J’avais déjà developpé un petit systeme de scrolling pour mon projet SUPINFO DotNet l’an dernier, mais devant souvent reprendre le code pour l’integrer dans mes developpements en cours j’ai décidé de faire un script complet et générique pour pouvoir l’intégrer dans n’importe quel site.

Je vous met donc ici à disposition mon code (vive l’open source 🙂 ). Bon biensur, merci vous faire connaitre si vous l’utilisez dans vos developpements ^_^

Mon script contient (entre autre) :

  • RegisterScroller(name,parentSize,initial_position,reload_postback). Le 1er parametre est le nom (id) du DIV a scroller, le parentSize est un objet Point qui definit la taille du parent (partie visible), initial_position est aussi un Point qui définit les coordonnées initiales du DIV et reload_postback est un booléan qui défini si le DIV doit etre remplacé à sa derniere position lors de l’appel de la fonction refixPosition (que nous verrons ci-après)
  • refixPosition() : permet de repositionner les scrollers marqués de reload_postback à True. (Utile dans le cas d’une utilisation avec Atlas. cf ce post)
  • resetPosition(sender) : où sender est l’id du DIV/Scroller à remettre à sa position d’origine (initial_position)
  • startScroll(sender, direction) : sender etant l’ID du DIV/Scroller et direction peut etre UP, DN, GT, LT. La fonction permet donc de demarrer le scrolling (à placer sur le click de la fleche)
  • stopScroll(sender) : permet d’arreter le scroll (à placer sur le mouseout de la fleche)
  • scroll(sender, direction) : fonction qui vient scroller le sender en fonction de sa direction. (à placer sur le mouseover de la fleche).

Exemple dans mon load de ma page je retrouve :

Qui me permet d’enregistrer le sroller sur le DIV pellicule_content qui sera visible dans un rectangle de 275x65px, qui démarre à 13px du bord gauche et qui est repositionné à sa derniere postion lors de l’appel de la fonction refixPostion()
Puis dans mon code HTML je retrouve quelque chose du type :

Bon biensur à vous de vous débrouillez avec le CSS et les ZIndex pour faire quelque chose potable 🙂

Donc vous voila parrez pour faire pleins de scrollers dans vos sites, en haut/bas, gauche/droite. Elles est pas belle la vie ? ^_^

Télécharger mon script Scroll.js

Tous commentaires sont les bienvenues 🙂

Perso,Dev

Oct.18

[JS] Surcharge de parametres JavaScript

C’est en lisant le code source JS d’Atlas que j’ai decouvert la surcharge de parametres Javascript. Ok cela vous parrez peut être idiot mais comme dirait un certain B.Watterson : L’idiotie est l’essence des hommes et je n’ai d’honte à apprendre 🙂

Alors voila, je lisais le code et un moment donné je vois une fonction du type :

Qui était appellé par une ligne de type :

A ce moment j’ai senti mes petits neuronnes s’exciter dans tous les sens avec la question : Je ne comprends pas, ma fonction attend deux arguments et moi je lui en passe quatre.. Qu’est ce qu’il se passe ? 🙂
Dans le code de la fonction j’ai vu à plusieurs reprises le mot arguments. En fouillant un peu plus, impossible de trouver la déclaration de cette variable. Serait-ce une variable propre à JS ???
J’ai donc créé une page html entierement vide pour faire un alert() dans une fonction de cette fameuse variable arguments. Suspense jusqu’a l’execution de la page : vais-je tomber sur un undefined ?? => Et ben non, une belle alerte avec inscrit [object Object] et mes petits neuronnes reprirent une activité normale 🙂

En effet, tous les parametres passés à une fonction javascript sont contenu dans un tableau (Array) nommé arguments.
Exemple simple :

Vous affichera un beau message :

Et pourtant ma fonction ne prend aucun parametre explicitement 🙂 Genial non ?

Dev

Oct.09

[Atlas] Appeller une fonction JS après un UpdatePanel

J’ai passé ma journée d’hier a chercher comment appeler une fonction JS (coté client donc) après l’update d’un UpdatePanel avec un rendu partiel du ScriptManager (enablepartialrendering= »True »).

J’ai enfin trouvé et en fait c’est vraiment tout bête. Il suffit d’ajouter dans votre Page_Load la ligne :

Exemple :

Et surtout n’oubliez pas le dernier parametre à True dans le cas d’un enablepartialrendering= »True » à votre ScriptManager, car c’est lui que j’avais oublié et qui m’a fait chercher de longues heures 🙂

Dev,Atlas

Mar.16

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 :

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 :

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:

Elle est pas belle vie ?? ^^ 🙂

Perso,Dev

Feb.26

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 :

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 :

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 :

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 :

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.

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

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 :

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 : http://sebastien.warin.fr/…/ajax.txt)

Perso,Dev