More MS AJAX system attributes…

We’ve already met several system attributes in previous posts. As you probably recall, I’ve been using that name for all attributes which are associated with the sys alias (don’t forget that the sys alias use is hardcoded!). In this post, we’ll take a look at some of the special system attributes you can use in your code:

  • sys:class/sys:class-XXX: allow us to use JavaScript code for setting up the CSS class that is going to be applied to the element;
  • sys:innertext: used for setting the innerText property of the element;
  • innerHTML: same as before, but in this case, it’s used for setting the HTML of the element;
  • sys:style-XXX: the passed JavaScript expression decides if the indicated style will be applied to the element;
  • sys:value: used for setting the value of a specific control. Notice that this system attribute’s usage isn’t limited to textboxes; you can, for instance, use it to select an item in a dropdown control.

One of the things you’ll probably need when using the DataView control is to specify different CSS styles for even and odd elements. We’ve got several options, but we’ll start by using the sys:class asttribute:

<head>
    <style type="text/css">
        .sys-template{
            display: none;
        }
        .even{
            background-color: Gray;
        }
        .odd{
            background-color: lightGray;
        }
    </style>
    <script src="Scripts/MicrosoftAjax/start.debug.js" type="text/javascript"></script>
      <script type="text/javascript">
          Sys.require([Sys.components.dataView]);
          var data = [
            { name: "luis", address:"fx" },
            { name: "paulo", address: "lx" },
            { name: "rita",address: "fx" }
        ];

    </script>
</head>
<body xmlns:sys="javascript:Sys"
      xmlns:dv="javascript:Sys.UI.DataView">
    <div id="list"
         class="sys-template"
         sys:attach="dv"
         dv:data="{{data}}">
        <div sys:class=
"{{ $index % 2 === 0 ? ''even'' : ''odd''}}">
{{name}}-{{address}} </div> </div> </body>

As you can see,we’re using the {{ }} one-time/one-way binding expression to ensure that adequate CSS class is used. The sys:class-XXX can also be used to solve this problem (and it even allows more advanced scenarios, where you might need to apply several classes according to several conditions). here’s the equivalent code, this time using the sys:class-XXX attribute (I’m only showing the HTML):

<div id="list"
     class="sys-template"
     sys:attach="dv"
     dv:data="{{data}}">
    <div sys:class-even="{{ $index % 2 === 0}}"
         sys:class-odd="{{ $index % 2 !== 0}}">
        {{name}}-{{address}}
    </div>
</div>

The sys:class-XXX approach ends up evaluating each condition and applying the associated XXX class if that condition is true (in the previous example, the used conditions exclude each other and that’s why you’ll end up with only  single class name: even or odd). Since our CSS classes are used for setting only the background-color style attribute, we could also use the sys:style-XXX attribute for setting the background color of each element. The use of this attribute is similar to the sys:class-XXX, but in this case, you’re supposed to use the CSS property name you’re interested in setting:

<div id="list"
     class="sys-template"
     sys:attach="dv"
     dv:data="{{data}}">
    <div sys:style-background-color=
"{{ $index % 2 === 0 ? ''gray'' : ''lightgray''}}">
{{name}}-{{address}} </div> </div>

We’ve already met the sys:value before, so we won’t be showing how to use it here. The sys:innerhtml and sys:innertext follow similar rules, but end up setting different properties. In these cases, they end up setting, respectively, the innerHTML and innerText properties of the elements to which they’re applied.

And this sums it up quite nicely (I think). It’s been a long series of posts…there’s still much to discuss though, so stay tuned for more on MS AJAX.

Advertisements

~ by Luis Abreu on October 19, 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: