Jesse Liberty - Silverlight Geek

Greetings from Ajax World where Silverlight is King! (Or at least royalty)

I'm here at Ajax World in Santa Clara and interest in Silverlight is very high. Folks want to know what it is, how it works, how it fits in with Ajax, and how they can get started with it. 

One thing that is very clear from talking with folks here is that I need to do a series of videos about how Microsoft AJAX and Silverlight complement each other; the realtionship between the two is very unclear for a lot of developers. It will be a great deal of fun working on those.

A truly interesting aspect of presenting Silverlight to AJAX developers is that they are perfectly happy to hear that the event handling in 1.0 is in Javascript -- after all, AJAX is built on Javascript. But they are very juiced about the Rich experiences available in Silverlight and equally excited by the debugging and development support in Visual Studio 2008.

Joe Stagner gave a great Keynote about AJAX and how the Microsoft AJAX implementation goes beyond eye candy, and it was the perfect setup for talking both about how AJAX and Silverlight can enhance one another and about how Silverlight is also not just eye candy. 

Fertile ground for follow up, I can't wait to get back home and start writing new tutorials, white papers and recording new videos.

Dependency Properties or Attached Properties

Silverlight lets you create a property in an object (such as a rectangle) that derives from an ancestor element (such as a canvas). That is why we can write

<Rectangle Canvas.Top="10" />

Canvas.Top is a property of the Canvas, the ancestor element in the object tree.  Tim Heuer, one of the smarter folks I know, calls this a Dependency Property. I call this an attached Property. So I did a little spelunking to find out which is right, and here's what I found.  

“Attached properties” are defined in this Quick Start as follows:

• Value resolution – DPs are used to form a system which can determine the actual property value based on various runtime information.  The resolution process has an order of precedence it assigns to various environmental contexts in which the property might exist.  For example, if the DP is being modified by an animation then the value supplied by the animation is the resolved value, but if it is not animated, then the value is derived from elsewhere.
• Self-contained validation – DPs can have custom callback methods execute when the property value has changed.  These callbacks can validate the new value or coerce the new property value into something acceptable, according to the semantics of the property.
• Default values – DPs provide a consistent mechanism for associating a default value with a property.  A DP’s default value has the lowest precedence in the value resolution process, meaning that if there is no other way to determine the property value, then the default value will be used.
• Property meta-data – The property system knows how a DP should behave based on meta-data supplied at the time the property is registered with the system.  Subclasses can tweak a DP by overriding the property’s meta-data, instead of completely re-implementing the property itself.  It is interesting to note that this meta-data is not stored in attributes, partly because the performance impact associated with using reflection to manipulate the meta-data was unacceptable.
• XAML friendly – Just like normal properties, DPs can be set in XAML.
• Value inheritance – Any DP can be given the ability to inherit its value from the property setting on an ancestor element, in the logical tree.  This provides similar functionality to the ambient properties used in Windows Forms.  Value inheritance is useful in many situations, such as propagating a data source down the element tree, font settings, flow direction (right-to-left) settings, etc.
• Attached properties – A form of dependency property which allows a child element to store a value associated with a property defined on an ancestor element. 

Wow! Is Silverlight hot!- All I did was offer...

Just a week ago I offered to speak about Silverlight at any public event.

Now, it's true that I have an ego the size of Nebraska, but I have to face the fact that  the response I received had little to do with me, and everything to do with the excitement around Silverlight... 

In that short time, I've booked talks at

• AJAXWorld (September 23-26) in California)
• Code Camp: Silverlight Surfer -  Waltham, MA  (September 29)
• Redmond, WA (October)
• Huntsville Alabama (November 19)
• TechEd Barcelona (November 5-9)
• Orlando, Fla (Silverlight Saturday December 15)
• Software Assoc. of New Hampshire (December 6)

In short, (a) I'm booked through 2007 and (b) Wow!

If you are going to be at any of these events, look for me on Twitter, and let's see if we can set up a meeting or a lunch.

PS: While I'll be booking events in 2008, not at this pace! My family will never forgive me.  Look for me at some of the larger Microsoft events, and keep in touch, you never know where I might pop up. Thanks!

My twitter ID is JesseLiberty

The Great Asynchronous Learning Experiment - Day 6

[Updated 11:50pm 9/11 to make this a bit more readable]

 As you may know, I've become very interested in the idea of hypervideo. In my first HDI video on HyperVideo I hard coded the links to the markers in the movie but I talked about trying again, with decoupled links.

My original idea was to put the link-to-marker association in a database or an XML file, but Tim Heuer, suggested JSON (smart guy, that Tim!).

So, how do you do this with JSON?  This isn't finalized yet, but to give you a quick idea of how easy such a thing can be, try this: fire up Visual Studio 2008 (Beta 2) and create a new Web application. Place a rather large text box in your aspx page (I made mine 600 x 400); set it to multi-line, read only and set the wrap to true.

In your App_Code you'll add your classes in a file named JSON.cs.

Our long term goal is to be able to pass the movie name to a web service and  get back the list of markers and the list of links for those markers. In fact, we don't want to have to know the name of the web service, so we'll embed the name of the web service right in the first marker in the movie.

Our first class is Movie, which contains just three members: the name of the movie:, the URI of the web service that knows about that movie:, and the list of Marker objects:

[Serializable()]
[XmlRoot("Movie")]
public class Movie
{
    private string movieTitle;
    private string movieURI;
    private List<Marker> movieMarkers;

Notice that the class requires the attribute Serializable (we're going to serialize to JSON) and we mark the class with the XMLRoot attribute

We go on to mark each property with the XMLElement attribute:

[XmlElement("Title")]
public string Title
{
    get { return movieTitle; }
    set { movieTitle = value; }
}

[XmlElement("URI")]
public string URI
{
    get { return movieURI; }
    set { movieURI = value; }
}

[XmlElement("Markers")]
public List Markers
{
    get { return movieMarkers; }
    set { movieMarkers = value; }
}

Finally, we create the ToJson() method which will do the actual serialization...

public string ToJson()
{
    System.Web.Script.Serialization.JavaScriptSerializer js = 
        new System.Web.Script.Serialization.JavaScriptSerializer();
    return js.Serialize(this);
}

 The MarkerLink class has two member variables: linkURI and linkText that will be filled with the URI and text to display at a given marker.


[Serializable()]
public class MarkerLink
{
    private string linkURI;
    private string linkText;

    [XmlElement("LinkURI")]
    public string LinkURI
    {
        get { return linkURI; }
        set { linkURI = value; }
    }
   
    [XmlElement("Text")]
    public string Text
    {
        get { return linkText; }
        set { linkText = value; }
    }
}


The Marker class represents the information for a given marker at a particular location in a movie. The name of the marker is used to refer to it in code. Its type, text and time are embedded in the movie itself. The final member is a list of MarkerLink objects, allowing each Marker to have zero or more links associated with that marker.

These markers are then rolled up into the Movie class whose final member is a list of Markers.

[Serializable()]
public class Marker
{
    private string markerName;
    private string markerType;
    private string markerText;
    private string markerTime;
    private List<MarkerLink> links;


    [XmlElement("Name")]
    public string Name
    {
        get { return markerName; }
        set { markerName = value; }
    }

    [XmlElement("Type")]
    public string Type
    {
        get { return markerType; }
        set { markerType = value; }
    }

    [XmlElement("Text")]
    public string Text
    {
        get { return markerText; }
        set { markerText = value; }
    }

    [XmlElement("Time")]
    public string Time
    {
        get { return markerTime; }
        set { markerTime = value; }
    }

    [XmlElement("Links")]
    public List Links
    {
        get { return links; }
        set { links = value; }
    }

With this in place, we're ready to rock and roll.  In the Page_Load method of default.aspx we instantiate a Movie object and set its Title and URI properties, and intialize its list of markers. We then, for the purpose of this demonstration,  populate the indices randomly and serialize all of this data into a JSON text string.

This is where you have to let your imagination run a little wild..... Imagine that when we are creating the links for the movie we start by embedding markers (say) every 30 seconds with no intrinsic meaning (e.g., Marker1, Marker2, Marker3). We then present a web page that the movie owner uses that lets the movie owner  fill in the movie name, and then add information for each marker, including zero or more links for that marker (e.g, for marker04 there are three links).  Once the movie owner presses SAVE all of the movie information (including the markers and their links) are serialized into JSON format and stored (perhaps in a SQL Server database).

Later, the user comes along to download the movie. The movie viewer (to be created) reads the first marker and makes contact with the web service whose URI is embedded in the movie, and provides the movie name (also embedded in the movie) What the viewr gets back  a JSON structure.

To make sure we've saved all this information correctly we can format and display the JSON string in the text box in our ASXM file. I took a brute force approach to making it look readable,


     // place in text box
     SerializedText.Text = FormatJson(mov.ToJson());

}

private string FormatJson(string p)
{
     int level = 1;
     string output = string.Empty;
     foreach (char c in p)
     {
         output += FixJsonChar(c, ref level);
     }
     return output;
}
private string FixJsonChar(char c, ref int level)
{
     if (c == '{')
     {
         string output = string.Empty;
         output += "\n";
         ++level;
         for (int i = 0; i < level; i++)
         {
             output += "  ";
         }
         output += c;
         return output;
     }
     if (c == '}')
     {
         --level;
         return c.ToString();
     }
     if (c == '[' || c == ']')
     {
         string output = string.Empty;
         output += "\n";
         for (int i = 0; i < level; i++)
         {
             output += "  ";
         }
         output += c;
         return output;
     }
     if (c == ']')
     {
         string output = string.Empty;
         output += "\n";
         for (int i = 0; i < level; i++)
         {
             output += "  ";
         }
         output += c;
         return output;
     }

     if (c == ',')
     {
         string output = string.Empty;
         output += c;
         output += "\n";
         for (int i = 0; i < level; i++)
         {
             output += "  ";
         }

         return output;
     }
       
    
     else
     {
         return c.ToString();
     }

}


What you get back is very cool...

  {"Title":"All About Silverlight",
    "URI":"http://mymovieurl.com/AllAboutSL.wmv",
    "Markers":
    [
      {"Name":"Marker 0",
      "Type":"Uri",
      "Text":"This is marker 0",
      "Time":"00:00",
      "Links":
      [
        {"LinkURI":"http://0.resource.com",
        "Text":"Visit Resource 0"},
      
        {"LinkURI":"http://1.resource.com",
        "Text":"Visit Resource 1"}
      ]},
    
      {"Name":"Marker 1",
      "Type":"Uri",
      "Text":"This is marker 1",
      "Time":"00:01",
      "Links":
      [
        {"LinkURI":"http://0.resource.com",
        "Text":"Visit Resource 0"},
      
        {"LinkURI":"http://1.resource.com",
        "Text":"Visit Resource 1"}
      ]},
    
      {"Name":"Marker 2",
      "Type":"Uri",
      "Text":"This is marker 2",
      "Time":"00:02",
      "Links":
      [
        {"LinkURI":"http://0.resource.com",
        "Text":"Visit Resource 0"},
      
        {"LinkURI":"http://1.resource.com",
        "Text":"Visit Resource 1"}
      ]}
    ]}

Yes, there are other ways to do this, but this is quick, easy, human readable, works and plays well with Ajax and gives us tremendous flexibility.

-j

Available to Present on Silverlight

I am available to talk at events world-wide (and especially nationwide) where I can talk to (ideally) a couple hundred developers about Silverlight Programming.

If I can work out the timing and the details, Microsoft will cover all expenses and fees.  I can give break out talks or intensive sessions (45 minutes to 3 hours) or even a crash course (two 3 hours sessions?) on Silverlight.  A typical session description might look like some variant on either of these:

Building Silverlight 1.0 Applications With Visual Studio 2008 and Javascript

Cover the fundamentals of building Rich Internet Applications with Silverlight 1.0 and Visual Studio 2008. Topics covered will include an introduction to Silverlight, Understanding XAML, Layout, Manipulating shapes and text, brushes, transformations, creating controls, events, Silverlight and HTML exposing managed APIs to JavaScript.

Building Rich Internet Applications Using .NET 

Describe the latest Silverlight release, and will show how the CLR subset allows you to build RIAs with managed code. Topics covered XAML, layout, shapes, controls, brushes and transforms, event handling, interaction with ASP.NET, retrieving Data through LINQ, and animation. Advanced topics include the File Open dialog, HTTP Network Access, Web Services and Isolated Storage and the latest controls available with Silverlight 1.x

I'm booked through October, but contact me and let's see what we can work out. jliberty@microsoft.com

When Worlds Collide - Boston Ignite!

I had the opportunity to talk at O'Reilly's Ignite! in Boston last night. This was an informal occasion (with free Beer (great Guinness on draught!)) at which over 250 geeks techies attended and 21 people geeks presented (each with a strict 5 minute time limit).

My pitch was this (and it will be my pitch from now on, which is why I'm blogging about it here):

• I am not interested in convincing you to use Silverlight
• I joined Microsoft because I personally believe that Silverlight is the most exciting programming technology since Windows 3.1, but that means I like talking about it, writing about it, coding with it, not selling it.
• I am very interested in helping you in every way if you decide you want to program in Silverlight
• My job is to create "How Do I videos", tutorials, white papers, show-case applications, custom controls, blogs, etc.
• We have lots of resources for you and many of them are centered the Silverlight site

That was really what I was there to say: we have a lot of information for those who want to code in Silverlight; a lot of how-to and a lot of support all in one place, and I'm interested in creating a dialog and a community.

While I spoke, I showed a 5-minute silent screen-capture-movie, which included a glimpse of our most-often mispronounced Showcase application (Tafiti) and folks were openly dumbfounded when I said "Everything you are seeing was built with 1.0" -- clearly we have much work to do to get the word out about how much can be built right now.

 The reception was very positive. I learned two things

1. 5 minutes is a very short amount of time to talk about Silverlight
2. 5 minutes is a very long time to stand in front of folks who have just listened to 20 other people pitching 20 other products

 That said, everyone was very kind, and warm, and welcoming, and interest in Silverlight seemed very high.  I think there were (roughly) the following groups of developers in the room (based on my incredibly fast, informal, survey):

1. It's a Microsoft technology therefore I'm against it, go away
2. I don't know quite what it is, but want to learn more
3. Isn't this an alternative to ______ ? (Flash/Flex/Air/Other)  - No? What is it then?
4. I use ____ and I'm not switching, forget it
5. I'm eager to learn more, where do I go?
6. I'm already on board, thanks for telling me where I can get more help
7. Yup, I'm already there 

 -jesse

Getting Ready For 1.1

With the release of 1.0 and the announcement in ScottGu's blog today that his team is working hard on 1.1 (and the promise of many exciting features) many developers are (it is fair to say) champing at the bit, in eager anticipation.

So, without debating whether there are exciting and amazing applications to be built with 1.0 (see the Showcase applications for demonstrations of this point), one must ask the question: "what can I do today to get ready for 1.1?"

I think there are a number of ways to go about this, but among the most fruitful might be,

 1. Develop applications in 1.0 -- nearly everything you learn (except, perhaps, the Javascript) will be useful when you move to 1.1. All the architecture, XAML and interaction with hosting HTML and ASP.NET/AJAX will remain the same. Yes, you'll have created controls and plumbing that later you'll get for free, but that is always the way with early adoption, and while frustrating, it also has significant benefits; the lessons learned in building these controls will apply toward building other custom controls.

2. Develop applications in WPF. It is true that Silverlight will always (always is a long time...) be a subset of WPF, and we haven't said what the exact dimensions of that subset are, but learning WPF will have enormous benefits. You'll become very familiar with XAML and the interaction between XAML and CLR based objects and as Silverlight develops and evolves you'll have an advanced understanding of what can be done through the browser and what can only be done native on the machine.

 3. Reconstruct the showcase applications.  Folks are making amazing applications and the products are being shown here. Break your brains on how to build them (or something very much like them) yourself. My advice: once you get past the fundamentals, work on projects for which the code is not available. Come up with your own solutions.

4. Create Custom Controls - decide what you most want in Silverlight that isn't there yet and build it. The tools are all available. Then put it up on Codeplex and let others tear into it.

I had a friend once who said "there are two kinds of people; one kind thinks there are two kinds of people, the other kind doesn't...."

The above is for the kind of person who wants to work at the bleeding edge. If you are not a bleeding edge kind of person, hey! there's lots of released new stuff to dig into. You could spend your time on

• Silverlight 1.0
• WPF
• WCF
• WF
• CardSpaces
• Linq
• Ajax

And when you master them all, come back and check out the evolution of Silverlight. For some folks, that will be far less frustrating.

Shawn shows how to create a scrolling region in silverlight

Shawn Wildermuth, author of this video on clipping regions, has a nice quick tutorial on creating scrolling regions in Silverlight on his own  blog here.

Hyper-video

I'm very interested in the idea of hyper-video (that is, doing for video, what hypertext does for text) and possibly creating a Hypervideo control in Silverlight.

This week's  How Do I video is an attempt at a first step in that direction.

What I want to try next is a video player that lets our "How Do I" videos add dynamically adjustable links to supplement what is being described in the video.  The next step in this process will be to take the video player I built in HDI Create a Video Player Part I and Part II and wrap them around a video that has markers every 30 (?) seconds and then tie all that to some sort of database (preferably an xml file) so that I can  something like this:

 <movieInfo>
   <movieName>How Do I Create HyperText</movieName>
      <markers>
           <marker text="30"
                     <links>
                          <link>http://silverlight.net</link>
                          <link>http://www.microsoft.com</link>
                     </links>
         </marker>
           <marker text="60"
                     <links>
                     </links>
         </marker>
           <marker text="90"
                     <links>
                          <link>http://silverlight.net</link>
                     </links>
         </marker>
      </markers>
   <movieName>How Do I Create Dynamic Hypertext</movieName>
      <markers>
           <marker text="30"
                     <links>
                          <link>http://silverlight.net</link>
                     </links>
         </marker>
           <marker text="60"
                     <links>
                          <link>http://ww.someotherlink.com</link>
                          <link>http://www.jesseliberty.com</link>
                     </links>
         </marker>
           <marker text="90"
                     <links>
                     </links>
         </marker>
      </markers>
 </movieInfo>

There are a few key ideas here that I want to explore in coming blog entries and videos:

• Having more markers than you need (so as your needs change you don't have to "re-mark" the film
• Decoupling the text of the marker from the links displayed
• Creating a database (probably in xml) that holds the marker to link information
• Continually updating the database over time as new links become available

Possible additional features

This last has a lot of appeal. Imagine watching a How Do I movie and at various moments, while information is being shown (or words are spoken) an icon appears (perhaps a green question mark). Click on the green question mark and the movie pauses while a bubble opens with additional information, or a menu of choices to get additional information.

There is a lot more that can be done, but this will get me started. The trick will be to build videos that demonstrate interesting techniques, while still building towards an interesting control.

Your ideas, suggestions, etc. are always welcome.

-j