Animating Graphics in ASP.NET with GDI+, Page 2
Adding the TimerControl
Next, YOU need to add a TimerControl. For Your purposes, this works just like a Windows Timer. The Timer will be used to kick off the AJAX roundtrip every second. To complete the work with the TimerControl, set the Interval to 1000 (which is approximately one second). Listing 2 contains an excerpt from Listing 1 showing the ASP for the TimerControl.
Listing 2: An excerpt from Listing 1 showing the ASP for the TimerControl.
<cc1:TimerControl ID="TimerControl1" runat="server" Interval="1000"> </cc1:TimerControl>
Finishing Up with the UpdatePanel
The final step is to wrap the controls you want to update asynchronously using AJAX in an UpdatePanel. You can code the ASP manually or drag an UpdatePanel onto the default.aspx page and put the <img> in the UpdatePanel's <ContentTemplate>
The most important step is to specify what triggers the UpdatePanel's roundtrip behavior. This could be something like a click or client event; for your purposes, you want AJAX to do its thing every time the TimerControl ticks. The code for the UpdatePanel and its content template and triggers is provided in Listing 1 and excerpted in Listing 2.
Listing 2: Adding the UpdatePanel, content and trigger.
<cc2:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <img src="ClockPage.aspx" runat="server" id="Image1"/> </ContentTemplate> <Triggers> <cc2:ControlEventTrigger ControlID="TimerControl1" EventName="Tick" /> </Triggers> </cc2:UpdatePanel>
That's all there is to it. When you run the page now, the clock should tick and draw about every second.
Should you use AJAX for something as trivial as a clock? Unless you are building a web clock, probably not. The example was designed to show you that dynamic GDI+ and rendered animation is possible now. Simply install ASP.NET AJAX 1.0 and a few controls later and you have round trip asynchronous programming for the web.
What's more important is that one day (soon) it won't matter what platform you are programming for. Programmers will get the best of Windows and the web and use the same tools; whether the back end is squawking across HTTP, on the desktop, or something else simply describes how the bits are moving around. Even more important is that some day may be here. With Windows Vista, WPF (Windows Presentation Foundation), and XAML (Extended Application Markup Language, pronounced zammel), the lines differentiating Windows development and web development just got a little hazier.
Download the Code
You can download the code used in this article here.
About the Author
Paul Kimmel is the VB Today columnist for www.codeguru.com and has written several books on object-oriented programming and .NET. Check out his new book UML DeMystified from McGraw-Hill/Osborne. Paul is an architect for Tri-State Hospital Supply Corporation. You may contact him for technology questions at firstname.lastname@example.org.
If you are interested in joining or sponsoring a .NET Users Group, check out www.glugnet.org.
Copyright © 2007 by Paul T. Kimmel. All Rights Reserved.