`
Supanccy2013
  • 浏览: 224933 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

flex之下拉框值更改事件调用JavaScript函数

    博客分类:
  • Flex
阅读更多
<?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" 
			   initialize="initApp()"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			import spark.events.IndexChangeEvent;  
			
			[Bindable]  
			private var datas:ArrayCollection = new ArrayCollection([{label:"选项1"},{label:"选项2"},{label:"选项3"},{label:"选项4"}]);  
			
			//第一步:在mxml应用程序启动后执行:把js可以调用的ActionScript 函数注册
			public function initApp():void 
			{   
				//把flexHelloWorld 函数注册成名为flexHelloWorld,可以供js调用
				ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld);   
			}
			
			//供js调用的ActionScript函数,这里的param1,param2是从js传递回来的参数
			public function flexHelloWorld(param1:String, param2:String):void 
			{   
				Alert.show("param1: " + param1 + "; param2:" + param2);   
			}  
			
			protected function userName_changeHandler(event:TextOperationEvent):void
			{
				//flex调用JavaScript函数的方式:如下:第一个参数是JavaScript中的函数名称,第二个参数
				//是JavaScript函数中接受的参数
				ExternalInterface.call("javascriptFunction",userName.text);
			}
			
			protected function newItem_clickHandler(event:MouseEvent):void
			{
				var s:String = itemValue.text;
				datas.addItem(s);
				items.selectedIndex = datas.length;
				itemValue.text="";
			}
			
			protected function delItem_clickHandler(event:MouseEvent):void
			{
				datas.removeItemAt(items.selectedIndex);
				items.selectedIndex=0;
			}

			//下拉框值更改事件
			protected function items_changeHandler(event:IndexChangeEvent):void
			{
				//调用JavaScript中的函数
				ExternalInterface.call("javascriptFunction",userName.text);
				Alert.show(event.currentTarget.toString());
			}

		]]>
	</fx:Script>

	<fx:Script>
		<![CDATA[
			import spark.events.TextOperationEvent;
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<s:TextInput id="userName" change="userName_changeHandler(event)" />
	<s:Panel width="250" height="200" title="下拉框案例" x="0" y="60">
		<s:TextInput id="itemValue" x="10" y="75" width="150"/>
		<s:Button id="newItem" x="168" y="75" label="新建项" click="newItem_clickHandler(event)"/>
		<s:ComboBox id="items" x="10" y="34" width="228" dataProvider="{datas}" selectedIndex="0" change="items_changeHandler(event)"/>
		<s:Button id="delItem" x="168" y="104" label="删除选中" click="delItem_clickHandler(event)"/>
	</s:Panel>
</s:Application>

分享到:
评论

相关推荐

    javascript与flex交互

    #### 三、Flex调用JavaScript方法 **1. Flex调用JavaScript方法** - **语法示例**: ```actionscript ExternalInterface.call("javascriptfunction", "param"); ``` - **解释**:这段代码表示通过Flex的`...

    flex和javascript交互例子

    标题"flex和javascript交互例子"指向了这个主题的核心——如何在Flex应用中调用JavaScript函数,以及反过来在JavaScript中调用Flex的方法。这种技术通常被称为“Bridge”或“跨域通信”。 在Flex中,我们可以使用`...

    Flex和JS的相互调用,传参

    标题中的"Flex和JS的相互调用,传参"指的是在Flex应用中调用JavaScript函数,或者在JavaScript中调用Flex组件的方法,并传递参数。这种互操作性是通过Adobe提供的`ExternalInterface`类实现的,它允许Flex和...

    Flex与Javascript相互调用例子(附源码)

    描述中的"NULL"意味着没有提供额外的具体信息,但我们可以根据标题推测这篇博客文章可能提供了一个实际示例,展示了如何在Flex中通过ExternalInterface API调用JavaScript函数,反之亦然。ExternalInterface是Flex...

    flex—JS相互调用

    #### 二、Flex调用JavaScript 在Flex中调用JavaScript主要依赖于`ExternalInterface`类,这是一个静态类,提供了调用外部JavaScript函数的方法。下面通过具体的代码示例来了解其实现过程: 1. **Flex代码示例** ...

    Flex与JavaScript交互实例

    首先,我们看一个Flex调用JavaScript的例子。在`FlexConnectJavaScript.mxml`中,我们定义了一个Flex应用程序,其中包含一个按钮和一个标签。当用户点击按钮时,会触发`invokeJavaScript`函数,这个函数使用`...

    flex与JS实现互相调用

    1. ExternalInterface:这是Flash Player提供的一个API,使得ActionScript能够调用JavaScript函数,同时也允许JavaScript调用Flex中的方法。这个接口在Flex中是公开的,无需额外引入库或设置。 2. CallBack:为了...

    Flex AcrionScript 和 JavaScript 通讯

    在上述示例中,`ExternalInterface.addCallback()`方法用于注册一个在JavaScript中可调用的ActionScript函数,而`ExternalInterface.call()`则用于调用JavaScript中的函数。这使得Flex组件能够与宿主环境(通常是...

    Flex4.5 与js,ocx相互调用

    JavaScript 调用 Flex 函数通常需要在 Flex 中先声明该函数为可外部访问的,然后在 JS 中通过 SWFObject 注册的名称来调用。 2. **Flex 与 ActiveX 控件交互**: Flex 4.5 支持与 ActiveX 控件的交互,主要是通过 ...

    flex和javascript交互

    #### 二、在Flex中调用JavaScript 除了从JavaScript调用Flex方法之外,Flex还可以直接调用HTML页面中的JavaScript。这有助于改变样式、调用远程方法以及在Flex与HTML页面之间传递数据。通常有以下两种方法来实现这...

    Flex程序如何获取html容器传递的URL参数值

    在ActionScript中,通过`ExternalInterface`类来调用JavaScript函数。`ExternalInterface`提供了一个桥接,允许ActionScript代码执行外部的JavaScript代码。这一步骤中,Flex程序会调用预先定义好的JavaScript函数,...

    flex与js交互2

    #### 二、Flex调用JavaScript方法 在Flex中调用JavaScript是一种常见的需求,这使得Flex能够利用网页中JavaScript的强大功能,例如修改DOM元素、控制网页行为等。通过`ExternalInterface.call()`方法,Flex可以轻松...

    flex与js交互 关于ExternalInterface使用的小例子

    3. **调用JavaScript函数**:在Flex中,你可以通过`ExternalInterface.call`方法调用JavaScript函数。例如: ```actionscript var result:Object = ExternalInterface.call("jsFunctionName", "参数1", "参数2"); ...

    Flex4.6-js修正版,之前一版JS无法调用flex,特此纠正

    - 另一方面,Flex也可以监听浏览器的事件,例如通过`ExternalInterface.addCallback('jsFunction', flexFunction)`注册一个回调函数,当JavaScript调用`jsFunction()`时,`flexFunction`会被执行。 4. **错误排查*...

    js调用as函数方法例子

    此外,为了安全原因,ActionScript只能调用在HTML页面中明确列出的JavaScript函数。 6. **性能考虑** 由于JavaScript和ActionScript之间的通信涉及到浏览器和Flash Player之间的跨域调用,因此可能会有性能开销。...

    js调用flex实例

    在某些场景下,我们可能需要将这两者结合起来,使得JavaScript能够调用Flex中的功能。本实例将详细介绍如何通过JavaScript调用Flex的方法。 首先,理解Flex与JavaScript的通信机制。Adobe Flex提供了多种与...

    flex 和 javascript 测通

    当在Flex中调用JavaScript函数时,这个调用会被转换为Flash Player的消息,然后由Player传递给宿主浏览器,再由浏览器执行相应的JavaScript代码。 4. **JavaScript到Flex的通信**:JavaScript可以通过调用...

    flex&flash相互调用

    在压缩包中的未命名-1.fla文件很可能是Flash的源文件,包含了可以被Flex调用的函数。 5. **开发工具**: 开发Flex应用程序通常使用Adobe Flex Builder或IntelliJ IDEA等集成开发环境,而Flash则使用Adobe Animate ...

Global site tag (gtag.js) - Google Analytics