January 2008 - Posts

logo-volta

I know there are GetById, GetById<> methods in Document object. But, I often miss a method that I feel should be in Volta, which iterates through its child nodes and find an element for me. Let us say, there is a HTML like the following:

<div id="divContainer">
<
b>Some text</b>
<
div id="firstDiv">
<
i>Some more text</i>
</
div>
<
div id="secondDiv">
Okay, I gotta go now
</div>
<
div anyAttribute="anyValue">
Babye
</div>
</
div>
The most important thing is, I can not get the last div by Document.GetById, because instead of id I chose anyAttribute. So, I wrote my own extension method which can run into not only Div but also any HtmlElement, and can find me the desired HtmlElement inside the prior one with the anyAttribute and anyValue. To make my intention clear, I'd like to show how I'd like to use that extension method:
var divContainer = Document.GetById<Div>("divContainer");
var anyDiv = divContainer.Find<Div>("anyAttribute", "anyValue");

if(anyDiv != null)
anyDiv.InnerHtml += "guys!";
So, I'd like to call my extension method Find<> which will take the type I'm looking for (in this case a Div) and that HtmlElement should have an attribute "anyAttribute" that contains "anyValue". Here is how I make up the extension method:
public static class HtmlExtensions
{
public static T Find<T>(this T parent, string attribute, string value)
where T : HtmlElement
{
var element = parent.FirstChild;

while(element != null)
if (element.IsProper<T>(attribute, value))
return element as T;
else
element = element.NextSibling;

return null;
}

public static bool IsProper<T>(this DomNode element, string attribute, string value)
where T : HtmlElement
{
if (element.GetType() == typeof(T) &&
element.Attributes != null &&
element.Attributes.GetNamedItem(attribute) != null &&
element.Attributes.GetNamedItem(attribute).Value == value)

return true;

return false;
}
}
This method can iterate only one depth. Multi depth implementation can be done by running a simple DFS which is left to you guys. Note one thing, I have called one extension method "IsProper" inside another extension method, and there is no harm in it. So, this is how you can add your own extension methods to the HtmlElement.

In my first article on Volta, I showed building Volta control. But, I did not know about so much success of it, before I found in a fine morning that Microsoft Volta team blogged about me in their official blog. Such a surprise to kick off a day!

VoltaTeamBlog

While we develop AJAX applications, we often carelessly ignore giving up bad practices, which cause effects which are not so significantly visible when the site is not so large in volume. But, it’s often severe performance issue when it is the case for the sites like Pageflakes, Live etc. that make heavy use of JavaScript and components of AJAX technologies.

There are so many AJAX widgets in one page that little memory leak issues combined may even result the site crash into very nasty “Operation aborted”. There are a lot of WebService calls, lot of iterations among collection so that inefficient coding in a whole lead to make site very heavy, browser eats up a lot of memory, requires very costly CPU cycles, and ultimately causes unsatisfactory user experience. In this article many of such issues are demonstrated in the context of ASP.NET AJAX.

logo-volta Microsoft Live Labs Volta is an emerging toolset that enables developers to build multi-tier web applications by applying familiar .NET techniques and patterns. The intended use of this toolset is for Developers to build web application as .NET client application, and then specify the portions of the codes that will run on the client and server side. The compiler then creates cross browser JavaScript, Web Services, communication, serialization, security etc. to tie the tiers together. I have written my first article on Volta to show how we can create a Volta control that the compiler can convert our very familiar C# code into an AJAX Widget without requiring us writing a single line of JavaScript code. In this article, you will end up creating a Flickr widget like the one shown below which is based on the first CTP of Volta considering its current limitations:

VoltaFlickrWidgetDemo

More Posts