UberDemo : Silverlight

Gestalt 1.0 and Gestalt Widget Pack Launched!

uberdemo — Sat, 21 Nov 2009 00:20:00 GMT

MIX Online has released a major update to the Gestalt project. Gestalt has now been incorporated directly into the Dynamic Language Runtime (DLR).

Joshua Allen writes: Included ... are our sample video and audio widgets, which come with the Gestalt Widgets pack. By adding a <script> tag to the top of your HTML file, you can automatically enable use of HTML5-compatible video and audio tag syntax:

<html>  
  <head>    
    <script type="text/javascript" 
      src="http://mschnlnine.vo.llnwd.net/d1/dlr-20091120.js"></script>    
    <script type="text/javascript" 
      src="http://mschnlnine.vo.llnwd.net/dlr/dlrmedia.js"></script>  
  </head>  
  <body>    
    <audio autoplay="false">
        <source src="foo.mp3" type="audio/mp3"></source>
    </audio>  
  </body>
</html>

Using Custom Namespaces at the Root of a XAML File

uberdemo — Wed, 29 Apr 2009 21:02:00 GMT

Here’s something I didn’t know about Silverlight, and I did not find any documentation on it. It’s possible to create custom namespaces at the root of a XAML file. I always knew that you could insert namespaces inline in XAML, but apparently when you define a namespace attribute in XAML it also applies to the root. Here’s a simple example:

<myType:TreeMapPanelItem

x:Class="MIXOnline.Descry.Controls.CustomTreeMapItem"

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

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

xmlns:myType="clr-namespace:MIXOnline.Descry;assembly=Inaugural" >

<TextBlock Text="Hello" />

</myType:TreeMapPanelItem>

This allows replacing of custom elements programmatically as was done in the CPP Custom Treemap sample in Descry which needed to inherit from a base TreeMapPanelItem class to pick up some of its default properties and methods. This could not have been done with a standard Silverlight class since they cannot inherit from custom classes. See the CPP TreeMap sample in Descry for an example and look to the CustomTreeMapItem class for an example of an implementation. Note the assignment of the PanelItemType property in the Page.xaml.cs file which lets the TreeMapItem know which class to use for rendering.

A VirtualizedStackPanel Control in Silverlight 2.0

uberdemo — Wed, 18 Feb 2009 18:44:00 GMT

When putting together the code for the Descry - Social Timeline visualization, I quickly discovered that when I subscribed to FriendFeed friends that contained large numbers of items, I eventually encountered performance issues. Scobleizer’s feed was a great acid test, since he had about 13K+ subscribers. We needed the Social Timeline to display, at a maximum, 3 months of subscriber data. I found as the total number of FriendFeed items approached 10K, scrolling and animating databound StackPanels became unacceptably slow. My opinion is that quick response time not only is a critical determining factor in user satisfaction, but also contributes to faster user feedback time and continuity, so that user can make better informed decisions.

It can be argued that what I was attempting to do was an architectural design flaw, since we were attempting to use StackPanels to represent one days’ worth of stacked FriendFeed items; a total of 93 StackPanels for 3 months of data. However, we wished to retain the resizing and scaling properties of the StackPanels’ parent Grid control and it’s ColumnDefinitions, so that we would could avoid writing messy sizing/positioning logic, that the Grid control, conveniently, already has built-in. As a result we would need to find another method to gain performance. We ended up choosing control virtualization, since the sheer number of FriendFeed items is what was causing the slowness.

So, what do I mean by “virtualized control?” A virtualized control is one that utilizes resources efficiently. You might ask: “Shouldn’t all controls utilize resources efficiently?” The answer to that is yes, but there are performance and behavior tradeoffs between a typical control and a virtualized control. Non-virtualized controls have all the databound UI already in memory. Virtualized controls are specialized controls geared for managing large amounts of data that need to bind UI on the fly, and they take a performance hit when doing this. Also, you’ll note that when scrolling the content of the virtual StackPanel control in this project that it does not smoothly scroll up a pixel as a time as a normal ListBox does, instead it scrolls up one item at a time. This is not a limitation of a virtualized control, but rather a limitation of this implementation. To implement this would take a bit more thought.

In other words, when a typical Silverlight control is databound to a data source that contains ten’s of thousand objects, it will literally contain ten’s of thousand UI elements in its’ visual tree; potentially using a vast amount of resources. The visual tree is maintained in memory (in addition to the original data source) whether the visual tree is onscreen or off! Conversely, a virtualized control while having access the to the data source in memory, would only contain the elements that need to be physically displayed within the viewable area of the control, resulting in a dramatically smaller set of items in the visual tree.

This sample shows a virtualization technique for creating a scalable and performant ListBox-like control. There are two key classes: the VirtualizedStackPanel and the VirtualizedItemsControl. The source for this simple virtualized control is here.

VirtualizedStackPanel Role

The VirtualizedStackPanel is a control that simply limits the number of children contained in its visual tree to only the items in the viewable area. This control alone is unable to display the data properly, since a scrollbar is needed to manage the position of the currently viewable area; the VirtualizedItemsControl takes care of that need.

