Flex/AIR calling Javascript functions - javascript

I have problem with calling javascript function from my AIR / Flex App. In web App this is easy with externallInterface, but in native app it is a problem. My AIR app is similar like this ....
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="init()" ... >
<mx:Script>
<![CDATA[
private function init():void
{
myHTML.addEventListener(Event.HTML_DOM_INITIALIZE,DOMInit);
myHTML.location="myAIRHTML.html";
}
private function DOMInit(e:Event):void{
myHTML.htmlLoader.window.inputFunction = testInputFunction;
}
private function testInputFunction(so:String):void{
//some code ......
}
public function someFunction(e:AIREvent):void{
myHTML.htmlLoader.window.outputFunction(e.param);
}
_]]>
</mx:Script>
<mx:HTML id="myHTML" width="5" height="5" visible="true" />
</mx:WindowedApplication>
myAIRHTML.html is
<html>
<head>
<script language="Javascript">
var interface = {};
function outputFunction(param){
var childInterface = document.getElementById("mySandbox").childSandboxBridge;
childInterface.remoteFunction(param);
}
interface.inputFunction = function(someData){
testInputFunction(someData);
}
function initBridge(){
document.getElementById("mySandbox").parentSandboxBridge = interface;
}
</script>
</head>
<body>
<iframe id="mySandbox"
src="js.html"
sandboxRoot="http://remote.example.com/js/"
documentRoot="app:/myAIRSandbox/"
ondominitialize="initBridge()">
</iframe>
</body>
</html>
and js.html is
<html>
<head>
<script language="Javascript" src="http://www/otherexample.com/other.js"></script>
<script language="Javascript" >
var interface = {};
interface.remoteFunction = function(st){
alert("st");
callFunctionInOtherJS(st);
}
window.childSandboxBridge = interface;
var someObject = {};
someObject.SomeFunction = function(someParam){
window.parentSandboxBridge.inputFunction(someParam);
}
</script>
</head>
<body ></body>
</html>
This throw "TypeError: Undefined value" when I call "remoteFunction" in myAIRHTML.html. It something important what I missed? Can anyone help? It something important what I forget about documentRoot - I don't use this name on other place ..... Thanks for all replies

it seems a bit confused to me anyway if i've understand this is your error:
If you define this
myHTML.htmlLoader.window.inputFunction = testInputFunction;
You js in myAIRHTML.html can't call testInputFunction(someData); but inputFunction(someData) because you passed your AS3 function testInputFunction to a variable called inputFunction
Hope this helps

Related

How to execute a js function onload?

