Alan Le

Scott Stanfield's AJAX/Atlas Demo

Vertigo's CEO, Scott Stanfield, just posted the source code for his beginner-level presentation on ASP.NET AJAX ("Atlas") given at the SoCal Technical Summit.  Scott has an uncanny ability to use a technology and explain it in a very understanding, easy to follow manner.  He took a unique approach of explaining ASP.NET AJAX by first showing how to do it directly with the XMLHttpRequest object.  He then shows the same functionality with ASP.NET AJAX and expands on that. He created the code live in his presentation last Saturday! 

You can catch Scott in his upcoming session at the Silicon Valley Code Camp.

ASP.NET "Atlas" becomes ASP.NET AJAX, new header logo

It seems like the name change announced by ScottGu earlier this month is starting to populate.  The official Microsoft ASP.NET 2.0 AJAX Extensions site now states ASP.NET AJAX in a clean aero-like logo header instead of ASP.NET "Atlas".  The name change can also be seen on the ASP.NET AJAX Control Toolkit site.  I will update my ASP.NET AJAX resource list when/if the underlying URLS are changed.

Install path for working with WPF

I want to get started working with Windows Presentation Foundation (WPF).  Good thing for me, Tim Sneath has compiled a complete list of links to the necessary installation files.  Perfect!

Also if you like the "How do I..." set of videos for ASP.NET 2.0 and Atlas, I found Fil Fortes screencast video demo on Channel 9 as the closest thing and an excellent, whirlwind demo of development for WPF.

Running Windows Vista

I've made the jump to Windows Vista RC1 (Build 5728) yesterday.  Two things I did off the bat.

Disable UAC

Why? After a fresh OS installation I will most likely spend the day installing the programs that I use regularly.  Standard User rights and UAC slows the process down.  I pretty sure I know what I'm doing and I take full responsibility for any unsecure actions I may make.  Overall, I'm still undecided about the benefits of UAC for power users; I might not re-enable this feature.

Here's how to disable UAC:
Windows Vista Secret #4: Disabling UAC

Fix the Power Button

The Power Button on Vista defaults to Sleep mode.  There are a few problems with this for me.

• Most likely when I hit the power button, I intend to Shutdown and not Sleep.  When I think of sleep mode, I think of closing the lid of my laptop.
• Vista takes it time to wake up from sleep mode.  The OS is awake but my mouse (Logitech MX1000) takes a minute to function.  My keyboard (MS Natural Keyboard) remain unresponsive after sleep mode.

Here's how to change the Power Button to Shutdown:
Vista: Start Menu Power Button

 

Besides these two changes, so far I'm really digging Windows Vista RC1 5728.

MS ASP.NET 2.0 AJAX Extensions (aka Atlas) Resources

I've been using Atlas for a few months now and have collected a number of resources.  I just want to share the list that I've compiled so far. 

Atlas References

I have a live feed in Firefox for quick access to these resources.

• The Official Microsoft "Atlas" Site
• ASP.NET "Atlas" Documentation
• "Atlas" Preview Forums
• This is an excellent resource for getting your questions answered by members of the Atlas team and other professionals working with Atlas.
• "Atlas" Control Toolkit
• A great site with samples and walkthroughs related to the pre-built Atlas controls found in the toolkit.
• CodePlex "Atlas" Control Toolkit
• Source repository for the Atlas Control Toolkit.  Find latest releases, daily builds, bugs tracker.

Atlas Blogs

Atlas related blogs in my feed reader.

• Atlas Team Member blogs
• Shawn Burke
• Bertrand Le Roy
• Steve Marx
• Atlas Announcements
• ScottGu
• Garbin Atlas Notes
• Nikhil Kothari
• Dan Wahlin
• KFrancis I <3 Atlas
• Wilco Bauwer
• Luis Abreu
  
• Wallace McClure
• Jay Kimble
• Shane Shepard
• Coding Atlas

Atlas Articles

• GeekZilla Atlas articles
• Tim Heuer Atlas sample
• Intro to Atlas @ 4GuysFromRolla
• Top 13 reasons to consider Microsoft for Web 2.0 Development

Other Atlas Resources List

• Shawn Burke's List
• ScottGu's List 1
• ScottGu's List 2

Icons for UpdateProgress Control

Need a loading indicator icon to go with your MS AJAX UpdateProgress control? Try:

1. http://www.napyfab.com/ajax-indicators/
2. http://www.ajaxload.info/

Yellow Fade Technique with Atlas

After seeing the new animation capabilities in the Atlas Control Toolkit, I wanted to experiment with implementing the Yellow Fade Technique.  I can't believe how simple it is with the new UpdatePanelAnimationExtender.

Demo: http://atlas.vertigosoftware.com/atlasyellowfade/

Source: http://blogs.Vertigosoftware.com/files/alan/atlasyellowfade.zip

The Code

The code should be really straight-forward.  I have an Update panel which contains an ASP.NET Label.  The update panel is triggered by the submit button which will change the label text to say hello to whatever's in the Textbox control.  I also added a server timestamp to the label.

To apply the yellow fade technique, I wrap the update panel around a div container and add the UpdatePanelAnimationExtender with properties to enable animation when the update panel has been updated.  There are two animation configured to fire in parallel for 2 seconds.  The first changes the background color from a shade of yellow back to white.  The second animation fades the content of the updatecontainer.

