Two-way Communication between AS2 and JSFL

How to build a two-way communication between ActionScript and JSFL in the context of one XUL dialog in a Flash Extension.

And so – passing data from AS2 to JSFL is straight-forward with the AS2 function
XMLUI.set( controlName, value );

The opposite, however, is more problematic – how to get AS2 to receive data from JSFL.

The approach, described below definitely is not the most optimised in terms of performance. The reason to prefer it, is that it can be applied to all versions of Flash – from Flash 8 to Flash/Animate CC 2015.
As we won't rely neither on event listeners, nor on external interface, we will use polling, to check the state of XUL controls.

There is a certain peculiarity of XMLUI.get() function in AS2 – if we use XMLUI.get() to check the value of a given controller, we won't get its value, if we had not set this value with fl.xmlui.set(). To circumvent this bug, we'll set the values we're interested in during the initialization of the dialog, and more specifically during the creation of one of the buttons.
Pay attention to this line:

<button label="Set in SFW" oncreate="setFlashText( true );" oncommand="setFlashText();" />

To make sure that the first call in AS2 of the function XMLUI.get() will happen after the value has already been set by fl.xmlui.set() in JSFL, we rely on an interval with a reasonable delay, for example 50 milliseconds. It's possible to experiment with lower values.

Here is all the code necessary for the SWF.

Create an AS2 document with Stage size 285 x 60 and save it into the Commands folder as „JSFL-AS.fla“.
In the document create an Input Text with an Instance Name "flashTextbox" and a button with an Instance Name "setText" and put the following code as frame action script:

 

var istart:Number = setInterval( checkForUpdates, 5 );
function checkForUpdates():Void{
var updated:Boolean = Boolean( XMLUI.get("updated") === "true" );
if( ! updated ) return;
flashTextbox.text = XMLUI.get("jsflTextBox");
XMLUI.set("updated", "false");
}
function buttonClickHandler(){
XMLUI.set( "jsflTextBox", flashTextbox.text ); 
}
setText.addEventListener("click", buttonClickHandler);

 

All the code, necessary to create the dialog is below. Put the file "JSFL-AS.xml" inside the Commands folder.

 

<?xml version="1.0"?>
<dialog title="JSFL-AS communication">
<property id="updated" value="" ></property>
<hbox>
<textbox id="jsflTextBox" size="25" />
<button label="Set in SFW" oncreate="setFlashText(1);" oncommand="setFlashText();"/>
</hbox>
<spacer></spacer>
<spacer></spacer>
<separator></separator>
<flash width="285" height="60" src="JSFL-AS.swf" />
<separator></separator>
<spacer></spacer>
<spacer></spacer>
<grid>
<columns>
<column/>
<column/>
</columns>
<row>
<label value="           " />
<hbox>
<button label="Close" oncommand="fl.xmlui.cancel();"/>
</hbox>
</row>
</grid>
<script>
function setFlashText( oncreate ){
fl.xmlui.set( "updated", "true" );
if( oncreate ){
fl.xmlui.set( "jsflTextBox", "Hello World!" );
}
}
</script>
</dialog>

 

And here is the code for the command with which to invoke the dialog. Save it as "JSFL-AS.jsfl" in the Commands folder.

fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/JSFL-AS.xml" );

To recap:

All files – "JSFL-AS.jsfl", "JSFL-AS.fla", "JSFL-AS.swf" and "JSFL-AS.xml" have to be inside the Commands folder.
During execution of the command Commands > JSFL-AS a dialog box will open. It contains two textboxes with "Hello World!" inside them. Upon pressing the "Set in SWF" button the content of the JSFL textbox is assigned to the AS2 textbox. Upon pressing the "Set in JSFL" the opposite happens – the content of the AS2 texbox is assigned to the JSFL textbox.∎