Jesse Liberty - Silverlight Geek

Drag And Drop put to work

I received a quick thank you note from Cal Schrotenboer recently about my video on drag and drop, noting that he had incorporated it into his CodeProject article describing his Silverlight application

I took a look at his extraordinary article (and his more than useful product) and commend the article to you, both as a good example of how to put Silverlight 1.0 to work, and as a canonical example of a technical "how-to."

Tip of the Day Goes Live Jan 2, 2008

As you may have noticed, I've been experimenting with writing a Tip of the Day for Silverlight over the past few weeks (until I broke my glenoid and spent a few humerus days in the hospital).

I would now like to officially roll out the Tip of the Day, starting January 2, 2008.  Here is the description from "About this Blog"

It is my goal to add a useful tip every day (every day??) but I won't put something up just to make the frequency: if it isn't worth posting i'll skip that day.  You can count on at least 5 a week. We'll see how it goes.  If you have tips to suggest, please send them to me! 

They'll all begin "Did You Know..." and they'll all be tagged "Tip of the Day."  Extra points to anyone who comes up with a sidebar widget like one of these.

Did You Know That... there's a new way to create Silverlight 1.0 projects in Visual Studio 2008?

Tim Heuer points out, in his always valuable blog, that there's a new way to create Silverlight 1.0 applications in Visual Studio 2008.

Your first step, as Tim points out, is to install the Silverlight Tools for Visual Studio 2008.  Once that is done, open Visual Studio 2008,and choose New Website. Visual Studio creates the same starter application that it would if you used the template that was provided with Visual Studio 2005.
 

You can still use the old template

As a bonus, Sean Wildermuth responded to Tim with his own workaround for  extracting  the template intended for Visual Studio 2005,and making it available to Visual Studio 2008.

I'm going to personally weigh in on the side of Tim's proposed approach, as it strikes me as more likely to be supported going forward.

Did You Know That... the second way to pass information to your Silverlight control is through the seventh (context) parameter

In the previous Tip of the Day, we looked at the sixth parameter to createSilverlight/ createSilverlightEx which allowed you to pass in a string as the initParams parameter.

You can also pass in a seventh parameter of type object, which is known as the user context. This can be any object you like. However, rather than retrieving it as a property of the Silverlight control, you retrieve the userContext as the second argument passed to the load event handling method

handleLoad: function(plugIn, userContext, rootElement)

As a simple example, you can create an array in default.html.JS. and pass that in as your userContext object:

var authorArray = 
   [ "Douglas Adams", "Neil Gaiman", "Neal Stephenson" ];

context: authorArray

Since this becomes available to you only in handleLoad you'll save it in a member variable so that it will be available in every member method:

