Jesse Liberty - Silverlight Geek

Commitments

jesseliberty — Sat, 07 Nov 2009 16:14:00 GMT

I’ve received a number of messages along the lines of, “Seems like things have really slowed down on your blog” or even “Hey, where’s the signal? Too much noise.”

Fair enough; though this is a common effect of the run up to a major “show” such as PDC (I get caught up in creating material that won’t be released until after the show and things go a bit wobbly here) vacation’s over! Time to Party.

So here are my commitments to you:

In the coming weeks you’ll see:

A series of new and better videos – look for the first ones during PDC.
At least two Silverlight From Zero mini-tutorials per month, and at least two Intermediate to Advanced mini-tutorials each month.
Revitalization of the “Example Code Quality Guarantee” page noting the development environment for all demos.
The HyperVideo Project Spec will be complete by November 23 (if you wish to contribute to the spec, please send email to jliberty@microsoft.com ) and Coding begins for the HyperVideo Project Tuesday November 24.

Thanks

Subscribe to 62 Silverlight Twitter’ers.

jesseliberty — Sat, 07 Nov 2009 15:06:00 GMT

I’ve created a list that currently follows 62 top-notch Silverlight Twitter participants. The list will grow (and be culled) over time, but you can easily sign up to receive tweets from everyone on the list just by clicking on this link and subscribing to the list as a whole.

While you are at it, please take a moment and subscribe to my tweets and to this blog

Designer v Xaml v Code

jesseliberty — Fri, 06 Nov 2009 19:28:00 GMT

This is the second in my new series on Getting Started With Silverlight (please see the first article for information on the series and where to get the software you need).

[updated11/8]

Don’t Start with Xaml…

Until recently, just about every introduction to Silverlight started out by talking about Xaml; the markup language of Silverlight, WPF and Workflow. I believe it is time to stop.

A quick note on Xaml – we all agree how to pronounce it: zam-el to rhyme with camel, but not on how to spell it; most folks use upper case, but Rob Relyea told me in private correspondence that Xaml was released via MS Open Specification Promise, and prefers it aesthetically, even if he does conform and write XAML like most others programmers. But I’m starting a movement.

(Apologies to Rob and his brother Dave for initially pointing to the latter when I meant the former and confusing MS OSP with ECMA, for which I should be flogged.)

Teaching Xaml first made sense when Xaml was the only (or best) way to create controls. But with a working design surface, Xaml is too high a bar to set just to get started.

Many development environments have gone though a similar evolution: start with HTML, then get a WYSIWYGIYAVL (What You See Is What You Get If You Are Very Lucky) editor. ASP.NET by hand, then ASP.NET from the toolbox. Etc.

I recommend that if you do not know Xaml you not try to learn it (at first) as you can go very far without doing so, it can be a stumbling block, and the tool will provide incredible help for learning the markup as you need it.

I may be the first person to write down that advice. (I may be stoned to death.) But I suspect I won’t be the last.

Silverlight Without Xaml

