Flex
"Real-World Flex" by Adobe's Christophe Coenraets
Tips and tricks from Adobe's intrepid Flex Evangelist
May. 23, 2006 06:00 AM
Some people take the dog for a walk, other go play a round of golf. Not Christophe Coenraets. His idea of a good time is to illustrate Flex and JMS integration by extending a simple "realtime feed" application that he built a while back! Web Developer's & Designer's Journal is proud to bring you each month two of the month's best tips from Adobe's intrepid Flex Hero.
Using Flex 2 with Flash Media Server
I recently built a proof of concept that included a call center integration scenario. The use case revolved around a user getting stuck while trying to complete an online process, and engaging in a real time collaboration session with a customer services representative to sort out the problem.
The nature of the collaboration between the end-user and the support representative was very rich and included the following features:
- Chat
- Videoconference / video chat
- The support representative was able to "drive" the end-user's UI
- The support representative was also able to remotely fill in the user's form. In other words, data typed in the support rep's application automatically appeared (in real time) in the user's app.
From the end-user point of view, all this was done "in context" without ever leaving the application, and without starting any other application.
The application turned out to be really easy to implement with Flex 2:
- Features (1) and (3) were enabled by the new Message Service in Flex 2.
- Feature (4) was enabled by the Data Services in Flex 2. Using the data services, two clients can point to the same destination (the same data set). Changes made by one client are automatically reflected in the other client. No code required!
- Feature (2) was enabled by the Flash Media Server.
Here's a simple example of how to integrate Flex and Flash Media Server to support rich media streaming and video-conferencing. This is surprisingly easy to do with just a few lines of code.
To run this example you will have to:
- Install FlexBuilder 2. You can download the beta here: http://labs.adobe.com/.
- Install the Flash Media Server (you can download a free developer edition here: www.adobe.com/products/flashmediaserver/
- Download the sample application code here: http://coenraets.com/apps/fms.zip
- In C:\Program Files\Macromedia\Flash Media Server 2\applications\flex_videoconference, create a directory called flex_videoconference and copy the main.asc file in that directory
- Create a FlexBuilder project and copy fms.mxml and VideoContainer.as in that project
- Run fms.mxml
The application starts your webcam, publishes the captured video stream to Flash Media Server.and then "plays" the video streamed by Flash Media Sever in a second video component.
Embedding HTML in a Flex Application using an IFrame
I have recently been involved in several projects where there was a need to embed HTML content in a Flex application. Depending on the specific requirements of your application, there are a couple of approaches you can use...
- The Flex Text components (Label, Text, TextArea) support basic HTML formatting through their htmlText attribute. You can find an example of this approach in the Samples Explorer where the Code Viewer uses the HTML capabilities of the TextArea to provide syntax coloring.
- You can embed a Flex application in a page that also contains traditional HTML. The Flex application can communicate with the HTML document (and the other way around) through JavaScript. You can also embed multiple Flex applications in a page. These applications can then communicate directly with each others using the LocalConnection API.
Note: I am not advocating that you use this technique as your default approach to combine Flex and HTML content. Depending on your application, the approaches (1) and (2) described above may represent a better solution. If these approaches don't meet your specific requirements, the technique implemented in the attached example can be very useful.
In some cases, these approaches may not go far enough: You may need a single Flex application that embeds HTML content with no restriction in terms of HTML tags and features supported.
In this case, another approach is to position an IFrame on top of a specific area of your Flex application to provide a container for the HTML content which will then appear embedded in the application. This technique may initially sound complex or cumbersome to implement, especially if the different containers of your Flex application resize dynamically and you have to keep the IFrame in sync. In the attached example, I abstracted the complexity of this approach in an IFrame component written in mxml. The IFrame component extends Canvas and is used like any other Flex container. Behind the scenes, it acts as a proxy for the actual HTML IFrame (Figure 1). For example, when the IFrame component is resized or moved it automatically asks the HTML document to resize/move the actual IFrame.
About Christophe CoenraetsChristophe Coenraets currently works as a Senior Technical Evangelist at Adobe. Before joining Adobe, Christophe was an evangelist at Macromedia, focusing on Rich Internet Applications and Enterprise integration. Prior to Macromedia, Christophe was the head of Java and J2EE Technical Evangelism at Sybase, where he started working on Java Enterprise projects in 1996. Before joining Sybase in the US, Christophe held different positions at Powersoft in Belgium, including Principal Consultant for PowerBuilder, and Manager of the Professional Services organization. Before joining Powersoft, Christophe worked as a developer and architect on several retail and BPM projects. Christophe has been a regular speaker at conferences worldwide for the last 10 years.
.gif)
This is a deal that has been around for all of this year, and I know the NYC-based guy charged with pulling the technical pieces together. He has been looking at software platforms for months and separating contenders from pretenders based on the criteria he's established. To my knowle...
3Leaf Systems, the well-funded start-up, dropped its fig leaf Tuesday and took a running jump into the pools of memory, I/O and cache that it can construct and deconstruct at will based on the application, creating scale-up shared-memory SMP systems the likes of mainframes, proprietary...
Funambol, a provider of open source mobile cloud sync and push email for billions of phones, today announced it has acquired Zapatec, Inc., a leader of AJAX web 2.0 frameworks. The acquisition enables Funambol to uniquely address the industry pervasive device fragmentation challenge th...
Plone and Drupal are two leading open source Content Management Systems (CMS). Both were recognized in the 2009 Open Source CMS awards, run by Packt Publishing. Both also have large installed bases and large developer communities. This is made evident by some quick searching on Googl...
SOASTA, a provider cloud testing, today announced that performance engineers can now build web application tests in Apache JMeter, the most popular open source load testing tool, and run them in SOASTA's Global Test Cloud. Deploying JMeter tests to the Cloud has been a complex, time-co...
Yahoo! Inc. (Nasdaq:YHOO), a leading global Internet company, took its second major step in five months towards open-source cloud computing today, debuting an open source version of Traffic Server, a high performance application server for builders of cloud services. Traffic Server ena...
