Sébastien Warin

Creative Technologist
& Chief Technology Officer

Tag: ASP.NET AJAX

Oct.22

22 octobre 2006

[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:

<Condition ConditionScript="ToPlay('UpdatePanel1')">
    <FadeOut duration=".25" Fps="30" minimumOpacity=".2" />
</Condition>

</Condition>

Et dans ma page un petit script JS :

     <script language="javascript" type="text/javascript">
         var _UPtoPlay;
         function setUPtoPlay(sender) {
             _UPtoPlay = sender;
         }
         function ToPlay(sender) {
             return sender == _SenderCallback ? true:false;
         }
     </script>

var _UPtoPlay;

function setUPtoPlay(sender) {

_UPtoPlay = sender;

}

function ToPlay(sender) {

return sender == _SenderCallback ? true:false;

}

</script>

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

Button1.Attributes.Add("onClick",
       "UPtoPlay('UpdatePanel1');");

1 2	Button1.Attributes.Add("onClick", "UPtoPlay('UpdatePanel1');");

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

ASP.NET AJAX,Javascript,UpdatePanel

Oct.21

21 octobre 2006

0 Sebastien

[Atlas] Microsoft ASP.NET AJAX Beta 1

Hop la, depuis hier est sortie la version Beta 1 du projet Atlas maintenant renommé en Microsoft ASP.NET AJAX ainsi qu’une nouvelle release du AJAX Control ToolKit avec 3 nouveaux controls (DropDown, MutuallyExlcusiveCheckBox et ValidatorCallout).

Des deux cotés l’on remarque pas mal de gros changements au niveau des proprietes des controls. Déjà le ScriptManager ne propose plus de ErrorMessage. Les Triggers des UpdatePanel ont eux aussi changés. On retrouve deux types de triggers : PostBackTrigger et AsyncPostBackTrigger. Ex:

<asp:AsyncPostBackTrigger
         ControlID="imgGalerie" EventName="Click" />

1 2	<asp:AsyncPostBackTrigger ControlID="imgGalerie" EventName="Click" />

Vous remarquez aussi le changement du TagPrefix des controls d‘atlas à asp. De même l’assembly à renommé en Microsoft.Web.Extensions.

Du coté des Controls Toolkits, les proprietes de plusieurs controls sont à mettre directement dans la balise mère et non dans des balises filles du type « …..Details » ou « …Property ». Exemple :

<atlasToolkit:RoundedCornersExtender ID="rcViewer"
                runat="server" Color="White" Radius="6"
                TargetControlID="plViewer" />

<atlasToolkit:RoundedCornersExtender ID="rcViewer"

runat="server" Color="White" Radius="6"

TargetControlID="plViewer" />

Bref, compter de 10min à une bonne heure, en fonction de la taille de votre projet pour migrer votre code pour la beta 1 de ce magifique Framework 🙂

Microsoft ASP.NET AJAX :

http://ajax.asp.net/

Microsoft ASP.NET AJAX Beta 1 :

http://www.microsoft.com/downloads/……

ASP.NET AJAX Controls ToolKit :

http://ajax.asp.net/ajaxtoolkit/

Dev,Atlas

ASP.NET AJAX,dotNET,Microsoft

Oct.09

9 octobre 2006

3 Sebastien

[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 :

Page.ClientScript.RegisterStartupScript(GetType(Page), _
        "<nom_cle>", "<fonction_JS>", True)

1 2	Page.ClientScript.RegisterStartupScript(GetType(Page), _ "<nom_cle>", "<fonction_JS>", True)

Exemple :

Page.ClientScript.RegisterStartupScript(GetType(Page), _
        "pageLoad", "alert('Salut à tous');", True)

1 2	Page.ClientScript.RegisterStartupScript(GetType(Page), _ "pageLoad", "alert('Salut à tous');", True)

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

ASP.NET AJAX,Javascript,UpdatePanel

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

Page 2 of 2

Sébastien Warin

Creative Technologist& Chief Technology Officer

Oct.22

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

Oct.21

[Atlas] Microsoft ASP.NET AJAX Beta 1

Oct.09

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

Jun.02

Petit tour du côté d’Atlas

Creative Technologist
& Chief Technology Officer