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