My First XAML Data-Driven UI Recipe

Before XAML in particular and .NET in general, my typical data-driven UI “recipe” was to build on a Tab Control—usually just a bunch of forms in Tabs. The Tab aesthetic is directly connected to the “classic” desktop metaphor—directly coming from Xerox PARC. Next to the desktop there are filing cabinets—and in a drawer of the file cabinets are folders—folders with Tabs.

With the release of Windows 8, Microsoft reinforces what Apple has already started: a move away from the 1920s “modern” office space to the ancient world of the laminar tablet. In the same way the human eye jumps from one space on the surface of stone bas relief to another, our eye can see the flat panel display change in response to our touch. This flat panel aesthetic expressed in XAML leads me to these controls:

  • The DockPanel will allow the ‘root’ panel display to be subdivided into smaller panels and provide dynamic flow resizing (via LastChildFill="True").
  • The Frame will usually be the “last child” of the DockPanel and provide the means to let the eye “jump” from one interactive display to another.
  • The ItemsControl with a WrapPanel template loaded in the Frame takes advantage of the flow resizing literally making the layout of items flexible.

XAML

This four-control approach is not meant to be a Microsoft-only solution. This approach actually comes from Web design (with display: inline-block) and should be replicated in, say, Adobe Flex. The Web influence on this approach can also be seen through the use of the Frame element because it leads to the Page Navigation controls clearly mimicking the loading of HTML pages.

“Using lambdas for WPF animation” and other links…


Color Key Alpha Effect

Dmitri Nesteruk: “It’s fairly easy to create and animate a graphical primitive, say by moving it from point A to point B at constant speed. But what if you need to position several graphical objects in a particular arrangement and then animate them in a non-linear fashion? Neither Silverlight nor WPF has built-in functions for this. In this article, I’ll demonstrate ways in which one can create objects and animations dynamically using lambda-delegates and higher-order functions.”

“Additional easing equations and helpers for WPF-based animation”

wpf-animation: “It has three primary goals: …Add Robert Penner’s canonical easing equations to WPF, but take full advantage of the WPF animation engine so they can be used in XAML or in code.”


Amazon.com product

“Drawing Fractals via WPF”

CodeProject.com: “The snowflake begins with an equilateral triangle. The program replaces each of the triangle’s sides with a properly scaled and rotated version of the basic unit. The program then replaces each of the straight segments in the new figure with a smaller version of the basic unit. It replaces the newer straight segments with smaller and smaller versions of the basic unit until the snowflake reaches the desired depth. By the way, the linear gradients shown in this and the binary tree application are just there to make the appearance a little more stimulating.”

“XAML Spiral Animation”

Charles Petzold: “I then came up with a second approach that uses transforms in a more conventional manner, but which requires three animations rather than two. The first animation rotates the ball from 0 to 360 [degrees], repeated forever. Because the ball is sitting at the point (0, 0), normally this rotation wouldn’t have any visual effect. But a second animation moves the center of rotation from (0, 0) to (240, 0). That means the ball’s rotations keep getting larger and larger, but the center of rotation moves down the x-axis.”

“Performance Profiling Tools for WPF”

MSDN: “WPF provides a suite of performance profiling tools that allow you to analyze the run-time behavior of your application and determine the types of performance optimizations you can apply.”

“Announcing: Microsoft Ribbon for WPF RTW”

Pete Brown: “The new ribbon control is compatible with WPF 3.5sp1 and WPF 4. This is a 100% WPF implementation, not a wrapper around native code. That means you get all the great WPF styling capabilities for the new control. All screenshots below were taken from a .NET 4 Client Profile project.”

“Silverlight 3 Beta install experience for users” and other links…

Miguel De Icaza playing games at work on his mac.

Tim Heuer: “If the user has no previous version of Silverlight installed at all, they’ll be presented with whatever your default ‘not installed’ experience is.  If you’ve don nothing to customize this, shame on you :-).  The default Visual Studio templates will simply provide you with a static image. …If the user has any released version of Silverlight (1.0 or 2), the experience they see at your beta sample will be driven off of two properties as you instantiate the plugin: minRuntimeVersion and autoUpgrade.” The catch (for me) here is that Miguel de Icaza has not responded to this article (even after the release of Silverlight 3), adding Moonlight to these scenarios. On my out-of-date, Ubuntu VM (6.0.6) I have the latest version of Moonlight running but too many Silverlight sites do not seem to be looking for Linux.

Silverlight Database on CodePlex.com

