Here, There, Everywhere...
The UIElement is the base class and has a one-to-one relationship with a DOM Element, handles input events, supports command routing, and participates in databinding. The UIElement performs memory management by removing its associated visual element from the DOM and detaching its event listeners when disposed. Command routing offers a convenient way of bubbling events through the logical tree to notify parent containers that an event has occurred. Databinding offers a very flexible way to present data as a UIElement may listen for specific property change events and update its associated visual element when these occur. In our framework, Binding objects are reusable and are composed of a source data property, a target UIElement, and a Converter which contains the logic for rendering data.
The UIGroup is a collection of UIElements and is the base class of all elements that participate in the rendering pass by the layout host. For expensive rendering events that involve more than small DOM manipulations, the UI Group will be added to the queue of items to be rendered and then its OnRender method will be called to perform the visual changes. It is worth mentioning the ItemsControl, which derives from UIGroup and represents a collection of data. The ItemsControl is instantiated with a shared visual template that is applied to render each item.
Let's look at a short example of how this framework is used to render the Icon View of files within a folder explorer on the Live Desktop. The files are represented by a ListBox, which derives from ItemsControl and extends it by maintaining a selected item. The style for the visual template for each item is defined in the resource dictionary as:
<img id=""iconItemImg"" />
<img id=""iconItemImg"" />
The image represents an icon specific to mime type and the label represents the name of that file. When the visual template is executed to render an individual item, it sets up databinding for each of these DOM Elements:
The image source databinding will be executed only once, and will set the src property of the img to be that of the appropriate icon url. The label text will be updated whenever the name of the file changes and will modify the InnerText of the div. The ListBox will be added to the rendering queue of the layout host whenever the collection of files changes, for example by navigating into a new folder, and will instantiate each of its DOM children by invoking the above visual template.
For completeness in discussing the presentation framework, it is important to note that each collection of data in memory is stored in an ObservableCollection, which maintains a list of items and fires unique change events when items are added, items are removed, or the entire collection changes. This enables an ItemsControl to intelligently decide whether to render an individual data item or the entire collection.
The Live Mesh communication layer updates the ObservableCollections by performing incremental data requests on corresponding data feeds on a recurring interval. This layer also performs the http operations that result from user actions. It maintains a queue of operations and associated callbacks. It understands the Live Mesh cloud API and provides a layer of abstraction between app-specific transactions and the semantics of the Live Mesh platform.
With all of the above infrastructure in place, it was straightforward to build a windowing system into the Live Desktop. The list of windows is maintained as an ObservableCollection. There are three different templates applied to render each window depending on whether it is in the taskbar, on the desktop, or in the window toggle control (shift+tab to see this view). Activating a window simply means setting the ActiveWindow property true, as the css class of the DOM Element is bound to that property. Opening or closing a window will fire a granular change event from the ObservableCollection that the ItemsControl listens for and will respond to by adding or removing the individual item from view.
What all this means is that the foundation has been laid to add many more exciting features to your Live Desktop. When you view it today, you should see a visually appealing view of a desktop that works well cross-browser, performs responsively once loaded (and will soon load faster), and enables you to traverse your cloud. You might also think to yourself "I wish I could upload more than one file at once" or "I wish this SilverLight media view wasn't one-size fits all and only worked on a subset of my data". The good news is that these features and many more are planned and that the Live Desktop architecture will facilitate adding these new components rapidly. While we have a clear set of features that we think will make this offering more compelling, we are eager to hear ideas from you.
- Alex Himel, developer for Live Desktop
Thanks for the post.
It's not clear from this if you intentd to open the desktop to 3rd parties to contribute functionality. Is this something that you are looking to do?
Also, a portion of the desktop seems to be running Silverlight. Is it used just for media rendering or for any of the desktop views?
Going forward would you consider less of a lowest common denominator, a WPF 'live desktop' or Silverlight only? Maybe even a virtual folder in Windows explorer?
It's possible to edit file( Word or Powerpoint) online with the live Desktop?
As I've been saying (and is getting more apparent with each post here)...
File Sync is to Live Mesh
Microsoft Write was to Windows 1.03
This is going to be an amazing platform!
Yet another UI framework? How many is that now? Let's see if I can recall all the APIs that being actively promoted: Win32 (aka the tried and true), WinForms (when you must go managed and still want some perf), WCF (when you want sexy and slow), DUI (what happened here?), and now GPF? What gives?
These are great questions joewood. I'll answer each one individually.
We have developed Live Mesh to be an open platform. You can expect to hear more about our developer platform late this summer.
Currently, the Silverlight experience is limited to media. This feature was designed and implemented very close to the release as a way to validate Silverlight integration with our cloud and to offer a way to interact with media elements inline. You can expect to see significant iteration this summer around both this experience, as well as other uses of Silverlight within the desktop.
Great suggestion Maxime. That is definitely on our long-term wish list.
Let me clarify the proposed benefits of the Live Desktop architecture a little bit. The architecture is very well suited for the purposes of a rich AJAX application and as an extensibility model for the Live Desktop. Beyond that, at this time, it is not being advocated as a one-size-fits-all framework for web development. It introduces many interesting paradigms that are not often used in AJAX programming, most notably data binding, reusable controls, resource dictionaries, and the heavy usage of inheritance. I hope developers find this interesting, and am curious to gauge interest in offering the framework independent of components specific to the Live Desktop.
Thanks for the information.
Personally I'm not that interested in an HTML based desktop. I can't imagine using it over and above a native desktop - what scenario is it being aimed at? When a user only has access to a locked down shared PC ?
Rather than spending time working on an HTML version of Word (i.e. Google Docs) - I would prefer to see a Mesh enabled Office. Where the ATOM feed could be used to synchronize part of the file being edited to enable online collaboration.
And maybe a Silverlight version of Word/Excel, with cut down features that match something like Works and can be deployed in a sandbox.
Just my few cents.
Good article. Alex.
It would be cool to see more detail documentation. For example, a couple of examples with code and as well illustration of the corresponding visual tree and logical tree.
How does LIve mesh bypass corporate firewalls? Please reply to firstname.lastname@example.org
Hey there! I’m Viraj Mody , a developer on the Live Mesh services team. I bet some of you are curious