The work is done in this piece of code.  No knowledge of javascript necessary*!

<atlasToolkit:UpdatePanelAnimationExtender ID="upae" runat="server">
    <atlasToolkit:UpdatePanelAnimationProperties TargetControlID="UpdatePanel1">
        <Animations>
            <OnUpdated>
                <Sequence>
                    <Parallel duration="2" Fps="30">
                          <Color AnimationTarget="updatecontainer" StartValue="#FFEF3F" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />
                          <FadeIn AnimationTarget="updatecontainer" minimumOpacity=".2" />
                    </Parallel>
                </Sequence>
            </OnUpdated>
        </Animations>
    </atlasToolkit:UpdatePanelAnimationProperties>
</atlasToolkit:UpdatePanelAnimationExtender>

* The design time support for the UpdateAnimationExtender shows the animation as simply "(Text)", so you would need to know the syntax for animations to configure it.

Atlas Control Toolkit - September?

I haven't seen an official announcement from the team yet, but it looks like a new release (marked 060914) of the Atlas Control Toolkit is up on the project's site at CodePlex.  From the description, the toolkit features four new controls: Animation, NoBot, Slider, and UpdatePanel Animation.  I linked the new controls to their corresponding pages on the Atlas Control Toolkit sample page.  It doesn't look like the new name change to "ASP.NET AJAX Control Toolkit" has populated to this release of the toolkit yet.

UpdatePanel Animation

I think the UpdatePanel Animation is a necessity.  Since the browser no longer flicker between refreshes with asynchronous callbacks, more clues with animation are needed to catch the user eye when something is being updated.  It looks like we can now easily create the Yellow Fade Technique in Atlas.

AnimationExtender

The animations found in the animation extender are also nice touch.  I need to check to see if it can do the cinematic effects like Rico.

Slider Control

I've been following the slider control when it was on Garbin's blog.  One problem I'm having this control, is getting it to trigger an UpdatePanel when the ValueChanged event is fired.  I'm have a similar problem with the Rating control Rated event.  Maybe someone has an easy way to wire up a javascript event handler to these events to get it to trigger UpdatePanels?

NoBot

Nobot is a contorl to prevent bot spam by identifying bots through 4 different criteria without requiring CAPTCHA.  I need to looke more into how this control works.

Check out these new controls and the existing controls in the toolkit.  Some really excellent stuff!

Update:  I missed this earlier, but there's some really good stuff in the animation department.  Check out the new documentation on "Using Animation".  Try the quick demos within that page.  Also there's an accompanying Animation Reference.

Another way to deal with css differences

I wrote about using condition comments to deal with the styling differences between across browsers.  Nikhil Kothari suggests another method:

The trick is to programmatically set the class attribute on the HTML tag based on the browser, and you're done. This is obviously where a little bit of javascript comes into play to do detect the browser along with its version and programmatically set the class value as appropriate.

The css would then look like:

div#foo {
  background-color: red;
}
HTML.IE div#foo {
  background-color: yellow;
}
HTML.IE7 div#foo {
  background-color: blue;
}

While its good to know this approach, I would still prefer using IE conditional comments since it just seem clearer to me. There is a main css for Firefox and separate css files for IE6 and IE7 that only contain the css to address the css differences.

Theme vs StyleSheetTheme

I wrote about using conditional comments to serve different css to IE browsers.  There is a little gotcha when using this this with ASP.NET Themes.

When applying themes by setting the "theme" property in the page directive or in web.config, the conditional comments appears before the the App_Theme code in the html source.  The effect is that this will overwrite your conditional comments due to the cascading nature of CSS and precedence.  One way to make the conditonal comments appear out after the css links from App_Theme is to use the StyleSheetTheme attribute instead of the Theme attribute.  This little talked about property will link App_Theme as the first thing in the Head tag (instead of the last).  Now your conditional css comments will take precedence over the styles in the App_theme.

You can read more about this on The Microsoft MSDN Library.

http://msdn2.microsoft.com/en-us/library/ykzx33wh....

Hope this helps.

UPDATE:  Steve Clements writes about another benefit from using StyleSheetTheme.  The StyleSheetTheme property gets applied much earlier during the page lifecycle than the Theme property.  With StyleSheetTheme, your theme will show up during design time. Steve also writes a caveat, "One thing to note is that setting EnableTheming=false doesn't stop applying the styleSheetTheme."

IE Conditional Comments

I'm working on a piece of html code that contains Div tags with background images.  However there is a problem with margins depending on the browser.  What to do? Code for one browser and use conditional comments for another, specifically code the CSS for Firefox and use conditional comments for Internet Explorer.

Conditional comments are a way to serve different css to target IE browsers.  A good resource to learn how to use IE conditional comments is the tutorial on Elated.com.  They provide plenty of examples of condtional comments usage.  Microsoft also has an article about conditional comments that goes into further detail.

Condition comments a great way to keep sane dealing with the styling differences between IE and Firefox and the various versions of IE.  I will definately use them more in my projects and samples.

<!--[if (condition)]>
(HTML to use if condition is true)
<![endif]-->