Building RIAs Rich Instructional Applications with Flex Builder and AS3

1
Building RIAs (Rich Instructional Applications)
with Flex Builder and AS3

• Thor Anderson, Ph.D.
• Utah Valley University

2
What is an RIA?

• Rich Internet applications (RIAs) are web
  applications that have some of the
  characteristics of desktop applications,
  typically delivered by way of proprietary web
  browser plug-ins or independently via sandboxes
  or virtual machines. - Wikipedia
• Rich Internet applications (RIAs) offer a rich,
  engaging experience that improves user
  satisfaction and increases productivity. Using
  the broad reach of the Internet, RIAs can be
  deployed across browsers and desktops. - Adobe

3
What is an Rich Instructional Application?

• Pretty much the same thing as Adobes
  definition....
• Rich Instructional applications (RIAs) offer a
  rich, engaging experience that improves learning
  and increases productivity.

4
Ideas from Software Engineering

• Many of the RIA developers I know have come from
  a media and design background - not software
  development.
• There are some key concepts and principles
  associated with software engineering that can
  greatly help the Flash/Flex Developer.
• My goal with this presentation is to either
  introduce these concepts to you (if youve never
  heard of them), or reinforce their importance so
  you will find a way to leverage these things in
  your own eLearning development efforts.

5
Key Concepts and Principles

• Modular Architecture
• Implementing Interfaces
• Runtime Shared Libraries (RSLs)
• Code Version Control within a team
• N-tier Architecture
• The value of a comprehensive event model

6
Example 1

• Lets take the first 3 concepts listed
• Modular Architecture
• Implementing Interfaces
• Runtime Shared Libraries
• and look at them in the context of an example
  instructional sequence
• DGM 2120 Web Essentials Learning Components
• https//www.learningcomponents.com/player/?session
  107

7
Concept 1 - Modular Architecture

• A Module is a SWF file that an Application can
  load or unload at runtime
• This makes Modules very flexible because they can
  be developed and compiled independently of an
  Application
• This also keeps the Application from becoming a
  bloated giant of code.

8
Two methods for working with Flex Modules

• The ModuleManager gives you low-level API access
  and more complete control.
• The ModuleLoader class is a higher-level API that
  is easier to use.

9
Simple Example Module
10
Simple example app loading a Module
11
Concept 2 - Implementing Interfaces
Simple Interfaces make Legos work
The key to the interfaces here is in the precise,
engineered dimensions of the stud and the
tube. They havent changed in 60 years.
12
Implementations change...
Well designed interfaces endure!
13
This interface has 6 studs for connecting this
module
14
Concept 3 - Runtime Shared Library (RSL)

• All of your Flex apps use some portion of the
  Flex framework
• Adobe provides a set of signed and unsigned
  libraries that can be cached on the users
  machine
• This improves app download time and responsiveness

15
Add RSLs under project properties within Flex
Builder
Signed version that stays in the Player cache
Unsigned version for the browser cache
16
Example 2

• This example brought out additional key concepts
  to understand about Flex and AS3 capabilities
• UVU College of Technology Computing Signage

17
Concept 4 - Shared Code and Teamwork

• To reliably share Flex and AS3 code across a
  development team, use a Concurrent Versioning
  System.
• Such systems let you
• store code on the server for the whole team to
  access
• check out existing code, edit it, and check
  in the updated code

18
CVS client built in to Flex Builder 3
19
SVN client access can be added to Flex Builder

• Subversion is another CVS that some feel is
  better than the traditional software.
• Just download and install the Subclipse plugin
  because Flex Builder is based upon the Eclipse
  IDE.
• http//subclipse.tigris.org/

20
Same idea as the CVS client. There is a separate
perspective to use for either CVS or SVN clients,
but the usage and user interfaces are very
similar.
21
Concept 5 - 3-tier Architecture

• This was a new concept to many students.
• The basic ideas are
• Clients directly accessing data is bad
• Make separate layers for data, business logic,
  and the user interface

22
Business Logic
Presentation Layer
Data Layer
23

• We used AMFPHP to allow our Flex/AS3 code to
  communicate directly with PHP class objects

24
Concept 6 - AS3 Event Model

• With AS3 the event model is unified and
  consistent and built around
• dispatchers
• event objects
• and listeners

25
Dispatching Events

• The ability to manually dispatch events can be a
  key to making a responsive user interface

26
Additional Key Concepts
Compiled Libraries (TweenMax, Yahoo Weather,
Google API, etc.) Application Profiling (Memory
usage)
27
Thank You