Mail RIA & Silverlight – Defining new
experience on the Web
  Our RIA objectives - Eric Hoffman
  A Silverlight developmen...
The next chapter for web applications
Rich and performant
Personalization taken to another level
Write it once, run it eve...
Beginning with Silverlight 1.0 / 2.0
   Research and exploration project
   We were hopeful…
     High Definition video an...
“grid” & “stack” prototype
Silverlight 2.0 provided…
  Basic layout
  Grid & stack panels
  Isolated storage – size was a factor still
  Could we bui...
namespace Client.Controls.Button
{
[TemplatePart(Name=quot;Part_MouseUp“,Type=typeof(S
toryboard)),
…
public abstract clas...
What we really needed … more advanced
controls..
 Buttons, checkboxes
 Tree control
 ListView,- virtualized ..
 Listboxes ...
Morphed into a Collaboration ..
  Contribution to the core Silverlight feature set
  Request functionality as we needed .....
using (Stream xstream = new CryptoStream(stream,
_alghoritm.CreateDecryptor(),
CryptoStreamMode.Read))
 {
      using (Str...
public void SaveObject<T>(string path, T
data, Action<Exception> cb) where T : class
  { // Main thread here …
   ThreadPo...
Appealing – Look good
Rich in assets - Vibrant
Feel alive!! – non static look
Dynamic/Resizable
Skinnable
Fast – seem effo...
Designers create UI layout
Developers build controls and components
Controls paint visuals and bind to business
data
UI el...
Artists/Designers create application
Think multiple/Differentiating skins
Utilize tools. Create in natural format - xaml
B...
Identify Key Components
Components are themselves controls
Define Root Layout of Application
First things first!! -- Custom Controls
  DataGrid
  Cells
  List
  Tree
  TreeNodes
  GridSplitter
  Buttons
  …
Custom visual controls derive from control class
Control Class supports Control Templates
All components and visual contro...
<ControlTemplate/>

<Grid x:Name=quot;Part_Rootquot;>

<Grid.Resources>
    <Storyboard x:Name=quot;Part_MouseEnterquot;>
...
namespace Client.Controls
{
    public class ButtonCell : Control
    {

ResourceHelper.GetControlTemplate(typeof(ButtonCe...
Browser resizes
Grid Splitters
Some UI elements grow as skin is resized
Manage Multiple UI elements
Built specialized layo...
ControlTemplate>
<



<Grid x:Name=“Part_Root”>
<Controls:ViewPanel>
 <Path x:Name=“Part_Frame” Data=“….”/>
 <Rectangle x:...
public abstract class ViewPanel : Panel
    {
        protected override Size
MeasureOverride(Size availableSize)
        ...
Skin is a project
Comprised of Templates and Images
Skins
  ResourceHelper Class
  Loads Skin Assembly
  Helper functions to locate and load
  templates
   GetControlTemplate...
Summary
 We have a skin solution
    Separate assemblies
    Change skins
    Dynamic living skins
    Well defined layer ...
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 ...
public class ItemData
    : INotifyPropertyChanged
{
  public event
    PropertyChangedEventHandler
      PropertyChanged;...
VirtualizedList _list1;
ObservableCollection<ItemData>
  _dataSource;
…
_list1.ItemsSource = _dataSource;
public class VirtualizedList
    : Control
{
  …
  public IList ItemsSource
  { … }
  public DataTemplate ItemTemplate
  {...
<c:VirtualizedList x:Name=quot;_list1”>
 <c:VirtualizedList.ItemTemplate>
  <DataTemplate>
   <c:ListItem
     Foreground=...
<DataTemplate>
  <TextBlock
    Text=quot;{Binding Caption}quot;
    Foreground=quot;Gold“
    Padding=quot;2quot;/>
</Dat...
Overlay
          HTML
Requirement introduced by the usage of
browser based HTML rendering and
composition
Also used for
  Context menus
  Modal ...
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...
ScriptObject arg = (ScriptObject)
HtmlPage.Window.Eval(quot;new Object;quot;);
arg.SetProperty(quot;initParamsquot;, “pare...
Each plugin runs in its own application
domain
JSON payload passed as parameters and
returned as result.
Input and output ...
Separate .xap archive files are used for
main plugin and overlay plugins
Distributing shared code and resources in
both ar...
Model.dll


 Main.xap
               Popup.xap

               Popup.dll
Controls.dll
_webClient = new WebClient();
_webClient.OpenReadCompleted +=
  delegate(object sender,… e)
  { Load(new StreamResourceInf...
StreamResourceInfo ri =

Application.GetResourceStream(xap,
     new Uri(“shared.dll“,
             UriKind.Relative));

A...
Flexible separation of data, control logic and
control visuals
Lightweight and high performance
Extensive binding
Virtuali...
AOL Mail RIA & Monetization
 Objectives
    Engaging
    High-performing
    Standards-based

 Integration between ads
 an...
AOL Mail RIA & Silverlight
 A new experience on the web
   Industry-leading performance
   Unique skinning capabilities
  ...
Sign up today to be notified when the
preview is available


http://ria.mail.aol.com
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Upcoming SlideShare
Loading in …5
×

Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2

1,209
-1

Published on

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.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,209
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. “grid” & “stack” prototype
  5. 5. 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 ..
  6. 6. namespace Client.Controls.Button { [TemplatePart(Name=quot;Part_MouseUp“,Type=typeof(S toryboard)), … public abstract class ButtonBase : Control { … } }
  7. 7. 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
  8. 8. 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 …
  9. 9. using (Stream xstream = new CryptoStream(stream, _alghoritm.CreateDecryptor(), CryptoStreamMode.Read)) { using (Stream zstream = new GZipStream(xstream, CompressionMode.Decompress)) { data = LoadObject<T>(zstream); } }
  10. 10. 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; } } }
  11. 11. Appealing – Look good Rich in assets - Vibrant Feel alive!! – non static look Dynamic/Resizable Skinnable Fast – seem effortless
  12. 12. 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
  13. 13. Artists/Designers create application Think multiple/Differentiating skins Utilize tools. Create in natural format - xaml Build application to adopt designer requirements
  14. 14. Identify Key Components Components are themselves controls Define Root Layout of Application
  15. 15. First things first!! -- Custom Controls DataGrid Cells List Tree TreeNodes GridSplitter Buttons …
  16. 16. 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
  17. 17. <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>
  18. 18. namespace Client.Controls { public class ButtonCell : Control { ResourceHelper.GetControlTemplate(typeof(ButtonCell)); } public ButtonCell() { base.Template = s_CellTemplate; base.ApplyTemplate(); } }
  19. 19. 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
  20. 20. ControlTemplate> < <Grid x:Name=“Part_Root”> <Controls:ViewPanel> <Path x:Name=“Part_Frame” Data=“….”/> <Rectangle x:Name=“Part_Background” /> </Controls:ViewPanel> </Grid> <ControlTemplate>
  21. 21. public abstract class ViewPanel : Panel { protected override Size MeasureOverride(Size availableSize) { } protected override Size ArrangeOverride(Size finalSize) { } }
  22. 22. Skin is a project Comprised of Templates and Images
  23. 23. Skins ResourceHelper Class Loads Skin Assembly Helper functions to locate and load templates GetControlTemplate() Helper functions to load resources Application Background Background animation
  24. 24. 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
  25. 25. The quest for a rich, interactive user experience Custom controls Silverlight overlays
  26. 26. High performance Extreme flexibility Skinnable Small download
  27. 27. Template based controls Extensive data binding Template binding whenever possible Shared resources and styles Virtualized controls for large data sets
  28. 28. public class ItemData : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; }
  29. 29. VirtualizedList _list1; ObservableCollection<ItemData> _dataSource; … _list1.ItemsSource = _dataSource;
  30. 30. public class VirtualizedList : Control { … public IList ItemsSource { … } public DataTemplate ItemTemplate { … } }
  31. 31. <c:VirtualizedList x:Name=quot;_list1”> <c:VirtualizedList.ItemTemplate> <DataTemplate> <c:ListItem Foreground=quot;Blue“ Text=“{Binding Caption}”/> </DataTemplate> </c:VirtualizedList.ItemTemplate> </c:VirtualizedList>
  32. 32. <DataTemplate> <TextBlock Text=quot;{Binding Caption}quot; Foreground=quot;Gold“ Padding=quot;2quot;/> </DataTemplate>
  33. 33. Overlay HTML
  34. 34. 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
  35. 35. Creating Silverlight overlay plugin Communication between plugins Sharing code and resources Plugin lifetime management
  36. 36. 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
  37. 37. 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);
  38. 38. 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
  39. 39. 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
  40. 40. Model.dll Main.xap Popup.xap Popup.dll Controls.dll
  41. 41. _webClient = new WebClient(); _webClient.OpenReadCompleted += delegate(object sender,… e) { Load(new StreamResourceInfo (e.Result, null)); }; _webClient.OpenReadAsync( new Uri(“shared.xapquot;, UriKind.Relative));
  42. 42. StreamResourceInfo ri = Application.GetResourceStream(xap, new Uri(“shared.dll“, UriKind.Relative)); AssemblyPart p = new AssemblyPart(); Assembly a = p.Load(ri.Stream);
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. Sign up today to be notified when the preview is available http://ria.mail.aol.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×