首先在fademo.mxml中声明一个button,并添加一个btnClick方法:
view plaincopy to clipboardprint?
<?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/halo" minWidth="0" minHeight="0" width="400" height="300" xmlns:bridge="bridge.*">
<fx:Declarations>
<bridge:FABridge/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<!--[CDATA[
import mx.controls.Alert;
public function btnClick():void
{
Alert.show("按钮被点击了","title");
}
]]-->
</fx:Script>
<s:TextInput x="160" y="96" id="txtName"/>
<s:Button x="218" y="139" label="按钮" id="btn"/>
</s:Application>
<?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/halo" minWidth="0" minHeight="0" width="400" height="300" xmlns:bridge="bridge.*">
<fx:Declarations>
<bridge:FABridge/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<!--[CDATA[
import mx.controls.Alert;
public function btnClick():void
{
Alert.show("按钮被点击了","title");
}
]]-->
</fx:Script>
<s:TextInput x="160" y="96" id="txtName"/>
<s:Button x="218" y="139" label="按钮" id="btn"/>
</s:Application>
然后将这个方法暴露给js端,修改(或重新生成)fademo.js,在fademoReady()方法中添加fademo对btn按钮及btnClick方法的调用:
view plaincopy to clipboardprint?
function fademoReady() {
b_fademo_root = FABridge["b_fademo"].root();
fademo.getBtn = function () {
return b_fademo_root.getBtn();
};
fademo.getTxtName = function () {
return b_fademo_root.getTxtName();
};
fademo.callBack = function() {
b_fademo_root.callBack();
};
}
function fademoReady() {
b_fademo_root = FABridge["b_fademo"].root();
fademo.getBtn = function () {
return b_fademo_root.getBtn();
};
fademo.getTxtName = function () {
return b_fademo_root.getTxtName();
};
fademo.callBack = function() {
b_fademo_root.callBack();
};
}
这样在html中,因为已经对fademo.js做了引用,所以就可以直接使用新定义的这些方法了,修改html:
view plaincopy to clipboardprint?
<head>
<title>Test page for the fademo class</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<mce:script type="text/javascript" src="lib/FABridge.js" mce_src="lib/FABridge.js"></mce:script>
<mce:script type="text/javascript" src="fademo.js" mce_src="fademo.js"></mce:script>
<mce:script type="text/javascript"><!--
function jsSetText()
{
fademo.getTxtName().setText("heihei");
fademo.getBtn().setLabel("haha");
fademo.getBtn().addEventListener("click",fademo.callBack);
}
// --></mce:script>
</head>
<body>
<input type="button" value="向文本框发炮" onClick="jsSetText()"/>
………………
<head>
<title>Test page for the fademo class</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<mce:script type="text/javascript" src="lib/FABridge.js" mce_src="lib/FABridge.js"></mce:script>
<mce:script type="text/javascript" src="fademo.js" mce_src="fademo.js"></mce:script>
<mce:script type="text/javascript"><!--
function jsSetText()
{
fademo.getTxtName().setText("heihei");
fademo.getBtn().setLabel("haha");
fademo.getBtn().addEventListener("click",fademo.callBack);
}
// --></mce:script>
</head>
<body>
<input type="button" value="向文本框发炮" onClick="jsSetText()"/>
………………
OK.
效果:点击html上的button后,flex内文本框内容变为heihei,flex内按钮文本变为haha,此时haha按钮也增加了点击事件,当此时点击haha按钮时,弹出“按钮被点击了”警告。
另外,注意添加事件的代码:
fademo.getBtn().addEventListener("click",fademo.callBack);
如果事件处理函数callBack位于js(alert)而不是在mxml(Alert.show)内,可以直接写为:
fademo.getBtn().addEventListener("click",callBack);
但是,在js中处理和mxml中处理的效果是不一样的,前者是在html内弹出警告框,后者是在flash内弹出警告框。
--------------------------------------------------------------------------------
在flex中操作js也很简单,只需要使用ExternalInterface.call("js方法名")即可。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/toraji/archive/2009/12/23/5054890.aspx