學習筆記 Flex如何結合JSP
在學習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頁面