To get started, open VS2010 and create a new Silverlight project (I use C# but feel free to use any supported language). Let’s name it ThreeApproaches

When Visual Studio settles down you’ll probably see a split window with the designer on top and Xaml on the bottom. Let’s close the Xaml by clicking on the “make top window the only window” button on the far right of the splitter bar

Open the Toolbox if it is not already open ( Ctrl-W X) and pin it in place. Then click on the Grid that is the default layout control. When you click on it, margins will appear and putting the cursor into the top or left margin will offer you a preview of where you might click to create columns or rows respectively. Go ahead and create two rows and two columns, and then shrink the entire grid down to small enough to look ok.

Add Your First Control

Drag a Textblock out of the toolbox and place it more or less in the upper left box and then open the properties window. If the TextBlock’s properties are not displayed, click on the TextBlock to make it the selected control.

Somewhat unusually you set the name of the control at the very top of the Properties window

Notice that there are two tabs: Properties and events. Make sure you have Properties selected, and below that you may want to click on the Categorized button rather than the A-Z to make this a bit easier to follow.

Expand the Layout property and by clicking in the black triangle next to both Height and Width (and clicking Reset) you can set the TextBlock’s dimensions to be set in accordance with whatever string (characters) are begin displayed. Set the remaining values as shown in the next image, and the TextBlock should show in the designer as placed in the upper right hand box, 5 pixels from the right and bottom margins.

(To save space I cut out some rows, but you can leave those set to their default values).

Wasn’t that cool? No Xaml needed. But if you want to learn Xaml, aha! there are two great features to help. First, click on the horizontal split button on the far right of the design window. This will restore the split window you started out with.

Notice that the Xaml is now shown. Scroll down to line 20 and you should see the definition of the TextBlock, now in Xaml. Notice the 1:1 correspondence with the properties you’ve set.

(click on image for full size)

Xaml and Intellisense

Let’s write the second control (TextBox) in Xaml. Click into the Xaml window, and below the TextBlock, type an open angle brace. Intellisense immediately springs forward offering to help you pick the control you want. The more you type, the more Intellisense will narrow in on your choice.

Once you select TextBox, and hit the space bar, again Intellisense jumps in, this time offering suggestions as to the properties you might want to set.

Fill in the property / value pairs as shown below,

   1:      <TextBox Name="Name"

   2:               HorizontalAlignment="Left"

   3:               VerticalAlignment="Bottom"

   4:               Height="25"

   5:               Width="75"

   6:               FontFamily="Georgia"

   7:               FontSize="14"

   8:               Grid.Row="0"

   9:               Grid.Column="1"

  10:               Margin="5" />

Your TextBox will appear in the upper right corner of the designer, with all the properties set to correspond with what you’ve written in the Xaml.

To make the TextBlock (the first control) consistent with this, click on it in the designer, and scroll down to Text Category and drop down the FontFamily to pick “Georgia.”

Set the size to 14 and click the bold button to set it to Bold.

Return to the Text property (above Layout) and change it from TextBlock to Name? and make sure that the margin is set to 5 in the Layout section.

When all of that is done, hit Control-F5 to run the application and you should see a prompt and a textBox into which you can enter your name.

If you like, you can click in the grid but not on one of the two controls and bring up the properties for the Grid. Scroll down to, and expand, the “Other” category and click the checkbox next to “Show Grid Lines” to reveal the rows and columns you created.

Okay, now you know you can write your controls in Xaml, but why bother when you can just drag them onto the designer from the toolbox and set their properties in the Properties window. I truly believe that the latter approach is faster, less error prone and generally a much better way to get started.

Will you want to hand-code Xaml eventually? Maybe, but my guess is less and less as you get better and better at Visual Studio and, eventually, Expression Blend.

Dynamic Creation of Controls in Code

There is a third way to create controls: dynamically in code.

You can stop reading right here. You won’t need to know this for a long time. I am putting this into this article because (a) this can be a powerful technique when you do need it and (b) for some folks understanding the relationship between dynamically (C#) and declaratively (Xaml) created versions of the same object can be very helpful in groking what Xaml is about.

But your mileage may vary.

It’s All Just Objects

Every object you create in Xaml can also be created at run time in code. To see this, let’s create a second set of prompt and TextBox that will appear when the project is run.

To do so, turn the expander next to MainPage.xaml to reveal the code behind page, MainPage.xaml.cs. (or MainPage.xaml.vb if you are working in VB).

In the constructor, we’ll put a handler for the Loaded event (the loaded event runs when the page is loaded) and we’ll do our work in the event handler Visual Studio creates.

To do this, click into the constructor and type Loaded += then hit Tab twice to let Intellisense create your handler for you. Click in the handler and delete the exception that Intellisense put there to remind you to implement the handler logic.

We’ll talk about events and event handlers in an upcoming mini-tutorial; but for now, you can ignore the details or feel free to experiment (you can’t break anything).

Creating The TextBlock Dynamically

As noted above, every control can be created as a CLR object, and again Intellisense will help enormously. Begin by instantiating a TextBlock. the Identifier you use (in this case AddressPrompt) will become the Name property.

   1:      void MainPage_Loaded( object sender, RoutedEventArgs e )

   2:      {

   3:        TextBlock AddressPrompt = new TextBlock();

   4:      }

You will now add each property to the instance of TextBlock, though here you must be sure to be type-safe. Let’s walk through it.

First, you’ll want to set the HorizontalAlignment, which turns out to be an enumerated constant. Again, Intellisense will help by offering the legitimate values

Fill in the Vertical Alignment in the same way.

When you try to fill in the Margin as a value, you’ll not the red squiggly line indicating something is wrong. Hover over the Margin property and the tag will indicate the type of the Margin: Thickness. At this point you can open the help files to read about the Thickness type, or you can just instantiate one and see how that goes. I personally prefer the latter. Not only does Intellisense show you that there are three possible constructors (which you can scroll through with the arrow keys) but it identifies the purpose of each parameter and guides you through filling them in. While I show the third constructor here, which lets you set the left, top, right and bottom margin, we’ll actually use the second constructor which lets you assign one value for all four.

Next we want to set the Height and Width. Hovering over each will reveal that they are doubles, but in this case we want to set them to “auto” – a quick check of the documentation reveals that this is accomplished by assigning the static value Double.NAN – a flag for the compiler to set them automatically.

You can set the FontFamily and FontSize as a string and a double respectively, but set the FontWeight using the enumeration.

Here is the code we have so far

   1:  TextBlock AddressPrompt = new TextBlock();

   2:        AddressPrompt.HorizontalAlignment =

   3:            System.Windows.HorizontalAlignment.Left;

   4:        AddressPrompt.VerticalAlignment =

   5:            System.Windows.VerticalAlignment.Bottom;

   6:        AddressPrompt.Margin = new Thickness( 5d );

   7:        AddressPrompt.Height = double.NaN;

   8:        AddressPrompt.Width = double.NaN;

   9:        AddressPrompt.FontFamily =

  10:            new FontFamily( "Georgia" );

  11:        AddressPrompt.FontSize = 14d;

  12:        AddressPrompt.FontWeight = FontWeights.Bold;

Placing the Control into the Grid

We placed the first controls into the Grid by writing

Grid.Row = "0"
Grid.Column = "1"

But of course, neither TextBlock nor TextBox has a Grid.Row property. These are Extended Properties, properties defined in Grid but borrowed by other elements to assist in their placement. The C# equivalent is to call the ??? methods of the Grid class, passing the UIElement (in this case, AddressPrompt) that you want to place in the grid, and then the column number and row respectively.

Grid.SetColumn( AddressPrompt, 0 );
Grid.SetRow( AddressPrompt, 1 );

That done, the last step is to add the new element to the Grid itself, by referencing the Children collection of the particular Grid instance, and calling the Add method on that collection, passing in our Element:

LayoutRoot.Children.Add( AddressPrompt );

We can then follow a very similar process for the Address text box. The one interesting addition I’ll make is to set the color on the text in the TextBox. You do this by setting the Foreground property, and you must assign it a SolidColorBrush as its value. You can instantiate a SolidColorBrush by passing in a Color from the Colors enumeration,

AddressInput.Foreground = new SolidColorBrush( Colors.Blue );

When you look at the designer, you will not see either of these controls; they won’t exist until the program runs. Press Control-F5 and try out your new program, however, and you’ll see that the dynamically instantiated controls are indistinguishable from the declarative (Xaml) controls; at least to all appearances:

You Can, But Don’t.

Even though dynamic declaration of elements takes many more lines of code; C# developers are often tempted to eschew Xaml and go with C# – after all; it is a tool they know.

Xaml has many advantages, however, not least of which is that it is highly toolable. That means that it works extremely well with the Visual Studio Designer and with Expression Blend, which in the long run means far faster development, better looking and easier to maintain applications, and a much easier interaction with designers.

The Source Code

For completeness, here is the Xaml file followed by the C# file:

MainPage.Xaml

<UserControl x:Class="ThreeApproaches.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White"

        Height="135"

        Width="250">

    <Grid.RowDefinitions>

      <RowDefinition Height="1*" />

      <RowDefinition Height="1*" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="1*" />

      <ColumnDefinition Width="2*" />

    </Grid.ColumnDefinitions>

    <TextBlock Grid.ColumnSpan="1"

               HorizontalAlignment="Right"

               Margin="5"

               Name="myFirstTextBlock"

               Text="Name?"

               VerticalAlignment="Bottom" />

    <TextBox Name="Name"

             HorizontalAlignment="Left"

             VerticalAlignment="Bottom"

             Height="25"

             Width="75"

             FontFamily="Georgia"

             FontSize="14"

             Grid.Row="0"

             Grid.Column="1"

             Margin="5" />

  </Grid>

</UserControl>

[Note that I cleaned up the Grid columns and rows, using relative sizing (1*) and making the relative sizes of the columns 1:2 – all of this to be explained in an upcoming Mini-tutorial]

MainPage.Xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace ThreeApproaches

  public partial class MainPage : UserControl

    public MainPage()

      InitializeComponent();

      Loaded += new RoutedEventHandler( MainPage_Loaded );

    void MainPage_Loaded( object sender, RoutedEventArgs e )

      TextBlock AddressPrompt = new TextBlock();

      AddressPrompt.HorizontalAlignment =

        System.Windows.HorizontalAlignment.Left;

      AddressPrompt.VerticalAlignment =

        System.Windows.VerticalAlignment.Bottom;

      AddressPrompt.Margin = new Thickness( 5d );

      AddressPrompt.Height = double.NaN;

      AddressPrompt.Width = double.NaN;

      AddressPrompt.FontFamily =

        new FontFamily( "Georgia" );

      AddressPrompt.FontSize = 14d;

      AddressPrompt.FontWeight =

        FontWeights.Bold;

      AddressPrompt.Text = "Address ?";

      Grid.SetRow( AddressPrompt, 1 );

      Grid.SetColumn( AddressPrompt, 0 );

      LayoutRoot.Children.Add( AddressPrompt );

      TextBox AddressInput = new TextBox();

      AddressInput.HorizontalAlignment =

        System.Windows.HorizontalAlignment.Left;

      AddressInput.VerticalAlignment =

        System.Windows.VerticalAlignment.Bottom;

      AddressInput.Margin = new Thickness( 5d );

      AddressInput.FontFamily =

        new FontFamily( "Georgia" );

      AddressInput.FontSize = 14d;

      AddressInput.Foreground =

        new SolidColorBrush( Colors.Blue );

      AddressInput.Width = 100d;

      AddressInput.Height = 25d;

      Grid.SetColumn( AddressInput, 1 );

      Grid.SetRow( AddressInput, 1 );

      LayoutRoot.Children.Add( AddressInput );

Next in this series: Creating Input Forms with the Silverlight Toolkit

(Note, when the article is posted, the name of the next posting will become a link)

Silverlight From Zero

jesseliberty — Mon, 02 Nov 2009 14:44:00 GMT

This is the first of a series of blog posts directed at folks who are new to Silverlight and/or want to brush up on the fundamentals. It will consist of mini-tutorials on topics I think need more coverage, and links to existing mini-tutorials, tutorials and videos. We begin… at the beginning.

What is Silverlight, Why Do I care?

This is the traditional place to start, but in all probability if you are here, you know the answer. In brief: Silverlight is Microsoft’s Rich Internet Application enabling technology. The goal is to create applications that are delivered by the browser but which offer the user experience of a desktop application. There is no question that using a RIA technology offers the ability to create a quality of experience that cannot be matched by more traditional approaches.

Where Do I Get It?

Everything you need to start writing Silverlight applications is available on our Get Started page.

If you don’t already have Visual Studio, consider starting with Visual Web Developer (VWD). You can download both VWD and Silverlight together using the Web Platform Installer

Otherwise, you may want to take a look at the more powerful Visual Studio 2008 or the new beta of Visual Studio 2010. Once you get serious with Silverlight you’ll really want Expression Blend.

Navigating the Get Started Page

On Get Started you’ll find an array of options. The first option tells you how to get Visual Studio or VWD, and options 2, 3 and 5 while incredibly useful, are not required for your initial foray into Silverlight… so just grab option 4.

Quick Tour?

In the next section on the Get Started page, you’ll find a quick tour of Silverlight.

This is a great way to get going. On the other hand, if you are going to follow this series, you may want to watch just #1 (Getting Started video) and hold off on the rest as I’m going to integrate all of that material (including Tim’s terrific 8 part blog series) as we go.

The Tools

Tim’s excellent first video in his series will definitely get you started on the right foot using the tools.

I’ve never fully understood why developers don’t spend more time learning the details of Visual Studio; it is, after all, our fundamental tool, the environment in which we live all day. Time spent on getting all you can out of Visual Studio will pay dividends for a long time.

Diving In

With that, you are ready to dive into Silverlight. Arguably, the best way to get a handle on what Silverlight is, is to write a program that uses it to accomplish something reasonably useful. A good starter video on building an application (a bit old, but still correct) is this gentle intro to creating a Silverlight application with Visual Studio, using the Canvas to lay out controls. Then read Part 2 in Tim’s series on layout.

Next in this series: Three Approaches: Designer, Xaml or Dynamic

Silverlight Synchronicity

jesseliberty — Tue, 27 Oct 2009 14:32:00 GMT

At Mix ‘07 I watched Scott Guthrie’s keynote introduction of Silverlight, and it was a watershed moment in my career. Within 48 hours I had pivoted my consulting business to focus entirely on this new and game-changing technology; a few months later I ended 15 years as an independent to join Microsoft as Silverlight Geek, a job that has been immensely rewarding.

On a personal (and seemingly unrelated) note; while my older daughter was in high school she became fluent in American Sign Language (ASL) under the tutelage of two terrific teachers, one hearing, one deaf. She joined the school’s justifiably famous Pocket Players bi-lingual (ASL and spoken English) theater group under the direction of the incomparable and greatly missed Robin Wood, and the extraordinary natural-born-teacher Ron Galiazzo, (who has been patient enough to teach me a little faltering ASL as well). My daughter learned, and taught us, great respect for Deaf culture, and I had the incredible pleasure of watching her perform and then taking part with her in a celebration of Chinese American Deaf culture in Boston, where I spent the evening talking happily in broken-ASL with my tablemates.

The third piece of yesterday’s synchronicity touches on the person who most famously embodied the stereotype-shattering new awareness of all that the hearing world has historically gotten wrong about Deaf culture, and the abilities and supposed limitations of deaf people, Marlee Matlin. Her singular and award winning performances in Children of A Lesser God and The West Wing have had an impact on me and so many others, for over twenty years.

All of this came together spectacularly yesterday when I posted a small blog entry on the ability of Silverlight to support closed captioning and my commitment to including Accessibility in the design of the HyperVideo project. This was picked up, I’m incredibly happy to say, by Ms. Matlin who tweeted about it to the National Association of the Deaf (NAD) and “everyone.” I have to say, that not only made my day (week, month!) but brought home how much impact Silverlight can have.

I don’t want in any way to exploit Ms. Matlin’s tweet; this is not about promoting our technology as much as enjoying having made indirect contact with someone whose work I admire, and sharing that joy with the Silverlight community. It was very cool to see what she wrote, but it is also a reminder how vital it is, to get these things “right,” including remembering that adding Accessibility isn’t a trivial decision; but one that affects the ability of a great many people to use the products that Silverlight enables.

Hypervideo, Closed Captions & Accessibility

jesseliberty — Mon, 26 Oct 2009 21:46:00 GMT

The Closed Captioning For Silverlight Media page at T2Sami.com says in its commentary:

A number of very sophisticated Silverlight Video players are under development: some open source, some proprietary…. The commitment to captioning in Silverlight is not so well supported. If it is included at all, it is frequently an afterthought.

In my initial series on HyperVideo I started with the media player emitted by Encoder, and stripped out the Closed Captioning button. That was unnecessary and I regret it. Please take this posting as my pledge not to have closed captioning and other accessibility issues be an afterthought; but rather they will be an integral part of the spec I will deliver for HyperVideo on December 1 for the renewed HyperVideo project.

In the interim, please take a look at this excellent tutorial on Captioning In Silverlight on the Accessible Media Project and also be sure to check out these two open source projects:

Expectations Are Everything

jesseliberty — Fri, 23 Oct 2009 02:53:43 GMT

Quick Bit

Anyone who has ever debugged a program knows that you tend to see what you expect. I’ve learned that lesson a dozen times, in a dozen ways.

A classic example is to ask someone to read the following illustration aloud (don’t over-think it but when you’re sure you’re done, see the answer here).

Expectations

Today, I got smacked in the face with the power of expectations. One of the best dog trainers I ever met recently recommended a new kind of dog harness to us; saying “you never tug or pull the dog; you just walk and it makes it more comfortable for him to come with you than to do anything else.”

So, we plopped down our $20 for a Gentle Leader Easy Walk harness, and then it sat in the mudroom for three weeks before I finally got around to trying it. I put it on and – wow! what a difference. Just like Jen said, no pulling, no tugging, I didn’t have to “correct” him at all (I hate being corrected, myself). It was really quite impressive until I got home and took it off him and found I’d accidentally attached his lead to his traditional collar, and the new harness had not been at work at all.

Lesson learned? For about 5 minutes.

PS: Jen is also the trainer who told me “A tired dog is a good dog, and an exhausted dog is a great dog.” For two ultra-short movies of Charlie please see here or here.

Building A Product For Real

jesseliberty — Mon, 19 Oct 2009 19:34:26 GMT

As some of you know; I’ve been showing a number of Silverlight features in terms of Project Turing. It was never my intention to finish that project; rather to use it as a mooring point to ensure that the mini-tutorials were realistic about building applications.

The second purpose of the Turing project was as a proof of concept. I now have the green light to go for a full development process, with the clear goal of creating a working application that will be:

A complete design to delivery project
A source of frequent mini-tutorials and videos
An opportunity for much more intense community contribution
An opportunity to work with designers and the Expression team
A product we can put to use here on Silverlight.net

It just doesn’t get any better than that.

Who, What, When, Where and Why

Who: If all goes as planned, this project will be moderated open-source with active participation and contributions from as many in the community as care to participate. Until now, I’ve been doing what I refer to as “glass house” programming; that is, designing and programming myself, but openly and documented. It is possible that the initial stages will be glass house, but the plan of record is to move to Open Source.

What: The VideoWiki project lends itself to being completed in two discrete phases. Phase 1 will be the creation of a Silverlight HyperVideo player targeted at enhanced How-Do-I videos. Phase 2, moving from HyperVideo to VideoWiki will follow if time and interest allows.

When: While I already have a number of postings on HyperVideo, it is time to re-think, redesign and to create a detailed specification. I’ll deliver that, here on my blog, by November 30.

Design and Coding begin December 1, 2009 and will be completed by July 1, 2010.

Where: For now the project will live on my blog; but if this is to be truly open source then it must move to CodePlex. That is the goal.

Why: To meet the needs of both novice and intermediate Silverlight programmers, and if Silverlight 4 comes along during our development time, to provide a great basis for introducing new features.

It shouldn’t be all that hard

The truth is that this is not all that big a project, and a quick look at the work done last year reveals that the tools will do a lot of the work for us. That said, there are some interesting subtleties we should be able to explore along the way.

If you have early thoughts about what should/must/must-not be in the project, be sure to let me know.

With PDC on the way, there will be a short-term drop in the release of videos and mini-tutorials for the next couple weeks., though I will make sure that there are some very substantive posts during that period. Expect a sharp uptick afterwards.

Time To Update My Favorites

jesseliberty — Mon, 19 Oct 2009 18:00:39 GMT

Periodically I take a shot at listing my favorites: some folks find useful items they hadn’t looked at and it forces me to take a long hard look at whether it is time to try something new.

Today: Favorite Utilities

Upcoming:

Favorite Mac Utilities
Favorite iPhone Apps
Favorite Programmer Utilities
Favorite Non-fiction
Favorite Fiction
Favorite Programming Books
Favorite Music (uh oh)

On the one hand, I can’t imagine why you’d care. On the other hand, building a community is more than just code; and sharing favorites can be more than just utilitarian. In any case, you (no, really, you) are strongly encouraged, asked, pleaded with; to comment, add your fave’s and etc.

Favorite Utilities 2009

NB: This list does not include my favorite programming utilities, and is just those utilities that run on Win 7 (which is now on all my Win machines)

Amazon's Media Library - one of the better ways to share what you're reading and listening to. Dynamic, configurable, pretty easy to cope with.

Auto Hot Key – Finally! Add macros to a simple text file and they work everwhere. I have two files: auto-correct (fixes common spelling errors instantly) and my macros. For example “@me” instantly changes to http://www.SilverlightGeek.me The syntax is simple and adding or modifying a macro takes seconds.

ClipX – Very sweet, small, easy to use clipboard manager, with “yank-pop” and with reserved phrases you can reach easily. Learning time: 2 min.

Evernote – Create (or clip) notes about anything, organize to the extent you want, find them instantly, access via PC, Mac, phone, web. Truly brilliant. Truly indispensable. Uses include everything from meeting notes to taking a picture of your car and asking it to lead you back using the GPS. You can also ask “show me every note I wrote in the past 2 years when I was within 50 miles of right here” – great for biz travel. See iPhone Utilities.

Exam Diff Pro - best I know for examining differences in files and directories. More coverage under Programming utilities, but I also use it for comparing documents.

FinePrint - print pages 2-up and much more. Can save a lot of paper and a surprising amount of printing time. Installs as a printer.

GoToMyPC - access your pc securely from anywhere. Just great, though I may give it up if the built in functionality in Win7 is sufficient.

GoodSync – Easy, efficient backup or synchronization between computers.

Hulu Desktop – Changed the way I deal with TV. I’m not much of a TV watcher, but the ability to queue up shows, subscribe and watch on my PC (for which I highly recommend the iMo Pivot 7” USB screen) has meant watching the Daily Shows that I’d otherwise miss.

Hypersnap DX - My screen capture of choice for many years and I still really like it, but it is time to check out Snaggit combined with Paint.Net

Live Writer - Best blog authoring software I know of. Be sure to pick the best of the plugins.

Pandora - The Music Genome Project. Single best music site on the net, now on phones as well and I swear it is getting better. Be certain to find their technical background material and to explore how the service works. This is not “wisdom of the crowds” this is “quantify all you can about music and then find other music that is similar in meaningful ways. See this good intro from the NY Times.

Roboform – Individual passwords for every site, generates strong passwords, master password to protect them all. Easy, fast, effective, customizable and totally reliable. Now supports sharing across multiple PCs. Partial integration with 1Password (see Mac Utilities).

7Stacks – Nice small utility that lets you create a stack of links on your toolbar. In the image shown, my stack is linked to a folder; anything in the folder pops up in the stack.

Trillian – All your IM Services in one place. I particularly like the ability to tie actions to events. I’ve set it up so that adding the word urgent to the text causes it to make a special sound. Very flexible.

Virtual Clone Drive Allows you to mount an ISO, BIN or other image file onto what appears to be a physical drive, but is actually a virtual drive. Very slick (and free!)

Bayesian Probability

jesseliberty — Mon, 12 Oct 2009 21:16:59 GMT

Spent the early hours of this morning reading a great blog post by Jeff Atwood which makes reference to a Elizer S. Yudkowsky’s Intuitive Explanation of Bayesian Probability. The timing was good as I had just finished the (highly recommended) book The Drunkard’s Walk which agreed with Jeff that most humans simply are not wired to deal with probability very well.

The Drunkard's Walk: How Randomness Rules Our Lives (Vintage) (9780307275172): Leonard Mlodinow: Books
ISBN: 0307275175
ISBN-13: 9780307275172

Yudkowsky poses the following canonical problem:

1% of women at age forty who participate in routine screening have breast cancer. 80% of women with breast cancer will get positive mammographies. 9.6% of women without breast cancer will also get positive mammographies. A woman in this age group had a positive mammography in a routine screening. What is the probability that she actually has breast cancer?

The frightening thing is that according to Atwood, only 15% of doctors get this right. And they’re off by a lot. That is, the average answer is in the range of 80% while the correct answer is 7.8%. Apparently, there is something about the way we think about the problem that makes 7.8% hard to accept, and Yudkowsky does a great job of walking you through the logic in painfully small steps.

To me, however, there is a pretty straight-forward way to think about this (though it may only be intuitive since I’ve been through this a few times).

What Do We Know & What Does It Imply?

We have three pieces of information:

1% of sample are TRUE (that is have cancer)

80% of sample who are TRUE will test TRUE

9.6% of sample who are FALSE will test TRUE.

On the face of it, we should guess that the percentage of women who test TRUE who actually are TRUE (test positive and actually have cancer) is pretty small based on two facts provided: the actual percentage of women from the sample who are TRUE (regardless of testing) is only 1%, and the test has a false positive for 9.6% of those tested.

So, my reasoning to solve this is:

1. Assume we have a sample of 1000 women (I use 1000 to reduce the amount I have to talk about fractional people, but I don’t use 10,000 as I get lost in the zeros).

2. We know that the reality is that of the 1,000 women, 10 will have cancer (1%).

990 = no cancer
10 = cancer

3. Of the 10 who have cancer, 8 will test positive
8 out 1000 women tested will test True and are True

4. Of the 990 with no cancer 9.6% will also test positive = 990 * .096 = 95.04.
95.04 women out of 1,000 will test True but are False.

5. The total number testing true is 8 + 95.04 = 103.04.
Of these, 8 actually have Cancer.

6. So the value for tests positive (103.04) versus is positive (8) is 8:103.4 or 0.773 or 7.8%
(8 of the 103.4 = 8/103.4)

Not Being Misled

The key to this and many problems like it is to realize that what you are trying to find is the relationship between those who Test positive vs. the reality of those who are positive, which is why you need all three numbers.

Probability is Weird and Cancer Is Scary

True story: I have a friend who is the head of breast cancer surgery at a very respected hospital. I was at a dinner party where he mentioned that a “very small percentage of those who show up with a positive test actually have cancer.” This caused a lot of confusion, and that is because we (a) don’t deal with probability well and (b) don’t understand policy tradeoffs as a result.

From a policy point of view, it is too expensive (money, time, etc.) to test everyone with a biopsy, etc. The preliminary screening is sufficient to move your knowledge from the general 1% probability to the more specific 7.8%, which is enough to pursue. The fact that 20% of women with cancer will get a false negative doesn’t mean that it is better to test everyone, and the fact that out of every 1,000 tested 95 will falsely test positive (and be subjected to needless worry) also does not mean that it isn’t worth using the screening test.

That said, it would be good if, before you took the test, you were told that a positive result means you have less than an 8% chance of actually being positive and that in any case, the test doesn’t change the reality of whether or not you are positive!

This kind of confusion leads to people not flying to countries where there has been a terrorist incident but happily driving across country.

It is estimated that after the 9/11 attack, more people lost their lives by choosing to drive when they otherwise would have flown than were killed in the actual attack.

===

[Migrating the best of Quick Bits to my blog – items of interest to Geeks, tagged Quick Bits]

Review: Microsoft Web Cam (QB)

jesseliberty — Mon, 12 Oct 2009 17:35:00 GMT

My boss sent me a Microsoft High Def Web Cam, (we do a lot of teleconferencing).

I admit to being somewhat skeptical initially; I had a web camera, seemed to work fine. This new camera blew me out of my seat.

The overall quality was awesome, and the depth of field extraordinaire (so much so that I had re-tilt the camera so as not to show my messy office!)

The built-in digital microphone appears to be good enough that I can use it with my dictation software and eschew my regular headset, which is very nice.

I'm particularly fond of the WebCam base. It is made of extremely flexible material, and allows me to attach the camera both to my flatscreen monitor and to my laptop with zero difficulty.

This really is the best webcam I've seen.

A quick note on Quick Bits:

I tried the experiment of presenting “Quick Bits” (too large for twitter, too small for the blog) on separate pages. After reviewing usage and listening to reader feedback, I’ve decided to reintegrate Quick Bits back into the main Blog, but with the Quick Bits tag so that you can read (or avoid) them as they appear. I’ll migrate the existing ones that are worth keeping over the next week or so.

What Makes A How-Do-I Video Great ?

jesseliberty — Thu, 01 Oct 2009 00:20:00 GMT

I have been thinking a lot about how differently each of us (inside and out of Microsoft) approaches creating How-Do-I videos.

Let’s start by agreeing that no one instructor will please everyone, and the best way to create truly excellent videos is to step away from ego and try to zero in on what it is that this community values in instructional videos.

Create A List, Check It Twice

What follows are the characteristics that I look for and pay attention to, both when I'm creating videos and when I'm watching them.

One of the things that I hope will come out of this posting is a healthy, strong, ongoing discussion about what makes for "good" videos; that is videos that are worth your time to watch.

Depends on whether your meaning of “good” is good.

We can probably all agree that good sound quality is better than poor sound quality, and even agree on whether a given video has good (or good enough) sound quality. We may not all agree on what makes for good pacing – that is, some people prefer a faster pace, others prefer a more deliberate pace.

When thinking about these characteristics, we also need to consider the relative importance of any given characteristic. Once again, we can probably all agree that it is very important that the video have sufficiently good audio and video quality to be watchable and understandable, but we may differ in how much value we assign to the length of the video or smooth transitions.

Thus, if we were doing a survey we might want the user to answer paired questions such as: "Do you prefer to see videos that move along more quickly or more deliberately? " and "How important is the pacing of the video to you?

Instructional Quality

I’ll arbitrarily break instructional quality into

Instructional approach
Pacing of the material
Signal to noise
How well a single topic is encapsulated

Instructional approach.

Does the presenter approach the topic in a logical fashion?
Does the presenter provide "motivation" (that is, what you're about to learn and why you care)?
Is the example sufficiently clean and simple to understand the key point of the video?
Is the example sufficiently "mappable" to your own problem domain that you can see how to go from this example to work you might want to do?
Does the presenter (A.) ignore best practices, (B.) follow best practices, (C.) violate best practices.
Does the presenter used obscure, esoteric, techniques that lead to confusion?
Does the presenter skipped over interim steps, leaving you a bit confused?
Does the presenter dwell over-much on the obvious?
Does it seem that the presenter knows what he or she is talking about?

Pacing

Do you find the overall pacing: too slow, too fast, about right?
Is the presenter making the right assumptions about what you already know?
Is the instructor speaking: too slow, too fast, about right?
Is the instructor adding code to the demo: too slow, too fast, about right?

Signal-to-noise ratio

What percentage of the video do wish the presenter had edited out?
Was this video worth the time to watch it?

Encapsulation

Does this video teaching single topic, or does it cover number of related topics?
How well do the name and description of the video map to the content?
Does this video makes forward references to other videos?

Production Quality And Other Factors

Audio/ Video quality.

Is the quality of the video high enough that you can easily see what is being described?
Is the quality of the audio high enough that you can easily hear every word?
Is the video, unobtrusive (no sudden and unexplained jumps, no dropouts, etc.).
Is there anything in the video or audio that is distracting (background noises, instructor chewing, etc.).
Did the presenter take the time to make sure that the most important part of the screen is easily visible without making you dizzy with excessive zooming?
Does the presenter take the time to add callouts (circles arrows etc.), where that is necessary to understand what the presenters say?
Are transitions smooth?

Entertainment/charisma value

Is the video: so boring you want to claw your eyes out/ reasonably interesting/ a fair amount of fun?
Overall, is the instructor interesting to listen to?

Duration

Given the topic, was this video too long, too short, or just about right?
Overall be fine if the presenters videos are: too long, too short, or just about right?

Questions For You:

What am I missing in this list?
Which of these are very important?
Which of these are nearly irrelevant?
To what extent is all of this secondary to having videos on the right topics?
When a new version of Silverlight appears, would you rather see more videos of lower quality, or fewer videos of higher quality?
What have you seen in other videos that you wish we would do here?
What are we doing in our videos that you wish we would stop?

What? No survey?

It's tempting at this point to create a survey based on these questions; but that would presume that I already know what all the right questions are, and more important, that would kill the discussion before it even begins.

While blog comments are not the ideal discussion framework, I invite you please to respond in any way you like; answering one or more questions; adding, deleting or otherwise editing my lists; or just commenting on the overall topic.

RIA: Data Source Control

jesseliberty — Fri, 25 Sep 2009 22:42:00 GMT


	Turing Project Page: [Novice: 11 \| Advanced: 8 ]
	FAQ \| Table of Contents \| Definitions
	What is this and where do I start?

Part 3 of 3

This is the last of a three part sub-series on using Entity Frameworks and RIA Data Services to move data from our Sql Server database to our Silverlight Application’s DataGrid.

In Part 2, we explored returning an object graph by using the Entity Frameworks and by decorating the metadata for the RIA Services with the properties we wanted to retrieve from the contained object.

Until now, however, all of our code has instantiated via RIA Services context programmatically, invoked the query function programmatically, and assign the returned collection to the items source property of the data grid programmatically. In this post, I’ll look at a declarative approach.

Using the RIA Services DomainDataSource Control

We’ll begin with the program as we left it after the previous blog post, but we’ll immediately remove the three lines in blogs.xaml.cs that manipulates the data context.

   1: public partial class Blogs : Page   2: {   3:     //  private readonly BlogsContext bc = new BlogsContext();   4:   public Blogs()   5:   {   6:     InitializeComponent();   7:     //    bc.Load( bc.GetBlogsQuery() );   8:     //    this.blogsDataGrid.ItemsSource = bc.Blogs;   9:   }

Having removed the programmatic interface to the data context, let's now open up blogs.xaml and provide it with information about the data context by way of teh DomainDataSource control, which we must first add to the toolbox. To do so, right-click on the Silverlight Xaml Controls tab, and then click on Choose Items.

Within the Choose Toolbox Items dialog box click on the Silverlight Components tab, and then click the browse button. Navigate to your program files ->Microsoft SDKs -> RIA Services, pick the folder for the latest version, within that: Libraries-> Silverlight. Double-click on System.Windows.RIA Controls.dll

You should find that the DomainDataSource control has been added to the bottom of your list of controls; you may want to right-click and choose to sort them alphabetically.

Drag a DomainDataSource control onto the Xaml page just above the DataGrid. By dragging it on rather than writing it yourself Visual Studio will create the namespace for you set up your using statement and your references.

The four attributes you'll typically want to set, if no others, are the Name , LoadSize, QueryName, and the AutoLoad property. We will examine each of these in turn below.

You will also want to set the domain context property which you will do it explicitly as shown in the code that follows:

   1: <riaControls:DomainDataSource x:Name="BlogsDataSource"

   2:                               LoadSize="15"

   3:                               QueryName="GetBlogs"

   4:                               AutoLoad="True">

   5:    <riaControls:DomainDataSource.DomainContext>

   6:       <ds:BlogsContext />

   7:    </riaControls:DomainDataSource.DomainContext>

   8: </riaControls:DomainDataSource>

The LoadSize property instructs the DomainDataSource control as to how many records to get for each query to the database. This allows you to fine tune the performance of your application (too small load size, and you are making many calls to the database, to larg a load size and there will be a noticeable wait for the data to arrive).

The QueryName parameter references the query We created in the RIA Services class, you will remember setting GetBlogs to include bloggers. Notice that here you use the name of the method (GetBlogs ). Rather than "GetBlogsQuery()" as you did in C#.

Setting Autoload to true tells the DomainDataSource control to load the first set of data when it is initialized.

Note that the namespace for BlogsContext is DS as opposed to RIAControls the namespace for the DomainDataSource. DS is a namespace that refers to the Web project (you’ll need to add that to the top of the file)

Build and run the application. The results, that is the running application, are identical to what you had before. However now you are not creating this programmatically but rather declaratively in the Xaml.

Sorting

Is relatively straightforward to add sorting declaratively as well. You do so by adding a sort descriptor to your DomainDataSource control. In the case shown below (Lines 9 through 11), we are setting the SortDescriptor property explicitly, and having it sort on BlogName.

   1: <riaControls:DomainDataSource x:Name="BlogsDataSource"

   2:                               LoadSize="20"

   3:                               QueryName="GetBlogs"

   4:                               AutoLoad="true">

   5:    <riaControls:DomainDataSource.DomainContext>

   6:       <ds:BlogsContext />

   7:    </riaControls:DomainDataSource.DomainContext>

   8:    <riaControls:DomainDataSource.SortDescriptors>

   9:       <riaData:SortDescriptor PropertyPath="BlogName"

  10:                               Direction="Ascending" />

  11:    </riaControls:DomainDataSource.SortDescriptors>

  12: </riaControls:DomainDataSource>

Sending the sort column in this way it causes the data grid to open with that column sorted. The user, of course, can sort on any column by clicking on the column header.

Filtering

Before we leave the DomainDataSource control, let's take a quick look at filtering, which works much like sorting. In this case rather than explicitly putting into our filter what it is we are filtering on, we will instead set the "Control Parameter" to point to another control on the same page that will provide the text on which to sort.

To begin, we'll add a text box into which the user can type the desired filter.

<StackPanel Orientation="Horizontal"

            HorizontalAlignment="Right"

            Margin="0,-16,0,0">

   <TextBlock VerticalAlignment="Center"

              Text="Name Contains Filter" />

   <TextBox x:Name="filterText"

            Width="75"

            FontSize="11"

            Margin="4"

            Text="Silverlight" />

</StackPanel>

This code can be placed directly above the DomainDataSource, and as you can see it provides a textblock with a prompt and a text box, which will gather in the desired filter. Next We'll add a FilterDescriptors element to the DomainDataSource control, and tell it to get its value from that text box:

   1: <riaControls:DomainDataSource x:Name="BlogsDataSource"

   2:                               LoadSize="20"

   3:                               QueryName="GetBlogs"

   4:                               AutoLoad="true">

   5:    <riaControls:DomainDataSource.DomainContext>

   6:       <ds:BlogsContext />

   7:    </riaControls:DomainDataSource.DomainContext>

   8:    <riaControls:DomainDataSource.SortDescriptors>

   9:       <riaData:SortDescriptor PropertyPath="BlogName"

  10:                               Direction="Ascending" />

  11:    </riaControls:DomainDataSource.SortDescriptors>

  12:    <riaControls:DomainDataSource.FilterDescriptors>

  13:       <riaData:FilterDescriptorCollection>

  14:          <riaData:FilterDescriptor PropertyPath="BlogName"

  15:                                    Operator="Contains">

  16:             <riaData:ControlParameter ControlName="filterText"

  17:                                       PropertyName="Text"

  18:                                       RefreshEventName="TextChanged" />

  19:          </riaData:FilterDescriptor>

  20:       </riaData:FilterDescriptorCollection>

  21:    </riaControls:DomainDataSource.FilterDescriptors>

  22: </riaControls:DomainDataSource>

The filter descriptors begin online 12 and run through line 21. Notice on lines 14 and 15 that you are indicating which property is being filtered on and that you have your choice of operators such as contains, is, etc. On lines 16 through 18, you indicate the name of the control that has the filter, the name of the property of the control from which to extract the filter, and the event on which you will update the filter.

N.B.: the code is showing updates each time a letter is typed in the text box. This will cause a call to the database for every letter that's typed. You can solve this by using the Load Delay parameter. Of course having a low delay will make the page initially load more slowly, so you may want to add the load delay programmatically after you initialize the page.

Finally to give it a bit of polish, let's add a DataPager, just below the DataGrid. Note that the binding for the DataPager is identical to that for the DataGrid, and that the DataPager retrieves 10 records at a time; we'll go up so that and change the DomainDataSource load size to 30, so that it will retrieve 3 pages-worth at a time.

<data:DataPager PageSize="10"

  Source="{Binding Data, ElementName=BlogsDataSource}"  />

Silverlight Twitter Tips Launches

jesseliberty — Fri, 25 Sep 2009 13:15:00 GMT

Very proud to announce the launch of #stwip - silverlight twitter tips.

Find them by following my Tweets or by the meme

Project Turing: Beginning RIA Svcs

jesseliberty — Thu, 24 Sep 2009 20:48:00 GMT

Turing Project Page: [Novice: 9 | Advanced: 6 ]
FAQ | Table of Contents | Definitions

What is this and where do I start?

From Database to DataGrid

The next step in Project Turing is to create a first iteration of the Silverlight application that will retrieve data from our database. Using our technology of choice: the Data Entity Framework coupled with .Net RIA Services.

.Net RIA Services will allow us to create business logic on the server and to access that same set of classes on the client. We will retrieve the data from these business classes and display them in a data grid within a business application, that is a multipage Silverlight application.

.NET RIA Services

While a great deal has been written about RIA Services, I find when talking with Silverlight developers that there is still some confusion about where RIA Services are best used and what the key benefits are. This really isn't terribly surprising given how new the RIA Services platform is. Despite the incredible work done by Brad Abrams and others on the dev team to document RIA Services, it will take a while for many Silverlight programmers to fully integrate the platform into their designs

Project Turing offers an ideal opportunity to provide an incremental introduction to RIA Services and an illustration of the immediate benefits of the platform.

Just before the progress took the digression into Linq, we created our basic database tables, and the initial architecture of Project Turing. Here is a snapshot of the database as it exists at this point in the project:

(click on image for full size)

Our goal now is to retrieve this data using the Data Entity Framework and to make it available to the DataGrid using .NET RIA Services.

What You Need To Program With RIA Services Project

For this part of Project Turing you're going you need to install the latest .Net RIA Services framework. You can find complete instructions and all of the libraries that you need here. (There is no cost.)

You also want to create or download the Turing database, which you can install to SQL Server 2005, SQL Server 2008, or SQL express. You can download a backup of this database and restore it to your system, from here. Alternatively you can download a script to re-create the database from here.

Getting Started

We will build the application incrementally, starting with a simple version and adding complexity as we go. Specifically, we will break down the steps of interacting with the database into a series of smaller tasks.

The goal in this first example will be to create a shell of a multipage application, and within that a page to which we’ll add a basic DataGrid. To get started open Visual Studio and create a new project. In the Project Type, select Visual C#/Silverlight, and in the templates select Silverlight Business Application. I named my project TuringRIAServices.

(Click image for full size)

A fairly sophisticated Silverlight application is created for you out-of-the-box. Your solution consists of two projects, and your Xaml project has three subdirectories: Assets, Libs, and Views.

The views folder contains the initial pages already provided in the application. These include Xaml files for logging in, a Home page, a custom error window and an about box.

MainPage.xaml acts as a shell and a dispatcher to the pages that are in the Views folder. The Assets folder contains your first styles Xaml page, but you are free to add more (as you are to all the folders).

To begin open MainPage.xaml and let’s examine some of what has been put in place by Visual Studio.

   1: <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">

   2:   <Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">

   3:           <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}"

   4:                             Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed">

   5:               <navigation:Frame.UriMapper>

   6:                 <uriMapper:UriMapper>

   7:                   <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>

   8:                   <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>

   9:                 </uriMapper:UriMapper>

  10:               </navigation:Frame.UriMapper>

  11:           </navigation:Frame>

  12:   </Border>

13:

  14:   <Grid Style="{StaticResource NavigationOuterGridStyle}">

  15:     <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}">

16:

  17:       <Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}">

  18:         <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}">

