Wednesday, December 03, 2008

Danish chess league using the Silverlight chess board

The Danish chess league is now using the Silverlight chess board, allowing visitors to replay the games.

The web master Per Rasmussen has added a little chess board icon next to the results (see example). If you click on the chess board you get to a page where you can replay the game (see example).

The easy integration of the board has been used to add pictures of the players and opening classification to the page.

image

Friday, November 07, 2008

Slim Silverlight

Silverlight applications come in different flavours: Fat Silverlight applications, rich media islands, and slim Silverlight applets.

Most Silverlight demos or applications I have seen are using the full page to display the Silverlight application. These applications are similar to traditional fat rich client applications in functionality, but Silverlight solves the deployment issue. Deployment is even simpler compared to ClickOnce, and you get some cross platform compatibility on top. Some of these applications are in fact so similar to traditional applications that they turn off all navigation in the browser (I think WPF with ClickOnce may be a better solution for some of these).

Fat Silverlight application

Examples for fat Silverlight applications include all samples from ComponentOne or Microsoft’s health demo.

What I find more interesting is Silverlight applets that integrate into web sites. Sometimes this is called a “rich media island”.

Rich media island

Examples for rich media islands include embedded videos or deep zoom images.

But these applets do not have to be islands, because Silverlight comes with a full set of features for integration with the HTML DOM and Javascript:

  • You can walk through and manipulate the HTML DOM from within Silverlight (see Video),
  • handle Silverlight events from Javascript (see Video),
  • handle DOM events from Silverlight (see Video),
  • call Javascript functions from Silverlight (see Video),
  • evaluate Javascript expressions from Silverlight (see Video),
  • and call back into Silverlight from Javascript (see Video).

With this integration capabilities, you can develop slim Silverlight applets, that deeply integrate with HTML based pages. Think of them as client-side controls that encapsulate a piece of UI. This is similar to the existing control models we know for Windows Forms, OCX, and so on. You can insert them in your HTML with one simple object tag. And you can hook it up to your page and Javascript with events and DOM integration.

You can develop such a Silverlight applet and distribute it to 3rd parties web sites – they can be used in static pages, dynamic sites, and Ajax applications. The web server does not have to run anything specific – it could be a static web space on an Apache server running Linux, and you can still use your Silverlight applet on that site.

I recently developed a Silverlight chess board, which is used for The Week In Chess, one of the biggest web sites about chess news. This application was a rich media island first, in that it just displayed a chess board with no further interaction with the containing HTML page. However, for the recent chess world championship we wanted to extend this and also display the notation of the game, which is the moves in text form, e.g. 1.e4 e5 2.Nf3 and so on.

We discussed displaying the notation inside the Silverlight applet. However it became clear that the moves should be displayed with the same font settings and other CSS styles that the containing page uses. Furthermore, the moves also had to be part of the general layout of the page. Sometimes they would have to displayed to the right of the board, sometimes below the board, and the width of the notation also depended on the page layout.

Deeper integration with the page was required. The solution chosen is that the HTML page designer creates an empty <div> tag on his page as a location for the notation. The Silverlight applet gets the id of this div tag as a parameter. Using DOM manipulation, the Silverlight applet then creates the notation inside this div. The page designer is able to create this div with any styles and notation he desires.

A further requirement was for the user being able to click on a move in the notation, which should cause the board to update to the clicked position. This was solved by including a small JavaScript onclick handler into the generated notation div, that would call back into the Silverlight applet.

Get Microsoft Silverlight

Here is some sample code that illustrates this development:

    [ScriptableType]

    public partial class Page : UserControl

    {

        [ScriptableMember]

        public void Goto(int ply)

        {

            //code to go to given ply omitted

        }

 

        private void ShowNotation()

        {

            GameIterator i = new GameIterator(game);

            StringBuilder text = new StringBuilder();

            string id = HtmlPage.Plugin.Id;

 

            while (!i.AtEnd)

            {

                //code to display move numbers omitted

 

                text.Append("<a onclick='javascript:document.getElementById(\"");

                text.Append(id);

                text.Append("\").Content.chessboard.Goto(");

                text.Append(i.Ply + 1);

                text.Append(");'>");

                text.Append(i.Board.Algebraic(game.Moves[i.Ply]));

                text.Append("</a>");

 

                i.Forward();

                text.Append(' ');

            }

 

            HtmlElement element = HtmlPage.Document.GetElementById(notation);

            element.SetProperty("innerHTML", text.ToString());

        }

 

        //other members omitted

    }

