Click here to close now.

Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex, Java, ColdFusion, FlexSeminar.com

Adobe Flex: Article

"Real-World Flex" by Adobe's Christophe Coenraets

Tips and tricks from Adobe's intrepid Flex Evangelist

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:

  1. Chat
  2. Videoconference / video chat
  3. The support representative was able to "drive" the end-user's UI
  4. 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:

  1. Install FlexBuilder 2. You can download the beta here: http://labs.adobe.com/.
  2. Install the Flash Media Server (you can download a free developer edition here: www.adobe.com/products/flashmediaserver/
  3. Download the sample application code here: http://coenraets.com/apps/fms.zip
  4. 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
  5. Create a FlexBuilder project and copy fms.mxml and VideoContainer.as in that project
  6. 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...

  1. 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.
  2. 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.

More Stories By Christophe Coenraets

Christophe 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.

Comments (3) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
SShah 06/14/06 05:02:53 AM EDT

Hello,

i have tried this example but getting the error that NetConnection object cannot be connected.Can anyone help me resolve this issue.

Web Developer's & Designer's Journal 05/22/06 04:16:47 PM EDT

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.

Web Developer's & Designer's Journal 05/22/06 03:30:48 PM EDT

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.

@ThingsExpo Stories
GENBAND has announced that SageNet is leveraging the Nuvia platform to deliver Unified Communications as a Service (UCaaS) to its large base of retail and enterprise customers. Nuvia’s cloud-based solution provides SageNet’s customers with a full suite of business communications and collaboration tools. Two large national SageNet retail customers have recently signed up to deploy the Nuvia platform and the company will continue to sell the service to new and existing customers. Nuvia’s capabilities include HD voice, video, multimedia messaging, mobility, conferencing, Web collaboration, deskt...
The WebRTC Summit 2014 New York, to be held June 9-11, 2015, at the Javits Center in New York, NY, announces that its Call for Papers is open. Topics include all aspects of improving IT delivery by eliminating waste through automated business models leveraging cloud technologies. WebRTC Summit is co-located with 16th International Cloud Expo, @ThingsExpo, Big Data Expo, and DevOps Summit.
SYS-CON Media announced today that @WebRTCSummit Blog, the largest WebRTC resource in the world, has been launched. @WebRTCSummit Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @WebRTCSummit Blog can be bookmarked ▸ Here @WebRTCSummit conference site can be bookmarked ▸ Here
SYS-CON Events announced today that Cisco, the worldwide leader in IT that transforms how people connect, communicate and collaborate, has been named “Gold Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Cisco makes amazing things happen by connecting the unconnected. Cisco has shaped the future of the Internet by becoming the worldwide leader in transforming how people connect, communicate and collaborate. Cisco and our partners are building the platform for the Internet of Everything by connecting the...
Temasys has announced senior management additions to its team. Joining are David Holloway as Vice President of Commercial and Nadine Yap as Vice President of Product. Over the past 12 months Temasys has doubled in size as it adds new customers and expands the development of its Skylink platform. Skylink leads the charge to move WebRTC, traditionally seen as a desktop, browser based technology, to become a ubiquitous web communications technology on web and mobile, as well as Internet of Things compatible devices.
SYS-CON Events announced today that robomq.io will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. robomq.io is an interoperable and composable platform that connects any device to any application. It helps systems integrators and the solution providers build new and innovative products and service for industries requiring monitoring or intelligence from devices and sensors.
Wearable technology was dominant at this year’s International Consumer Electronics Show (CES) , and MWC was no exception to this trend. New versions of favorites, such as the Samsung Gear (three new products were released: the Gear 2, the Gear 2 Neo and the Gear Fit), shared the limelight with new wearables like Pebble Time Steel (the new premium version of the company’s previously released smartwatch) and the LG Watch Urbane. The most dramatic difference at MWC was an emphasis on presenting wearables as fashion accessories and moving away from the original clunky technology associated with t...
Docker is an excellent platform for organizations interested in running microservices. It offers portability and consistency between development and production environments, quick provisioning times, and a simple way to isolate services. In his session at DevOps Summit at 16th Cloud Expo, Shannon Williams, co-founder of Rancher Labs, will walk through these and other benefits of using Docker to run microservices, and provide an overview of RancherOS, a minimalist distribution of Linux designed expressly to run Docker. He will also discuss Rancher, an orchestration and service discovery platf...
SYS-CON Events announced today that Akana, formerly SOA Software, has been named “Bronze Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Akana’s comprehensive suite of API Management, API Security, Integrated SOA Governance, and Cloud Integration solutions helps businesses accelerate digital transformation by securely extending their reach across multiple channels – mobile, cloud and Internet of Things. Akana enables enterprises to share data as APIs, connect and integrate applications, drive part...
SYS-CON Events announced today that Vitria Technology, Inc. will exhibit at SYS-CON’s @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Vitria will showcase the company’s new IoT Analytics Platform through live demonstrations at booth #330. Vitria’s IoT Analytics Platform, fully integrated and powered by an operational intelligence engine, enables customers to rapidly build and operationalize advanced analytics to deliver timely business outcomes for use cases across the industrial, enterprise, and consumer segments.
SYS-CON Events announced today that Solgenia will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY, and the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Solgenia is the global market leader in Cloud Collaboration and Cloud Infrastructure software solutions. Designed to “Bridge the Gap” between Personal and Professional Social, Mobile and Cloud user experiences, our solutions help large and medium-sized organizations dr...
SYS-CON Events announced today that Liaison Technologies, a leading provider of data management and integration cloud services and solutions, has been named "Silver Sponsor" of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York, NY. Liaison Technologies is a recognized market leader in providing cloud-enabled data integration and data management solutions to break down complex information barriers, enabling enterprises to make smarter decisions, faster.
Cloud is not a commodity. And no matter what you call it, computing doesn’t come out of the sky. It comes from physical hardware inside brick and mortar facilities connected by hundreds of miles of networking cable. And no two clouds are built the same way. SoftLayer gives you the highest performing cloud infrastructure available. One platform that takes data centers around the world that are full of the widest range of cloud computing options, and then integrates and automates everything. Join SoftLayer on June 9 at 16th Cloud Expo to learn about IBM Cloud's SoftLayer platform, explore se...
@ThingsExpo has been named the Top 5 Most Influential M2M Brand by Onalytica in the ‘Machine to Machine: Top 100 Influencers and Brands.' Onalytica analyzed the online debate on M2M by looking at over 85,000 tweets to provide the most influential individuals and brands that drive the discussion. According to Onalytica the "analysis showed a very engaged community with a lot of interactive tweets. The M2M discussion seems to be more fragmented and driven by some of the major brands present in the M2M space. This really allows some room for influential individuals to create more high value inter...
The world's leading Cloud event, Cloud Expo has launched Microservices Journal on the SYS-CON.com portal, featuring over 19,000 original articles, news stories, features, and blog entries. DevOps Journal is focused on this critical enterprise IT topic in the world of cloud computing. Microservices Journal offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. Follow new article posts on Twitter at @MicroservicesE
SYS-CON Events announced today the IoT Bootcamp – Jumpstart Your IoT Strategy, being held June 9–10, 2015, in conjunction with 16th Cloud Expo and Internet of @ThingsExpo at the Javits Center in New York City. This is your chance to jumpstart your IoT strategy. Combined with real-world scenarios and use cases, the IoT Bootcamp is not just based on presentations but includes hands-on demos and walkthroughs. We will introduce you to a variety of Do-It-Yourself IoT platforms including Arduino, Raspberry Pi, BeagleBone, Spark and Intel Edison. You will also get an overview of cloud technologies s...
SYS-CON Events announced today that SafeLogic has been named “Bag Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. SafeLogic provides security products for applications in mobile and server/appliance environments. SafeLogic’s flagship product CryptoComply is a FIPS 140-2 validated cryptographic engine designed to secure data on servers, workstations, appliances, mobile devices, and in the Cloud.
Containers and microservices have become topics of intense interest throughout the cloud developer and enterprise IT communities. Accordingly, attendees at the upcoming 16th Cloud Expo at the Javits Center in New York June 9-11 will find fresh new content in a new track called PaaS | Containers & Microservices Containers are not being considered for the first time by the cloud community, but a current era of re-consideration has pushed them to the top of the cloud agenda. With the launch of Docker's initial release in March of 2013, interest was revved up several notches. Then late last...
SOA Software has changed its name to Akana. With roots in Web Services and SOA Governance, Akana has established itself as a leader in API Management and is expanding into cloud integration as an alternative to the traditional heavyweight enterprise service bus (ESB). The company recently announced that it achieved more than 90% year-over-year growth. As Akana, the company now addresses the evolution and diversification of SOA, unifying security, management, and DevOps across SOA, APIs, microservices, and more.
After making a doctor’s appointment via your mobile device, you receive a calendar invite. The day of your appointment, you get a reminder with the doctor’s location and contact information. As you enter the doctor’s exam room, the medical team is equipped with the latest tablet containing your medical history – he or she makes real time updates to your medical file. At the end of your visit, you receive an electronic prescription to your preferred pharmacy and can schedule your next appointment.