Karl Johnson
My thoughts on the RIA world
Thursday December 14, 2006
Integrating Yahoo! Maps into your Flex 2 Application without using the Flash IDE
Map It!
Yahoo! Maps is built in Flex and is wrapped in a SWC so developers can very easily integrate slick mapping into their Flex apps by just dropping in a component. Very cool! Oh wait...that is Flex 1.5 it is built in! It natively integrates perfectly if you are building a 1.5 app, but chances are that these days you are using Flex 2.0 as your platform or choice.
When I decided a few days ago to try and integrate Yahoo! Maps into one of my Flex 2 apps, I did some searching to find out the best way to do it. I even asked around on the Yahoo! dev mailing lists. Just about what everyone says is "Open the Flash 8 IDE, create a new fla movie, and import the flash component from Yahoo!. Then add the functions in the AS scripting window that will interact with the map....". And I am sure that solution works fine. But for most Flex developers, creating flash movies to do pieces of functionality for our Flex apps is just not the way we roll. Maybe it is just me, but I really wanted to do this purely in Flex.
So here we go - not an earth shattering solution, just a detailed example of how to integrate Yahoo! Maps with flex on flex, without fla's or iFrames.
What is Required?
1. Download the Yahoo! Maps SWC
Here
2. Get a free App ID from Yahoo!
Here
3. Create a new Flex 1.5 SWF with the Maps component
This is a very simple Flex 1.5 app. To get the basics working, you just need to compile one mxml file into a swf. In my case, I called the swf maps.swf. Since the purpose of this blog is not really to teach Yahoo! Maps, I will refer you to their really good starter guide here. But if you want to take a look at what I implemented, check out my source code here.
3. Establishing the receiving LocalConnection
We have to use a LocalConnection to allow the Flex 2 and 1.5 apps to talk. It does not work quite as natively as you may think because both AVM‘s are in play in this situation.
In you mxml file for your 1.5 app, create a variable of type LocalConnection, and then call the LocalConnection constructor for your class instance on initialize of the application. Also on init, you are going to create a function that is accessible via the LocalConnection so your Flex 2 app can talk to the map. In this function, you will perform any API calls that are needed, and can also accept parameters form your Flex 2 application (which in my example I take an address from Flex 2 and add it as a pushpin on the map). I call this function showListing(address). Take a look at my mxml source for this here. Don't forget to call "connect('connectionName')" on your LocalConnection as well, and make sure that the name of the LC you provide as a string is the exact name that you use on the sending LocalConnection end - which will be in the Flex 2 app.
4. Create a new Flex 2 Project
Using FlexBuilder or whatever your way of choice is, go ahead and create or open the Flex 2 project/mxml file that is your main Flex application. Make sure that you have compiled your 1.5 app into a swf so we can easily load it into our main app. Create a SWFLoader component instance and set the source to be the 1.5 SWF you compiled. Embedded always makes for a better end user experience in my opinion (source=“@Embed(‘maps.swf‘)”). My Flex 2 source is here.
5. Establishing the sending LocalConnection
Same steps to start off here, just create the LocalConnection instance and call the LocalConnection constructor on initialize of your application (or whenever you want to start using the maps). In my example, we don‘t need to have the two swf‘s actually talk unless you want to allow a user using you Flex 2 app add something to the Yahoo! Map. So on click of the button, we call “send()” on our LocalConnection and pass it the name of the LC, which again is the same as the name used in the 1.5 app. Your connection is registered in the FlashPlayer under this name – and if they are not the same on the sending and receiving end, they will not be able to talk to each other. In addition to the LC name, we are going to pass send() the name of the function we want to interact with, as well as the paramater(s) we want to supply that method with. In this case, we are going to call the showListing function which we defined on the receiving LocalConnection. One param for us, the address that we want to have added as a pushpin, which we will get out of the flex 2 text input. My Flex 2 source is here.
Done!
So, I know I didn‘t paste in all of the pretty formatted code examples to show exact step by step, but hopefully the linked code examples will show you everything you need to know!
