Building AOL's High Performance Rich Internet Application in Silverlight 2.0AOL Mail

Eric HoffmanDirector, AOL Mail RIA’s

Marc KatchayLead Engineer, AOL Mail RIA’s

Stefan GalArchitect, AOL Mail RIA

Seth HalvakszAOL Mail Product Mgmt

Outline ...Mail RIA & Silverlight – Defining new experience on the Web

Our RIA objectives - Eric HoffmanA Silverlight development tale – Eric HoffmanA new verse in web User Interface – Marc KatchayThe underlying nuts and bolts – Stefan GalMonetization opportunities – Seth Halvaksz An Invitation

Our RIA primitives

The next chapter for web applicationsRich and performantPersonalization taken to another level Write it once, run it everywhereBeyond the web cacheEnhanced engagementNew monetization opportunities

A Silverlight RIA taleSummer 2007

Beginning with Silverlight 1.0 / 2.0Research and exploration projectWe were hopeful…

High Definition video and audio playback Compact size and the idea of “write it once” The “DNA” for some controls.NET runtime – really appealing to us developersChallenges presented themselves throughout the summer of 07

A Silverlight RIA tale ..December 2007

“grid” & “stack” prototype

A Silverlight tale …December/January 2008

Silverlight 2.0 provided…Basic layout Grid & stack panels Isolated storage – size was a factor stillCould we build an application with just this ..

Pivotal moment was reachedHybrid approach was contemplatedDelay project several monthsIn the end ..our team decided to write some code ..

A Silverlight RIA tale

