leveraging blazeds, java, and flex: dynamic data transfer

LEVERAGING BLAZEDS, JAVA, AND FLEX: DYNAMIC DATA TRANSFER Joseph Labrecque

360|Flex – April 17th 2012

Joseph Labrecque, MA

University of Denver - OTL Senior Interactive Software Engineer Adjunct Faculty

Fractured Vision Media, LLC Proprietor

Twitter: @JosephLabrecque Web: http://josephlabrecque.com/

Who is using ColdFusion?

Who is using Java?

Who is using BlazeDS?

Who is using PHP + AMFPHP?

Who is using FLEX?

What we will cover… • Technology choices involved • Systems configuration and documentation • Code snippet walkthough • Specific, cool use cases in university • Other stuff!

SESSION AGENDA

Technology Choices

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Apache Flex and Adobe AIR applications for more responsive rich Internet application (RIA) experiences. Just as with the Flex framework, BlazeDS is expected to be contributed to the Apache Software Foundation (ASF).

BLAZEDS

The Apache Flex framework provides a highly productive, open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops and operating systems. It provides a modern, standards-based language and programming model that supports common design patterns suitable for developers from many backgrounds. Flex applications run in the ubiquitous Adobe Flash Player and Adobe AIR.

FLEX

Oracle Java is a programming language and computing platform first released by Sun Microsystems in 1995. It is the underlying technology that powers state-of-the-art programs including utilities, games, and business applications. Java runs on more than 850 million personal computers worldwide, and on billions of devices worldwide, including mobile and TV devices.

JAVA

Spring is the leading platform to build and run enterprise Java applications. Led and sustained by SpringSource, Spring delivers significant benefits for many projects, increasing development productivity and runtime performance while improving test coverage and application quality.

SPRING

Spring BlazeDS Integration is a top-level Spring project, and a component of the complete Spring Web stack. This project's purpose is to make it easier to build Spring-powered Rich Internet Applications using Apache Flex as the front-end client. It aims to achieve this purpose by providing first-class support for using the open source Adobe BlazeDS project and its powerful remoting and messaging facilities in combination with the familiar Spring programming model.

SPRING + BLAZEDS

Systems Configuration

JAVA: Major apps use this or ColdFusion SPRING: Needed a modern framework for Java FLEX: For advanced functionality BLAZEDS: For AMF calls between Java and Flash HTML(5): Default web presentation technology Spring and BlazeDS work AWESOME together!

CHOICES / REASONS

There is a dismal lack of clear instruction for configuring BlazeDS AMF services with Spring. Many of the resources that do exist refer to older versions of the software or strict scenarios that do not apply to everyone using Spring for their projects.

BLAZEDS CONFIGURATION

http://static.springsource.org/spring-flex/docs/1.0.x/reference/html/index.html

OFFICIAL SPRING DOCS

http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

OFFICIAL ADOBE RESOURCES

http://inflagrantedelicto.memoryspiral.com/2011/01/get-up-and-running-with-blazeds-amf-in-spring-mvc/

UNOFFICIAL GUIDE ;)

Let’s talk code

Binary format used to serialize objects graphs such ActionScript objects and XML, or send messages between an Adobe Flash client and a remote service. Used across over 15 platforms: ColdFusion, Java, PHP, Python, Ruby, iOS, even JavaScript!

Action Message Format

Introduced in Flash Player 6 (2001).

Number Boolean String Object Null Array Object/Array End

AMF0

Introduced in Flash Player 9 (2006).

Undefined Null False True Integer Double String XML Date Array Object XML End

AMF3

Provides access to Java objects through AMF components within Flash Player. <s:RemoteObject></s:RemoteObject> RemoteObject instances can be set up via MXML or ActionScript but they do rely upon the Flex framework.

REMOTEOBJECT

The location of AMF services to access. http://josephlabrecque.com/messagebroker/amf Note that this URL will differ depending on how BlazeDS is configured via web.xml: <servlet-mapping> <servlet-name>spring</servlet-name> <url-pattern>/messagebroker/amf</url-pattern> </servlet-mapping>

ENDPOINT

