Getting started with templates

Today we’re going to start looking at templates and at the DataView control. Templates aren’t a new idea. The first version oF MS AJAX already had tried it, but they didn’t made it into the final release. The latest release of MS AJAX approaches this problem from a different angle: it relies on decorating certain HTML tags with the predefined sys-template CSS class name (yep, this name is hardcoded!) for identifying a template.

As you can probably guess, templates really shine when you’re using a declarative approach. Lets build a simple page which illustrates its use. take a look at the following snippet:

<head runat="server">
    <title></title>
    <script src="MicrosoftAjax/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="MicrosoftAjax/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
    <style type="text/css">
        .sys-template{
            display: none;
        }
    </style>
</head>
<body
    xmlns:sys="javascript:Sys"
    xmlns:dv="javascript:Sys.UI.DataView">
    <ul
        class="sys-template"
        sys:attach="dv"
        dv:data="{{ data }}"
        >
        <li>{{ name }} - {{ address }}</li>
    </ul>
</body>
<script type="text/javascript">
    var data = [
        { name: "luis", address: "funchal" },
        { name: "paulo", address: "lisbon" },
        { name: "rita", address: "oporto" }
    ];
</script>

There are several interesting things going on here:

  • we’ve introduced two XML namespaces. The first (sys) lets us access several system attributes which get special processing during page initialization; the second (dv) allows us to access the DataView properties (notice the javascript:Sys.UI.DataView namespace);
  • the sys:attach attribute is a special attribute which ends up creating a control of the type indicated by that attrib’s value (in this case, it will create an instance of the Sys.UI.DataView component). If you’ve been doing MS AJAX development, then you’ll probably recall that controls and behaviors are associated with an HTML element. In this case, the DataView control will be associated with the UL tag where the sys:attach attribute was used;
  • We use the dv:data attribute to set the data property of the DataView control that was previously associated with the UL tag through the sys:attach attribute;
  • The UL tag is also a template holder because we’ve set its CSS class to sys-template. This means that its contents will be used for defining the content of each item presented by the view.
  • We’re also using simple one-time/one-way data binding expressions ({{ }}) for setting the contents of the LI items. Notice that nothing prevents us from using live bindings if we wanted.

If you’ve been following the series,then you shouldn’t be surprised to find out that the MS AJAX library will interpret the markup and build several JavaScript objects from it during the init event.

As I’ve said before,the name sys-template is hardcoded: whenever the parser finds an element with that CSS class name, it will transform it into a template. Since we must use that namespace, then we should also associate it a valid CSS class which hides the template’s content from the user (and that’s what we’ve done in the previous sample)

In the previous example, that template will be passed into the DataView control which will use it to define the presentation of each of the items that come from its data property container. Even though internal templates are the most common used approach, we’ll see in future posts that we can also use external templates (where external means defined outside of the DataView’s HTML associated control).

There’s many more things to say about templates and the DataView control, but we’ll leave that for future post. Stay tuned for more.

Advertisements

~ by Luis Abreu on October 14, 2009.

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: