FABridge教程(Flex+Ajax) 2

最新推荐文章于 2013-06-16 11:53:07 发布

原创最新推荐文章于 2013-06-16 11:53:07 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #ajax #function #application #button #library

FLEX 专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何在Flex应用中与JavaScript进行交互，包括从JS调用Flex中的方法以及从Flex调用JS函数。通过示例展示了如何改变Flex组件的状态并响应用户事件。

首先在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/>
        
    </fx:Declarations>
    <fx:Script>
        
    </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/>
  
</fx:Declarations>
<fx:Script>
  
</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"></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"></mce:script>
</head>
<body>
<input type="button" value="向文本框发炮" onClick="jsSetText()"/>
………………