Blackboard Building Blocks

Building Blocks and Macromedia Flash/Flash Remoting

Friday, April 21, 2023

Timothy Chi, Senior Director of Technology

Presentation Overview

Blackboard and Macromedia corporate relationship

Breaking the HTML barrierIntroduction to Flash and Flash RemotingBuilding Blocks and FlashCase Study: The Blackboard Group

Management Project

Blackboard Inc and Macromedia Inc

Corporate Relationship

Blackboard and Macromedia

Corporate relationship since 2001Various groups work together, usually with

executive sponsorshipMany opportunities to explore as new

products are brought to marketExciting opportunities in e-Education

arena

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)

Breaking the HTML Barrier

The value of Rich Internet Applications for e-Education

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

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 useEnhance the efficiency of a workflowDelivers an entirely “new” experience to

end users

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…

Flash MX and Flash Remoting

Just the basics

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

Flash MX Basics – cont’d

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

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/downloads/components/

Flash Remoting Server Files available at Macromedia Site

Building Blocks and Flash

Piecing it together to develop a compelling Rich UI Building Block

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!

Hooking It Up (part 1)

1. Install Flash Remoting Components for Flash MX2. Install Flash Remoting Server Components on any

machine3. Drop the flashgateway.jar file into the Building Block

package (WEB-INF/lib)4. Edit the web.xml file to register the servlet mapping

for the Remoting Component<servlet>

<servlet-name>FlashGatewayServlet</servlet-name> <display-name>Flash Gateway Servlet</display-name> <description> Servlet-based plugin to the Flash Server Gateway

</description> <servlet-class>flashgateway.controller.GatewayServlet</servlet-class> <load-on-startup>1</load-on-startup>

</servlet> <servlet-mapping>

<servlet-name>FlashGatewayServlet</servlet-name> <url-pattern>/gateway/*</url-pattern>

</servlet-mapping>

Hooking It Up (part 2)

5. Create your Java Data Access Layer, and ensure that you have complementary ActionScript objects (wrapper layer for Blackboard APIs)

6. Build the Flash application7. Create a JSP page launch point for your Building Block

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="600" HEIGHT="450" id="groupLaunch" name="groupLaunch" ALIGN=""> <PARAM NAME=movie VALUE="groupmanager.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=flashvars VALUE="courseId=<%=strCourseId%>&gatewayUrl=<%=gatewayURL %>"> <PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="groupmanager.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="groupLaunch" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

Hooking It Up (part 3)

8. 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.groupManagement";

9. Package and try your new Flash Building Block out (on a development machine!)

Case Study: Rich UI for Group Management

A joint project by Macromedia and Blackboard designed to reduce the

learning curve for Building Block developers

Goals– Prove that Flash (via Flash

Remoting) could indeed be used with Building Blocks

– One of Macromedia’s 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

Case Study: The Bb Group Manager

The Development Team

John Bennett

Macromedia Inc

Strategic Services Group

Branden Hall

FigLeaf Inc

Product Development

Timothy Chi

Blackboard Inc

Product Development

Development Methodology

Initial meeting : Design, architecture, and development of object model

Simultaneous development of Flash application, Data Access Layer, and Building Blocks code

Component testingJoint testing after component testing

completedBeta, Release, etc

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

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!

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!

Thank You

Demos to Follow >