Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

Animations et ASP.net Ajax Control toolkit

Lorsque j'ai commencé à regarder JavaScript / Ajax, je jouais avec les frameworks prototype et script.aculo.us. Ce que j'aimais dans le framework script.aculo.us est la simplicité de faire de jolies animations, regardez plutôt cette page pour voir des exemples d'animation avec Script.aculo.us : Combination Effects Demo 

Depuis je joue avec le framework Microsoft Ajax Library qui fait partie du framework ASP.net Ajax Extensions (aka Atlas). Malheureusement dans ce framework il n'y a rien pour faire des animations. Par contre il y a un projet open-source géré par Microsoft qui rajoute des contrôles et extenders "Ajax" pour ASP.net se basant sur ASP.net Ajax. Parmi ces contrôles, il y a le contrôle animation. Comme son nom l'indique, ce contrôle permet de faire des animations côtés client. L'équipe Atlas ayant décidé de cacher un maximum JavaScript au profit de contrôle serveur drag & dropable (snifff !), on peut créer des animations via une syntaxe XML, le contrôle serveur se charge ensuite de générer du JavaScript.
Mais si vous avez envie de faire des trucs puissant, simplement, et que vous n'avez pas peur de JavaScript, il vous est possible de coder vos animations directement en JavaScript. Tout d'abord il faut importer les différents fichiers JavaScript s'occupant des animations :

<asp:ScriptManager ID="sc1" runat="server"> <Scripts> <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" /> <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" /> <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" /> </Scripts> </asp:ScriptManager>

Les animations se trouvent dans le namespace $AA qui est un alias du namespace AjaxControlToolkit.Animation, pour faire une animation de type FadeOut  c'est à dire une disparition d'un élement DOM, il faut faire :

var pnl = $get('panelID'); (new $AA.FadeOutAnimation(pnl, 2, 15, 0, 1, true)).play();

Il existe même de la documentation pour les différentes animations : Animation Reference

Bien sur, on peut avoir des animations beaucoup plus complexe que ça, voici une animation que l'on pourrait trouver sur une boite de login. En cas d'échec la modalpopup devient rouge et est "secoué" en cas de succès elle devient verte, se réduit et disparait.

Vous pouvez voir un exemple de cette animation  ainsi que le code complet pour reproduire l'exemple sur cette page : http://temp.cyrildurand.net/samples/animations/login.aspx  

window.pageLoad = function(){ $addHandler($get('btnSuccess'), 'click', loginSuccess); $addHandler($get('btnError'), 'click', loginError); } var loginError = function(){ var pnl = $get('<%=pnl1.ClientID%>'); (new $AA.SequenceAnimation(pnl, 1, 15, [ new $AA.ColorAnimation(pnl, 0.2, 15, 'style', 'backgroundColor', '#FFFFDD', '#FFAA88'), new $AA.ColorAnimation(pnl, 0.2, 15, 'style', 'backgroundColor', '#FFAA88', '#FFFFDD') ], 3)).play(); (new $AA.SequenceAnimation(pnl, 1, 15, [ new $AA.MoveAnimation(pnl, 0.01, 15, 5, 0, true, 'px'), new $AA.MoveAnimation(pnl, 0.01, 15, -5, 0, true, 'px') ], 8)).play(); } var loginSuccess = function(){ var pnl = $get('<%=pnl1.ClientID%>'); (new $AA.SequenceAnimation(pnl, 1, 15, [ new $AA.ColorAnimation(pnl, 0.5, 15, 'style', 'backgroundColor', '#FFFFDD', '#AAFF88'), new $AA.ColorAnimation(pnl, 0.5, 15, 'style', 'backgroundColor', '#AAFF88', '#FFFFDD'), new $AA.ParallelAnimation(pnl, 0.5, 15, [ new $AA.ResizeAnimation(pnl1, 2, 15, 0, 0, 'px'), new $AA.FadeOutAnimation(pnl, 2, 15, 0, 1, true) ]), new $AA.FadeOutAnimation($find('<%=mpe1.ClientID%>')._backgroundElement, 0.5, 15, 0, 0.7, false), new $AA.ScriptAction(pnl, 0, 15, '$find(\'<%=mpe1.ClientID%>\').hide();resetPopup();') ], 1)).play(); } var resetPopup = function(){ var popup = $find('<%=mpe1.ClientID%>'); var elmt = popup._popupElement; with (elmt.style){ height = ''; width = ''; top = ''; left = ''; } $common.setElementOpacity(elmt, 1); $common.setElementOpacity(popup._backgroundElement, 0.7); }
Posted: samedi 21 juillet 2007 18:18 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Danuz a dit :

Post Intéressant ! Merci pour toutes ces informations !

(ton exemple ne veut pas se close pour moi sur firefox :( ).

# juillet 21, 2007 20:02

cyril a dit :

Ah oui c'est marrant ca ! après avoir lancé l'animation Error, le lien close ne fonctionne plus sur FF Safari et Opera ...

Cela ressemble à un bug du modalpopup avec le CancelControlID mais j'ai pas envie de regarder le pourquoi :p

J'ai corrigé en rajoutant une animation pour la fermeture du modalpopup plutot que d'utiliser la propriété CancelControlID ...

Pour info je vais écrire plus "massivement" sur les animations (et bien d'autres choses) ...

wait &amp; see :)

# juillet 21, 2007 20:49

Oracle a dit :

Bonjour,

Script très intéressant (comme tout le site) mais je ne comprend pas le fonctionnement de la fonction __doPostBack().

Elle soumet un formulaire mais:

1- Pourquoi?

2- Une fois le formulaire soumis, je ne vois pas ce qu'il se passe ensuite.

Peux-tu m'expliquer?

Merci!

# juillet 24, 2007 04:21

cyril a dit :

Bonjour,

voici une réponse (tardive). La fonction __doPostBack est une fonction indispensable pour ASP.net. En fait ASP.net fonctionne grâce à des postback c'est à dire un post de formulaire sur la meme page. Par exemple lorsque l'on click sur un linkbutton, le lien va appeller la méthode __doPostBack avec 2 arguments qui renseigneronts 2 champs caché (__EVENTARGUMENT et __EVENTTARGET). A partir de ces 2 champs caché ASP.net connaitra sur quel lien on a clické et lancera les événements clicks du linkbutton correspondant.

# juillet 31, 2007 18:53

Promesses a dit :

J'aime bien ce site!

Et j'aime bien ta réponse pour le postback, tu sembles etre pédagogue

# août 15, 2007 20:13

Promesses a dit :

Bonjour Cyril,

tu as dit que tu allais écrire massivement sur les animations.

Est ce en cours ? Vas tu faire des posts au sujet des animations ?

# octobre 21, 2007 10:58
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01