FABridge教程(Flex+Ajax)

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

thinker28754

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

阅读量2.5k

点赞数

分类专栏： FLEX 文章标签： flex ajax application function library encoding

本文链接：https://blog.csdn.net/thinker28754/article/details/5298569

版权

FLEX 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

一.通过js访问Flex组件

1.准备工作。先建立Flex工程 :fademo，并放置一个文本框:txtName。做完后代码应该类似于这个样子：

view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
<?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">
    <fx:Declarations>
        
    </fx:Declarations>
    <s:TextInput x="160" y="96" id="txtName"/>
</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">
<fx:Declarations>
  
</fx:Declarations>
<s:TextInput x="160" y="96" id="txtName"/>
</s:Application>

非常简单，呵呵。我用的flex4，flex3的话也类似。

注意一点，flash初始大小别设置的太大了，否则会看不到文本框。

2.在工程上点右键，选择【创建Ajax Bridge】，添加FABridge支持。这里会让你选择对当前工程中哪些类（属性，方法）进行FA桥接。初学的话，只选择我们创建的文本框即可，免得等会js代码太多。这里我们只选中txtName前面的勾勾。点击确定按钮。

3.看看都有什么变化？首先在src内多了一个bridge包，其内多了个FABridge.as；其次，在工程目录下，也创建了一个名为AjaxBridge/fademo的目录，其中lib下有一个对应的FABridge.js。这两个文件的作用我就不废话了，是核心，不过我们不需要动它。

另外，还有我们下面要说的两个文件，fademo.js和fademo.html，这两个文件是我们需要关注的，简洁起见，我把英文注释换掉了。

先看看fademo.js：

view plaincopy to clipboardprint?
//定义一个全局变量fademo
fademo = {};
//回调
FABridge.addInitializationCallback("b_fademo", fademoReady);
function fademoReady() {
        //局部变量，获得Flex应用（b_fademo）的根，可以通过b_fademo_root操作flex
    b_fademo_root = FABridge["b_fademo"].root();
        //为fademo添加一个方法getTxtName，相当于fademo借助b_fademo_root操作flex
    fademo.getTxtName = function () {
        return b_fademo_root.getTxtName();
    };
}
//定义一个全局变量fademo
fademo = {};
//回调
FABridge.addInitializationCallback("b_fademo", fademoReady);
function fademoReady() {
        //局部变量，获得Flex应用（b_fademo）的根，可以通过b_fademo_root操作flex
b_fademo_root = FABridge["b_fademo"].root();
        //为fademo添加一个方法getTxtName，相当于fademo借助b_fademo_root操作flex
fademo.getTxtName = function () {
  return b_fademo_root.getTxtName();
};
}

还记得第二步我们选择的是txtName吗？其实反映在这里就是对应fademo.getTextName.....这句话。也就是说，让flex中的txtName文本框能被fademo调用。也可以添加新的方法，实现对其他组件的调用。

其中，b_fademo是flex-ajax桥的名称，定义在html中。对于FA应用，页面加载swf的时，同时必须指定FA桥的名称，以便js能够使用。

下面是fademo.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>
</head>

<body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="fademoTest" width="400" height="300"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
    <param name="movie" value="../../bin-debug/fademo.swf" />
    <param name="flashvars" value="bridgeName=b_fademo"/>
    <param name="quality" value="high" />
    <param name="allowScriptAccess" value="sameDomain" />
    <embed src="../../bin-debug/fademo.swf" mce_src="bin-debug/fademo.swf" quality="high"
        width="400" height="300" name="fademoTest"
        align="middle"
        play="true"
        loop="false"
        quality="high"
        allowScriptAccess="sameDomain"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/go/getflashplayer"
        flashvars="bridgeName=b_fademo">
    </embed>
</object>
.........
<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>
</head>

<body>

代码中，如果要修改FA桥的名称，需要修改两个地方。

另外，就像添加dwr支持一样，可以看到<head>部分，引入了两个js:lib/FABridge.js及fademo.js。其中FABridge.js对fademo.js提供支持。

4. 其实到了这一步，我们已经可以对txtName文本框进行操作了。下面对文本框的文本进行修改，为了达到这个效果，我们在html内创建了一个按钮，通过点击按钮来调用js方法，进而实现对文本框的修改。

把js放在<head>内：

view plaincopy to clipboardprint?
//修改文本框内的文本
function jsSetText()
{
        var txtInput = fademo.getTxtName();
        txtInput.setText("测试");
}
//修改文本框内的文本
function jsSetText()
{
  var txtInput = fademo.getTxtName();
  txtInput.setText("测试");
}

把文本框放在<body>内： view plaincopy to clipboardprint?
<input type="button" value="向文本框发炮" onClick="jsSetText()"/>
<input type="button" value="向文本框发炮" onClick="jsSetText()"/>

编译后，打开html页面，点击按钮，会发现文本框内容已经变成了“测试”。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/toraji/archive/2009/12/18/5033255.aspx

thinker28754

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
FABridge教程(Flex+Ajax)

一.通过js访问Flex组件 1.准备工作。先建立Flex工程 :fademo，并放置一个文本框:txtName。做完后代码应该类似于这个样子：view plaincopy to clipboardprint?·········10········20········30········40········50········60········70········80·······
复制链接

扫一扫