silverdb.codeplex.com: “This project implements a Isolated Storage (IsolatedStorage) based database for Silverlight. The usage of this software is very simple. You create a new database by Calling CreateDatabase. You can add tables to the database by calling db.CreateTable<T> where T is the type of entity to be stored in table rows. You can save database by calling Save, and open the database by calling OpenDatabase. This database supports version changes, so you can update your application and still be able to open the database. You can look for basic use of this database by examining test Silverlight application. Encryption and compression have been implemented; just provide a password to use encryption. Compression is based on SharpZipLib—you will have all the rights specified under that project.”

System.Windows.Documents.Serialization Namespace()

MSDN: “Plug-in serializers can only be used with full trust applications. …When called by the application, the plug-in serializer runs in the same thread as the application and can only access elements created within the application thread. When designing a custom plug-in serializer, it is important to properly handle all possible error conditions. A failure within a plug-in serializer can cause an application to fail.” Carl Franklin introduced this to me in .NET Rocks #419.

Document Serialization Sample

MSDN: “The Document Serialize sample shows how to serialize a document to an external file in one of several popular formats: flow document XAML, HTML, RTF, plain text, WordXML, or XPS. …When the application starts, selecting "File | Open…" displays the "Open Flow Document" dialog that allows you to choose a XAML flow document that you wish to open (several .xaml flow documents are provided in the sample \Content folder).”

Flow Document Overview

MSDN: “Flow documents are designed to optimize viewing and readability. Rather than being set to one predefined layout, flow documents dynamically adjust and reflow their content based on run-time variables such as window size, device resolution, and optional user preferences. In addition, flow documents offer advanced document features, such as pagination and columns. This topic provides an overview of flow documents and how to create them.”

“Silverlight 3 Released” and other links…

Sharepoint Design - 2

ScottGu’s Blog: “Silverlight 3 includes new media codec support for H.264 video, AAC audio and MPEG-4 content.  This enables you to easily play and stream media encoded using these standards.  Silverlight 3 also includes raw bitstream audio/video APIs that enable you to create additional codecs (in any .NET language) that support playing any other media format.  Silverlight 3 also adds a variety of additional media features that enable better logging (for media analytics and ad monetization scenarios), provide the ability to disable screen-savers when playing long-form video content, and enable content protection.”

“Announcing SharePoint 2010 Technical Preview”

Microsoft SharePoint Team Blog: “Today, we’re announcing that SharePoint 2010 has reached the technical preview engineering milestone. The SharePoint team is running a limited, invitation only Technical Preview program. While we’re not sharing SharePoint 2010 details at this point, we did want to give our customers & partners a sneak peek at SharePoint 2010! We’re very excited about SharePoint 2010 and looking forward to the SharePoint Conference this October where we’ll talk about all the investment areas across workloads and the platform. What we’re sharing today is just a fraction of what will be in SharePoint 2010!”

“SharePoint 2010 Sneak Peek”

Paul Andrew: “Today we introduced a sneak peek of SharePoint 2010. We’re only announcing a few of the many new features right now, but there’s some exciting stuff in the list today to talk about.” I’ve looked at the videos (especially the “Developer Sneak Peak”) and am only slightly enthused about the “SharePoint Client Object Model”—however, the formalization of this concept by Microsoft (which exists informally for SharePoint 2007) is considered here an indirect admission that the “option” to easily bypass the SharePoint UI customization hell (and use SharePoint as a data entry/access layer) is very necessary. Yes, I understand that the original physicist that envisioned the Web wanted a read-write experience but this idea that data must be edited in place everywhere it appears should be considered one strategy among many instead of the only way to go…

“Introducing the SharePoint object model”

Nick Grattan: “As an alternative to programming against the SharePoint web services you can use the SharePoint object model. The object model can be used when the application will run on the server where SharePoint is installed (such as a console or WinForm application) or in assemblies that are run within a site (such as a Web Part).” Okay, this does not sound like ‘bypassing’ SharePoint and more like tight coupling from the 1990s… This is not a superior loose-coupling option over SharePoint Web Services.

“Using XamlReader.Load”

MSDN: “…the ability to create managed objects from XAML input is still available in the managed API, by using the static method XamlReader..::.Load. This topic explains how to use the Load method, provides requirements for the input XAML, explains how to connect the output to the object tree, and discusses the XAML namescope issues that can affect using the FindName method against parts of the object tree that originated from a call to Load.” This method should allow me to use the same AJAX-friendly server(s) that I use for XHTML with XAML. All I need to do on the server side is use different XSL templates that render XAML against XML data instead of XHTML.