The page class is marked as a ScriptableType. This means that this class can expose members to JavaScript. The Goto() method that updates the board to a given move from the game is marked as ScriptableMember. Part of the ShowNotation() method illustrates how the notation is generated. A GameIterator is used to iterate through the moves of the chess game. A string builder is used to build up the HTML for the notation. For each move the algebraic notation is appended, enclosed with an <a> tag and a Javascript handler, that calls the exposed Goto() method of the Silverlight chess board. The id of the currently running Silverlight applet is determined using the HtmlPage.Plugin.Id property.

        private void Application_Startup(object sender, StartupEventArgs e)

        {

            Page page = new Page();

            this.RootVisual = page;

            HtmlPage.RegisterScriptableObject("chessboard", page);

        }

Finally, during startup of the Silverlight applet, the page object is exposed to Javascript by calling HtmlPage.RegisterScriptableObject.

I am not aware of more examples for this kind of slim Silverlight applets. Please let me know of other examples in the comments.

Sunday, October 26, 2008

I am in LA

I am in Los Angeles for the PDC. Today I visited downtown. Tomorrow I am going to the pre-conference on concurrent multi-core programming on Windows and .NET. Here are some photos from downtown LA (click to see higher resolution).

DSCF0822 (768x1024) It is a big country. Everything is really big. For example this advertising for a film fills a complete hotel. The film wasn’t even shown in the movie theatres, it is now released direct to DVD.
DSCF0892 (1024x768) This is Los Angeles first fire engine. It was drawn by horses.
DSCF0840 (1024x768) The modern version. Today I saw many of them parked throughout the city, I am not sure why.
DSCF0868 (1024x768) Walt Disney concert hall, looks like a space station.
DSCF0872 (768x1024) Los Angeles City Hall, seat of the Daily Planet in Superman, destroyed in the war of the worlds by mars men.
DSCF0898 (768x1024) Union station
DSCF0900 (1024x768) Union station, interior. Also used in films as it still looks like 1939. In the waiting room they have sofas instead of chairs.
DSCF0905 (1024x768) Entrance to China town metro station
DSCF0910 (768x1024) Famous restaurant in China town
DSCF0862 (1024x768) Grand central market
DSCF0873 (1024x768) LAPD police car
DSCF0874 (1024x768) Problem and solution (America is going green?)
DSCF0864 (1024x768) Angelus plaza with skyscrapers in the background.
DSCF0835 (1024x768) More sky scrapers
DSCF0836 (768x1024) Sky scraper reflection
DSCF0844 (1024x768) Even more sky scrapers

Sunday, October 19, 2008

The world championship

Silverlight 2.0 was released just in time for the chess world championship – two hours before the start of game one. Fortunately there had been a release candidate which gave developers enough time to prepare for the release.

The Week In Chess has been showing the first four games of the world championship live using my Silverlight chess board. They are also running analysis of the games. Here the Silverlight chess boards are used like diagrams in a printed book, but with the additional capability to replay the game in the diagrams. I have not seen this style for replayable diagrams anywhere else. This kind of diagram was one of the ideas in creating a chess board that can be integrated into any HTML page (oh, and into any blog post, as you can see).

I went to Bonn to see games three and four on site. I was lucky as game three was incredibly exciting.

I am not doing any opening previews this year as I was busy with the Silverlight chess board, and am also going to PDC. I think tomorrow we will see yet another line in the Slav – I don’t think the line played in game three will be seen again. But just one thing, after Anand’s novelty 14..Bb7:

Get Microsoft Silverlight

