Atlas Behaviors
So, in the current tech preview of Atlas they've added a "new" idea of a declaritive code model. Ok, this isn't new. This is pretty much how XAML works. This is used for many things that I'll probably post about later. Behaviors are used to add functionality to existing controls. An out of the box behavior that's really cool is AutoComplete. Ever wanted to have a textbox that has an autocomplete dropdown window that's filtered as you type (kind of like Google)? Well, Atlas has an AutoComplete Behavior. Using the new declaritive model you can set it up to call a WebMethod without any code. Very nice, let's check it out. First, start a new ASPX in an Atlas Web Project. Then add the following controls to your page.
<input type="text" id="txtSearch" name="txtSearch" />
<div id="results" /> We have a search textbox and div. This div will be used to show the results of our WebService call. Now, there's a new script block that's basically an xml document that is where you specify your declaritive code blocks. There's a lot going on in there and I'm not going to go into the details here, but will be posting about it down the road. Here's what you can do to add the autocomplete behavior. Just add it to your page. I'd imagine down the road, this will be moved into a separate file if you want.
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
</references>
<components>
<textBox id="txtSearch">
<behaviors>
<autoComplete completionList="results" serviceURL="AutoCompleteService.asmx" serviceMethod="Search" minimumPrefixLength="1" />
</behaviors>
</textBox>
</components>
</page>
</script> The references section is where you can add what script libraries need to be included. I believe they are loaded in the order you have them in there, so if load order is important for your script library, and I believe it is for the MS libraries, keep that in mind. The components sections is where you define what controls on your page you would like to modify. By modify, I mean adding behaviors, setting up data bindings, etc. So you can see I've setup a textbox node and set its id to txtSearch which is the name of my textbox that I want to autocomplete. Inside of that node, I associate a behavior with my textbox by creating a behaviors node. Inside of this node is where you setup all the behaviors that you want to run. Again, they execute in the order you have them in there. So we add in the autocomplete node and set up the attributes it needs to run. The first one, serviceURL, is just the path to your WebService. The serviceMethod is the name of the actual WebMethod that it should call to get the results to show in the autocomplete list. We'll call it Search. The minimumPrefixLength is the number of characters at which the person types out in the textbox where it should start searching. In our case, we set it to 1 so the WebMethod will not be called until they type one or more characters. Just an FYI, the base JavaScript that Microsoft includes with Atlas will interpret all this declaritive UI stuff on the client (at least as I understand it today).
Now that we have the autocomplete behavior setup let's setup the WebMethod that it will call.
Private stringList() As String = New String() {"a1", "a2", "a3", "b1", "b2", "b3"}
<WebMethod()> _
Public Function Search(ByVal PrefixText As String, ByVal Count As Integer) As String()
Dim searchList As New List(Of String)(Count)
For Each s As String In stringList
If s.StartsWith(PrefixText) Then
searchList.Add(s)
End If
Next
Return searchList.ToArray()
End Function So you can see in this example I've just setup a private String Array with some dumby data. The actual Search Method just takes two parameters and returns a String Array that is filtered down based off of the PrefixText coming in. Note: at the time of this writing you have to have the two parameters be named PrefixText and Count for it to work correctly. I just loop through the private String Array and find which items start with the incoming text they've typed so far, building a String Array and return it. That's all there is to it. Run the project and type "a" or type "b" and see the nice little autofill. The end result will look like the following:
Now immediately you're probably asking how to setup a Template for the div so you can control what it looks like. I did. I don't know the answer for that offhand. If there's a way to do it in today's bits I'll post an update. If there isn't, I'm sure there will be down the road. Enjoy!