Tom Lauck’s Deseloper.org

Get Yourself a Flex Application Name

author:

While working with ExternalInterface on a recent Flex project it became a little cumbersome accessing the embedded SWF several times.  This is especially true if there is more than one SWF in a given page. Typing document.getElementById gets old fast as well. Therefore, this issue illustrates the need for core or global methods that can be reused, especially if you aren’t using a framework such as Prototype or jQuery.

When a SWF is embedded into a page, it naturally becomes a part of window.document/document/window (Internet Explorer).

The document is contained by the window object and may contain any number of elements.

Because of this, it is rather simple to access a SWF to pass a method into a Flex app.  The idea is simply to check whether or not the browser is IE (in this example we will use a UA check), then return the element with the appropriate SWF name:

function getSWFApp(appName) {
	if (navigator.appName.indexOf ("Microsoft") !=-1) return window[appName];
	else return document[appName];
}

Of course, there is more than one way to skin a cat. In this case, a more traditional approach:

function getSWFApp(appName) {
	return document.getElementById(appName);
}

Elsewhere in your code you can then pass a method to the SWF using dot syntax just as you would by using document.getElementById:

getSWFApp("ExampleApp").exampleEventName(exampleEventParams);

As an alternative to document.getElementById, returning the object from the document works like a charm. More importantly, a global method to retrieve a SWF saves many keystrokes. As an added bonus, this method can easily be added to the Flex HTML wrapper, thus allowing quick and easy deployment of applications using ExternalInterface.

Feb 27 2008

Modest Maps: Yahoo Style Flex Component Markers

author:

View example and download source.

History

Creating software with mapping should be a figurative walk in the park given the tools available from the major map api players like Google and Yahoo. However, when creating software on the Flash platform that needed mapping, my immediate choice was to go with Yahoo, since they have a history of being Flash friendly.

After investigating and implementing the examples Yahoo providing using the ASTRA Web Api, and in the end the solution as a whole seemed to work, albeit not as robust or simple as I would have liked. All was apparently well until production time. Once I deployed to the web, with a DOCTYPE of xhtml-transitional, the map ceased to dispatch the onMapLoad event.

As an alternate AS3/Flex solution I discovered Modest Maps. The hitch was that using Modest Maps would require building custom own components (such as Zoom, Map Types, Markers, Etc), for modest maps displays the map only.

Solution

I really take a liking Yahoo’s map markers. There was a hitch, Modest Maps was written in AS3 only. Therefore, when I went to integrate a Flex based marker into the map, the two were incompatable.

My solution:

  • Reworked the Modest Maps core to use FlexSprite and UIComponent (which inherits FlexSprite).
    • As a site note: I’m not sure that was completely necessary and would have rather not touched the core, but I was in get’er done mode.
  • Built a marker that looked an functioned like Yahoo’s, with the ability to add any flex component inside.
  • Created some events that bubble up when the user clicks inside the marker.
  • Created functionality to open a selected marker, based on its Id.

I see my work as a mere starting point. As Google states, “release early, release often.” So, please view the example, download the source and play. I would love to see where things go with it, if any.

Jan 1 2008

Test Drive with Adobe’s PHP RIA SDK

author:

A couple weeks ago, in response to a Flex tip I posted, Mike Potter from Adobe commented and left a link to his Google Group for the PHP RIA SDK. Having worked with Flex and AMFPHP, I found this SDK quite interesting. I noted that it had various basic/core examples that give a nice start when beginning your application. Included are examples using the Flex/AJAX Bridge, PHP/XML/Flex, AMFPHP, and (my new favorite) WebOrb.

It can be downloaded, here (2.5M zip).

Of course, you will probably end up making your *own* SDK, but I thought this was a good foundation, especially given the fact that it includes two different remoting options with sample services. From there, you can pretty much do anything. Additionally, now that Flex has been made available for Mac (Beta), workflows can become even quicker.

Nov 29 2006

Flex AMFPHP Variables

author:

Working with XML in AS2 is to say the least, one of the dumbest and most redundant things in the world to me. Because of this, I use Flash Remoting. It just makes more sense. So when I moved on to Flex, even though XML is native in AS3, I still went with remoting. Mike Potter from Adobe had a basic tutorial on getting started with Remoting in Flex…for it is a little differnent from Flash. And those differences can really throw you, and leave yourself cursing at your own stupidity.

Here was my issue: Everything was going fine with my development, and I was falling even more in love with Flex and then all of a sudden, variables were not getting passed when I started debugging. Huh? So to make a long story short, the syntax for passing variables in Flex is a little different from the the standard/basic AMFPHP structure:

Rather than something like this:

public function getAllPages(){
	gateway = new RemotingConnection("http://localhost/flashservices/gateway.php");
	gateway.call( "SitePages.getAllPages(php_variable)", new Responder(handleGetAllPages, onFault));
}

Notice the placement of the variable “php_variable” above.

You do something like this:

public function getAllPages(){
	gateway = new RemotingConnection("http://localhost/flashservices/gateway.php");
	gateway.call("SitePages.getAllPages", new Responder(handleGetAllPages, onFault), php_variable);
}

Oct 31 2006

Newer Entries »