The DataView control: going imperative, take I

Until now, we’ve been applying a declarative approach for building pages which rely on the DataView control and on templates. This post marks the beginning of a new journey: the objective is to build a page without any declarative markup. It’s not a long journey, but it will require a couple of posts to get there :,,)

In this post we’ll only be updating our initial example so that the DataView is creating through JavaScript code. As you probably recall, we used external templates in our previous example. We’ll keep using them here. Lets get started, shall we? The first thing we need is to remove the attributes from our markup. Here’s how it looks now (without the DataView specific attributes):

<body
    xmlns:sys="javascript:Sys">
    <ul id="dv">
        <li>Top item</li>
        <li id="putItHere"></li>
        <li>Bottom item</li>
    </ul>
    <ul id="myTemplate" class="sys-template">
        <li>{{ name }} - {{ address }}</li>
    </ul>
 </body>

Yes, I know: there’s still some extra attributes there! However, notice that we no longer have any in the #dv UL element. If you go back to the declarative example, you’ll see that we’ve set up three properties (when we used the declarative approach): data, itemTemplate and itemPlaceholder. Setting them from JS code is not hard: we can rely on the $create helper for doing most of the work for us:

<script type="text/javascript">
    var data = [
        { name: "luis", address: "funchal" },
        { name: "paulo", address: "lisbon" },
        { name: "rita", address: "oporto" }
    ];
    function pageLoad() {
       var template = new Sys.UI.Template($get("myTemplate"));
       var placeholder = $get("putItHere");
       $create(Sys.UI.DataView,
                {
                    data: data,
                    itemTemplate: template,
                    itemPlaceholder: placeholder
                },
                null, //events
                null,//references
                $get("dv")//HTML node
                );

    }
</script>

We start by creating a new template object (notice that its constructor expect a reference to a DOM element) and getting a reference to the place holder (#putItHere). After that, we can create and attach the DataView control through the $create helper. As we’ve seen before, the use of this helper is recommended for creating controls. Besides simplifying the code (notice that we use a literal JS object for setting the properties instead of the traditional setters!), it will also ensure propertinitialization of the control (you wouldn’t believe how many people still forget that control’s initialization relies on calling the initialize method after setting all the properties).

If you don’t like being explicit (or if you’re just lazy!), you’ll be glad to know that you can write even *less code*: instead of passing object references, you can simply pass strings to the itemTemplate and itemPlaceholder and let the control worry about creating the template object and finding the place holder. Here’s the final version of the code for this post:

<script type="text/javascript">
    var data = [
        { name: "luis", address: "funchal" },
        { name: "paulo", address: "lisbon" },
        { name: "rita", address: "oporto" }
    ];
    function pageLoad() {
       $create(Sys.UI.DataView,
                {
                    data: data,
                    itemTemplate: "myTemplate",
                    itemPlaceholder: "putItHere"
                },
                null, //events
                null,//references
                $get("dv")//HTML node
                );

    }
</script>

On the next post, we’ll see how we can get rid of the markup used to define the template. Stay tuned for more on ASP.NET AJAX!

Advertisements

~ by Luis Abreu on October 15, 2009.

One Response to “The DataView control: going imperative, take I”

  1. 3APfWf fijexbgwvets, [url=http://rjxihllhtwlt.com/]rjxihllhtwlt[/url], [link=http://wgosfmqpmuvx.com/]wgosfmqpmuvx[/link], http://itbhyvkyoizj.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: