One of my main Flex projects is a content management system.  It is continually being developed and is in production as my employer’s backend.  I hope to make it an even more usable CMS solution by making it where it can be deployed for other websites.

With that future goal in mind, I needed to revisit my services-config.xml file.  I use AMFPHP and had previously hardcoded the endpoint.  We use SSL because the backend is used for more than just editing web pages.  So for it to work on another site, I would needed to edit the services-config.xml file and recompile.

I did a google search on services-config secure and found this page which was very helpful. This page was also an interesting read. Before reading these, I did not know you could use the tokens {server.name} and {server.port} in your services-config.xml file.

Here is my new services-config.xml file that will use SSL if the page is using SSL and regular HTTP if it is not.  I verified it was indeed using SSL with Charles.

The only problem with this solution is that when on an http page, the swf will try to access crossdomain.xml via https. On Firefox and IE this silently fails. However on Safari (version 3.1.1 as of this writing) this causes the browser to stall indefinitely if you do not have a signed certificate.

Safari will not prompt you to accept the certificate, nor will it silently fail like the other browsers. Since my application is the backend for a CMS, I just went to the homepage via https and accepted the certificate permanently. However, that would not be a good solution for a public application.

Last month, Dice had a programming contest with a prize of $4,000.  My entry, using Flex, was selected as one of the ten finalists.  Go check out the 10 mashups and if you think mine is the best vote for Buried Treasure. Thank you!!  Here is the link to place your vote. Voting lasts until May 31.

Also, I had a previous blog post on the challenges I ran into while creating my entry. If you are trying to put a Google Map inside a Flex application AND need Flex content to appear over the map, you’ll find it helpful.

Update: I placed third.  The voting results are posted here.  I was quite surprised at the vote.  I thought I would finish first or second and the maps application I thought would probably win ended up placing next to last.  I think that is the last of the contests for me.  Only paying clients going forward. 

SitePoint puts outs free newsletters that I subscribe to.  I was glad to see AIR mentioned in a recent issue of their Tech Times. The email concluded with “You’ll certainly be seeing plenty more about Adobe AIR on SitePoint in the coming months.”  That is exciting news because generally I have gone to SitePoint for PHP, MySQL, and web hosting information but elsewhere for all things Flash.

When I went to SitePoint a few days ago, I saw that they also had two contests going - one for the best Flex article and the second for the best AIR article.  I spent last weekend creating my entry for the Flex contest.  Wish me luck!

Update: I was runner-up and got a PDF book.  See here.

I received an email on Friday, March 27 about the Dice Programming Challenge.  (My inbox shows that I received the same email on the 19th, but I must have missed it.)  Anyway, the email stated “Show off your web-based application skills! Build a Google Maps mashup and you could win $4,000.”  I had used the Yahoo! maps Flash component before, but I had never used Google Maps in an application.  The contest deadline was March 31.  On Saturday morning, I decided to put my whole weekend into creating an entry for the contest using Flex.

I first read about Google’s searchmash site in a blog post at RIApedia. I had used an iframe before inside of a Flex application, but what I was really impressed with was how Google got Flex content to appear on top of their maps (notice the More combobox at the top and the Recent Searches slideout on the left.)  Previously I had always had to hide the iframe when showing an alert or popup window.

I used Firebug to peak at what they were doing.  For starters, they were using wmode = transparent. But the real trick was they were changing the z-index of the iframe from 300 to 100 whenever the Flex content needed to appear on top of the map. The flash stays at a z-index of 200, and as you know, containers with the higher z-index appear on top of containers with a lower z-index.

With that knowledge, I put together this application.

The contest finalists won’t be announced until a few weeks and then dice members get to vote for the winner.

I had to overcome a few challenges in the three days I had to get my entry finished, so I thought I would document them here.

The first problem was my Flex application could not get the Geocoding data from Google using an HTTPService.  The problem was that Google did not have the necessary crossdomain.xml file in place. I found a solution on the web - use PHP to create a proxy on your server with curl. Then specify the url of the HTTPService as the proxy php file. The proxy just passes the XML from Google to the flash file.

Another obstacle was that Internet Explorer 7 (running under Parallels) would, about half the time, not show the Google map in the iframe.  Firefox 3 would display it fine every time. What was going on?  I had used this component for handling the iframe. You specify the url for the iframe in Flex and it passes it to the wrapper.  Apparently, that was a problem for how I had used Google maps.  When I hardcoded the url for the iframe in the wrapper, the problem in IE7 went away. With a deadline fast approaching, I didn’t dig too deep to find a more robust solution.

With just a few hours before midnight on March 31, I tested the application in Firefox 2 on Windows. And that is when a huge bug surfaced. The Flex application in Firefox on Windows would not respond to any mouse click that appeared over the iframe! A user could not get past the introductory popup message.

After doing several searches, I found a blog post that mentioned the issue. They had discovered that their flash movie does actually respond to the mouse click, but that the hit area is way off.  Sure enough, when I clicked about 50 pixels south of the button, it responded.

The solution that worked for me evolved from this comment. I created a secondary iframe with a width and height of 100%, a position of absolute, and a z-index of 101.

Update 5/15/2008: Good news! The need for all this iframe z-index trickery is obsolete now.  Google just released their Google Maps API for Flash.