在学习Flex的过程中,你可能会遇到Flex和JSP结合的问题,这里和大家分享一下,其实Flex里夹杂了ajax异步调用的技术,因为本身ACTIONSCRIPT就和JAVASCRIPT有着异曲同工之妙。
Flex结合JSP
其实Flex里夹杂了ajax异步调用的技术,因为本身ACTIONSCRIPT就和JAVASCRIPT有着异曲同工之妙。我做了一个例子是参考手册上面的,不过自己改了一下,大概的程序就是这样的,首页当然是Flex服务器来解析hxml,然后后台通过jsp文件交互数据库,然后把数据动态的封装成xml格式,最后在把xml标签与Flex程序绑定在一起,就可以了。这样当运行Flex前端程序的时候,后台就会把绑定好的数据显示到了Flex的组件里。
我的mxml代码:
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
- layout="absolute"creationComplete="feedRequest.send()"backgroundGradientColors="[#000000,#000000]">
- <mx:HTTPServiceidmx:HTTPServiceid="feedRequest"url="http://localhost:8080/test/index.jsp"useProxy="false">
- <mx:requestxmlnsmx:requestxmlns="">
- <directory>{test.text}</directory>
- </mx:request>
- </mx:HTTPService>
- <mx:Panelidmx:Panelid="blog"width="359"height="520"
- title="{feedRequest.lastResult.rss.channel.title}"verticalCenter="188.5"horizontalCenter="179">
- <mx:DataGrididmx:DataGridid="dgPosts"dataProvider="{feedRequest.
- lastResult.rss.channel.item}"width="340"height="167">
- <mx:columns>
- <mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="题目"dataField="title"/>
- <mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="路径"dataField="url"/>
- </mx:columns>
- </mx:DataGrid>
- <mx:TextAreawidthmx:TextAreawidth="388"height="129"
- htmlText="{dgPosts.selectedItem.description}"/>
- <mx:LinkButtonlabelmx:LinkButtonlabel="查看详细"click="navigateToURL(newURLRequest(dgPosts.selectedItem.url));"/>
- <mx:Labeltextmx:Labeltext="选择ID号"/>
- <mx:TextInputidmx:TextInputid="test"width="115"height="23"/>
- <mx:Labeltextmx:Labeltext="{test.text}"/>
- <mx:Buttonlabelmx:Buttonlabel="登陆"id="Submit"click="feedRequest.
- send();"/>
- </mx:Panel>
- <mx:Imagewidthmx:Imagewidth="717"height="151"top="31"
- horizontalCenter="0">
- <mx:source>file:///C|/DocumentsandSettings/Administrator/桌面/banner.gif</mx:source>
- </mx:Image>
- <mx:MenuBarxmx:MenuBarx="188"y="203"width="539"height="45">
- </mx:MenuBar>
- </mx:Application>
注释:
(1).application里creationComplete="feedRequest.send()"这一属性是每次程序运行时,调用httpservice里的Send()方法,在这个程序里实际上是请求http://localhost:8080/test/index.jsp,把得到的数据以xml形式返回,把内容绑定到DataGrid的组件上。
(2).dataProvider="{feedRequest.lastResult.rss.channel.item}"此句的语法,应该是,得到最后的返回结果,按照rss,channel,item此三层标签去绑定所遍历的数据。
- <mx:columns>
- <mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="题目"dataField="title"/>
- <mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="路径"dataField="url"/>
- </mx:columns>
以上代码就是创建分别叫题目和路径的2个列,title和url即为遍历出来的信息源标签。
(3).click="navigateToURL(newURLRequest(dgPosts.selectedItem.url));"linkbutton的属性,强调一点的是dgPosts是datagrid中所产生的选项,而navigateToURL(newURLRequest(url))此句就是另外打开一个url。
【编辑推荐】
- 学习笔记 Flex应用程序如何启动
- FlexBuilder4十大新特性闪亮登场
- 学习总结 在Flex中如何嵌入Flex字体
- 揭开Flex正则表达式的神秘面纱
- 技术前沿 如何在Flex中嵌入完整HTML页面