leveraging blazeds, java, and flex: dynamic data transfer
DESCRIPTION
Presentation for 360|Flex 2012 in Denver.TRANSCRIPT
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