19:

  20:           <ContentControl Style="{StaticResource LogoIcon}"/>

  21:           <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}"

  22:                              Text="Application Name"/>

23:

  24:         </StackPanel>

  25:       </Border>

26:

  27:       <Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}">

  28:         <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">

29:

  30:           <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}"

  31:                                    NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>

32:

  33:           <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>

34:

  35:           <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}"

  36:                                    NavigateUri="/About" TargetName="ContentFrame" Content="about"/>

37:

  38:         </StackPanel>

  39:       </Border>

40:

  41:     </Grid>

42:

  43:     <Border x:Name="loginContainer" Style="{StaticResource LoginContainerStyle}"/>

  44:   </Grid>

45:

  46: </Grid>

Before taking this apart lets look at what is created if you build and run this without making any changes.

(Click image for full size)

You can see in the image that there is a frame around the home page, which has within it a logo, the name of the application, a button for the currently selected page, a button for the about page, and a small button for the login dialog.

This corresponds directly of course to the Xaml above.

On line 2, we create a border, which uses the static resource predefined by Visual Studio and stored in Styles.Xaml within the Assets folder.

Within that border a Frame object is defined on line 3 through 11, within the navigation namespace defined at the top of the file.

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

The frame has three critical properties:

The source.
The name of the method to call after successfully navigating to the page.
The name of the method to call in the event of failure.

