本例子将展示如何使用Flex和JS进行交互:通过Flex应用程序中的按钮:javaScriptDisplay这个按钮来显示用户在datagrid中选中那行的people信息:name age 和sex资料到网页中,同时用户可以在网页中的table中输入关于people的资料新增信息到datagrid中。
接下来简单介绍下流程:
首先创建一个flex applicaiton:
< ? xml version = "1.0" encoding = "utf-8" ? > < mx:Application xmlns:mx= "" layout= "absolute" width= "482" height= "348" viewSourceURL= "../files/JSTutorial.mxml" > < / mx:Application>
接着就是我们要实现那个datagrid【三个column:name age and sex】:
< mx:Panel id= "pnlMain" x= "10" y= "10" width= "462" height= "328" layout= "absolute" title= "Simple Javascript Interaction" > < mx:DataGrid id= "dgPeople" x= "10" y= "10" width= "422" height= "229" > < mx:columns> < mx:DataGridColumn headerText= "Name" dataField= "Name" / > < mx:DataGridColumn headerText= "Age" dataField= "Age" / > < mx:DataGridColumn headerText= "Sex" dataField= "Sex" / > < / mx:columns> < / mx:DataGrid> < mx:Button x= "10" y= "256" label= "JavaScript Display" id= "butJSDisplay" / > < mx:Label x= "149" y= "260" id= "lblMessage" / > < / mx:Panel>
然后,在datagrid加载的时候完成数据的初始化工作:
< mx:DataGrid id= "dgPeople" x= "10" y= "10" initialize= "initDG()" width= "422" height= "229" >
对应的initDB方法呢如下:
< mx:Script > < ![ CDATA[ import mx. collections. ArrayCollection; public function initDG( ) : void { var people:Array = new Array( ) ; people. push( { Name: "Charlie" , Age: "23" , Sex: "Male" } ) ; people. push( { Name: "Brandon" , Age: "23" , Sex: "Male" } ) ; people. push( { Name: "Mike" , Age: "23" , Sex: "Male" } ) ; people. push( { Name: "Caroline" , Age: "23" , Sex: "Female" } ) ; var peopleCollection:ArrayCollection = new ArrayCollection( people) ; dgPeople. dataProvider = peopleCollection; dgPeople. selectedIndex = 0; } ] ] > < / mx:Script >
接着构建那个JavaScriptDisplay按钮来显示用户选择的信息到web中:
< mx:Button x= "10" y= "256" label= "JavaScript Display" id= "butJSDisplay" click= "jsDisplayPerson()" / >
对应的jsDisplayPerson()方法代码如下:
public function jsDisplayPerson( ) : void { if ( ExternalInterface. available) { ExternalInterface. call ( "displayPerson" , dgPeople. selectedItem) ; lblMessage. text = "Data Sent!" ; } else lblMessage. text = "Error sending data!" ; }
这里的displayPerson就是定义在js当中的方法了,dgPeople.selectedItem指的是用户在datagrid中选中的那行的数据资料【包括name age,sex】。接下来看dispalyPerson()方法的定义:
function displayPerson( person) { if ( person = = null ) { alert ( "Please select a person, or maybe I screwed up." ) ; } else { document . getElementById ( 'nameDisplay' ) . innerHTML = person. Name ; document . getElementById ( 'ageDisplay' ) . innerHTML = person. Age; document . getElementById ( 'sexDisplay' ) . innerHTML = person. Sex; } }
实际上这里用到的是Ajax技术了。即不会刷新..就可以显示资料。【不多介绍】。接下来就是在web中定义容器来显示这些信息了。即定义来显示各个信息。
< table > < tr > < td > Name : < / td > < td id = "nameDisplay" style = "width:150px;" > & nbsp ; < / td > < / tr > < tr > < td > Age: < / td > < td id = "ageDisplay" style = "width:150px;" > & nbsp ; < / td > < / tr > < tr > < td > Sex: < / td > < td id = "sexDisplay" style = "width:150px;" > & nbsp ; < / td > < / tr > < / table >
接下来介绍添加新的people信息:首先要做的就是在application增加一些代码来实现外部方法对flex 资源【方法】的存取。
< mx: Application xmlns: mx= "" layout= "absolute" width = "482" height = "348" initialize= "initApp()" viewSourceURL= "../files/JSTutorial.mxml" >
对应的initApp()方法:
public function initApp( ) : void{ if ( ExternalInterface. available) ExternalInterface. addCallback( "addPerson" , addPerson) ; }
由于要吧资料添加的datagrid中世界上就是增加到dataprovider中的,其本身是一个arrayCollection,那就可以使用additem的方法来增加信息:
public function addPerson( name : String, age:String, sex:String) : void{ ( dgPeople. dataProvider as ArrayCollection) . addItem( { Name : name , Age: age, Sex: sex} ) ; }
为了能够访问到flex资源我们调用getFlexApp('FlexJSTutorial')。这里'FlexJSTutorial'是嵌入在web中的flash所在的语句块的 【注意配对】。对应的在web中的addPerson方法定义如下:
function addPerson( ) { var name = document. getElementById( 'txtName' ) . value ; var age = document. getElementById( 'txtAge' ) . value ; var sex = document. getElementById( 'selSex' ) . value ; getFlexApp( 'FlexJSTutorial' ) . addPerson( name , age, sex) ; }
做的事情是收集用户输入的资料,调用flex中的addperson()方法。最后就是刚才提到的getFlexAPP()方法--实际上就是一个返回页面的flex app方法。这个方法跟浏览器类型有关,还需要注意的是页面中object标记中含有id和name两个属性。这两个属性对于取得flex app很重要。
function getFlexApp( appName) { if ( navigator. appName. indexOf ( "Microsoft" ) != - 1) { return window[ appName] ; } else { return document[ appName] ; }
最后一步就是提供用户输入的界面:
< table style = "border-spacing:5px;" > < tr > < td style = "border-style:none;padding:0px;" > Name : < / td > < td style = "border-style:none;padding:0px;" > < input id = "txtName" type = "text" / > < / td > < / tr > < tr > < td style = "border-style:none;padding:0px;" > Age:< / td > < td style = "border-style:none;padding:0px;" > < input id = "txtAge" type = "text" / > < / td > < / tr > < tr > < td style = "border-style:none;padding:0px;" > Sex:< / td > < td style = "border-style:none;padding:0px;" > < select id = "selSex" style = "width:100px;" > < option value = "Male" > Male< / option > < option value = "Female" > Female< / option > < / select > < / td > < / tr > < tr > < td colspan = "2" style = "border-style:none;padding:0px;" > < input type = "button" id = "butAddPerson" onclick = "addPerson()" value = "Add Person" / > < / td > < / tr > < / table >
附上:flex程序:
< ? xml version = "1.0" encoding = "utf-8" ? > < mx:Application xmlns:mx= "" layout= "absolute" width= "482" height= "348" initialize= "initApp()" viewSourceURL= "../files/JSTutorial.mxml" > < mx:Script > < ![ CDATA[ import mx. collections. ArrayCollection; import flash. external. * ; public function initDG( ) : void { var people:Array = new Array( ) ; people. push( { Name: "Charlie" , Age: "23" , Sex: "Male" } ) ; people. push( { Name: "Brandon" , Age: "23" , Sex: "Male" } ) ; people. push( { Name: "Mike" , Age: "23" , Sex: "Male" } ) ; people. push( { Name: "Caroline" , Age: "23" , Sex: "Female" } ) ; var peopleCollection:ArrayCollection = new ArrayCollection( people) ; dgPeople. dataProvider = peopleCollection; dgPeople. selectedIndex = 0; } public function addPerson( name:String, age:String, sex:String) : void { ( dgPeople. dataProvider as ArrayCollection) . addItem( { Name: name, Age: age, Sex: sex} ) ; } public function initApp( ) : void { if ( ExternalInterface. available) ExternalInterface. addCallback( "addPerson" , addPerson) ; } public function jsDisplayPerson( ) : void { if ( ExternalInterface. available) { ExternalInterface. call( "displayPerson" , dgPeople. selectedItem) ; lblMessage. text = "Data Sent!" ; } else lblMessage. text = "Error sending data!" ; } ] ] > < / mx:Script > < mx:Panel id= "pnlMain" x= "10" y= "10" width= "462" height= "328" layout= "absolute" title= "Simple Javascript Interaction" > < mx:DataGrid id= "dgPeople" x= "10" y= "10" initialize= "initDG()" width= "422" height= "229" > < mx:columns> < mx:DataGridColumn headerText= "Name" dataField= "Name" / > < mx:DataGridColumn headerText= "Age" dataField= "Age" / > < mx:DataGridColumn headerText= "Sex" dataField= "Sex" / > < / mx:columns> < / mx:DataGrid> < mx:Button x= "10" y= "256" label= "JavaScript Display" id= "butJSDisplay" click= "jsDisplayPerson()" / > < mx:Label x= "149" y= "260" id= "lblMessage" / > < / mx:Panel> < / mx:Application>
页面测试以及代码:http://blog.paranoidferret.com/files/flexjavascript.html