Riaxe Systems | Blog

June

12th

Communication between HTML and Adobe Flex Desktop application using Java Script

Author : Alex Parker Date : June 12, 2017
No Comments

Communication between HTML and Adobe Flex Desktop application using Java Script

This blog is about how to call an actionscript function from a html page using javascript and vice-versa.Here you can exchange data between a flex application and a html file. This will work for only local html files.

In this application, there are two files, FlexJsCommunication.mxml and sample.html. It will load sample.html file inside flex application using HTMLLoader. sample.html file is initially blank. When we browse a folder, it will load all images from that folder to sample.html page.
Flex-Desktop-application

FlexJsCommunication.mxml

FlexJsCommunication

Sample.html

addobe-flex-sample

Explanation

In FlexJsCommunication.mxml, we have created an object of HTMLLoader which is htmlLoader. Using htmlLoader we load sample.html file. We can directly access the javascript methods using htmlLoader object.

In this application we call loadImagesFromFlex() by using htmlLoader.window.loadImagesFromFlex(files[i].nativePath);
It is taking image path as parameter and loading the image inside sample.html file.

While loading sample.html file, we have added an eventlistener for Event.HTML_DOM_INITIALIZE event. The HTMLDOMInitialize event is dispatched before any objects are created in the new HTML window or DOM. This gives us opportunity to create and initialize variables that objects in the new window can use. Since objects are not created yet, you can’t access them when this event is dispatched.

In HTMLDOMInitialize listener function, we assign
htmlLoader.window.sendImgPathToFlex = getSelectedImgPath;.
So when we call sendImgPathToFlex function in sample.html file, it will automatically execute getSelectedImgPath method. Here both the methods have same number of parameters. sendImgPathToFlex function is called when we mouseover on any image in sample.html. sendImgPathToFlex calls the getSelectedImgPath and loads the image inside the application.

You can download the example file from this link.


Article by : Sushil Kumar Sahoo
Team Lead
Linkedin | Stackoverflow

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>