Nested within the frame is a mapper, whose job is to map pages to URIs.

Note on line 8, the generic mapping that is used with the substitution parameter pagename. This is a subtle but very powerful capability that allows you to create essentially a template of the relationship between pages in their URI and avoid duplicating this code for every page.

The second major UI area within this Xaml file begins on lines 14 and 15 with the creation of an outer and inner grid.

The content control defined on line 20 is used to display the logo and on line 21 is a standard textblock, where the text is set to Application Name. This would be a good opportunity to change that text to "Project Turing RIA Services"

The second area is itself divided in to two areas each with its own water, and in the lower area beginning on line 27. Line 30 shows the hyperlink button for the homepage and on line 35 is the hyperlink button for the about page. Adding a new button only requires an additional hyperlink button. In this section, the navigation is handled by the section about.

You may find it worthwhile and interesting to open up the style.xaml file, and take a look at the static resources that were created by this template.

Adding A DataGrid

We will add the Silverlight control DataGrid to a new Silverlight page. To do so, right-click on the project and choose Add --> New Item. In the Add Item dialog box, choose Silverlight under categories and Silverlight Page in the templates pane.

Name the new page BlogsDataGrid and click Add.

At the top of this page, we will place a header as we will on each new page. The header consistents of a ScrollViewer, within which we will place a StackPanel, within which we will place a Toolbox with the name of the page as shown here:

