Come join the Rich Internet Application engineering team from AOL and see first-hand how AOL created a rich, scalable mail application using Microsoft Silverlight 2.

3. 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

4. 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

5. 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

6. “grid” & “stack” prototype

7. 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 ..

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

9. 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

10. 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 …

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

12. 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;
}
}
}

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

16. 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

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

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

19. First things first!! -- Custom Controls
DataGrid
Cells
List
Tree
TreeNodes
GridSplitter
Buttons
…

20. 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

21. <ControlTemplate/>
<Grid x:Name=quot;Part_Rootquot;>
<Grid.Resources>
<Storyboard x:Name=quot;Part_MouseEnterquot;>
<ColorAnimation Duration=quot;00:00:00.2“ To=quot;#50FFFFFFquot;
Storyboard.TargetName=quot;Part_HighlightRect”
Storyboard.TargetProperty=quot;(Shape.Fill).(SolidColorBrush.C
olor)quot; />
</Grid.Resources>
<Rectangle x:Name=quot;Part_HighlightRectquot; Fill=quot;#00FFFFFFquot;/>
<TextBlock x:Name=quot;Part_Caption” FontSize=quot;12quot; Text=quot;Buttonquot;
/>
</ControlTemplate>

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

23. 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

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

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

26. Skin is a project
Comprised of Templates and Images

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

28. 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

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

31. High performance
Extreme flexibility
Skinnable
Small download

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

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

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

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

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

37. <DataTemplate>
<TextBlock
Text=quot;{Binding Caption}quot;
Foreground=quot;Gold“
Padding=quot;2quot;/>
</DataTemplate>

39. Overlay
HTML

40. 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

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

42. 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

43. ScriptObject arg = (ScriptObject)
HtmlPage.Window.Eval(quot;new Object;quot;);
arg.SetProperty(quot;initParamsquot;, “parentId=quot; +
HtmlPage.Plugin.Id;
ScriptObject slso = (ScriptObject)
HtmlPage.Window.
GetProperty(quot;Silverlightquot;);
slso.Invoke(quot;createObjectExquot;, arg);

44. 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

45. 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

46. Model.dll
Main.xap
Popup.xap
Popup.dll
Controls.dll

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

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

50. 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

52. AOL Mail RIA & Monetization
Objectives
Engaging
High-performing
Standards-based
Integration between ads
and application
Skins
Panels
Rich media options
High impact audio &
video
Rich animations

53. 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 email identity and experience that
expresses who you are and what you like

54. Sign up today to be notified when the
preview is available
http://ria.mail.aol.com