Random Screenshot: A Solidified ASP.NET Server Design

This image represents the summary of the decisions made by me about how to design an ASP.NET Server application. These decisions are extremely important to me as it defines how my thoughts are able to function regarding this matter. In other words, without these decisions I am an empty set of hands blindly waiting for orders instead of taking initiative and the upper hand of pro-action. This image allows me to see my understanding of this matter.

Here are the strong words governing my understanding:

  • Post Data Handler—the Server will process RESTful post data, strings that are usually well-formed XML. This means that the client/cloud will prepare and send XML strings to the server. This is utterly ridiculous to “mainstream” programmers as they would rather have JSON or a SOAP wrapper taking care of them. So you can understand why I am little self-conscious about making this decision—but at the same time quite indignant and successful with this very flexible, server-agnostic approach. (Hint: in ASP.NET, read XML posts with HttpContext.Request.InputStream—you can also do the equivalent in PHP and surely in some Java container.)
  • Response Builder—the Server will build a response using defined responses. This promotes maintainability and code reuse.
  • Request Bag—the Server defines all incoming requests. This ‘bag’ captures all incoming query strings into a plain-old object. This promotes maintainability and contributes (somewhat) to security. This decision is similar to the reasons why database server designers use stored procedures and/or parameterized queries.
  • Server—you can see this strong word in today’s image in the word QuizStoryboardServer. So the decision here is that the Server (which extends HttpApplication) always has a prefix indicating the specific purpose of the application. In today’s case, the specific purpose (which has nothing to do with you) is serving up something I call a ‘Quiz Storyboard.’
  • Command—like Server, you can see this strong word with a prefix in StoryboardCommand. This represents another firm decision that a Server uses an enumeration of commands (an enum). The type StoryboardCommand is an enum defining the specific commands that this Server will respond to without exceptions (that is, without throwing an error message). The Server finds these commands in the Request Bag (Hint: the Enum.Parse() method turns a string (from the Request Bag) into an enum). In this particular case, StoryboardCommand.PassToDataLayer is the default Server command—so ‘passing to the data layer’ is what the Server does when it cannot find the requested command (see below). My data layers, by the way, also use Command enumerations.

Songhay System ASP.NET Server DesignI have been struggling for the last two weeks building this Quiz Storyboard Server. I have missed the deadline by three days. So I am totally pissed off. But this is cool: In the conventional App_Data folder you can see in the image two XML configuration files, QuizStoryboard.xml and TemplateDictionary.xml. Of course the Quiz Storyboard Server handles QuizStoryboard.xml. This file, for example, allows the Quiz Storyboard Server to gain access to the “data layer” through an interface. But the TemplateDictionary.xml file is completely generic.

The template dictionary maps Command names to XSL templates. Yes, that’s right: XSL templates. Look in the room full of .NET developers you may be in right now and I bet you can’t find more than one XSLT dude—most likely zero. XSLT allows me to handle the problem of data binding to a “view”—the V in Model View Controller in a Client-agnostic way. All I require is that the Client (another strong word) can send and receive XML messages (a stupid block of XHTML is an ‘XML message’ folks). As of today, these views are called by my implementation of the YUI library via AJAX.

It should be clear why I am likely to turn down a development position at your local, do-right company. Of course you don’t care but I prefer to use REST in a .NET world. I prefer to use XML in a .NET world. I prefer to use XSLT in a .NET world. This approach reduces vendor lock-in significantly and increases flexibility. (Most Microsoft shop heads—especially those dating back to the 1990s—are locked in to something horribly limiting and are arrogantly in denial.) And, no, Rocky Lhotka did not waste years of his life trying to master the frustration of Microsoft-approved data binding. Unless, of course, you call commanding six-figures year over year “frustration.”

In my Microsoft world, I can take one of my clients and point it at a completely different (non-Microsoft) server. I can take one of my servers and send messages to a completely different (non-Microsoft) client. So my preferences exist not because I am “smart” but because I do not have the luxury of predicting through political job security what technology I will be using. And I do not have the “privilege” of being responsible for raising the earnings of a software tooling company. XML and REST are about survival.

Only in the last two or three years has Microsoft revealed itself to be interested in what I am doing here. You can see this interest in ADO.NET Data Services, ASP.NET MVC Framework, XAML and other stuff. Ditto for Adobe, with E4X support in Flex. I blame Scott Guthrie for providing leadership in this new direction and I commend him for his efforts.