Flash and Flash Remoting with Building Blocks

1
Blackboard Building Blocks
Building Blocks and Macromedia Flash/Flash
Remoting
Timothy Chi, Senior Director of Technology
Monday, July 27, 2009
2
Presentation Overview

• Blackboard and Macromedia corporate relationship
• Breaking the HTML barrier
• Introduction to Flash and Flash Remoting
• Building Blocks and Flash
• Case Study The Blackboard Group Management
  Project

3
Blackboard Inc and Macromedia Inc

• Corporate Relationship

4
Blackboard and Macromedia

• Corporate relationship since 2001
• Various groups work together, usually with
  executive sponsorship
• Many opportunities to explore as new products are
  brought to market
• Exciting opportunities in e-Education arena

5
Examples of discussions

• Publish to Blackboard feature in Macromedia
  Dreamweaver MX
• Publish to Blackboard feature in Macromedia
  Contribute MX
• Enhanced support for Flash applications within
  Blackboard environment
• Upcoming Macromedia products (recently Macromedia
  Breeze)

6
Breaking the HTML Barrier

• The value of Rich Internet Applications for
  e-Education

7
Rich Internet Applications

• Rich client environment for Internet content and
  applications
• Improved quality of end-user applications,
  leading to more relevant and easier to use
  end-use experiences
• Providing dynamic data in a way that takes
  advantage of new media, layout, and design options

8
Rich IA using Flash MX

• Allows developers and designers to break the
  HTML barrier
• Creativity in layout, tweening, multimedia,
  navigation, and workflows
• Build applications that are easier to use
• Enhance the efficiency of a workflow
• Delivers an entirely new experience to end
  users

9
Ideas for Blackboard

• Drag-and-drag management of users to for course
  or organization
• Rich UI for Gradebook for sorting, re-arranging
  columns, reporting
• Rich UI for creating/managing assessments
  including using question pools, re-arranging
  questions, drag-and-drop questions
• Many more

10
Flash MX and Flash Remoting

• Just the basics

11
Flash MX Basics

• Macromedia client software for developing highly
  visual interactive content and applications
• The Flash Player is used by over 414 million
  people, and installed in 98 of all
  Internet-enabled devices

12
Flash MX Basics contd

• The IDE has a timeline based metaphor for
  developing highly interactive and rich
  applications
• Action Script is a proprietary scripting language
  used to extend functions built in the IDE
• Pre-built User Interface Components accelerate
  time to market

13
Flash Remoting MX Overview

• Gateway technology that connects Macromedia Flash
  MX components on the client side with server-side
  application services.
• Flash Remoting enables a Flash MX client to
  seamlessly interface with remote components
  running on an application server in a fast,
  efficient, secure, and reliable way.
• Flash Remoting service in ColdFusion MX can also
  be used with other server technologies, such as
  Java classes, EJBs, Mbeans,and .NET Framework
  languages like ASP.NET, VB.NET, and C.
• Flash Remoting Components for Flash MX at
  http//www.macromedia.com/software/flashremoting/d
  ownloads/components/
• Flash Remoting Server Files available at
  Macromedia Site

14
Building Blocks and Flash

• Piecing it together to develop a compelling Rich
  UI Building Block

15
Review

• Flash applications are designed to run within a
  web-browser
• Flash Remoting is a technology that allows Flash
  applications to connect to server-side
  applications
• For us, this means that Flash applications have
  access to all the objects, methods, and data
  available through Building Blocks!

16
Hooking It Up (part 1)

• Install Flash Remoting Components for Flash MX
• Install Flash Remoting Server Components on any
  machine
• Drop the flashgateway.jar file into the Building
  Block package (WEB-INF/lib)
• Edit the web.xml file to register the servlet
  mapping for the Remoting Component
• FlashGatewayServlet
• Flash Gateway Servlet
  
• Servlet-based plugin to the Flash
  Server Gateway
• flashgateway.controller.GatewaySer
  vlet 1
  tartup
• FlashGatewayServlet
  
• /gateway/

17
Hooking It Up (part 2)

• Create your Java Data Access Layer, and ensure
  that you have complementary ActionScript objects
  (wrapper layer for Blackboard APIs)
• Build the Flash application
• Create a JSP page launch point for your Building
  Block
• 4553540000" codebase"http//download.macromedia.c
  om/pub/shockwave/cabs/flash/swflash.cabversion6,
  0,0,0" WIDTH"600" HEIGHT"450" id"groupLaunch"
  name"groupLaunch" ALIGN""
• eIdgatewayUrl"
• bgcolorFFFFFF WIDTH"550" HEIGHT"400"
  NAME"groupLaunch" ALIGN"" TYPE"application/x-sh
  ockwave-flash" PLUGINSPAGE"http//www.macromedia.
  com/go/getflashplayer"

18
Hooking It Up (part 3)

• Depending on your application server
  (Weblogic/Tomcat), edit the .policy file to allow
  for certain permissions to be used (necessary for
  Flash Remoting)
• permission java.lang.reflect.ReflectPermission
  "suppressAccessChecks"
• permission java.lang.RuntimePermission
  "accessClassInPackage.macromedia.mxExamples.groupM
  anagement"
• 9. Package and try your new Flash Building Block
  out (on a development machine!)

19
Case Study Rich UI for Group Management

• A joint project by Macromedia and Blackboard
  designed to reduce the learning curve for
  Building Block developers

20
Case Study The Bb Group Manager

• Goals
• Prove that Flash (via Flash Remoting) could
  indeed be used with Building Blocks
• One of Macromedias first proof of concepts with
  the launch of the MX line of products
• Showcase the power of Rich Internet Applications
  and the potential impact on user interface design
  for Blackboard

21
The Development Team
John Bennett Macromedia Inc Strategic Services
Group
Branden Hall FigLeaf Inc Product Development
Timothy Chi Blackboard Inc Product Development
22
Development Methodology

• Initial meeting Design, architecture, and
  development of object model
• Simultaneous development of Flash application,
  Data Access Layer, and Building Blocks code
• Component testing
• Joint testing after component testing completed
• Beta, Release, etc

23
The End Result

• One-click toggles for group options
• Sort-able columns
• Show Members feature
• Drag-and-drop assignment of members to a group
  during creation and modification
• User role displayed by different icons
• Assign feature allows for multiple members to
  be assigned to multiple groups at same time
• Random assignment of members to groups

24
Tips

• Wherever possible, place both the data and logic
  on the server. Only send data for display to the
  client.
• Take advantage of locating (or caching) data on
  the client for your application when possible.
  The client-side software is what makes a rich
  user experience possible.
• Acquire Macromedia Flash and ActionScript
  development expertise
• Leverage the Macromedia Flash component reuse
  model
• Utilize available tools
• Macromedia Flash debugger
• NetConnection debugger
• Macromedia Flash debug player
• Application Server logfiles
• Use component-based development to eliminate bugs
  early
• Be creative!

25
Conclusion

• Rich Internet Applications will bring us into the
  next creative frontier, adding a new dimension to
  online teaching and learning.
• Having a platform for creating and delivering
  Rich Internet Applications will be increasingly
  important
• Now you know how!

26
Thank You

Demos to Follow