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:
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"?>
width="100%" height="100%" >
public var iFrameURL :String = "https://www.google.com/maps/embed/v1/place?key=YourKey&q=Lake+Compounce+Bristol+CT";
The source of the IFrame component refers to the Google Maps URL.
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:
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;
<mx:VBox width="100%" height="100%">
<s:Button click="button1_clickHandler(event)" label="Toggle Google Map" />
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:
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?