Check out our Angular Book Series.

Using Flex and HTML together

I wrote an article for this month's newsletter that harken back to our past as Flex developers.

I was recently contacted by a developer who wanted to use the Flex iFrame component to open up a Google Maps link. This was an experienced developer, but one that is new to Flex. He didn't know where to start. I gave him some input, and thought I'd do a write up about it.

What is Flex iFrame?

The Flex iFrame component is a component that uses an iFrame to open up an HTML page over a SWF. This makes it appear as if the HTML portion of the app was part of the Flex app. It is a kludgy way to get HTML and Flex talking to each other, but is functional for certain use cases.

Get the Component Code

The first step is to get the code, which you can do from this GitHub repository. Drill down into the repository to get at the component's code . The code is in two classes, the IFrame class and the IFrameExternalCalls class.

To use this code, you have two options. The easiest is to copy the two classes into your project. The second is to create your own library project and a SWC of the component. The latter is preferred for reusability purposes, but for the sake of this sample we'll use the first option and keep it simple.

Unfortunately, Flash Builder had trouble with the class names, IFrame and IFrameExternalCalls. I believe this is because the 'I' at the front of a class name is convention that denotes the class as an interface, not a real class. As such I had to rename the two classes for them to be usable. I chose FlexIFrame and FlexIFrameExternalCalls. The two classes have references to each other, and each one will have to be modified to reference their newly named counterpart. If the Flash Builder refactor function doesn't perform the code changes for you, a quick search and replace will.

Get your Google Maps URL

Before opening up a URL in the app you have to determine what URL you want to open. Since my new developer friend wanted to open something in Google Maps, the first thing is to get a Google Maps API Key. This is a simple form for you to fill out.

Next you need to create a URL. There are a bunch of different options for creating Google Maps URLs. I am going to bring up a map that points to the Water Park I'd like to be at today. This is the URL:

https://www.google.com/maps/embed/v1/place?key=yourKeyHere=Lake+Compounce+Bristol+CT

With the URL in hand, we can go into the code.

Using the Flex IFrame

This is the code that will open up load a Flex app with an iFrame. It is a simple MXML application, and only uses the Flex iFrame component :


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:flexiframe="com.google.code.flexiframe.*"
width="100%" height="100%" >

<fx:Script>
<![CDATA[
[Bindable]
public var iFrameURL :String = "https://www.google.com/maps/embed/v1/place?key=YourKey&q=Lake+Compounce+Bristol+CT";
]]>

</fx:Script>
<flexiframe:FlexIFrame id="iFrameBySource"
width="100%" height="100%"
source="{this.iFrameURL}"
/>

</s:Application>

The source of the IFrame component refers to the Google Maps URL.

See this app run here, or view the full source

Mixing Flex and HTML

The previous example just used an iFrame component. However, the iFrame can exist and be placed around other Flex elements; making the iFrame HTML content look as if it were part of the Flex application. This sample will show you how to hide or display the Flex iFrame with the click of a button:

This is the code:


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:flexiframe="com.google.code.flexiframe.*"
width="100%" height="100%">

<fx:Script>
<![CDATA[
[Bindable]
public var iFrameURL :String = "https://www.google.com/maps/embed/v1/place?key=yourkey&q=Lake+Compounce+Bristol+CT";
protected function button1_clickHandler(event:MouseEvent):void
{
iFrameBySource.visible = !iFrameBySource.visible;
}
]]>

</fx:Script>
<mx:VBox width="100%" height="100%">
<s:Button click="button1_clickHandler(event)" label="Toggle Google Map" />
<flexiframe:FlexIFrame id="iFrameBySource"
width="100%"
height="100%"
source="{this.iFrameURL}" visible="false"
/>

</mx:VBox>
</s:Application>

The map is put in a VBox, which includes a button above the iFrame. The iFrame component's visibility is set to false by default. On the click of the button, the iFrame's visibility is toggled, either displaying or hiding the component.

This is the default load of the app, with the map hidden:

This is the app with the map displayed, after clicking the button:

See this app run here, or view the full source

Final Thoughts

Sometimes this Flex stuff feels like a walk down memory lane, but half of my consulting work is still in the ActionScript and Flex realm. I feel lucky to be able to balance my time between my old world and the new world.

What have you been up to?

Sign up for DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
rgd713's Gravatar Hi Jeff, You mention issues with the Class names..."Unfortunately, Flash Builder had trouble with the class names, IFrame and IFrameExternalCalls. I believe this is because the 'I' at the front of a class name is convention that denotes the class as an interface, not a real class. As such I had to rename the two classes for them to be usable."

what happened before the class names were changed? Did it present a gray screen that no data loaded into?
# Posted By rgd713 | 11/25/15 10:28 AM
Jeffry Houser's Gravatar @rgd713

Honestly, I don't remember it was quite a while ago. I think there was a problem compiling the app.
# Posted By Jeffry Houser | 12/3/15 8:47 AM
satya's Gravatar I am unable to run the Map sample, I am using Flash Develop and Adobe Flash Builder, could you please send me the working code in zip file, this is very urgent please.
Thanks in advance
# Posted By satya | 7/18/17 2:25 PM
Jeffry Houser's Gravatar @satya

You can find the source link inside the post at: https://www.jeffryhouser.com/exampleswfs/flexifram...
# Posted By Jeffry Houser | 7/27/17 8:58 AM
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.