Below is a fully functional and working code . When I copy paste it to a text file testFile.html and then open it with a browser it works fine.
But I want the selectCollege function to execute right after the initViz function
I tried this
<body onload="initViz();selectCollege('Engineering');"> . . .
But it didn't work. How can I make the selectCollege function to execute right after the initViz ?
<!DOCTYPE html>
<html>
<head>
<title>Select Marks</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz, sheet;
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
options = {
"Academic Year": "",
hideTabs: true,
onFirstInteractive: function () {
sheet = viz.getWorkbook().getActiveSheet();
}
};
viz = new tableau.Viz(containerDiv, url, options);
}
function selectCollege(college_name) {
sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer"></div>
<br />
<button onclick="selectCollege('Engineering');">Select a value</button>
</body>
</html>
In selectCollege() you are attempting to access sheet before it is defined in the callback function from the tableau.Viz options object, namely onFirstInteractive(). In order to solve this, you can call the function after defining sheet in that function:
options = {
...
onFirstInteractive: function () {
sheet = viz.getWorkbook().getActiveSheet();
selectCollege('Engineering');
}
};
And according to this forum, onFirstInteractive() will be called once when your instance of tableau.Viz is first rendered.
Create a new function
function init(){
initViz();
selectCollege('Engineering');
}
Then call the init function
window.onload = init;
function initViz(college_name) {
//your code
viz = new tableau.Viz(containerDiv, url, options);
//then
selectCollege('engineering');
}
function selectCollege(college_name) {
sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
}
Use it like this
This works for me
function bar() {
alert("bar");
}
function foo() {
alert("foo");
}
<!DOCTYPE html>
<html>
<body onload="bar();foo();">
</body>
</html>
...
<body>
... All other tags..
<script>
//just before closing body
function(){
}()
</script>
</body>
....
Call your function just before closing body within a script tag.
HTML tree interpreted sequentially. So that's how I add loading message for SPAs.

String.format not a function

I'm using HTML publisher in hope to have a html page with some javascript codes running on hudson. The HTML code is like this:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../stringformat.js"></script>
<script type="text/javascript">
......
sql=String.format("/.csv? select from table where exchange=`ABC......")
</script>
</head>
However, after a successful build, my html page doesn't show what it suppose to, and as I check the error console, it says
Error: TypeError: String.format is not a function
I have put my stringformat.js into the top folder, as the HTML publisher doesn't seem to allow the file to contain anything other than HTML files.
Can anyone tell me why the String.format is not loaded properly? Thanks!
PS: stringformat.js is the file i got from
http://www.masterdata.se/r/string_format_for_javascript/
The code should be working properly as this piece of code works outside the hudson
try code:
<html>
<head>
<title>String format javascript</title>
<script type="text/javascript">
String.format = function() {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i + 1]);
}
return s;
}
var _myString = String.format("hi {0}, i'am {1}","everybody", "stackoverflower");
function show(){
alert(_myString);
}
</script>
</head>
<body>
<input type="button" name="btnTest" id="btnTest" value="Test string format" onclick="show();" />
</body>
</html>

CamanJS image manipulation, strange error

i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?
It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.

How can we use addCallback function in flex

How can i call the flex frunction from the java script?
i am using below code which is define in below links
ExternalInterface.addCallback( "javascriptfunction", flexfunction);
http://www.switchonthecode.com/tutorials/flex-javascript-basics-using-externalinterface
http://circlecube.com/2010/12/actionscript-as3-javascript-call-flash-to-and-from-javascript/
You should give more context for your problem. From what I read on the tutorials, it is possible that you have omitted to add security access to your code. More precisely look here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html#addCallback%28%29 , especially here:
SecurityError — The containing environment belongs to a security sandbox to which the calling code does not have access. To fix this problem, follow these steps:
In the object tag for the SWF file in the containing HTML page, set the following parameter:
param name="allowScriptAccess" value="always"
In the SWF file, add the following ActionScript:
flash.system.Security.allowDomain(sourceDomain)
Hope it helps.
In flex 4.5
Add a addcallback first, like this in your mxml
public function initApp():void {
ExternalInterface.addCallback("myFlexFunction",myFunc);
}
myFlexFunction can now be accessed from your javascript.
Make your index.template.html looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>addCallback() Wrapper</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "0";
var xiSwfUrlStr = "";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
var attributes = {};
attributes.id = "AddCallbackExample";
attributes.name = "AddCallbackExample";
attributes.align = "middle";
swfobject.embedSWF(
"AddCallbackExample.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
</script>
</head>
<SCRIPT LANGUAGE="JavaScript">
function callApp() {
window.document.title = document.getElementById("newTitle").value;
var AddCallbackExample = document.getElementById("AddCallbackExample");
AddCallbackExample.myFlexFunction(window.document.title);
}
</SCRIPT>
<body>
<form id="f1">
Enter a new title: <input type="text" size="30" id="newTitle" onchange="callApp()">
</form>
<div id="flashContent"/>
</body>
</html>
and your flex application like this
<?xml version="1.0"?>
<!-- wrapper/AddCallbackExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="initApp()">
<fx:Script>
import flash.external.*;
public function initApp():void {
ExternalInterface.addCallback("myFlexFunction",myFunc);
}
public function myFunc(s:String):void {
l1.text = s;
}
</fx:Script>
<s:Label id="l1"/>
</s:Application>
Hope this helps

Knockout JS: ko.applyBindings is not a function

I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>

Categories

Resources