Silverlight Photography Website Framework Comparing Component-Based Designs in Adobe Flex and Microsoft Silverlight David Roossien For Prof. Robert Adams CS693 9/2009 1 Presentation Outline 1. Project Description(s) 2. Client Server Interface 3. Client Designs: Silverlight / Flex 4. Comparison: Silverlight and/or Flex 2 Project Descriptions Silverlight Project: http://blog.davidroossien.com/?p=145 Flex Project: http://blog.davidroossien.com/?p=23 3 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 4 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 5 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: photo catalog user serverResult 6 Client Server Interface Client Web Services Server accountService.register(firstName, lastName, emailAddress, password) serverResult Account account Service accountService.update(firstName, lastName, emailAddress, password) user Login Header userLogin userLogin.login(emailAddress, password) gateway true/false Logout Header userLogout userLogout.logout() photo (Array) photoService.getPhotos(galleryName) photo Service Gallery 7 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 8 Silverlight Client Design UserControl photoFrameworkBaseControl gallery account register recoverPassword 1 -mMP 1 -mMP 1 -mMP 1 -mMP 1 -mGalleryUC 1 -mAccountUC 1 -mRegisterUC 1 -mRecoverPasswordUC MainPage 1 1 -mMP 1 1 -mLoginUC 1 -mMP 1 -mMP -this.RootVisual 1 -mLogoutUC 1 -mMenuUC App login logout menu Application UserControl 9 Flex Client Design mx:Canvas gallery account register 1 1 1 1 -mGallery 1 -mAccount 1 recoverPassword 1 -mRegister 1 -mRecoverPassword index mx:Application 10 Component base classes The base class for a component determines what methods and properties are available to the component Silverlight: Flex: UserControl Container 11 Silverlight User Control http://msdn.microsoft.com/enus/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 12 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 13 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 14 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) 15 Flex binding Declare something [Bindable] Flex handles the updates Can bind objects and/or data 16 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. 17 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) 18 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 19 Practical issues continued Debugging. Silverlight • has XAML/CLR, intermediary file issue • can’t debug XAML Flex • can debug MXML and ActionScript 20 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 21 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. 22
© Copyright 2024