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.