Tales from the Evil Empire

Bertrand Le Roy's blog

News


Bertrand Le Roy

BoudinFatal's Gamercard

Tales from the Evil Empire - Blogged

Blogs I read

My other stuff

Archives

October 2008 - Posts

ASP.NET 4.0 Roadmap talk available online

Scott Hunter’s talk on the ASP.NET 4.0 roadmap (in which I’m doing a 10 minute demo) is available from Channel9:

http://channel9.msdn.com/pdc2008/PC20/

jQuery IntelliSense documentation file available

IntelliSense documentation files for jQuery just got published on jquery.com. This enables great IntelliSense at design-time for jQuery in Visual Studio 2008. It goes without saying that this file should only be used at design-time and never at runtime. For the moment, in order to ensure that, you can include the file from an “if (false)” server code block. We’re also working on a much better solution.

Many, many thanks to John Resig, Scott Cate and Jeff King for making that possible.

1.2.6:
http://code.jquery.com/jquery-1.2.6-vsdoc.js
Latest release (currently just a copy of 1.2.6):
http://code.jquery.com/jquery-latest-vsdoc.js

UPDATE: Jeff King wrote a great post explaining how to use the IntelliSense file now and once Visual Studio has been patched (patch will sonn be released).
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

We need Rock Band / Guitar Hero song compatibility

In this post, the Penny Arcade guys make the point that beyond instrument capability, what we really need is song compatibility between the two. Beyond the licensing nightmare that would probably represent for both games publishers, this resonated really well for me. Here’s why and why it makes perfectly good business sense below the apparent “yeah, right, you wish” appearances.

Guitar Hero -and Rock Band even more so- are the ultimate party games. I can’t seem to go to a party these days that doesn’t have a Rock Band game running. Perfect fun. Now here’s the reason why I’ll probably pass on the next Guitar Hero: there can be only one. What are the chances that in the middle of the party, somebody will say “I want to play song X, let’s swap disks and go through the process of getting the band back together”? Let me think… yes, zero. So well, I’ll stick to what I have and what constitutes the better choice in my opinion, Rock Band. Guitar Hero World Tour just lost a customer.

Now let’s imagine for just a second that songs work on both games. If Guitar Hero has a good selection of songs, I’ll just buy it for the songs even if I never play the actual game (or just once, for the achievements :) ).

So to recap, in one case many people will only buy one of the games, in the other those same people might buy both (and play only one but who cares). Which one makes the best business sense? I believe the second one but I have no illusion that both editors will prefer to stick to the iTunes “I want it all” mindset…

Posted: Oct 24 2008, 11:11 PM by Bertrand Le Roy | with 2 comment(s)
Filed under:
Going to California

I’m flying to San Jose tonight for tomorrow’s OpenAjax Alliance face to face meeting, which Microsoft is hosting. On Friday, we are also hosting a new event that aims at establishing a dialogue between JavaScript library developers and Microsoft. We’ll have talks from the IE, Visual Studio and ASP.NET teams, as well as talks from members of the community. This should be very interesting.

Then I’ll be flying to L.A. for the PDC. If you’re going to be there and want to chat, feel free to drop me a note at bleroy at Microsoft.

I’ll be in the room during Stephen Walthers’ session on jQuery and ASP.NET on Tuesday from 5:15 to 6:30 (403AB).

I’ll also do a short demo in Scott Hunter’s talk on the ASP.NET 4.0 Roadmap on Monday from 1:45 to 3:00 (153).

Other sessions I’ll attend include Phil Haack’s MVC session (Monday, 3:30 in 153), Jeff King’s talk on Visual Studio Web Development Futures (Monday, 5:15 in 153), the panel talk on the future of programming languages (Wednesday 10:30 in 403AB), Frank Savage’s XNA Game Studio talk (Wednesday, 12:00 in 501B), Anders Heljsberg’s talk on C# (Wednesday 3:00 in 502A), Miguel de Icaza’s talk on Mono (Wednesday at 4:45 in 515B) and of course Stefan Schackow’s ASP.NET Cache Extensibility talk (Thursday 10:15 in 403B) which was the highest rated talk during our dry-run of the conference…

And of course, I’ll be on stage for my own talk on ASP.NET 4.0 AJAX on Thursday from 1:45 to 3:00 (Petree Hall CD), which will pretty much close the show. I’ll be building a small application using client templates, bindings, some jQuery and ADO.NET Data Services.

Using the power of binding to animate changes

In a recent post, I showed how the binding component can be instantiated independently of the {binding} markup extension. But there’s a whole lot more it can do.

For instance, it has two very interesting callback properties, convert and convertBack that get called any time the binding sees a change respectively on the source or on the target of the binding. The original purpose of those functions is to handle the back and forth conversion of data.

For example, if you’re binding an input tag’s value property to a column of type Date, you’ll want to set convert to a function that formats the date according to the current culture, and convertBack to a function that parses it back from string form to date form.

But this couple of functions can also be used as change event handlers of sorts and even if we have no conversion to do, we can still use them to trigger some side effects, such as an animation. The functions get the value to convert and the binding as the parameters, and return the converted value. Here is a function that triggers an animation on the target of the binding and then returns the unchanged value that got passed in:

function flashTarget(value, binding) {
    var target = binding.get_target();
    if (target.nodeType == 3) {
        target = target.parentNode;
    }
    $(target)
        .jFade({
            property: 'background',
            start: 'FFFF00',
            end: 'FFFFFF',
            steps: 25,
            duration: 30
        });
    return value;
}

