| Comments

in my first attempt i used fake targets to create server controls to wire up the animation extender, then during execution, changed the target and executed the animation.  a little kluge i thought, but it worked -- and under the cover essentially that's what happens anyway on a server control.

well today, ajax wizard and poker maven pointed me to a post where it talked about using the client libraries directly.  basically when you add an animation extender control it tells the runtime what client-side script references it will need.  so the first step is for us to do this manually.  to do this, we can take advantage of the <Scripts> element of the ScriptManager control and enter the scripts we need for our animation:

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server">
   2:              <Scripts>
   3:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />
   4:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />
   5:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />
   6:              </Scripts>
   7:          </asp:ScriptManager>

after we have that, we can then use the client api's directly.  here's the example:

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
   2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3:  <html xmlns="http://www.w3.org/1999/xhtml">
   4:  <head runat="server">
   5:      <title>Untitled Page</title>
   6:      <script type="text/javascript">    
   7:      function fadeOut()
   8:      {
   9:          var el = $get("fadeBlock");
  10:          AjaxControlToolkit.Animation.OpacityAction.play(el, 0, 30, 0.4);
  11:      }
  12:      </script>
  13:  </head>
  14:  <body>
  15:      <form id="form1" runat="server">
  16:          <asp:ScriptManager ID="ScriptManager1" runat="server">
  17:              <Scripts>
  18:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />
  19:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />
  20:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />
  21:              </Scripts>
  22:          </asp:ScriptManager>
  23:          <div>
  24:              <div id="fadeBlock" style="width:250px; height:250px; background-color:Red">
  25:                  <input type="button" value="Fade Out" id="fadeButton" onclick="fadeOut()" />
  26:              </div>
  27:          </div>
  28:      </form>
  29:  </body>
  30:  </html>

as you can see the key elements are in the javascript function:

   1:  var el = $get("fadeBlock");
   2:  AjaxControlToolkit.Animation.OpacityAction.play(el, 0, 30, 0.4);

following the model of the client apis, we can directly call them without having a server-side wire-up of a fake control.  this will help with using microsoft ajax on non-microsoft platforms.  i do wish, however, that it could be simplified.  i suppose you could wrap the functions in a more simplified form into your own client side namespace.  let's say a company like, oh, i don't know wanted to do this, then they could essentially have the above line in something like:

Woodingo.Fade("fadeBlock", 0.4);

that would likely be much more appealing to developers.

| Comments

a while back i posted a gadget i wrote to demonstrate writing vista sidebar gadgets.  this was my msdn search gadget.

well, i am giddy that nikhil decided to use that model to improve it and leverage script#, which is something i'm deeply interested in.  check out nikhil's much improved msdn search gadget...installed.  it demonstrates some really cool features and brings script# as a model to develop sidebar gadgets...very very cool.

| Comments

i was in my local mac store (or is it apple store, i keep forgetting what the appropriate term is, i guess it is apple)...i was in my local apple store today and saw something funny.

first, i wasn't buying a mac, not that there is anything wrong with that.  i was getting a slim case for my laptop for short trips (my bag has become cumbersome).  i like that the apple store stocks a lot of options, something other stores don't.

anywhoo...upon checkout i noticed the current t-shirt for the store employees...i like how their ad campaigns blend into the store...very smart.  the shirt was black with a picture of an imac on the center (not very large).  underneath was simple type: "Go beyond Vista" is all it read.  (note: there was no marking about who the trademark of "Vista" belongs to -- maybe there's a lawsuit in there or something ;-) -- hey they've been using it a lot -- if microsoft used 'mac' i'm sure they'd get slammed for not disclosing the trademark owner).

the register clerk quickly noted my shirt as i was wearing a microsoft office 2007 branded dress shirt.  he smiled.  it went something like this:

clerk: do you work for microsoft?
me: yep.
clerk: aren't you not allowed in here?
me: (chuckle), actually i have a mac at home...
clerk (puzzled): do they know that?
me: i'm not sure who they are, but i'm not ashamed of it...it manages my movies and pictures well.  i like your shirt
clerk: i bet you do, do you want one?
me (excited): yeah!  can i really have one?
clerk: no, i just wanted to see if you wanted one.
me (under breath): arse-hole

it seems that apple is all over the place with this anti-vista campaign.  i think it is actually drawing more attention to vista.  they even started spamming people (and not getting favorable in their eyes) with the campaign.  i mean if OSX is so great, why not concentrate on those features rather than keep bringing up the fact that microsoft has a new operating system.  and prove the punchline...what is going beyond vista?  i mean some people seem to like the see through toolbar effect and are starting to port to OSX.

i, too, am amused with the apple ads and think they have a great advertising agency.  i wish microsoft would hire them.  but their ads have simply resorted to a virtual name calling.  if it is so bad, show why...at least point me to some comparison, maybe: www.apple.com/getthefacts? :-)  regardless, they are funny.

i guess apple must feel threatened if their are so aggressive about the anti-vista campaign...

| Comments

i recently wanted to add some more visual cues to my application when a search was happening.  i already had the "searching, please wait..." note on there, but since my app was an 'in your face' application experience, i thought i could make that message more in your face as well.  so i added a fade effect to the entire map control as seen in this image:


as you can see when the search button is clicked, the entire virtual earth map control fades out until the results come back.  so my only problem (as i wanted to use the microsoft ajax library) was that it wasn't a server control or wasn't an update panel.  so i had to use an animation extender, but also had to do it only on the client (as the virtual earth control is a client-only control right now as well).

here's what i did (thanks to some guidance from a colleague as well).  i basically added an element on my page that was a fake element -- a div with no visibility...think of it as an ajax placeholder:

   1:  <div id="FakeTarget" runat="server" style="display:none"></div>

then i added animation extenders on there (one for fade in and one for fade out) and attached them to the fake target element as the extenders require a target element to attach to at runtime.

   1:  <ajax:AnimationExtender ID="mapfadeout" runat="server" Enabled="true" TargetControlID="FakeTarget">
   2:      <Animations>
   3:          <OnClick>
   4:              <Sequence>
   5:                  <OpacityAction AnimationTarget="map" Opacity=".4" />
   6:              </Sequence>
   7:          </OnClick>
   8:      </Animations>
   9:  </ajax:AnimationExtender>
  10:  <ajax:AnimationExtender ID="mapfadein" runat="server" Enabled="true" TargetControlID="FakeTarget">
  11:      <Animations>
  12:          <OnClick>
  13:              <Sequence>
  14:                  <OpacityAction AnimationTarget="map" Opacity="1" />
  15:              </Sequence>
  16:          </OnClick>
  17:      </Animations>
  18:  </ajax:AnimationExtender>

my next step was in my javascript function to instantiate these behaviors when i wanted...so in my client script i got a handle to the extenders and manually called their play function...and did the same in my callback function getting the net effect you see in the above image...here's the script:

   1:  var onclick = $find("mapfadeout").get_OnClickBehavior().get_animation();
   2:  onclick.set_target("map");
   3:  onclick.play();

you may think that it is lame to have two extenders, but if you look at how i would have accomplished this using the updatepanelanimationextender if i was able to use a server control, then it is still similar -- that extender has OnUpdating/OnUpdated event handlers...so same thing, just in one extender...net effect is the same.

i hope this helps guide anyone doing something similar!

| Comments

want to learn more about asp.net and asp.net ajax in a self-paced learning environment?  want some free stuff?  check out the web development learning series.  there is actually some great content there as well for people with PHP skills to learn a bit more about asp.net as well as asp.net ajax.

register here for the e-learning and upon completion get some web development resources!