Need Flex Migration Help?
- Adobe ends Flash player support in 2020
- Flex apps will no longer function
- We can help migrate your app
I recently ran across a situation where a client needed to interact with an ActiveX Control from their Flex application. They needed to be able to call methods on that control, and asynchronously, have properties set back in the flex app. Since they were using JavaScript to interact between the browser and activeX, I was able to come up with something, thanks to some help from Erik Westra and Matt Horn from the FlexCoders list. Here is a simplified example of communicating asynchronously with JavaScript.
Test.jsp
===
<%@ taglib uri=”FlexTagLib” prefix=”mm” %>
<html>
<head>
<script language=”javascript”>
function showAlert(msg){
alert(“Alert: ” + msg);
}
function setProp(propname,value){
document.myMovie.SetVariable(propname,value);
}
function twoWayComm(alertmsg, proptoset){
showAlert(alertmsg);
setProp(proptoset, “new value”);
}
</script>
</head>
<body>
<mm:mxml source=”TestApp.mxml” id=”myMovie” name=”myMovie”/>
<form>
<input type=”button” value=”Click Me” onClick=”setProp(‘labelString’,’set from html’)”>
</form>
</body>
</html>
Since I needed to define JavaScript functions on the same page as the flex app, I decided to use the JSP Tag library to let me mix Flex, HTML and JavaScript content in the same page. On this page you can see the the JavaScript and the call to the flex app, as well as an html button I added, which when clicked will set a property in the flex app. The 3 js functions are pretty straight forward, the first just uses an alert box to show a message, the second uses the setVariable function to set a properties value from JavaScript and the third shows an alert and tells JavaScript to set a property.
Below, you can see the MXML for this app.
TestApp.mxml
====
<mx:Application width=”200″ height=”200″ xmlns:mx=”http://www.macromedia.com/2003/mxml“>
<mx:Button label=”MXML Button” click=”doClick()”/>
<mx:Label text=”{labelString}”/>
<mx:Script>
var labelString:String;
function doClick(){
getURL(“javascript:twoWayComm(‘From MXML’, ‘labelString’)”);
}
</mx:Script>
</mx:Application>
Again, its a pretty straight forward interface, there is a button and a label. The label’s text is bound to the labelString property. When the button is clicked, the doClick method is fired. To call JavaScript functions in the container, a simple getURL is used, but instead of opening a web page, we prefix the URL with JavaScript, telling the browser to call the specified function. If you wanted to call a function rather than set a property in the mxml, you can do that by defining an implicit setter.
This was one of the few times I’d been called on to help with a hybrid Flex/HTML/JavaScript app, rather than a pure flex one, but I was happy to find how easy it really was.
By the way, the same approach should work just as well from a pure flash application as it does from a flex app.
Just a quick note, it was just pointed out to me that while this works fine in IE, its no longer working in Mozilla based browsers. Sorry, will find a working solution when time allows…
Ok, problem solved. Case sensitivity in Mozilla. Oops, thanks to Peter Watson of Macromedia who pointed out a working version on Abdul Qabiz’s blog, where I found setVariable should really be SetVariable. Abdul has also recently added a flex version of his code base.
