Atlas December available; Event bubbling in Atlas

You can download the December release of Atlas from this URL:

http://msdn.microsoft.com/asp.net/info/future/atlastemplate/

Nikhil has already published a detailed post about the main new feature of this release, namely the new server control model:

http://www.nikhilk.net/AtlasM1.aspx

There are a few other changes besides bug fixes in this release. Here's one: event bubbling.

In previous releases, if you wanted a button in a master list to change the currently selected item in a details view, you had to do this:

<button id="myButton">
  <click>
    <setPropertyAction target="details" property="dataIndex">
      <bindings>
        <binding dataPath="sender.dataContext._index" property="value"/>
      </bindings>
    </setPropertyAction>
  </click>
</button>

That was convoluted, required intimate knowledge of the inner workings of data binding, events and DataRow. It was overly complex for such a small task. Now, you just need to know that both ListView and ItemView have a dataIndex property (this may change to selectedIndex in a future release) and that ListView has a "select" command.

So now all you need to do is to bind the details and master views together using a simple binding, for example in your master view, so that their selected items are synchronized:

<binding property="dataIndex" dataContext="details" dataPath="dataIndex" direction="InOut"/>

And then you can just add a simple button to your ListView template:

<button command="select" id="selectButton"/>

Event bubbling is of course not limited to this simple application. You can leverage it in your own components. This process is twofold.

First, the component that wants to raise a bubbled event (like button is doing in our example) needs to call raiseBubbleEvent, a new method on Control. The second argument of this call must derive from Web.UI.CommandEventArgs, which enables you to specify a command name and an optional command argument.

Second, the control that wants to handle bubbled events (like ListView is doing for the "select" command) needs to override onBubbleEvent (also a new method on Control). This method should look at the command name from the event argument and handle the commands it cares about. If it did successfully handle a command, it should return true so that the event stops bubbling up the control hierarchy. Otherwise, it should return false. In ListView, the event handler looks at the source or sender of the event (the button in our example) and gets the index from its data context (the current row in our example).

Those of you who are familiar with server-side event bubbling in ASP.NET will recognize that we used the exact same pattern here and that the methods and parameters share the same object model as server-side.