The VirtualizedStackPanel behaves as a normal StackPanel until a data generator is attached. The IDataGenerator implemented in the custom VirtualizedItemsControl lets the VirtualizedStackPanel know what children are currently in the active viewable area, based on control size and scrollbar position settings. As soon as the size of the control, or scrollbar position changes, the MeasureOverride method is called, and the control recalculates which children are to be added or removed from the visual tree. A ContentPresenter is acquired from the assigned data generator, so that a common DataTemplate can be used to define item UI. When the ContentPresenter Content property is set, the data is bound to the UI defined in the DataTemplate.

The main logic in the VirtualizedStackPanel is in the MeasureOverride method, creates new containers if they are needed when the control height increases, or reuses containers if no new ones are needed, and also removes unnecessary containers of the control height decreases. The ArrangeOverride simply positions all the children in the StackPanel vertically.

VirtualizedItemsControl Role

The VirtualizedItemsControl’s role is to act as a container for one or more Virtualized StackPanel’s. It manages the data source, a common DataTemplate that children use, and it also manages the Scrollbar positioning logic. The VirtualizedItemsControl implements the IDataGenerator interface that assists in communicating with its VirtualizedStackPanel children. This sample shows a single VirtualizedStackPanel child for brevity. But you may refer to the VirtualizedTimelineItemsControl in the Social Timeline project on CodePlex for one that contains multiple children.

Incidentally, the VirtualizedItemsControl’s content is defined in the projects /Themes/Generic.xaml file, it could have been just as well defined procedurally, but it uses an external resource file for better designer / developer workflow. It is critical that this file exist in the project in the Themes folder, and note that this file needs to be defined as a resource in the project to avoid errors. I made the Silverlight 2 newbie mistake of not doing this, and I literally spent days trying to figure out why I couldn't get the project to work.

Resources

I found that writing a virtualized control wasn’t quite as complex as I had anticipated, after I broke down a much more complex sample. There is a good example of a full Implementation of a VirtualListBox in the Silverlight Extensions project on CodePlex. Another related WPF VirtualizedCanvas sample by Chris Lovett that I found useful is located here.

Descry and Codeplex

Visit CodePlex to download a more fully developed version of a virtualized control that supports mouse drag animation with physics, plus a VirtualizedListBox as well. And visit here to get the entire Descry project source!

Silverlight Slideshow (Part I)

uberdemo — Thu, 14 Dec 2006 01:05:00 GMT

As a Software Design Engineer on the UberDemo team, I‘m very fortunate to be able to experiment with a large variety of technologies. Right now we’ve begun gearing up for MIX07, and so I was ask to put together a slideshow for the upcoming MIX07 site that utilizes the new Silverlight technology, which just happened to be released to public on Dec 04, 2006 as the “December Community Technology Preview (CTP)”. Read more about Silverlight.

It is our team's goal to fully exploit our own technologies to create compelling prototypes and demos. Sometimes we like to push the boundaries of what a particular technology is capable of, to create an even better user experience (UX). We also typically provide feedback to the product teams, if we find issues, or feel strongly about a feature that we think needs to be added into a product early in development, or even sometimes to attempt to prevent cool features from being cut!

It’s my hope that readers of this blog will be able to learn from our experiences and avoid some of the pitfalls that we invariably run into when developing demos on beta and pre-beta software.

In the demo that I am working on now (not complete yet), I was asked to create Silverlight app that cycled through a set of photos from Flickr. Silverlight, being a web friendly version of WPF, is well suited for consuming Flickr web services. Silverlight itself doesn’t provide anything in the way of making web services easier to call, but it does provide a very performant rendering surface for the images.

I experimented with calling the web services using an HTTP REST request and requesting a JavaScript Object Notation (JSON) response in multiple ways, each with advantages and disadvantages. Here are 3 ways I discovered:

XmlHTTPRequest object. Advantage: Can run from web client. Disadvantage: In IE, throws a warning when doing cross-domain calls and exposes the Flickr API key to anyone that views source.
Client JavaScript Request. Advantage: Can run from web client. Disadvantage: Cross-domain call without warning (see /// A SECURITY WARNING in jsr_class.js), and exposes the Flickr API key to anyone that views source.
Using the .NET WebRequest class from an ASP.NET page. Advantage: Browser agnostic, doesn’t throw a cross-domain warning, and doesn’t expose the Flicker API key. Disadvantage: requires a server component, and client-side/server-side code mingles and is a bit more convoluted.

I went with option #3 for this demo, although I haven’t yet experimented cross-browser yet WRT this. I’m sure that this would also affect #1 and #2. It is in my plans to do this though, to insure a robust application.

It also should be noted that all of the above methods can suffer equally from a script injection attack when a JSON response is returned and processed, so you really need to trust your source web service provider.

Once I was able to get a list of images as a JSON object, I now wanted to iterate through them and display and animate them, however I ran into an issue with animation. The animation required moving an Image, or in my case a Rectangle filled with an ImageBrush, through an arbitrary set of points. The problem was that if I had a multiple storyboards only the first animation occurred. Fortunately I found a workaround to this Silverlight bug [since fixed].

Here are the specifics of the storyboard animation issue that Karsten Januszewski (a friend and fellow team member) posted for me to get it out there quickly. I wanted to get this out to a large audience so that others wouldn’t have to suffer the temporary confusion that I went through.

-Hans Hugli