1. 1 Silverlight Photography Website Framework Comparing Component-Based Designs in Adobe Flex and Microsoft Silverlight David Roossien For Prof. Robert Adams CS6939/2009

2. 2 Presentation Outline 1. Project Description(s) 2. Client Server Interface 3. Client Designs: Silverlight / Flex 4. Comparison: Silverlight and/or Flex

3. 3 Project Descriptions  Silverlight Project:  http://blog.davidroossien.com/?p=145 http://blog.davidroossien.com/?p=145  Flex Project:  http://blog.davidroossien.com/?p=23 http://blog.davidroossien.com/?p=23

4. 4 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 Presentation Client/Server interface Client/Server interface

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

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

7. 7 Client Server Interface

8. 8 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 show/hide child get/set global data get/set global data  Each dialog component interacts directly with server as required

9. 9 Silverlight Client Design

10. 10 Flex Client Design

11. 11 Component base classes  The base class for a component determines what methods and properties are available to the component  Silverlight: UserControl  Flex: Container

12. 12 Silverlight User Control  http://msdn.microsoft.com/en- us/library/system.windows.controls.usercontrol(VS.95).aspx http://msdn.microsoft.com/en- us/library/system.windows.controls.usercontrol(VS.95).aspx http://msdn.microsoft.com/en- us/library/system.windows.controls.usercontrol(VS.95).aspx  Inheritance hierarchy: System.Object System.Object System.Windows.DependencyObject System.Windows.DependencyObject System.Windows.UIElement System.Windows.UIElement System.Windows.FrameworkElement System.Windows.FrameworkElement System.Windows.Controls.Control System.Windows.Controls.Control System.Windows.Controls.UserControl System.Windows.Controls.UserControl

13. 13 Flex Container  http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html  Inheritance hierarchy: Container Container Container UIComponent UIComponent UIComponent FlexSprite FlexSpriteFlexSprite Sprite SpriteSprite DisplayObject DisplayObjectDisplayObject Container Container Container InteractiveObject InteractiveObjectInteractiveObject DisplayObject DisplayObjectDisplayObject EventDispatcher EventDispatcherEventDispatcher Object ObjectObject

14. 14 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 layout—a layout component must be added no show/hide or initialize events no show/hide or initialize events can’t bind animations can’t bind animations  Container—heavier weight, includes more features important for a component based design provides layout (i.e. canvas) provides layout (i.e. canvas) show/hide, initialize events show/hide, initialize events bindable to animations bindable to animations

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

16. 16 Flex binding  Declare something [Bindable]  Flex handles the updates  Can bind objects and/or data

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

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

19. 19 Practical issues  Development environment Silverlight provides Visual Studio and Blend Silverlight provides Visual Studio and Blend Visual Studio provides development and debugging toolsVisual Studio provides development and debugging tools Blend provides design toolsBlend provides design tools Flex provides Flex Builder, which is based on Eclipse Flex provides Flex Builder, which is based on Eclipse Supports design, development and debuggingSupports design, development and debugging

20. 20 Practical issues continued  Debugging. Silverlight Silverlight has XAML/CLR, intermediary file issuehas XAML/CLR, intermediary file issue can’t debug XAMLcan’t debug XAML Flex Flex can debug MXML and ActionScriptcan debug MXML and ActionScript

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

22. 22 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 higher performance animation greater use of asynchronous communication. 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.