Date post: | 03-Jan-2016 |
Category: |
Documents |
Upload: | emerald-haynes |
View: | 221 times |
Download: | 0 times |
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