Products

A quick and dirty list component

This is the markup for the above list:

<ntb:list id="list1"> <ntb:listitem cssclass="red" label="A great list"></ntb:listitem> <ntb:listitem cssclass="blue" label="Is Made of"></ntb:listitem> <ntb:listitem cssclass="green" label="Awesomeness"></ntb:listitem> </ntb:list>

The only attribute we've built into this component is the cssclass attribute. Everything else has been inherited from nitobi.ui.Container and nitobi.ui.Element. This button will use the ListItem class' setCssClass method to change the class of the first list item to blue.

The code executing in the button's onclick event looks like this:

$('list1').jsObject.get(0).setCssClass('blue');

In fact, that button will execute any code found in the textarea. Try changing the index to 2, or the color to green. This code might look familiar if you've used Nitobi products in the past. The dollar-sign function is used by many Javascript frameworks as a shorthand for document.getElementById. The Nitobi Ajax Toolkit provides this function if it has not been previously defined by another framework. The Javascript object corresponding to the list is set as an expando property (jsObject) on the list's HTML DOM node. Because nitobi.sample.List inherits from nitobi.ui.Container we get the IEnumerable functions for free. This includes List.get(i) to get the i'th list item.

CSS Manipulation

Going to each list item in a loop to change a style property may have an unwanted performace cost. The Nitobi Ajax Toolkit provides some advanced functions for manipulating CSS rules. Each list item, in addition to the css class specified in the declaraion, has the class listitem applied to it. In order to change the appearance of every list item in the page, we need only modify this one style.

var rule = nitobi.html.Css.getRule('listitem'); rule.style.fontSize = "20px"; rule.style.color = "gray"; rule.style.listStyleType = "none"; rule.style.borderLeft = "1px solid gray"; rule.style.borderBottom = "1px solid gray";

Execute the above Javascript code. Again, this textarea is live, so feel free to try some modifications to the code.

Event Management

We've added a single event to the ListItem class. The "onClick" event can be subscribed to by including it in the declaration:

<ntb:list id="list3"> <ntb:listitem label="Click Me" onclick="this.setStyle('color','red');"></ntb:listitem> <ntb:listitem label="Don't Click"></ntb:listitem> <ntb:listitem label="Please Don't"></ntb:listitem> </ntb:list>

With this syntax you can use the this keyword as a reference to the object in question. In this example we set the color property of the style object on the list item's HTML DOM node. We use the setStyle method that is available on any component that inherits from nitobi.ui.Element.

Those familiar with programming at the HTML DOM level might be inclined to modify the style object directly by doing something like: this.getHtmlNode().style.color = 'red';. The nice thing about using setStyle is that an event fires before the style is set. This is very useful if you need to modify your component whenever a certain style property changes. Consider the case of a column layout component that should add a column if the text size is increased. Let's subscribe to the onBeforeSetStyle event for the first list item:

var list = $('list3').jsObject; var item0 = list.get(0); var func = function(eventArgs) { if (eventArgs.property === 'color' && eventArgs.value === 'red') { eventArgs.source.setStyle('color','blue'); return false; } else { return true; } }; subId = item0.onBeforeSetStyle.subscribe(func);

Execute

What we do in the Javscript code is subscribe an intercepting function to the onBeforeSetStyle event. What our function (variable 'func' in the example) does is determine if the setStyle method was being called with 'color' and 'red' as parameters. If so, it calls setStyle('color','blue') and cancels the original call to setStyle by returning false.

You'll notice in the last line that I've assigned a global variable called subId. The value returned by subscribe is a unique id that can be used to unsubscribe from an event. If we wanted to unsubscribe our intercepting function, we can do so using this unique id.

var list = $('list3').jsObject; var item0 = list.get(0); item0.onBeforeSetStyle.unSubscribe(subId);

Unsubscribe the intercepting function. Clicking on the first list item should now make it blue