| 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!

| Comments

want to see a wicked demo?  well, if you know slovenian, you'll know what it actually says, but check out this demo anyway, using WPF/e -- www.windowsvista.si -- this is all WPF/e baby...check out the "glass" even on the toolbars :-)

and yes, just like the real windows, the status tray keeps popping up something!

| Comments

i'm in seatte and walking downtown reminds me why i like metropolitan areas...the real ones.  we passed by this street musician who was pretty good.  i just like this type of culture everywhere... 

Video: Street Drummer

| Comments

for those who went to an office/vista launch and received the copy of the office professional (or the key code), make sure you read the instructions.  it clearly states that you will be directed to a page that shows you a TRIAL code and verbage.  you should ignore this because the key in your cd sleeve is a full license per the instructions.