david roossien for prof. robert adams cs693 9/2009
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
11
Silverlight Photography Silverlight Photography Website FrameworkWebsite Framework
Comparing Component-Based Comparing Component-Based Designs in Adobe Flex and Microsoft SilverlightDesigns in Adobe Flex and Microsoft Silverlight
David RoossienDavid RoossienFor Prof. Robert AdamsFor Prof. Robert Adams
CS693CS6939/20099/2009
22
Presentation OutlinePresentation Outline
1.1. Project Description(s)Project Description(s)
2.2. Client Server InterfaceClient Server Interface
3.3. Client Designs: Silverlight / FlexClient Designs: Silverlight / Flex
4.4. Comparison: Silverlight and/or FlexComparison: Silverlight and/or Flex
33
Project DescriptionsProject Descriptions
Silverlight Project:Silverlight Project: http://http://blog.davidroossien.com/?pblog.davidroossien.com/?p=145=145
Flex Project:Flex Project: http://http://blog.davidroossien.com/?pblog.davidroossien.com/?p=23=23
44
Silverlight Project DescriptionSilverlight Project Description
Compare and contrast with a CS 658 project that Compare and contrast with a CS 658 project that used Adobe Flex and PHP/MySQL.used Adobe Flex and PHP/MySQL.
Compare features of Adobe Flex with Microsoft Compare features of Adobe Flex with Microsoft Silverlight as it relates to:Silverlight as it relates to: PresentationPresentation Client/Server interfaceClient/Server interface
55
Features (both projects)Features (both projects)
User account management User account management
Keyword search for photos Keyword search for photos
Allow user to customize i.e. drag and dropAllow user to customize i.e. drag and drop
Save favorites and return to them laterSave favorites and return to them later
66
Server Interface (PHP)Server Interface (PHP)
Server side was implemented in CS658Server side was implemented in CS658
ActionScript Message Format (AMF, RPC)ActionScript Message Format (AMF, RPC)
Web Services that provide object exchangeWeb Services that provide object exchange
Data classes requested by client and provided by server:Data classes requested by client and provided by server:
photo user serverResultcatalog
77
Client Server InterfaceClient Server Interface
accountService.update(firstName, lastName, emailAddress, password)
accountService.register(firstName, lastName, emailAddress, password)
Account
photoService.getPhotos(galleryName)Gallery
userLogin.login(emailAddress, password)LoginHeader
userLogout.logout()LogoutHeader
gateway
accountService
userLogin
userLogout
serverResult
photo Service
photo (Array)
user
true/false
Web Services
ServerClient
88
Client Design(s)Client Design(s) Component basedComponent based
Main parent component with many child componentsMain parent component with many child components
Parent is a container for children dialogsParent is a container for children dialogs
Parent coordinates basic visual tasks Parent coordinates basic visual tasks show/hide childshow/hide child get/set global dataget/set global data
Each dialog component interacts directly with server as Each dialog component interacts directly with server as requiredrequired
99
Silverlight Client DesignSilverlight Client Design
photoFrameworkBaseControl
UserControl
gallery account
MainPage
UserControl
-mMP1
-mGalleryUC1
-mMP1
-mAccountUC1
register
-mMP1
-mRegisterUC1
recoverPassword
-mMP1
-mRecoverPasswordUC1
App
1
-this.RootVisual1
Application
login
-mMP1
-mLoginUC1
logout
-mMP1
-mLogoutUC1
menu
-mMP1
-mMenuUC1
1010
Flex Client DesignFlex Client Designmx:Canvas
gallery account
index
1
-mGallery1
1
-mAccount1
register
1
-mRegister1
recoverPassword
1
-mRecoverPassword1
mx:Application
1111
Component base classesComponent base classes
The base class for a component determines The base class for a component determines what methods and properties are available to the what methods and properties are available to the componentcomponent
Silverlight: UserControlSilverlight: UserControl
Flex: ContainerFlex: Container
1212
Silverlight User ControlSilverlight User Control http://msdn.microsoft.com/en-us/library/http://msdn.microsoft.com/en-us/library/
system.windows.controls.usercontrol(VS.95).aspxsystem.windows.controls.usercontrol(VS.95).aspx
Inheritance hierarchy:Inheritance hierarchy:
System.ObjectSystem.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.UserControlSystem.Windows.Controls.UserControl
1313
Flex ContainerFlex 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:Inheritance hierarchy:
ContainerContainer UIComponentUIComponent FlexSpriteFlexSprite SpriteSprite DisplayObjectDisplayObject Container Container InteractiveObjectInteractiveObject DisplayObjectDisplayObject EventDispatcherEventDispatcher ObjectObject
1414
User Control vs ContainerUser Control vs Container
UserControl—lighter weight, missing a few important UserControl—lighter weight, missing a few important features for a component based designfeatures for a component based design
no layout—a layout component must be addedno layout—a layout component must be added no show/hide or initialize eventsno show/hide or initialize events can’t bind animationscan’t bind animations
Container—heavier weight, includes more features Container—heavier weight, includes more features important for a component based designimportant for a component based design
provides layout (i.e. canvas)provides layout (i.e. canvas) show/hide, initialize eventsshow/hide, initialize events bindable to animationsbindable to animations
1515
Silverlight BindingSilverlight Binding
Objects rely on their parents for bindingObjects rely on their parents for binding
After changing the data in code, must update the After changing the data in code, must update the parent’s DataContext for child to be updatedparent’s DataContext for child to be updated
Data binding only (not other types of objects)Data binding only (not other types of objects)
1616
Flex bindingFlex binding
Declare something [Bindable]Declare something [Bindable]
Flex handles the updatesFlex handles the updates
Can bind objects and/or dataCan bind objects and/or data
1717
Form ValidationForm Validation
Silverlight requires you to generate your own Silverlight requires you to generate your own events and write a custom class to validate your events and write a custom class to validate your data.data.
Flex provides a set of MXML validators that can Flex provides a set of MXML validators that can be applied to form fields. Fields are validated as be applied to form fields. Fields are validated as you tab from field to field.you tab from field to field.
1818
PerformancePerformance
Silverlight provides (requires) a separate thread Silverlight provides (requires) a separate thread for asynchronous communicationfor asynchronous communication
Silverlight uses multi-threading for animationsSilverlight uses multi-threading for animations
Flex (ActionScript) is single threadedFlex (ActionScript) is single threaded
Silverlight binary can be much smaller (2:1 for Silverlight binary can be much smaller (2:1 for my projects)my projects)
1919
Practical issuesPractical issues
Development environmentDevelopment environment
Silverlight provides Visual Studio and BlendSilverlight provides Visual Studio and Blend• Visual Studio provides development and Visual Studio provides development and
debugging toolsdebugging tools• Blend provides design toolsBlend provides design tools
Flex provides Flex Builder, which is based on EclipseFlex provides Flex Builder, which is based on Eclipse• Supports design, development and debuggingSupports design, development and debugging
2020
Practical issues continuedPractical issues continued
Debugging. Debugging. Silverlight Silverlight
• has XAML/CLR, intermediary file issuehas XAML/CLR, intermediary file issue• can’t debug XAMLcan’t debug XAML
FlexFlex• can debug MXML and ActionScriptcan debug MXML and ActionScript
2121
Practical issues continuedPractical issues continued
Silverlight player is not widely usedSilverlight player is not widely used
Market penetration of the Flash Player ~98% Market penetration of the Flash Player ~98% according to Adobeaccording to Adobe
Flash Player is more widely used than any Flash Player is more widely used than any browserbrowser
2222
ConclusionsConclusions Flex is more suited to a component based design. Flex is more suited to a component based design.
Silverlight requires supporting architecture.Silverlight requires supporting architecture.
Silverlight is more suited to larger interfaces that require Silverlight is more suited to larger interfaces that require higher performance animationhigher performance animation greater use of asynchronous communication.greater use of asynchronous communication.
Flex is more suited to smaller, component based designs than Flex is more suited to smaller, component based designs than Silverlight.Silverlight.
Silverlight requires more investment in architecture and Silverlight requires more investment in architecture and infrastructure than Flex.infrastructure than Flex.
Flex is more suited to rapid development than Silverlight.Flex is more suited to rapid development than Silverlight.