Volta

Write your own DOM friendly extension methods for HtmlElement in Volta

Tanzim Saqib — Tue, 29 Jan 2008 00:39:47 GMT

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.

Appearing on Microsoft Volta team blog

Tanzim Saqib — Sat, 26 Jan 2008 22:00:40 GMT

Microsoft Volta team blogged about me and one of my articles: http://labs.live.com/volta/blog/Volta+How+To+Flickr+Widget.aspx

HttpRequestFactory vs. XMLHttpRequest in Volta

Tanzim Saqib — Fri, 25 Jan 2008 17:12:59 GMT

HttpRequestFactory was designed for use by tiersplitting internally and was not supposed to be exposed as part of the Volta API as Danny van Velzen from Microsoft Volta team told me today. So, its better if you use XMLHttpRequest instead because this factory class might not show up in the later releases. You will find this class in Microsoft.LiveLabs.Volta.Xml namespace. As like as JavaScript's one, in this .NET version you can also Open URL, specify method name, and of course pass credentials. You can track response text, xml, status code, status text and also you can abort.

To retrieve your content, you must subscribe to ReadyStateChange event with a HtmlEventHandler which you can find in Microsoft.LiveLabs.Volta.Html namespace and check the status code. If it is 200 that means "HTTP OK", you can take the ResponseText or ResponseXML. See this example:

string content = string.Empty;
var request = new XMLHttpRequest();

request.ReadyStateChange += delegate()
{
    if (request.Status == 200)
        content = request1.ResponseText;
};

request.Open("POST", "http://tanzimsaqib.com/feed/", true);

However, you cannot fetch cross domain content by XMLHttpRequest. The Volta compiler creates client side JavaScript XMLHttpRequest and lets developers write code in .NET friendly way. So, I do not think there is any way to retrieve cross domain content in Volta, and leaving us on the same old HttpRequest class.

[New Article] Building a Volta Control : A Flickr Widget

Tanzim Saqib — Fri, 18 Jan 2008 15:38:12 GMT

This is my first article which is based on the first CTP of Volta considering its current limitations. You will see how you can create a Volta control that the compiler can convert into an AJAX Widget without requiring us writing a single line of JavaScript code: http://dotnetslackers.com/articles/aspnet/BuildingAVoltaControlAFlickrWidget.aspx

Questions on my Volta Control Development article

Tanzim Saqib — Fri, 18 Jan 2008 14:08:49 GMT

Someone had questions about the article recent I wrote on DotNetSlackers are:

“i am curious to know how you have hooked the DownloadPhotos to voltaControl1, is it hooked automatically, when added to the volta project, what is the case of using external flickr api ? Also, let me know what is the purpose of screen_name in voltaControl1.”

You might have the same questions, so to clarify, here are the answers:

Inside VoltaControl, PhotosLoaded event of FlickrHelper class is subscribed and FlickrHelper's DownloadPhotos is invoked so that as soon as the photo data is finished downloading, the subscriber (VoltaControl) is notified with the photo data, to manipulate the UI. Such events are not automatic, these are manually created inside FlickrHelper class.

If you'd like to use external Flickr API, you need to change the way how it works now. It's been designed to make a tiny widget with simple and least functionalities in order to demonstrate making of a Volta control.

screen_name is your Flickr account's screen name which is a required parameter to retrieve the "NSID" of your account which is necessary to build URLs to your photos.

Make web.config work in Volta

Tanzim Saqib — Tue, 08 Jan 2008 15:24:20 GMT

Ever wondered how to make web.config work in Volta first CTP release? Simply add a web.config file and add content to it? Unfortunately this is not the case in Volta at least in the first CTP. Five steps to get it done:

Add a web.config file
Add content to simply by copying from other web.config file
Right click on web.config from the Solution Explorer and then Properties
Choose Build Action to Embedded Resource
In your Volta Page Designer CS file, add the following line of code:

[assembly: VoltaFile("web.config")]

Make HTML controls discoverable in Volta Control

Tanzim Saqib — Thu, 03 Jan 2008 02:12:42 GMT

When a Volta control is rendered, the ID attribute of the generated HTML is changed to something like _vcId_1_DivName which is inconvenient to find from code. But the ID attribute stays the same in case of Volta Page, so it is discoverable by ID like this:

Div divContent = Document.GetById<Div>("divContent");

However, if you add HTML controls to the control like the following, the ID is not changed during the rendering:

public VoltaControl1() : base("VoltaControl1.html")
{
    InitializeComponent();

    Button btnClick = new Button();
    btnClick.InnerText = "Click!";
    btnClick.Id = "btnClick";
    this.Add(btnClick);
}

If you don't prefer this way and seriously want to write your own HTML in the control's html page, you might find the following snippet useful. But, remember in this case you will use name attribute of the html element instead of ID.

// Usage: var element = GetElementByName(Document.GetElementsByTagName("div"), "divWidget");
private HtmlElement GetElementByName(HtmlElementCollection elements, string name)
{
    foreach (var element in elements)
    {
        DomAttribute nameAttribute = element.Attributes.GetNamedItem("name");
        if (nameAttribute != null)
            if (nameAttribute.Value == name)
                return element;
    }

    return null;
}

Making cross domain AJAX call using Volta

Tanzim Saqib — Wed, 02 Jan 2008 00:49:15 GMT

Making a cross domain AJAX call in Volta is piece of cake. Volta compiler generates necessary client codes to make it work. Here is a snippet that can make an AJAX call to some Url and fetch data:

public void DownloadPhotos()
{
    IHttpRequest request = HttpRequestFactory.Create();
    request.AsyncSend("POST", URL, string.Empty,
        delegate(string response)
        {
            OnPhotosLoaded(new PhotosLoadedEventArgs(response));
        });
}

Both IHttpRequest and HttpRequestFactory classes can be found in the Microsoft.LiveLabs.Volta.MultiTier namespace. AsyncSend method performs the asynchronous call and calls back the delegate defined where OnPhotosLoaded event is fired to notify the subscriber of this event that the data has just arrived.