Note: this design, and much in these examples, comes from the Walk-Through created by the development team and used here with their permission, for which I and my Carpal Tunnel Syndrome are very grateful.

<ScrollViewer BorderThickness="0"              VerticalScrollBarVisibility="Auto"              Padding="12,0,12,0"              Margin="-12">    <StackPanel Margin="0,12,0,12"                Orientation="Vertical">        <TextBlock Text="Blogs"                   Style="{StaticResource HeaderTextStyle}" />    </StackPanel></ScrollViewer>

Finally, drag a DataGrid from the toolbox into the grid.

Note: the advantage of dragging from the toolbox rather than writing the Xaml by hand is that Visual Studio will create the necessary namespace and use that as a prefix for the DataGrid

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Once Visual Studio has fixed up the namespace, modify the data grid element to include the properties Name (BlogsDataGrid), MinHeight (150), and IsReadOnly (true).

<navigation:Page

  xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

  x:Class="TuringRiaServices.Blogs"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

  xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

  mc:Ignorable="d"

  d:DesignWidth="640"

  d:DesignHeight="480"

  Title="Blogs Page">

    <Grid x:Name="LayoutRoot">

        <ScrollViewer BorderThickness="0"

                      VerticalScrollBarVisibility="Auto"

                      Padding="12,0,12,0"

                      Margin="-12">

            <StackPanel Margin="0,12,0,12"

                        Orientation="Vertical">

                <TextBlock Text="Blogs"

                           Style="{StaticResource HeaderTextStyle}" />

            </StackPanel>

        </ScrollViewer>

        <data:DataGrid x:Name="blogsDataGrid"

                       MinHeight="150"

                       IsReadOnly="True"></data:DataGrid>

    </Grid>