handleLoad: function(plugIn, userContext, rootElement) 
{
    this.plugIn = plugIn;
    this.userContext = userContext;

Using the keyword this creates a member variable that is accessible from any member method. The userContext looks like a variable, but what you passed in is an array, and so you can use it as an array.

handleMouseUp: function(sender, eventArgs) 
{
    alert("this.userContext[0] = " + this.userContext[0]);
    alert("this.userContext[1] = " + this.userContext[1]);
    alert("this.userContext[2] = " + this.userContext[2]);
},

I will be posting a "How Do I" video on using the sixth and seventh parameter of CreateObject, very soon.

Did You Know... There are two ways to pass data to your Silverlight 1.0 control on creation

CreateSilverlight() and its wrapper, CreateSilverlightEx() both take an optional sixth and seventh parameter. The sixth, initParam takes a string parameter that you can easily fetch in your javascript code; it becomes an attribute of the Silverlight control (plugin) itself.

For example, you can modify the starter sample that Visual Studio 2008 creates for you by adding this line to Default.html.js:

The sixth parameter must be a string. How you use that string is entirely up to you.  . To see using this parameter at work, modify HandleMouseUp in  Scene.xaml.js as follows:

handleMouseUp: function(sender, eventArgs) 
{
    var mouseUpAnimation = sender.findName("mouseUp");
    mouseUpAnimation.begin(); 

    var paramValue = this.plugIn.initParams;
    alert(paramValue);
}

In this case, you're accessing the value of the parameter passed in by the user, and placing it into the alert box when the button is clicked.

Did You Know That... you must set isWindowless to true to use HTML overlays?

One of the parameters you pass in when creating a Silverlight object is the parameter isWindowless. That parameter defaults to false.

Normally, you do want isWindowlessto be set to false, because when it is set to true, you pay a very large performance penalty. However, there are two circumstances under which you must set it to true.

1. If you want the background to be transparent, you must set isWindowless to true
2. if you want to overlay an HTML control on top of your Silverlight control, you must set isWindowless to true.

The second issue of using an HTML overlay arises quite frequently. To see this at work, create a new Silverlight 1.0 application in Visual Studio 2008.

Add the following select statement to default.html

    <select id="colors"  style=" position:relative; left:20px; top:30px ">
        <option>"Black"</option>
        <option>"Red"</option>
        <option>"Orange"</option>
        <option>"Yellow"</option>
        <option>"Green"</option>
        <option>"Blue"</option>
        <option>"Indigo"</option>
        <option>"Violet"</option>
    </select>

Run the application and you'll see that the drop-down is immediately covered by the button created by the sample XAML. . As noted above, the default is for isWindowless to be false and therefore for Silverlight controls to be windowed. Windowed Silverlight controls have a z-index of 1 and are always on top.

Open up default.HTML.JS and change the isWindowless parameter to true, and run the application again. This time the HTML overlay appears on top of the Silverlight control. Windowless Silverlight controls do not have as z-index of 1, and so you can overlay HTM controls on top of them.

Did You Know That... Microsoft Expression Encoder is available for 180 day free trial?

To download your free copy, go to the Silverlight site and click on Get Started. Scroll down to Designer Tools and click on Expression Encoder. Note, the initial licenses is for 60 days, but the directions on the download page include a trial product key that extends the license for 180 days.

Did You Know That... createObjectEx is really just a wrapper around createObject?

As Adam Nathan points out In Silverlight 1.0 Unleashed, Silverlight.createObjectEx is implemented as a function that takes an array as an argument and calls Silverlight.createObject, passing each element of the array in turn.

The reason that many Silverlight programmers prefer to use Silverlight.createObjectEx is that it is relatively self-documenting, and that it is essentially JSON.

Silverlight.createObjectEx({
        source: "Scene.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "800",
            height: "600",
            version: "0.9"
        },

Did You Know That... Microsoft Expression Encoder will not only encode your movie but create a player for you

If you drag a movie into Microsoft expression encoder, not only can you add the movie and set metadata and otherwise manipulate the media, but you can also choose a template for the output that includes a Silverlight player that encoder will create as part of its output. You can use this player as-is, or you can edit it in Visual Studio to your own specification.

Even this starter player can save you a great deal of hand coding and make the creation of a complex video player a simple task.

You can see an illustration of how to do this in our learning video on the creation of a hyper-video player, and you may want to review our two-part series on creating a full video player here and here.

Did You Know That... for full JavaScript debugging you must uncheck "disable script debugging"

Did You Know... (#1) if you fall on black ice you can dislocate your shoulder?

This morning I awoke at my normal hour, stepped out onto my driveway slid 15 feet and instantly realized that I had but three choices:

1. Continue sliding until I slid down the steep part of my driveway some 200 feet into the roadway or
2. Fall backwards and crack my head, potentially leaving an artistic but unpleasant blood blot at the top of my driveway or
3. Fall forward in an athletic and graceful tumble

Needless to say, I chose option three; put my arms out in front, forgot to roll and won a free ride in our town ambulance. I was then rewarded with 10 hours in the emergency room, four hours in the operating room and will now be doing my tip of the day using dictation software.

Did You Know... (2) you can easily re-format your code and XAML in Visual Studio

You might begin by opening the tools menu and selecting options followed by text editor. For each language, especially JavaScript and HTML and C# pay special attention to "new lines", the format choice (including insert attribute value quotes when typing), miscellaneous (including format HTML on paste) and make sure that you also set your preferences for both XML and XAML.

If, later, you find that you have code that is not formatted according to your specification, press ctrl -E. followed by D which instructs the Visual Studio editor to impose your formatting choices on the current document. For example with the settings that I have in my copy of Visual Studio the following code

Did You Know... That You Can Create A Timer Using XAML Animation?

To do so, create a Storyboard and mark that you will handle the Completed event.

<Storyboard Completed="OnTimerCompleted">

Put in the simplest Animation you can manage (name it, so that you can set the duration programmatically).

<DoubleAnimation x:Name="TimerDuration"

make sure you give it a duration, and point it at the simplest object you can create.

Duration="00:00:01.00" 
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="Height"

When the duration expires you can take action and, if you wish, reset the timer.

function OnTimerCompleted...

Here's a complete sample...

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Canvas.Resources>
        <Storyboard 
            x:Name="myTimer" 
            Completed="OnTimerCompleted">
            <DoubleAnimation x:Name="TimerDuration"
                Duration="00:00:01.00" 
                Storyboard.TargetName="MyRect"
                Storyboard.TargetProperty="Height" />
        </Storyboard>
    </Canvas.Resources>

    <Canvas>
        <Rectangle x:Name="MyRect"/>
    </Canvas>

</Canvas>

Here's the javascript...

MyDemo.Scene.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        // set the timer duration
        timer = plugIn.content.findName("TimerDuration"); 
        timer.Duration="00:00:05.00";
        
        // start the timer
        myStoryboard = plugIn.content.findName("myTimer"); 
        myStoryboard.begin();
    }
}

function OnTimerCompleted(sender, args)
{
       alert ("Timer completed!");
       myStoryboard = sender.findName("myTimer");
       myStoryboard.begin();  //restart timer
}

Did you know... You Can Copy The 1.0 Template From VS 2005 to VS 2008?

Here's how. If you installed the 1.0 SDK to Visual Studio 2005, a directory was created under Visual Studio 2005\Templates\ProjectTemplates\Visual C# named Silverlight (which contains a zip file). You can copy and paste that entire directory (with its zip file) into Visual Studio 2008\Templates\ProjectTemplates\Visual C# as is and it just works.

Doing so will give you the project template in Visual Studio 2008 to create Silverlight 1.0 projects

(Click on image to see it at correct size)

NB: This is the first Tip of the Day, but not the last, on Programming Silverlight. The idea was inspired by the incredibly useful Visual Studio Tip of the Day offered by Sara Ford. 

Each Tip of the Day will be tagged, and will have a subject beginning "Did you know..."

Software Association of N.H. - Next Generation Interface Presentation

I had the opportunity to speak yesterday to the SWANH (Software Association of New Hampshire) user group in Bedford New Hampshire on the topic of Next Generation Interfaces.

This is not the type of talk I usually give, as it was targeted at folks who were exploring both Silverlight and Flex, and so were more interested in an overview than in getting into the code in detail. They were very understanding of my explanation of how I see my role, however, and I split the difference: spending some time in PowerPoint (with thanks to Brad Abrams for letting me steal some of his excellent slides) and some time building and then reviewing the hyper-video demo.

This was followed by a presentation by a Flex Evangelist from Adobe and then by a Flex user and then a general Q&A. All and all, it was a lot of fun and everyone was very welcoming and friendly.

You can download the slides here (with enormous thanks to Brad Abrams, from whom I stole shamelessly) and you can find the complete example code (along with a video in which I walk through the code more thoroughly and carefully) here

Thanks again.