I think White can consider alternatives, for example 15.Rd1 (instead of 15.Bxb5 played in game three). The pawn on b5 is not so important, and the bishop is not so great on b5 either. If White can take on d4 instead, it may be the Black king who gets in danger, not the White. Of course this requires careful analysis, but I think it is an option to be considered.

Wednesday, September 10, 2008

Validation in the ASP.NET Ajax Control Toolkit TabContainer

The ASP.NET Ajax Control Toolkit contains a TabContainer control which allows the user to change tabs without a postback.

But what if you want to validate user input in the TabContainer? I could not find documentation or samples about this so had to try myself. With a little help from Bertrand Le Roy, here is what I found out:

There are two different use cases for validation and tab controls:

Sample TabContainer

1. The tabs all belong to one big user input that is validated as a whole. You would want to have one button below the tabs (e.g. "Save" or "Send"). This button would validate all controls on all the tabs.

2. The tabs are independent of each other, each containing independent user input. Each tab would have its own button, and if a button on a tab is pressed, only the controls on that tab should be validated.

If you just place ASP.NET validation controls into the different TabPanels, a click on a button will validate all of them. This is use case 1, where you want to validate all user input at once.

However, the user may be editing on tab 1, while he hasn't yet filled in a required field on tab 2. If the user now presses the button, client side validation will discover the required field on tab 2 isn't filled in and no postback occurs. The user won't see any visual indication of the validation error, because the validation control is on tab 2, which isn't visible.

ASP.NET validation controls support a property SetFocusOnError. This automatically sets the focus on an input control that failed validation. However ASP.NET isn't able to switch the tab in the TabContainer.

The solution for use case 1 is to insert a ValidationSummary next to the submit button, outside of the TabContainer. The ValidationSummary can alert the user to validation errors across all tabs.

For use case 2 with the independent tabs, ASP.NET's validation groups are the solution. Each validation control has a property ValidationGroup. Use a different validation group on each tab. The button on each tab should have its ValidationGroup property set to the same value as the validation controls on that tab. In the button's click event handler, be sure to call the page's Validate method with the validation group as a parameter, before checking Page.IsValid.

One more thing to note about user input in the TabContainer: There is a bug in the TabContainer which resets the active tab if you have a control on a tab with AutoPostBack set to true. To work around this issue, set the TabContainer's ActiveTab property in the handler of the autopostback event.

Monday, August 25, 2008

A Silverlight chess board

For some time now TWIC is using my Silverlight chess board for live transmission of games. The idea of the chess board is that it is small, unobtrusive and can easily be incorporated into any existing HTML layout.
Games can now automatically be refreshed, and an arrow highlights the last move. Users can replay games with the cursor keys. More features are planned when Silverlight 2 releases.

image

Sunday, August 03, 2008

Meet me in Los Angeles - PDC 2008

PDC 2008

Monday, May 19, 2008

WPF integration for VAB update for Enterprise Library 4.0

Patterns and Practices recently published Enterprise Library 4.0 for Visual Studio 2008 and .NET 3.5.

I have updated the WPF integration for the validation application block (VAB) to work with the latest version. It also comes with the following improvements:

  • You can bind to different business objects (i.e. have different data contexts) inside a single ErrorProvider.
  • Value converters on the bindings are now supported.
  • Call Init() on the ErrorProvider if new validators should be added for a dynamic UI.
  • ErrorProvider now has a property ErrorMessages, which contains a list of all errors.

You can download the updated version here:

  • Download version 2.0 for Visual Studio 2008, .NET 3.5 and Enterprise Library 4.0
  • Download version 1.1 for Visual Studio 2005, .NET 3.0 and Enterprise Library 3.0/3.1

You can read my previous posts on the WPF integration for VAB here:

Monday, May 05, 2008

Bamberg

I recently took this image of Klein-Venedig ("Little Venice") in Bamberg. Use the mouse to drag and the mouse wheel to zoom the image.

Photo composition with Windows Live photo gallery, deep zoom with Silverlight 2 beta 1 and Expression deep zoom composer. Click to see full screen view.