</navigation:Page>

Your page is ready, but there is no way to navigate to it. Return to MainPage.Xaml and let's add the logic for an additional button.

First, take a look at the solution Explorer, and if BlogsDataGrid.Xaml is not in the views folder drag it there now.

As noted above, all we need to do here is add a hyperlink button for our new page. This will go immediately below the hyperlink button for the about box

<HyperlinkButton x:Name="Link3"

                 Style="{StaticResource LinkStyle}"

                 NavigateUri="/Blogs"

                 TargetName="ContentFrame"

                 Content="Blogs" />

Build and run the application and be sure to click on the new button for the Blogs page. Please take note of the very elegant handling of the exception that is thrown, because we wired up for a same blogs. But our actual page is named BlogsDataGrid.

While we're fixing that link, lets take note of the fact that Visual Studio has named each of the hyperlink buttons. Link one, link two etc. , while it is natural and common to continue this as we have done above, I greatly prefer to name the hyperlink buttons to indicate their function. And so I will rename Link1 HomeLinkButton; Link2 AboutLinkButton and our Link3 BlogsLinkButton. I will also fix up the NavigateURI to the full name of the page.

One defensible choice is to continue the pattern provided by Visual Studio, but it is my personal approach to rename all three on the premise that good naming practice makes for good documentation.