This is the service name established upon configuration: flexService

Defined within any Java classes that will be used by Flash:

import org.springframework.flex.remoting.RemotingDestination; @Service("flexService") @RemotingDestination(value="flexService",channels={"my-amf"})

DESTINATION

This is a set of event handler methods defined in our RemoteObject for handling the results of AMF calls.

This is normally done through ActionScript.

private function resultAMF(e:ResultEvent):void { var r:String = e.result as String; }

RESULT/FAULT

A Flex-based representation of the actual remote method to be invoked.

Includes a representation of all arguments expected by this method as well.

These values are able to use data binding.

<s:method name=“remoteMethodName" ...

METHOD

<fx:Declarations> <s:RemoteObject id="ro" showBusyCursor="true" endpoint="{siteURL+'messagebroker/amf'}" destination="flexService" result="resultAMF(event)" fault="faultAMF(event)"> <s:method name="createAudioRecordingFileItem"> <s:arguments> <bytes>{mp3ByteArray}</bytes> <responseId>{rID}</responseId> <replace>{replace}</replace> </s:arguments> </s:method> </s:RemoteObject> </fx:Declarations>

MXML

Invoke the send() method upon the specific method defined within the RemoteObject instance. private function saveMP3():void { ro.createAudioRecordingFileItem.send(); }

ActionScript – AMF Invoke

The result event handler is invoked when a successful result is returned from an AMF call. import mx.rpc.events.ResultEvent; private function resultAMF(e:ResultEvent):void { var r:String = e.result as String; }

ActionScript – AMF Result

The fault event handler is invoked when a fault is triggered as the result of an AMF call. import mx.rpc.events.FaultEvent; private function faultAMF(e:FaultEvent):void { Alert.show(e.fault.faultString, "Error!"); }

ActionScript – AMF Fault

Specific Use Cases

Assess-It! is a web-based application that supports academic program assessment at the University of Denver. Assess-It! supports three basic assessment models which were developed based on input from faculty and staff who are engaged in academic program assessment at DU. https://assess-it.du.edu/

DU ASSESS-IT!

Using TinyMCE for WYSIWYG text processing. http://www.tinymce.com/

No Java-based file management! Just PHP… what to do?

We use Flex and BlazeDS: modified the TinyMCE image insert code. Easy!

SINGLE UPLOAD W/ TINYMCE

Looked at HTML <form> and JavaScript-based solutions.

Many relied on Flash in backend.

Why not just do it ourselves?

Allows multiple selection, batched upload, immediate feedback for the user.

MULTI-FILE UPLOAD

Q: Could we have done this in jQuery/HTML/JS? A: Sure. Q: Could we have done this in jQuery/HTML/JS in a solid, tested, cross-browser method with great user interaction in a couple of hours? A: Hell, no.

IMAGE GALLERY VIEWER

Old recorder would save off to Flash Media Server as audio-only FLV. System then goes in via FTP to fetch it.

New recorder does all the recording and encoding in the Flash Player. Then sends the bytes over to Java for file save via AMF. Uses: flash.utils.ByteArray flash.events.SampleDataEvent org.bytearray.micrecorder.encoder.WaveEncoder fr.kikko.lab.ShineMP3Encoder

AUDIO RECORDING

Basic playback of recorded files using the recorder module or uploaded MP3 files.

Hooks into system through AMF.

AMF not necessary.

AUDIO PLAYBACK

Not all Flash

More than Flash… of course.

• The markup is HTML(5). • Use of CSS3 for gradients, shadows, text. • TinyMCE and Flex integration. • Heavy use of JavaScript and jQuery. • jQuery makes JavaScript (fairly) usable!

Actually really cool that we can do this now.

OTHER TECH…

A few words… • Most web applications I’m involved in are a wide

mixture of both front-end and back-end tech. • This has been the case for many years – it just

makes sense in many cases. • If you are requiring Flash for core functionality –

may as well use it more liberally. • HTML(5) has its place… so does Flash and Flex. • Seems people are OVERREACTING. Cut it out. ;)

HTML & FRIENDS (+FLASH)

Thank you.

@JosephLabrecque