Mail RIA & Silverlight – Defining new experience on the Web Our RIA objectives - Eric Hoffman A Silverlight development tale – Eric Hoffman A new verse in web User Interface – Marc Katchay The underlying nuts and bolts – Stefan Gal Monetization opportunities – Seth Halvaksz An Invitation An Invitation

The next chapter for web applications Rich and performant Personalization taken to another level Write it once, run it everywhere Beyond the web cache Enhanced engagement New monetization opportunities

Beginning with Silverlight 1.0 / 2.0 Research and exploration project We 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 developers Challenges presented themselves throughout the summer of 07

“grid” & “stack” prototype “grid” & “stack” prototype

Silverlight 2.0 provided… Basic layout Grid & stack panels Isolated storage – size was a factor still Could we build an application with just this.. Pivotal moment was reached Hybrid approach was contemplated Delay project several months In the end..our team decided to write some code..

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

What we really needed … more advanced controls.. Buttons, checkboxes Tree control ListView,- virtualized.. Listboxes – for settings Html control for read and write mail Grid splitters & custom layout Databinding – move data from model to our controls

Morphed into a Collaboration.. Contribution to the core Silverlight feature set Request functionality as we needed.. A validation of the usability of the framework Some examples Adding encryption for secure isolated storage Imagine background worker threads – in a web application ! Cross domain would be nice …

using (Stream xstream = new CryptoStream(stream, _alghoritm.CreateDecryptor(), CryptoStreamMode.Read)) { using (Stream zstream = new GZipStream(xstream, CompressionMode.Decompress)) { data = LoadObject (zstream); }

public void SaveObject (string path, T data, Action 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; }

Appealing – Look good Rich in assets - Vibrant Feel alive!! – non static look Dynamic/ResizableSkinnable Fast – seem effortless

Designers create UI layout Developers build controls and components Controls paint visuals and bind to business data UI elements taken from designers layout and rendered in respective controls

Artists/Designers create application Think multiple/Differentiating skins Utilize tools. Create in natural format - xaml Build application to adopt designer requirements

Identify Key Components Components are themselves controls Define Root Layout of Application

First things first!! -- Custom Controls DataGridCellsListTreeTreeNodesGridSplitterButtons…

Custom visual controls derive from control class Control Class supports Control Templates All components and visual controls use templates Critical for skinning model Templates collected to form a skin

<ControlTemplate/> <ColorAnimation Duration="00:00:00.2“ To="#50FFFFFF" <ColorAnimation Duration="00:00:00.2“ To="#50FFFFFF" Storyboard.TargetName="Part_HighlightRect” Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.C olor)" /> </ControlTemplate>

namespace Client.Controls { public class ButtonCell : Control public class ButtonCell : Control {ResourceHelper.GetControlTemplate(typeof(ButtonCell)); } public ButtonCell() public ButtonCell() { base.Template = s_CellTemplate; base.Template = s_CellTemplate; base.ApplyTemplate(); base.ApplyTemplate(); }}

Browser resizes Grid Splitters Some UI elements grow as skin is resized Manage Multiple UI elements Built specialized layout panels to encapsulate and draw multiple elements of a skin Code behind should never have custom code dedicated to a skin

<Controls:ViewPanel> </Controls:ViewPanel></Grid><ControlTemplate>

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

Skin is a project Comprised of Templates and Images

Skins ResourceHelper Class Loads Skin Assembly Helper functions to locate and load templates GetControlTemplate() Helper functions to load resources Application Background Background animation

Summary We have a skin solution Separate assemblies Change skins Dynamic living skins Well defined layer for designers to work with UI Infrastructure Controls – Templates Components – define key sections of app

The quest for a rich, interactive user experience Custom controls Silverlight overlays

High performance Extreme flexibility Skinnable Small download

Template based controls Extensive data binding Template binding whenever possible Shared resources and styles Virtualized controls for large data sets

public class ItemData : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; }

VirtualizedList _list1; ObservableCollection _dataSource; … _list1.ItemsSource = _dataSource;

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

<c:ListItem Foreground="Blue“ Text=“{Binding Caption}”/>

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

HTMLHTML OverlayOverlay

Requirement introduced by the usage of browser based HTML rendering and composition Also used for Context menus Modal dialogs Rich Tooltips ‘Out of banner’ Silverlight ads Legacy ads

Creating Silverlight overlay plugin Communication between plugins Sharing code and resources Plugin lifetime management

Hosted by an absolute positioned DIV Host element is child of main host element, sibling of the main plugin Silverlight.js support to create the additional plugin Windowless mode supports transparency and irregularly shaped windows

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);

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

Separate.xap archive files are used for main plugin and overlay plugins Distributing 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 archive It is fast because the download will find the main archive cached by the browser

Main.xapMain.xap Model.dllModel.dll Controls.dllControls.dll Popup.xapPopup.xap Popup.dllPopup.dll

_webClient = new WebClient(); _webClient.OpenReadCompleted += delegate(object sender,… e) { Load(new StreamResourceInfo (e.Result, null)); }; _webClient.OpenReadAsync( new Uri(“shared.xap", UriKind.Relative));

StreamResourceInfo ri = Application.GetResourceStream(xap, new Uri(“shared.dll“, UriKind.Relative)); AssemblyPart p = new AssemblyPart(); Assembly a = p.Load(ri.Stream);

Flexible separation of data, control logic and control visuals Lightweight and high performance Extensive binding Virtualized controls for large data sets Rich, highly interactive visuals Skins downloaded on demand

AOL Mail RIA & Monetization ObjectivesEngagingHigh-performingStandards-based Integration between ads and application SkinsPanels Rich media options High impact audio & video Rich animations

AOL Mail RIA & Silverlight A new experience on the web Industry-leading performance Unique skinning capabilities High impact content delivery Mail from AOL Innovative products Get the identity and experience that expresses who you are and what you like

Sign up today to be notified when the preview is available