<UserControl x:Class="TuringRIA_Services.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
     xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
     xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     d:DesignWidth="640"
     d:DesignHeight="480">
   <Grid x:Name="LayoutRoot"
         Style="{StaticResource LayoutRootGridStyle}">
      <Border x:Name="ContentBorder"
              Style="{StaticResource ContentBorderStyle}">
         <navigation:Frame x:Name="ContentFrame"
                           Style="{StaticResource ContentFrameStyle}"
                           Source="/Home"
                           Navigated="ContentFrame_Navigated"
                           NavigationFailed="ContentFrame_NavigationFailed">
            <navigation:Frame.UriMapper>
               <uriMapper:UriMapper>
                  <uriMapper:UriMapping Uri=""
                                        MappedUri="/Views/Home.xaml" />
                  <uriMapper:UriMapping Uri="/{pageName}"
                                        MappedUri="/Views/{pageName}.xaml" />
               </uriMapper:UriMapper>
            </navigation:Frame.UriMapper>
         </navigation:Frame>
      </Border>
      <Grid Style="{StaticResource NavigationOuterGridStyle}">
         <Grid x:Name="NavigationGrid"
               Style="{StaticResource NavigationGridStyle}">
            <Border x:Name="BrandingBorder"
                    Style="{StaticResource BrandingBorderStyle}">
               <StackPanel x:Name="BrandingStackPanel"
                           Style="{StaticResource BrandingStackPanelStyle}">
                  <ContentControl Style="{StaticResource LogoIcon}" />
                  <TextBlock x:Name="ApplicationNameTextBlock"
                             Style="{StaticResource ApplicationNameStyle}"
                             Text="Project Turing RIA Services" />
               </StackPanel>
            </Border>
            <Border x:Name="LinksBorder"
                    Style="{StaticResource LinksBorderStyle}">
               <StackPanel x:Name="LinksStackPanel"
                           Style="{StaticResource LinksStackPanelStyle}">
                  <HyperlinkButton x:Name="HomeLinkButton"
                                   Style="{StaticResource LinkStyle}"
                                   NavigateUri="/Home"
                                   TargetName="ContentFrame"
                                   Content="home" />
                  <Rectangle x:Name="Divider1"
                             Style="{StaticResource DividerStyle}" />
                  <HyperlinkButton x:Name="AboutLinkButton"
                                   Style="{StaticResource LinkStyle}"
                                   NavigateUri="/About"
                                   TargetName="ContentFrame"
                                   Content="about" />
                  <HyperlinkButton x:Name="BlogsLinkButton"
                                   Style="{StaticResource LinkStyle}"
                                   NavigateUri="/BlogsDataGrid"
                                   TargetName="ContentFrame"
                                   Content="Blogs" />
               </StackPanel>
            </Border>
         </Grid>
         <Border x:Name="loginContainer"
                 Style="{StaticResource LoginContainerStyle}" />
      </Grid>
   </Grid>
</UserControl>

This time clicking on the blogs hyperlink does not throw an exception but rather brings you to the blogs page, where the outline of the DataGrid is drawn but of course there is as of yet no data. Let's fix that now.

Adding Business Logic And Data

Our next principal task is to retrieve data from the database and present it to the DataGrid. As noted in previous mini tutorials and postings for this project, there are a number options for retrieving data from a database. One of the most powerful is to use the Entity Framework.

When a developer says technology is "powerful," we typically mean that it does a lot of the routine plumbing for us, and that it is highly flexible. Certainly both are true of the Entity Framework.

A quick look at Julia Lerman's Programming Entity Framework (O'Reilly Media, 2009) is both reassuring and somewhat intimidating; her book is over 750 pages. This stands as testimony to the enormous flexibility of the Entity Framework.

Programming Entity Framework (9780596520281): Julia Lerman: Books

