Flashlet with ExternalInterface

[ls3674]

I am using an instance of a swf that cotains iLog charts. I can successfully inject the Flex application (swf) into my SmartGWT application using Flashlet. However, I am having trouble figuring out how to make JSNI calls to access the movie via external interface.

//....

Flashlet flash;
flash = new Flashlet();
        flash.setSrc("ActivityScheduleChart.swf");
        flash.setSize("100%", "100%");
        flash.setName("ActivitySwf");

        addItem(flash);

...
//jsni test
    native void testFlash(String sayWhat) /*-{
        $wnd.testFlash(sayWhat); //
    }-*/;

The call most definitely makes it to the javascript, but I am not sure how to gain a reference to the Flash movie itself. I tried using the Element object obtained from a call to getPluginHandle(); but I don't know exactly how drill into it to get the swf reference.

Any advice?

Thanks,

[Isomorphic]

If you will be doing scripting against the plugin, you probably want to jump up to placing your own HTML for the plugin in an HTMLFlow. This will allow you to name the plugin whatever you want, as well as pass data beyond the "src" attribute (most scriptable plugins have some addition data they allow you to pass).

[ls3674]

Using the HTMLFlow object I have added a page that contains a Flash swf. In order to do this I used the setContentsURL("foo.html") call to load external html;

This html contains:
1. The generated page from the Flex compiler
2. A few custom javascript methods that interact with the movie

2 Questions:

1. How do I get a reference to the movie? I can see it burried in the DOM, but I have no idea how to get a refernce to it through the HTMLFlow API.

2. How will it communicate with code in SGWT? I'm assuming that I can write a jsni function and have the flash movie call out to it. However with the object burried so deep in the DOM, I need to know how this will be achieved.

here is a piece of the DOM copied from Firebug, at the very end is the script that I'm trying to call out to from JSNI in the SmartGWT app:

<script src="gsui/sc/DataSourceLoader?dataSource=cdlBaseLocLookup,cdlLookup,logType,mission,sensorTransition, starepointLookup,tcdlLookup,videoStream" language="javascript" type="text/javascript">
<iframe id="gsui" src="javascript:''" style="position: absolute; width: 0pt; height: 0pt; border: medium none;" tabindex="-1">
<table cellpadding="81" style="position:absolute;left:0px;top:-2000px;">
<div id="isc_styleTester" class="windowHeader" style="position:absolute;left:0px;top:-2000px;">&nbsp;</div>
<div id="isc_0" class="normal" onscroll="return isc_GSMC_0.$lh()" style="position: absolute; left: 0px; top: 0px; width: 1600px; height: 260px; z-index: 200090; padding: 0px; -moz-box-sizing: border-box; overflow: hidden;" eventproxy="isc_GSMC_0">
<div id="isc_1" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200090;CURSOR:default;" eventproxy="isc_GSMC_0">
<div id="isc_2" class="windowBody" onscroll="return isc_ModuleLauncher_0.$lh()" style="position: absolute; left: 0px; top: 0px; width: 80px; height: 244px; z-index: 200108; -moz-box-sizing: border-box; overflow: hidden;" tabindex="1101" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_ModuleLauncher_0,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_ModuleLauncher_0,true);" eventproxy="isc_ModuleLauncher_0">
<div id="isc_19" class="normalDisabled" onscroll="return isc_ModuleLauncher_0_vscroll.$lh()" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 1px; z-index: 200109; background-color: rgb(255, 255, 255); -moz-box-sizing: border-box; overflow: hidden; visibility: hidden;" eventproxy="isc_ModuleLauncher_0_vscroll">
<div id="isc_1D" class="normal" onscroll="return isc_ModuleLauncher_0_vscroll_thumb.$lh()" style="position: absolute; left: 0px; top: 16px; width: 1px; height: 5px; z-index: 200115; background-color: transparent; -moz-box-sizing: border-box; overflow: hidden; visibility: hidden;" eventproxy="isc_ModuleLauncher_0_vscroll_thumb" aria-label="undefined">
<div id="isc_13" class="normal" onscroll="return isc_ModuleLauncher_0_hscroll.$lh()" style="position: absolute; left: 0px; top: 244px; width: 80px; height: 16px; z-index: 200109; background-color: rgb(255, 255, 255); -moz-box-sizing: border-box; overflow: hidden;" eventproxy="isc_ModuleLauncher_0_hscroll">
<div id="isc_17" class="normal" onscroll="return isc_ModuleLauncher_0_hscroll_thumb.$lh()" style="position: absolute; left: 16px; top: 244px; width: 38px; height: 16px; z-index: 200115; background-color: transparent; -moz-box-sizing: border-box; overflow: hidden;" eventproxy="isc_ModuleLauncher_0_hscroll_thumb" aria-label="undefined">
<div id="isc_M" class="normal" onscroll="return isc_DefaultTabSet_0.$lh()" style="position: absolute; left: 80px; top: 0px; width: 1520px; height: 260px; z-index: 200162; -moz-box-sizing: border-box; overflow: hidden;" eventproxy="isc_DefaultTabSet_0">
<div id="isc_N" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200162;CURSOR:default;" eventproxy="isc_DefaultTabSet_0">
<div id="isc_O" class="tabBar" onscroll="return isc_DefaultTabSet_0_tabBar.$lh()" style="position: absolute; left: 0px; top: 0px; width: 1504px; height: 24px; z-index: 800054; padding: 0px; -moz-box-sizing: border-box; overflow: hidden;" role="tablist" eventproxy="isc_DefaultTabSet_0_tabBar">
<div id="isc_T" class="tabSetContainer" onscroll="return isc_DefaultTabSet_0_paneContainer.$lh()" style="position: absolute; left: 0px; top: 23px; width: 1504px; height: 237px; z-index: 200180; padding: 0px; -moz-box-sizing: border-box; overflow: hidden; cursor: default;" role="tabpanel" eventproxy="isc_DefaultTabSet_0_paneContainer" tabindex="1203">
<div id="isc_U" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200180;CURSOR:default;" eventproxy="isc_DefaultTabSet_0_paneContainer">
<div id="isc_1I" class="normal" onscroll="return isc_Canvas_1.$lh()" style="position: absolute; left: 5px; top: 5px; width: 1494px; height: 480px; z-index: 200324; -moz-box-sizing: border-box; overflow: hidden; cursor: default;" eventproxy="isc_Canvas_1">
<div id="isc_1J" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200324;CURSOR:default;" eventproxy="isc_Canvas_1">
<div id="isc_1K" class="normal" onscroll="return isc_MissionActivityScheduleModule_0.$lh()" style="position: absolute; left: 0px; top: 0px; width: 629px; height: 473px; z-index: 800216; padding: 0px; margin: 2px 5px 5px 6px; -moz-box-sizing: border-box; overflow: hidden;" role="dialog" eventproxy="isc_MissionActivityScheduleModule_0">
<div id="isc_1L" style="position: relative; visibility: inherit; z-index: 800216; cursor: default;" eventproxy="isc_MissionActivityScheduleModule_0">
<div id="isc_1M" onscroll="return isc_IButton_4.$lh()" style="position: absolute; left: 4px; top: 0px; width: 92px; height: 22px; z-index: 200289; -moz-box-sizing: border-box; overflow: hidden;" tabindex="-1" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_4_label,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_4_label,true);" role="label" eventproxy="isc_IButton_4">
<div id="isc_1P" class="stretchImgButton" onscroll="return isc_IButton_4.$lh()" style="position: absolute; left: 0px; top: 0px; width: 100px; height: 22px; z-index: 200288; -moz-box-sizing: border-box; overflow: hidden;" tabindex="1458" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_4,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_4,true);" role="button" eventproxy="isc_IButton_4" aria-label="Test Flash">
<div id="isc_1Q" class="windowHeader" onscroll="return isc_MissionActivityScheduleModule_0_header.$lh()" style="position: absolute; left: 0px; top: 22px; width: 629px; height: 20px; z-index: 200342; padding: 0px; -moz-box-sizing: border-box; overflow: hidden;" eventproxy="isc_MissionActivityScheduleModule_0_header">
<div id="isc_22" class="windowBody" onscroll="return isc_MissionActivityScheduleModule_0_body.$lh()" style="position: absolute; left: 0px; top: 42px; width: 629px; height: 431px; z-index: 200450; background-color: transparent; padding: 0px; -moz-box-sizing: border-box; overflow: hidden;" eventproxy="isc_MissionActivityScheduleModule_0_body">
<div id="isc_23" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200450;CURSOR:default;" eventproxy="isc_MissionActivityScheduleModule_0_body">
<div id="isc_24" class="normal" onscroll="return isc_Gantt_0.$lh()" style="position: absolute; left: 0px; top: 0px; width: 629px; height: 431px; z-index: 200468; -moz-box-sizing: border-box; overflow: hidden;" role="article" eventproxy="isc_Gantt_0">
<div id="isc_25" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200468;" eventproxy="isc_Gantt_0">
<iframe width="100%" scrolling="auto" height="100%" frameborder="0" src="ActivityScheduleChart.html">
<html lang="en">
<head>
<body scroll="no">
<script type="text/javascript" language="JavaScript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "ActivityScheduleChart",
"quality", "high",
"bgcolor", "#869ca7",
"name", "ActivityScheduleChart",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "ActivityScheduleChart",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "ActivityScheduleChart",
"quality", "high",
"bgcolor", "#869ca7",
"name", "ActivityScheduleChart",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
function getSWF()
{
var movieName = "ActivityScheduleChart";
if (navigator.appName.indexOf("Microsoft") != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
}
function testFlash()
{
try
{
var flashMovie = getSWF();
flashMovie.alert("hello from javascript");
}
catch(e)
{
alert(e);
}
}
// -->
</script>

[Isomorphic]

This is lower level than HTMLFlow, SmartGWT in general and indeed GWT. Within JSNI, you want to use low-level DOM techniques like document.getElementById() to look up the Flash DOM object. You can use JSNI as well to create global JavaScript functions for your Flash control to call if that's how integration works for this particular Flash object.