namespace Client.Controls.Button{ [TemplatePart(Name="Part_MouseUp“,Type=typeof(Storyboard)),…public abstract class ButtonBase : Control

{…

}}

A Silverlight RIA tale Jan 08

What we really needed … more advanced controls..

Buttons, checkboxesTree controlListView,- virtualized ..Listboxes – for settingsHtml control for read and write mailGrid splitters & custom layoutDatabinding – move data from model to our controls

A Silverlight RIA taleLate Jan 2008

Morphed into a Collaboration ..Contribution to the core Silverlight feature setRequest functionality as we needed ..A validation of the usability of the frameworkSome examples

Adding encryption for secure isolated storageImagine background worker threads – in a web application ! Cross domain would be nice …

Road to Silverlight RIA – Dencryption Code using (Stream xstream = new CryptoStream(stream, _alghoritm.CreateDecryptor(), CryptoStreamMode.Read)) {

using (Stream zstream = new GZipStream(xstream, CompressionMode.Decompress))

{ data = LoadObject<T>(zstream); } }

Road to Silverlight RIA – Worker Thread Code public void SaveObject<T>(string path, T data, Action<Exception> cb) where T : class  { // Main thread here …   ThreadPool.QueueUserWorkItem(delegate(object state)   { // Anonymous function – C#      // Worker thread here …

Exception exception = null;        try{             SaveObject(path, data);            }         catch (Exception ex){               exception = ex;                }    }}

Mail RIA

demo

Marc KatchayLead Engineer, RIA Engineering AOL Mail

announcing…

Visual Requirements

Appealing – Look goodRich in assets - VibrantFeel alive!! – non static lookDynamic/ResizableSkinnableFast – seem effortless

Building Top Down

Designers create UI layoutDevelopers build controls and componentsControls paint visuals and bind to business dataUI elements taken from designers layout and rendered in respective controls

Creating UI – Designers FirstArtists/Designers create applicationThink multiple/Differentiating skinsUtilize tools. Create in natural format - xamlBuild application to adopt designer requirements

Application layout - InfrastructureIdentify Key Components

Components are themselves controlsDefine Root Layout of Application

Visual Controls - Infrastructure

First things first!! -- Custom ControlsDataGridCellsListTreeTreeNodesGridSplitterButtons…

Control Templates

Custom visual controls derive from control classControl Class supports Control TemplatesAll components and visual controls use templatesCritical for skinning modelTemplates collected to form a skin

Control Template Markup

<ControlTemplate/>

<Grid x:Name="Part_Root">

<Grid.Resources> <Storyboard x:Name="Part_MouseEnter"> <ColorAnimation Duration="00:00:00.2“ To="#50FFFFFF"

Storyboard.TargetName="Part_HighlightRect”Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" /> </Grid.Resources>

<Rectangle x:Name="Part_HighlightRect" Fill="#00FFFFFF"/> <TextBlock x:Name="Part_Caption” FontSize="12" Text="Button" />

</ControlTemplate>

Loading Control Skin

namespace Client.Controls{ public class ButtonCell : Control {

ResourceHelper.GetControlTemplate(typeof(ButtonCell)); }

public ButtonCell() { base.Template = s_CellTemplate; base.ApplyTemplate();

}}

Challenge - Skin motion

Browser resizesGrid SplittersSome UI elements grow as skin is resizedManage Multiple UI elementsBuilt specialized layout panels to encapsulate and draw multiple elements of a skinCode behind should never have custom code dedicated to a skin

ViewPanel – Layout Control

<ControlTemplate>

<Grid x:Name=“Part_Root”><Controls:ViewPanel> <Path x:Name=“Part_Frame” Data=“….”/> <Rectangle x:Name=“Part_Background” /></Controls:ViewPanel></Grid>

<ControlTemplate>

ViewPanel – Layout Control

public abstract class ViewPanel : Panel { protected override Size MeasureOverride(Size availableSize) {

} protected override Size ArrangeOverride(Size finalSize) {

} }

SkinsSkin is a projectComprised of Templates and Images

Skins

ResourceHelper ClassLoads Skin AssemblyHelper functions to locate and load templates

GetControlTemplate()Helper functions to load resources

Application BackgroundBackground animation

Summary

We have a skin solutionSeparate assembliesChange skinsDynamic living skinsWell defined layer for designers to work with

UI InfrastructureControls – TemplatesComponents – define key sections of app

Stefan GalArchitect, RIA Mail Engineering AOL Mail

announcing…

Overview

The quest for a rich, interactive user experienceCustom controlsSilverlight overlays

Custom Controls - Goals

High performanceExtreme flexibilitySkinnableSmall download

Custom Controls - Patterns

Template based controlsExtensive data bindingTemplate binding whenever possibleShared resources and stylesVirtualized controls for large data sets

Observable Data

public class ItemData: INotifyPropertyChanged

{ public event PropertyChangedEventHandler PropertyChanged;}

Observable Data Source

VirtualizedList _list1;ObservableCollection<ItemData> _dataSource;…_list1.ItemsSource = _dataSource;

Flexible Data & Visuals

public class VirtualizedList : Control{ … public IList ItemsSource { … } public DataTemplate ItemTemplate { … }}

Virtualized Databinding

<c:VirtualizedList x:Name="_list1”> <c:VirtualizedList.ItemTemplate> <DataTemplate> <c:ListItem Foreground="Blue“ Text=“{Binding Caption}”/> </DataTemplate> </c:VirtualizedList.ItemTemplate></c:VirtualizedList>

Custom Item Template

<DataTemplate> <TextBlock

Text="{Binding Caption}" Foreground="Gold“ Padding="2"/></DataTemplate>

Virtualized List

AOL

demo

Layered Silverlight Plugins

HTML

Overlay

Layered Silverlight Plugins

Requirement introduced by the usage of browser based HTML rendering and compositionAlso used for

Context menusModal dialogsRich Tooltips‘Out of banner’ Silverlight adsLegacy ads

Layering Challenges

Creating Silverlight overlay pluginCommunication between pluginsSharing code and resourcesPlugin lifetime management

Creating Overlay Plugin

Hosted by an absolute positioned DIVHost element is child of main host element, sibling of the main pluginSilverlight.js support to create the additional pluginWindowless mode supports transparency and irregularly shaped windows

Creating Overlay Plugin

ScriptObject arg = (ScriptObject)HtmlPage.Window.Eval("new Object;");arg.SetProperty("initParams", “parentId=" + HtmlPage.Plugin.Id;

ScriptObject slso = (ScriptObject)HtmlPage.Window. GetProperty("Silverlight");slso.Invoke("createObjectEx", arg);

Communicating Between Plugins

Each plugin runs in its own application domainJSON payload passed as parameters and returned as result.Input and output passed by value.Scriptable objects used for callbacks and interactionCreation is asynchronous, the child plugin will find and connect to the parent based on initialization parameters

Sharing Code and Resources

Separate .xap archive files are used for main plugin and overlay pluginsDistributing shared code and resources in both archives is possible but not desirable due to increased download size.We chose to have the overlay load the required assemblies dynamically from the main archiveIt is fast because the download will find the main archive cached by the browser

Sharing Code and Resources

Main.xap

Model.dll

Controls.dll

Popup.xap

Popup.dll

Retrieving Main Archive

_webClient = new WebClient();_webClient.OpenReadCompleted += delegate(object sender,… e) { Load(new StreamResourceInfo (e.Result, null)); };

_webClient.OpenReadAsync(new Uri(“shared.xap",

UriKind.Relative));

Loading Assemblies On DemandStreamResourceInfo ri = Application.GetResourceStream(xap, new Uri(“shared.dll“, UriKind.Relative));

AssemblyPart p = new AssemblyPart();Assembly a = p.Load(ri.Stream);

Silverlight Overlay Ad

AOL

demo

Summary

Flexible separation of data, control logic and control visualsLightweight and high performanceExtensive bindingVirtualized controls for large data setsRich, highly interactive visualsSkins downloaded on demand

Seth HalvakszProduct Management, RIA Engineering AOL Mail

announcing…

AOL Mail RIA & Monetization

ObjectivesEngagingHigh-performingStandards-based

Integration between ads and application

SkinsPanels

Rich media optionsHigh impact audio & videoRich animations

AOL Mail RIA & Silverlight

A new experience on the webIndustry-leading performanceUnique skinning capabilitiesHigh impact content delivery

Mail from AOLInnovative productsGet the email identity and experience that expresses who you are and what you like

An Invitation

Sign up today to be notified when the preview is available

http://ria.mail.aol.com