Solved

ExternalInterface call back from javascript to Adobe flex

Posted on 2009-05-05
17
2,150 Views
Last Modified: 2013-11-11
Hi,

I want to set the value from JavaScript to AS method.
Below is the code for AS/JavaScript and HTML.
In javaScript i'm getting the object of "FlexApp" and trying to set the property using ExternalInterface.addCallBack method.

In my html file when i make some event like click on button and then set this value, its sets property, but when i try to do the same thing using browser URL in onLoad method, then its a JavaScript error "Object doesn't support this property or method"

Is it necessary to some event and how can i do that.

Thanks
Puneet
AS method:
 

 private function setupCallbacks():void

        {

             if (ExternalInterface.available)

            {

               	ExternalInterface.addCallback("setProperty",setProperty);

            }

        }
 
 

JavaScript Code 

getSWF().setProperty(finalValue);
 

 function getSWF() {

        if (theSWF == null)

        {

            theSWF = document.getElementById("flexApp");

        }

        return theSWF;

    }

Open in new window

0
Comment
Question by:PuneetKSaxena
  • 9
  • 8
17 Comments
 
LVL 22

Expert Comment

by:rascalpants
ID: 24308108
I would assume you are getting this error, because of one of the following...

- you need to use different code in getSWF to reference the flash object ID
- you are not setting the Flash object ID
- you not viewing this from a browser


but I think your problem is that the code to setup everything is not getting set before your javascript code is being called... so there is not reference in Actionscript yet.


try using a 5 second timer on your javascript and see if that works...


rp / ZA
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24308131
yeah, I think it is an asynchronous coding issue... because the onLoad files when the SWF is loaded, but a SWF does not work the same way as the HTML text or images...  it is more of a progressive download system.  


rp / ZA
0
 

Author Comment

by:PuneetKSaxena
ID: 24308628
HI


- you need to use different code in getSWF to reference the flash object ID  
       when i use onclick method, the same code is getting the object ID
- you are not setting the Flash object ID
         its properly set and i debugged and i'm getting the object ID
- you not viewing this from a browser
          i'm not able to view when i call OnLoad method.

I guess there is something need to be done from ActionScript code.



But still its not clear. when i call onclick event, its properly gets the value
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24308681
I thought you said...

"In my html file when i make some event like click on button and then set this value, its sets property"

so this to me means when you click a button or something in the HTML it sets the property fine...  

but when you try to pass the value in with the Javascript onLoad method, it does not work...  right?


so them try to call the AS after 5 seconds instead of onLoad.  if it works, then you cannot use the onLoad method, and instead need to keep the timer, or send the value into the SWF with FlashVars or as a Query string...


rp / ZA

0
 

Author Comment

by:PuneetKSaxena
ID: 24308698
can you send me any code snippet for FlashVars/QueryString
0
 

Author Comment

by:PuneetKSaxena
ID: 24308763
When i run using broswer URL its giving me error

 "Object doesnot support this property or method"


but onclcik event is not giving any error and values are properly passed to SWF.

This method is not getting registered somehow.

Any idea why is it so
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24308803


you would just add a new parameter to the embed code... and depending on what technique you are using (ie, AC_FL_RunContent, SWFObject, normal Object/Embed ) it can vary...


AC_FL_RunContent :

'FlashVars', 'finalValue=VAL&finalValue2=VAL2&',



SWFObject:

so.addParam( "flashVars", "finalValue=VAL&finalValue2=VAL2&" );

or

var flashvars = { finalValue: "VAL", finalValue2: "VAL2" };



Object/Embed:

<param name="FlashVars" value="finalValue=VAL&finalValue2=VAL2&" />



rp / ZA

0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24308821
yes... i have said this a number of times...  Flash has not completely loaded when you are trying to reference something inside of it.


why dont you post all of your html code... minus anything that is not important to this question


rp / ZA
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:PuneetKSaxena
ID: 24309106
Hi,

please find below the HTML file.
Hope it'll be easier for you to understand .


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> ABC </TITLE>

<link rel="stylesheet" type="text/css" href="test.css">

 <script type="text/javascript" src="AC_OETags.js" ></script>
 

 </HEAD>
 

<script type="text/javascript">

  var theSWF;
 

function parseXML()

{
 

	var userSelDropDown = false;

	var args = new Object();

	var userSelValue;

	var optionLevelValue;

	var userselLevel;

	var query = location.search.substring(1);

	if(query!=null){

		var pairs = query.split("&");

		for(var i = 0; i < pairs.length; i++) {

			var pos = pairs[i].indexOf('=');

			if (pos == -1) continue;

			var argname = pairs[i].substring(0,pos);

			userSelValue = pairs[i].substring(pos+1);

			optionLevelValue = userSelValue.split("/");

			userselLevel  = optionLevelValue.length;

			userSelDropDown = true;

		}

	}
 
 
 

	try //Internet Explorer

	{

		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

	}

	catch(e){

		try //Firefox, Mozilla, Opera, etc.

		{

	   		xmlDoc=document.implementation.createDocument("","",null);

		}catch(e){

		}

	}

	xmlDoc.async=false;

	xmlDoc.load("test.xml");

	var lev1 = xmlDoc.getElementsByTagName('ES')[0];

	var level1 = document.searchtools.level1;

}
 
 

function setOptions(theData, selection, userSelValue, userSelDropDown)

{

			var finalValue  =  theData;

			getSWF().setProperty(finalValue);
 

	}

}
 
 
 

	 function getSWF() {

        if (theSWF == null)

        {

            theSWF = document.getElementById("flexApp");

        }

        return theSWF;

    }
 
 

</script>
 

</head>

<body style="margin-top:0px; margin-left:5px; background:#000000 ; background-repeat: no-repeat;" onload="parseXML();">

<div style="position: absolute; top:-4px; left:240px; width:930px; height:615px; overflow:hidden;">

<script>

AC_FL_RunContent("src", "test",

                    "width", "930",

                    "height", "615",

                    "align", "middle",

                    "id", "flexApp",

                    "quality", "high",

                    "bgcolor", "#ffffff",

                    "name", "catalog",

                    "allowScriptAccess","always",

                    "type", "application/x-shockwave-flash",

                    "pluginspage", "http://www.adobe.com/go/getflashplayer",

					"wmode", "transparent"

					);
 

</script>

</div>

<style type="text/css">

select{

	background: #222222;

	border: 1px solid #4C77B6;

	color: #e7e6e6;

	font-family: Trebuchet MS;

	font-size: 12px;

	margin: 0px;

	padding: 0px;

	vertical-align: middle;

}
 
 

</style>
 

<form name="searchtools" size="30">

 <label style="color:#FFFFFF"><font face="Trebuchet MS" size="+1"><B>Select a Category :  <B></font> </label>

<BR> <BR>

<select name="level1" id="level1"  onchange="setOptions(document.searchtools.level1.options[document.searchtools.level1.selectedIndex].value,'level2', null, false);">

<option>-Select-</option>

</select><BR><BR>

<select name="level2"  id="level2" onchange="setOptions(document.searchtools.level2.options[document.searchtools.level2.selectedIndex].value,'level3', null, false);">

<option>-Select-</option>

</select><BR><BR>
 

</form>

</body>

</html>

Open in new window

0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24309190
so what are you using to call setOptions()  ?  i don't see that getting called anywhere...


rp / ZA
0
 

Author Comment

by:PuneetKSaxena
ID: 24309214
Ohh... thats is called from parseXML..

setOptions is doing something and accordingly sets the value in  getSWF().setProperty(finalValue);

This is to get the "finalValue" variable and set it to SWF
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24309327
you can't call parseXML until later then if it is dependent on the Flash application.


rp / ZA
0
 

Author Comment

by:PuneetKSaxena
ID: 24309571
not clear... can you elaborate..

Onload method calls --> parseXMl()-> setOptions-> getSWF()

This is the flow.
Something wrong in this???
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24309661
yes...  

do not call any javascript function with the onLoad method.  Do you understand what I mean by that?

When you do that, your javascript code is referencing something that does not exist yet.  That is not good.  Don't do that.


set up a timer and test it.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/



rp / ZA

0
 
LVL 22

Accepted Solution

by:
rascalpants earned 500 total points
ID: 24309675
here put this code on your page...


<input type="button" name="clickMe" value="Click me and wait!" onclick="setTimeout('parseXML', 5000)"/>


click it and see what happens...



rp / ZA

0
 

Author Comment

by:PuneetKSaxena
ID: 24310063
Yuppie.. That timer works for me..


I added it in onLoad method itself.

<body style="margin-top:0px; margin-left:5px; background:#000000 ; background-repeat: no-repeat;" onload="setTimeout('parseXML();', 500)"">

and it worked.
Thanks a lot
0
 

Author Closing Comment

by:PuneetKSaxena
ID: 31578163
I added it in onLoad method itself.

0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now