ISBN: 059652028X
ISBN-13: 9780596520281

That said, using the Entity Framework to retrieve data from a relatively straightforward relational database can be explained quite quickly. I will demonstrate enough of the Entity Framework to get a feel for the role that it plays and the level of abstraction that it provides, but in no way will this be a comprehensive survey of the Entity Framework in its entirety.

To begin, add a new item to Turing RIA Services.web. In the Add New Item dialog select Data in the Categories pane, and choose ADO.net Entity Data Model in the templates pane, and name the new Entity Data Model TuringBlogs. Indicate to the Entity Data Model Wizard that you wish to generate your model from an existing database.

(Click image for full size)

You'll be prompted to create or reuse a connection string for your database

(Click image for full size)

Note that using the second radio button "include the sensitive data in the connection string," will slightly simplify your code, but expose a significant security hole.

After connecting to your database, you'll be asked to choose which objects you wish to include. Expand the tables, and select the Blogs table.

(Click image for full size)

When you click finish, the entity data model will appear in the designer. To verify that everything is correct, build the solution.

Transporting the Data Class To The Client With .Net RIA Services

You're halfway home. You now have an entity (object) that represents the data that is stored in relational tables in SQL Server. The next step is to create business classes that will represent and manipulate that data on the server, and be equally available on the client. That is in a nutshell, what.net RIA Services does for a living.

Once again right-click on the Turing RIA Services Web project, and add a new item. However this time, in the Categories pane, select Web and in the templates pane Domain Service Class. Name the new item BlogsService and click Add.

(Click image for full size)

Click Add which will open the Add New Domain Service Class dialog. Select Blogs from the list of entities (okay, in this case it's the only item in the list). In the same dialog, be sure to check Enable Editing, which enables the CRUD functionality, and at the bottom of the dialog, click "Generate associated classes for metadata." Then click OK.

(Click image for full size)

Open the class of this generates for you: BlogsService.cs and modifying the GetBlogs method as follows:

//Replace this generated code:public IQueryable<Blogs> GetBlogs(){   return this.Context.Blogs;} // with this custom code:public IQueryable<Blogs> GetBlogs(){  return this.Context.Blogs.OrderBy(b => b.BlogName);}

In this first example, our customization is ordering the results by the name of the blog.

Define It on the Server, Invoke It on the Client

When you rebuild the solution not only will the classes that you've created in the server be built, but a corresponding set of proxy classes will be built in the client project.

Thus the class and its method will be available on the client side, and therefore available to our DataGrid. At the top of the code behind page will need to add three using statements; one to bring in the web project, and the other two for RIA Services:

using TuringRIAServices.Web;

using System.Windows.Ria.Data;

using System.Windows.Ria.ApplicationServices;

In the generated code in the client project, the BlogsContext is generated based on the BlogsService you created on the server. To see the definition, turn on show all files, and locate the file TuringRIAServices.web.g.cs Inside the previously hidden Generated_Code folder. In that file, you will find the definition for the BlogsContext.

public sealed partial class BlogsContext : DomainContext{    partial void OnCreated();     public BlogsContext() :             this(new HttpDomainClient(              new Uri("DataService.axd/TuringRIA_Services-Web-BlogsService/", System.UriKind.Relative))) {}    public BlogsContext(Uri serviceUri) :             this(new HttpDomainClient(serviceUri)) {}        public BlogsContext(DomainClient domainClient) :             base(domainClient)    { this.OnCreated(); }        public EntityList<Blogs> Blogs    {        get { return base.Entities.GetEntityList<Blogs>();  }    }        public EntityQuery<Blogs> GetBlogsQuery()    {        return base.CreateQuery<Blogs>("GetBlogs", null, false, true);    }        protected override EntityContainer CreateEntityContainer()    {        return new BlogsContextEntityContainer();    }        internal sealed class BlogsContextEntityContainer : EntityContainer    {                public BlogsContextEntityContainer()        {            this.CreateEntityList<Blogs>(EntityListOperations.All);        }    }} 

Returning to BlogsDataGrid.xaml.cs, instantiate a BlogsContext as a member variable,

private BlogsContext blogsContext = new BlogsContext();

Here is the complete BlogsDataGrid.xaml.cs:

using System.Windows.Controls;

using System.Windows.Navigation;

using TuringRIA_Services.Web;

using System.Windows.Ria.Data;

using System.Windows.Ria.ApplicationServices;

namespace TuringRIA_Services

   public partial class BlogsDataGrid : Page

      private BlogsContext blogsContext = new BlogsContext();

      public BlogsDataGrid()

         InitializeComponent();

         this.blogsDataGrid.ItemsSource = blogsContext.Blogs;

         blogsContext.Load( blogsContext.GetBlogsQuery() );

      protected override void OnNavigatedTo( NavigationEventArgs e )

In the constructor, you ask the BlogsContext object to retrieve its Blogs property (an entity list of Blogs) and this collection is assigned as the ItemsSource of the DataGrid. The following line instructs the Blog Context to call its Load member method, passing in the query retrieved by calling GetBlogQuery(). This will be the query that we customized earlier.

The query as you remember, retrieves all of the blogs, ordered by the name of each blog. This collection is assigned to the DataGrid and the page is displayed when you click on the blogs button.

(Click image for full size)

What have you learned, Dorothy?

In this first iteration of moving data from our SQL Server database to the DataGrid on our client, we have examined using the Entity Framework for creating an object orientated model of the data in the database, and using RIA Services both to provide a common set of business classes on the server and the client and to provide transportation of the data from server-side to client-side.

In the next posting on Project Turing, I will examine more complex, data retrieval.

Download source code

Please note that due to Carpal Tunnel Syndrome this posting was dictated and then transcribed by computer. I apologize for any resulting absurdities.

Novice	Previous: LinqToSql	Next: Multiple tables and RIA Services
Advanced	Previous: LinqToSql	Next: Multiple tables and RIA Services

Jesse Liberty - Silverlight Geek

Commitments

A series of new and better videos – look for the first ones during PDC.

At least two Silverlight From Zero mini-tutorials per month, and at least two Intermediate to Advanced mini-tutorials each month.

Revitalization of the “Example Code Quality Guarantee” page noting the development environment for all demos.

The HyperVideo Project Spec will be complete by November 23 (if you wish to contribute to the spec, please send email to jliberty@microsoft.com ) and Coding begins for the HyperVideo Project Tuesday November 24.

Subscribe to 62 Silverlight Twitter’ers.

Designer v Xaml v Code

Don’t Start with Xaml…

Silverlight Without Xaml

Add Your First Control

Xaml and Intellisense

Dynamic Creation of Controls in Code

It’s All Just Objects

Creating The TextBlock Dynamically

Placing the Control into the Grid

You Can, But Don’t.

The Source Code

Silverlight From Zero

What is Silverlight, Why Do I care?

Where Do I Get It?

Navigating the Get Started Page

Quick Tour?

The Tools

Diving In

Silverlight Synchronicity

Hypervideo, Closed Captions & Accessibility

Expectations Are Everything

Quick Bit

Expectations

Building A Product For Real

Who, What, When, Where and Why

It shouldn’t be all that hard

Time To Update My Favorites

Favorite Utilities 2009

Bayesian Probability

What Do We Know & What Does It Imply?

Not Being Misled

Probability is Weird and Cancer Is Scary

Review: Microsoft Web Cam (QB)

What Makes A How-Do-I Video Great ?

Create A List, Check It Twice

Depends on whether your meaning of “good” is good.

Instructional Quality

Instructional approach.

Pacing

Signal-to-noise ratio

Encapsulation

Production Quality And Other Factors

Audio/ Video quality.

Entertainment/charisma value

Duration

Questions For You:

What? No survey?

RIA: Data Source Control

Part 3 of 3

Using the RIA Services DomainDataSource Control

Sorting

Filtering

Silverlight Twitter Tips Launches

Project Turing: Beginning RIA Svcs

From Database to DataGrid

.NET RIA Services

What You Need To Program With RIA Services Project

Getting Started

Adding A DataGrid

Adding Business Logic And Data

Transporting the Data Class To The Client With .Net RIA Services

Define It on the Server, Invoke It on the Client

What have you learned, Dorothy?