Java and flex Study Notes (9) -- use externalinterface to implement interaction between flex and external containers

Sometimes flex needs to interact with external containers, such as interacting with other projects and calling external data, it can be implemented through externalinterface. After all, the flex version is still relatively "young" and is not perfect in some places. It must be implemented by external forces.

 

The externalinterface class is an external API, which is an application programming interface that implements direct communication between the ActionScript and Flash Player containers, for example, HTML pages containing JavaScript. Adobe recommends that you use externalinterface to implement all communication between JavaScript and ActionScript. This class mainly has two methods:

● Addcallback (functionname: String, closure: function): void
Method registration can be called from the container. Successful calladdCallBack()The JavaScript or ActiveX Code in the container can call the functions registered in Flash Player.

● Call (functionname: String,... arguments ):*
Call a function exposed by the Flash Player container without passing parameters or passing multiple parameters. If the function is unavailablenullOtherwise, it returns the value provided by the function.

For details about the usage, see flex4api.

I have made a small example of flex interaction with external users today. After doing so, I have a deeper understanding of externalinterface.

Create an mxml page externalinterfacedemo. mxml with the following code:

<? XML version = "1.0" encoding = "UTF-8"?> <S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "minwidth =" 955 "minheight =" 600 "creationcomplete =" app_creationcompletehandler (event) "> <FX: SCRIPT> <! [CDATA [import MX. controls. alert; import MX. events. flexevent; protected function app_creationcompletehandler (Event: flexevent): void {// todoauto-generated method stub externalinterface. addcallback ("senddata", senddataselecthandler); getdata. addeventlistener (mouseevent. click, mouseclickhandler);} private function mouseclickhandler (Event: mouseevent): void {externalinterface. call ("getdata");} private F Unction senddataselecthandler (OBJ: Object): void {var name: String = OBJ ['username']; var pass: String = OBJ ['passworld']; username. TEXT = Name; passworld. TEXT = pass ;}]]> </FX: SCRIPT> <FX: declarations> <! -- Place non-visualelements (e.g ., services, value objects) Here --> </FX: declarations> <s: panel x = "205" Y = "116" width = "574" Height = "324"> <s: button id = "getdata" x = "261" Y = "196" width = "134" Height = "42" fontsize = "16" label = "Get external data"/> <s: label x = "179" Y = "92" width = "71" fontsize = "19" text = "name:"/> <s: textinput x = "254" Y = "92" id = "username" fontsize = "16" editable = "false"/> <s: label x = "179" Y = "145" fontsize = "18" text = "Password:"/> <s: textinput x = "256" Y = "137" id = "passworld" fontsize = "16" editable = "false"/> </S: Panel> </S: Application>

The following figure shows the page after running:

Next, you need to create a new Javascript file for the bridge between flex and JSP communication. However, if we directly write the JavaScript code in the automatically generated externalinterfacedemo. in HTML, when we modify externalinterfacedemo again. externalinterfacedemo automatically generated after the mxml file. HTML will overwrite the original code, so that our efforts will suffer losses and failures. What should we do?

I found that every automatically generated HTML page is generated by the index.template.html template page under the html-templatedirectory. If we add a javascript import file to this page, all pages will automatically introduce this Javascript file. The problem is solved.

Create a new JSP file externalinterfacejsp. jsp for transferring data to flex. The Code is as follows:

<% @ Page Language = "Java" contenttype = "text/html; charset = UTF-8" pageencoding = "UTF-8" %> <! Doctype HTML public "-// W3C // dtdhtml 4.01 transitional // en" http://www.w3.org/TR/html4/loose.dtd "> <HTML> 

The running effect is as follows:







Next, create a Javascript file commonjs. js. I created a Javascript file in the output directory:





/*** Flex interaction with JSP */function getdata () {var url = ".. /.. /JSP/externalinterfacejsp. JSP "; window. open (URL, "", "Height = 200, width = 500, status = No, resizable = Yes, location = No, Left = 95, Top = 110, scroll = No, help = No "); // open a new window} function submitdata () {try {var username = document. getelementbyid ("username "). value; var passworld = document. getelementbyid ("passworld "). value; var OBJ = new object (); obj. username = username; obj. passworld = passworld; var externalinterfacedemo=extends extends parent.opener.doc ument. getelementbyid ('externalinterfacedemo'); // obtain an externalinterfacedemo instance externalinterfacedemo. senddata (OBJ); // call the window method in ActionScript. close (); // close this subwindow} catch (e) {alert (e );}}

Now, start interaction. When we input a value in externalinterfacejsp. jsp, the data on this page will be automatically taken back to the flex page. If you implement it, it means you have succeeded.


Original article, reproduced please indicate the source: http://www.dianfusoft.com/