James McKay

Subscribe to James McKay: eMailAlertsEmail Alerts
Get James McKay: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: RIA Developer's Journal

RIA & Ajax: Article

Volta is to AJAX What Tums is to My Stomach

In a typical AJAX application, your goal is often to have the user click something for JavaScript to go out and do its thing

Kevin Hoffman's Blog

This is a deliberately oversimplified example. I typically hate oversimplified examples, but I think most people reading this blog will be able to extrapolate the useful bits from this sample out into practical uses. Also, Volta is still a CTP and subject to radical change in the future, so I'm not so worried about conforming to best practices yet, since there are none :)

In a typical AJAX application, your goal is often to have the user click something. In response, JavaScript goes out and (through the magic of XML HTTP Requests) obtains data and potentially modifies data on a server as well. Using the returned data, the JavaScript can then directly manipulate the HTML DOM to make it appear to the end user as though things just dynamically happened in a manner very similar to a traditional desktop application.

While there are lots of libraries that enhance and abstract on top of that functionality, that is essentially the core of what AJAX is and why it is so popular. The problem is that everybody's got their own flavor of AJAX library, and some of them require you to write a truckload of JavaScript. Most of the tools for dealing with Ajax, even the most advanced ones, still require the developers to think in terms of multiple paradigms, multiple tiers, and potentially even multiple languages and/or development environments - all just to get a little change to happen to a page without doing a visible refresh. Not worth it, IMHO. I've got better things to be doing, like building application functionality, not twiddling with silly little JavaScript semantics.

So, let's say I have a button that I want to trigger the revealing of a hidden <div>. Sure, it's simple to do in JavaScript, but what I want to show you is how Volta let's you do it all in C#. Here's my contrived HTML:

<body>
    Hello. This is Ajaxy!
   
    <button id="btnClick">Click Me to Reveal
the hidden text!</button>
    <div id="hiddenText" style="visibility:hidden;">
        <b>This is a hidden message!</b>
    </div>
</body>

So, if I started littering this page with some JavaScript, I could get the div to appear. But, what if I wanted the contents of the div to contain a weather report from some remote web service, complete with gradients and images, etc. Now, what if I want to _debug_ that code, and what if I want that code to be strongly typed and unit testable?? Screw JavaScript, it's not going to get the job done.

Here's the code for my Volta page. You can see it grabs references to HTML DOM elements, sets up a purely C# event handler, and manipulates the DOM directly - all in C#, and no mention of browser cap checking, no mention of tier, and no mention of JavaScript. It's all just pure C# from end to end.

public partial class VoltaPage1 : Page
    {
        private Button _clickButton;
        private Div _hiddenTextDiv;
        public VoltaPage1()
        {
            InitializeComponent();
            _clickButton = Document.GetById<Button>
("btnClick");
            _hiddenTextDiv = Document.GetById<Div>
("hiddenText");
            _clickButton.Click += new HtmlEventHandler
(_clickButton_Click);
        }
        void _clickButton_Click()
        {
            _hiddenTextDiv.Style.Visibility =
"visible";
        }
    }

When you run this app, and it launches IE pointing at the Volta web server, you can click the button and see it dynamically reveal the contents of the hidden div. Obviously nobody gives a crap about applications that reveal hidden divs. However, if you want absolute control over your DOM, and you want to leverage your C# experience and be able to designate certain blocks of C# code as running on the server tier without worrying about the busywork of getting around the same-origin policy, then Volta might actually be what you're looking for.

If you can think of some samples that are more practical than this (I wanted to do this as an intro before doing more involved samples), please let me know and I'll see what I can come up with.

tags:          
links: digg this  del.icio.us  technorati  reddit

More Stories By Kevin Hoffman

Kevin Hoffman, editor-in-chief of SYS-CON's iPhone Developer's Journal, has been programming since he was 10 and has written everything from DOS shareware to n-tier, enterprise web applications in VB, C++, Delphi, and C. Hoffman is coauthor of Professional .NET Framework (Wrox Press) and co-author with Robert Foster of Microsoft SharePoint 2007 Development Unleashed. He authors The .NET Addict's Blog at .NET Developer's Journal.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Robwin 01/31/08 08:53:36 AM EST

Check this out:

http://labs.live.com/volta/blog/Volta+How+To+Flickr+Widget.aspx

This guy also has a site http://www.tanzimsaqib.com which has loads of posts on volta

iPhone News Desk 01/30/08 01:56:29 PM EST

In a typical Ajax application, your goal is often to have the user click something. In response, JavaScript goes out and (through the magic of XML HTTP Requests) obtains data and potentially modifies data on a server as well.