Silverlight Photography Website Framework Comparing Component-Based Designs in Adobe Flex and Microsoft Silverlight. David Roossien For Prof. Robert Adams CS693 9/2009. Presentation Outline. Project Description(s) Client Server Interface Client Designs: Silverlight / Flex
Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
Silverlight Photography Website FrameworkComparing Component-Based Designs in Adobe Flex and Microsoft Silverlight David Roossien For Prof. Robert Adams CS693 9/2009
Presentation Outline • Project Description(s) • Client Server Interface • Client Designs: Silverlight / Flex • Comparison: Silverlight and/or Flex
Project Descriptions • Silverlight Project: • http://blog.davidroossien.com/?p=145 • Flex Project: • http://blog.davidroossien.com/?p=23
Silverlight Project Description • Compare and contrast with a CS 658 project that used Adobe Flex and PHP/MySQL. • Compare features of Adobe Flex with Microsoft Silverlight as it relates to: • Presentation • Client/Server interface
Features (both projects) • User account management • Keyword search for photos • Allow user to customize i.e. drag and drop • Save favorites and return to them later
Server Interface (PHP) • Server side was implemented in CS658 • ActionScript Message Format (AMF, RPC) • Web Services that provide object exchange • Data classes requested by client and provided by server:
Client Design(s) • Component based • Main parent component with many child components • Parent is a container for children dialogs • Parent coordinates basic visual tasks • show/hide child • get/set global data • Each dialog component interacts directly with server as required
Component base classes • The base class for a component determines what methods and properties are available to the component • Silverlight: UserControl • Flex: Container
Silverlight User Control • http://msdn.microsoft.com/en-us/library/system.windows.controls.usercontrol(VS.95).aspx • Inheritance hierarchy: • System.Object • System.Windows.DependencyObject • System.Windows.UIElement • System.Windows.FrameworkElement • System.Windows.Controls.Control • System.Windows.Controls.UserControl
Flex Container • http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html • Inheritance hierarchy: • Container • UIComponent • FlexSprite • Sprite • DisplayObject • Container • InteractiveObject • DisplayObject • EventDispatcher • Object
User Control vs Container • UserControl—lighter weight, missing a few important features for a component based design • no layout—a layout component must be added • no show/hide or initialize events • can’t bind animations • Container—heavier weight, includes more features important for a component based design • provides layout (i.e. canvas) • show/hide, initialize events • bindable to animations
Silverlight Binding • Objects rely on their parents for binding • After changing the data in code, must update the parent’s DataContext for child to be updated • Data binding only (not other types of objects)
Flex binding • Declare something [Bindable] • Flex handles the updates • Can bind objects and/or data
Form Validation • Silverlight requires you to generate your own events and write a custom class to validate your data. • Flex provides a set of MXML validators that can be applied to form fields. Fields are validated as you tab from field to field.
Performance • Silverlight provides (requires) a separate thread for asynchronous communication • Silverlight uses multi-threading for animations • Flex (ActionScript) is single threaded • Silverlight binary can be much smaller (2:1 for my projects)
Practical issues • Development environment • Silverlight provides Visual Studio and Blend • Visual Studio provides development and debugging tools • Blend provides design tools • Flex provides Flex Builder, which is based on Eclipse • Supports design, development and debugging
Practical issues continued • Debugging. • Silverlight • has XAML/CLR, intermediary file issue • can’t debug XAML • Flex • can debug MXML and ActionScript
Practical issues continued • Silverlight player is not widely used • Market penetration of the Flash Player ~98% according to Adobe • Flash Player is more widely used than any browser
Conclusions • Flex is more suited to a component based design. • Silverlight requires supporting architecture. • Silverlight is more suited to larger interfaces that require • higher performance animation • greater use of asynchronous communication. • Flex is more suited to smaller, component based designs than Silverlight. • Silverlight requires more investment in architecture and infrastructure than Flex. • Flex is more suited to rapid development than Silverlight.