Floorplanner Tech Blog

Recently I’ve been working with Javascript in combination with XML and I found these methods quite usefull to switch between a string and a xml object.

function stringToXML( pString ){
	var lXML;
	// IE
	if( window.ActiveXObject ){
		lXML = new ActiveXObject( 'Microsoft.XMLDOM' );
		lXML.async = 'false';
		lXML.loadXML( pString );
	// no IE
	} else {
		var lParser = new DOMParser();
		lXML = lParser.parseFromString( pString, 'text/xml' );
	}
	return lXML;
}

function xmlToString( pXML ){
	// IE
	if( window.ActiveXObject ){
		return pXML.xml;
	// no IE
	} else {
		return ( new XMLSerializer() ).serializeToString( pXML );
	}
}

In my previous post I thought that swfobject was causing the wmode=transparent problem in IE. However, I was wrong. Folkert told me that swfobject only passes the parameter to the Flash Player, swfobject is only the messenger.

Instead of wmode=transparent I also tried wmode=opaque as Jorrit suggested, but it didn’t make a difference. I set up three wmode sample pages to test the issue:

• regular
• transparent
• opaque

When you’re viewing the transparent and the opaque page in Internet Explorer you can see that editing the walls is quite difficult. You can also see that panning the design results in a strange elastic movement. I hope to find a solution soon….

Update
I’ve been reading this post and it looks like it’s something we have to live with…

SWFs using wmode actually perform slightly different from SWFs that have a default wmode. The difference is that when you are running as transparent or opaque, events are delayed until an onEnterFrame. If you are running at a slow frame rate and drive your movie with setInterval or use any number of other events, you are back to your slow frame rate. The real kicker is that SWFs in IE have this bug. SWFs in Firefox are just fine.

Last week we accidentally introduced a nasty bug into the Floorplanner Flash app. Well, actually it wasn’t the Flash app that caused the problem. It appeared to be a weird issue in swfobject.

We wanted to layer some html content over the Flash app, so we added this line to the JavaScript:

swfObject.addParam( "wmode", "transparent" );

By doing that, the Flash app started acting really strange in Internet Explorer (6&7). I removed the line today and all seems fine again…

Today I had (actually I still have) an issue with subdomains, SWF’s and Javascript. For the Floorplanner we communicate with our Flash application via Javascript (using ExternalInterface). On www.floorplanner.com everything works fine, but when I tried to use a subdomain (like whatever.floorplanner.com) an error appeared. First I thought it was a Javascript error, but it turned out to be the Flash Security Sandbox blocking the communication.

To solve this I added the following line to the Flash app:

System.security.allowDomain('http://whatever.floorplanner.com/');

It did the trick, but the thing is that every (paying) user can create and use its own subdomain, so i needed something like this:

System.security.allowDomain('http://*.floorplanner.com/');

That didn’t work. After trying all kinds of different things like crossdomain.xml, I settled with

System.security.allowDomain('*');

This feels like a really nasty hack, but it’s all I can come up with. There has to be a better way…

When you try to submit a form from Javascript, using form_remote_tag, like this:

Rails:

form_remote_tag :url => {:controller => "somecontroller", :action => "} , :html => {:id => "ajax-form-1">

If you just invoke form.submit(), like this:

var form = document.getElementById('ajax-form-1');
if(form)
   form.submit();

the form will be submitted to a new page, that’s not soo ajaxy you now think. Instead use:

var form = document.getElementById('ajax-form-1');<br />
if(form.onsubmit()){
   form.submit();
}

Now your form will be submitted on the AJAX way!

When using:

var lElements = ["el1","el2","el3"];
foreach(var el in arr) {
  alert(el);
}

in Javascript and afterwards you add the Prototype library, don’t forget it extends your array! When doing the foreach, all extra functions that the (still wonderfull) Prototype Library adds, will be displayed. I had some weird problems after adding the javascript source file of Prototype. It took me a while to understand why my code didn’t do what I intended. After displaying this foreach loop, I saw the problem!

UPDATE:
To fix the issue I discussed some days ago(see below) use:
System.security.allowDomain(“http://ip-adress”);
ip-adress is the IP you are developing on! This will fix the security issues!

While trying to let Actionscript talk to Javascript using the External Interface API of Actionscript I bounced upon a problem when Actionscript tried to invoke this Javascript function. In Firefox 2.0.0.2 an alert message shouted to me: “Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.].”.

My precise environment was, the html running on the localhost (Rails application) and the swf from an other domain and this seemed to be the problem. When I deployed the Rails application to this server, there was no problem at all invoking these functions. It looks like a bug in the flash player, cause I tried all the security settings possible in flash, the famous crossdomain.xml, adding all locations to the flash settings but no result. Somehow the SWF from that other domain had some troubles talking to the local javascript.

My way to solve this issue was to load the SWF also from the localhost. Everything works perfectly and I can continue testing.

After some diggin’ I finally figured out why Internet Explorer didn’t display my SWF movie. The width and the height of my movie are related to the width and height of the Stage. It seems that in IE the Stage isn’t available in the first frame. Therefore the movie has to wait a frame before it can acces the Stage properties.

public function Application() {
  addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
private function onEnterFrame( pEvent:Event ) : void {
  removeEventListener( Event.ENTER_FRAME, onEnterFrame );
  setWidth( stage.stageWidth );
  setHeight( stage.stageHeight );
}