Presentation for 360|Flex 2012 in Denver.

1. LEVERAGING BLAZEDS, JAVA, AND FLEX:
DYNAMIC DATA TRANSFER
Joseph Labrecque
360|Flex – April 17th 2012

2. Joseph Labrecque, MA
University of Denver - OTL
Senior Interactive Software Engineer
Adjunct Faculty
Fractured Vision Media, LLC
Proprietor
Twitter: @JosephLabrecque
Web: http://josephlabrecque.com/

3. Who is using ColdFusion?

4. Who is using Java?

5. Who is using BlazeDS?

6. Who is using PHP + AMFPHP?

7. Who is using FLEX?

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

9. Technology Choices

10. BLAZEDS
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).

11. FLEX
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.

12. JAVA
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.

13. SPRING
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.

14. SPRING + BLAZEDS
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.

15. Systems Configuration

16. CHOICES / REASONS
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!

17. BLAZEDS CONFIGURATION
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.

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

19. OFFICIAL ADOBE RESOURCES
http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

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

21. Let’s talk code

22. Action Message Format
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!

23. AMF0
Introduced in Flash Player 6 (2001).
Number
Boolean
String
Object
Null
Array
Object/Array End

24. AMF3
Introduced in Flash Player 9 (2006).
Undefined
Null
False
True
Integer
Double
String
XML
Date
Array
Object
XML End

25. REMOTEOBJECT
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.

26. ENDPOINT
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>

27. DESTINATION
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"})

28. RESULT/FAULT
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;
}

29. METHOD
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" ...

30. MXML
<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>

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

32. ActionScript – AMF Result
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;
}

33. ActionScript – AMF Fault
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!");
}

34. Specific Use Cases

35. DU ASSESS-IT!
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/

36. SINGLE UPLOAD W/ TINYMCE
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!

37. MULTI-FILE UPLOAD
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.

38. IMAGE GALLERY VIEWER
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.

39. AUDIO RECORDING
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

40. AUDIO PLAYBACK
Basic playback of recorded files
using the recorder module or
uploaded MP3 files.
Hooks into system through AMF.
AMF not necessary.

41. Not all Flash

42. OTHER TECH…
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.

43. HTML & FRIENDS (+FLASH)
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. ;)

44. Thank you.
@JosephLabrecque