The function first gets the target element from the binding component. Then it looks at the type of the target element because in the case of a text node you really want to animate its parent, not the text node itself. Then, we’re using jQuery and the jFade plug-in to animate the element. And finally, of course, we return value unchanged.

Adding the binding animation is as simple as specifying a convert or convertBack function on each binding, for example:

<span>{binding answer, convert=flashTarget}</span>

Here’s the complete code for the sample page:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Binding</title>
    <script type="text/javascript">
        var data = {
question: "Life, the universe and everything",
answer: 42
}; function flashTarget(value, binding) { var target = binding.get_target(); if (target.nodeType == 3) { target = target.parentNode; } $(target) .jFade({ property: 'background', start: 'FFFF00', end: 'FFFFFF', steps: 25, duration: 30 }); return value; } </script> </head> <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*"> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="SM1"> <Scripts> <asp:ScriptReference Path="~/Script/MicrosoftAjaxTemplates.js" /> <asp:ScriptReference Path="~/Script/jquery-1.2.6.js" /> <asp:ScriptReference Path="~/Script/jquery.jfade.1.0.js" /> </Scripts> </asp:ScriptManager> <div sys:attach="dataview" dataview:data="{{ data }}"> <span id="questionDisplay">{binding question,
convert=flashTarget}</span><br /> <input type="text" id="question" value="{binding question, convertBack=flashTarget}"/><br /> <span id="answerDisplay">{binding answer,
convert=flashTarget}</span><br /> <input type="text" id="answer" value="{binding answer, convertBack=flashTarget}"/> </div> </form> </body> </html>

The page contains two input boxes and two labels that reflect the same values that are in the input boxes. Any time the text in one of the boxes is changed, both the box and the label that’s bound to the same data will flash yellow then fade back into white:Elements flashing yellow on change.

Cool, uh?

Hack: using live bindings outside templates

A comment on this post is asking whether it is possible to create bindings outside of a template. The point of doing that is that you don’t necessarily want to render a template just to set-up a few bindings.

Well, bindings are really implemented by a component, Sys.Binding, and a markup extension, which instantiates that component through the convenient {binding foo} syntax.

While the markup extension is only understood by the template engine, the component can be instantiated like any other component, through $create or declaratively (thanks to Dave for pointing me to how this can be done).

Here is a sample page where two bindings are created (imperatively and declaratively) to bind a span’s text (imperatively) and an input’s value (declaratively) to the same plain JavaScript data object. Modifying the value in the input changes the data object, which in turn changes the span that is also listening to it.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Binding</title>
    <script type="text/javascript">
        var data = { answer: 42 };

        function pageLoad() {
            $create(Sys.Binding, {
                target: $get('answerDisplay'),
                targetProperty: 'innerText',
                source: data,
                path: 'answer',
                mode: Sys.BindingMode.oneWay
            });
        }
    </script>
</head>
<body xmlns:sys="javascript:Sys"
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="*">
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="SM1">
        <Scripts>
            <asp:ScriptReference
                Path="~/Script/MicrosoftAjaxTemplates.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <span id="answerDisplay"></span><br />
        <input type="text" id="answer"
            sys:attach="binding"
            binding:target="{{ $get('answer') }}"
            binding:targetproperty="value"
            binding:source="{{ data }}"
            binding:path="answer"
            binding:mode="{{ Sys.BindingMode.twoWay }}" />
    </div>
    </form>
</body>
</html>

Not quite as convenient as being able to directly use the markup extension but it gets the job done. Please also be aware that the overhead in rendering a template is very small and the convenience of the markup extension may be preferred over this. Here is the same page using a DataView:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Binding</title>
    <script type="text/javascript">
        var data = { answer: 42 };
    </script>
</head>
<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="*">
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="SM1">
        <Scripts>
            <asp:ScriptReference
                Path="~/Script/MicrosoftAjaxTemplates.js" />
        </Scripts>
    </asp:ScriptManager>
    <div sys:attach="dataview" dataview:data="{{ data }}">
        <span id="answerDisplay">{binding answer }</span><br />
        <input type="text" id="answer" value="{binding answer}"/>
    </div>
    </form>
</body>
</html>
Celebrating Silverlight 2 while following the World Chess Championship

To celebrate the recent launch of Silverlight 2, let me point you to a cool app from Martin Bennedik that is basically a Chess game (re)player. It’s really cool to visualize a whole game like this:

http://www.chesscenter.com/twic/twic.html

UPDATE: Martin's post on the championship: http://www.bennedik.de/2008/10/world-championship.html

Alt.NET podcast on jQuery

We had an interesting conversation with the good people from the Alt.NET podcast on jQuery and what it means for .NET developers. Check it out:

http://altnetpodcast.com/episodes/11-jquery-in-asp.net

A possible cause of “‘Sys’ is undefined” explained

Clay Compton explains on the ASP.NET QA blog how bad web.config overrides can lead to the Microsoft Ajax Library not loading and the “‘Sys’ is undefined” error being thrown when the page loads. It’s a great read and hopefully will unblock some of you.

http://weblogs.asp.net/asptest/archive/2008/10/06/asp-net-ajax-and-http-handlers-a-cautionary-tale.aspx

Client templates in MSDN Magazine

My first full-length article in MSDN Magazine is out with the October issue and it’s about Microsoft AJAX client templates. Check it out…

http://msdn.microsoft.com/en-us/magazine/cc972638.aspx

More Posts