寫在前面:
本文主要介紹使用 IDEA 配合 Eclipse 進行 Flex 項目開發的方式。
之所以這麼做原因:
1)Java server (Maven項目)使用 IDEA 開發,比在Eclipse/MyEclipse 下有很多優勢,其中一個就是 server端代碼改寫之後選擇Compile,可以reload到server,不要 restart server,這些節省的時間在大型項目開發中是非常可觀的;
2)Flex Client (Maven項目) 使用 Eclipse 可視化開發,所見即所得,頁面佈局快。
3)所有代碼(Java Sever + Flex Client)都在 IDEA 下由Maven管理,IDEA對Maven項目的支持非常優秀。
關於如何創建 Maven Flex 項目, Flex 和 Server 交互,不在本文討論範圍。
1.下載 Eclipse3.6
官網: http://www.eclipse.org/downloads/
根據需要,我選擇 Eclipse IDE for Java EE Developers
根據操作系統,用 Windows 32-bit 版
2.下載 Maven plugin
由於 Eclipse 本身沒有maven插件,需要手動添加,分2步,先安裝 GEF,再安裝Maven
1)安裝 GEF
Help>Install New Software>Add:
Name:GEF
Location:http://download.eclipse.org/tools/gef/updates/releases
由於Eclipse版本是3.6,所以選擇的是 GEF SDK 3.6.1,根據網絡質量下載需要點時間。
備註:Galileo 是3.6,Indigo 是3.7。
2)安裝 Maven
Help>Install New Software>Add:
Name:Maven
Location: http://m2eclipse.sonatype.org/sites/m2e/
就一個選項,選中後下載安裝
3.安裝 FlashBuilder_4_Plugin
網上安裝過程和cdkey很多,不重複說明。
有部分情況是:安裝成功,使用正常,但是60天試用期過後,輸入cdkey後,啓動eclipse會報cdkey無效,需要重新輸入不同的cdkey就可以了,不能是之前輸入過的,所以下載個cdkey生成器比較省事,每次輸入不同的cdkey,雖然麻煩點,只要能進入IDE就好了。
cdkey生成器點這裏 下載,使用時選擇 "Adobe Flash Builder Plug-in v4.x"。
4.導入 Maven 創建的 Flex項目
1).創建 Flex項目
創建符合 Maven 結構的 Flex 項目, flexmojos官網 有詳細文檔。
這裏推薦大家使用 IDEA ,個人覺得它在各方面的表現都比 Eclipse/MyEclipse 好一些。
使用IDEA開發好 Flex Server端和 Client 端代碼,這裏不做介紹。
接下來的內容介紹如何回到 FlashBuilder4/Eclipse 下進行可視化開發。
2).配置 Flash Builder 運行環境
運行Maven命令:mvn flexmojos:flashbuilder,等待 Success 結果出現。
會由 flexmojos-maven-plugin插件根據 pom.xml 生成文件:.actionScriptProperties, .flexConfig.xml,.flexProperties,.project,就是這些文件讓 Maven 管理的 flex 項目可以在 FlashBuilder 環境下進行拖曳式開發。
3)導入到 Flash Builder IDE
使用 File>Import>Flash Builder Project>project folder,將項目導入到 eclipse。
5.調整 eclipse 下開發環境
導入項目後,可能會出現一些錯誤提示,比如 flex sdk 版本不匹配,flex sdk 版本未找到,css不兼容等等。
只要根據提示信息稍作調試即可。
其中比較重要的一點是:由於 Flex 是在 maven下管理(我這裏用的是 IntelliJ IDEA 10.0 開發 Flex Java Server),調試flex頁面時需要實時部署到 server 文件路徑下,所以需要配置 /bin-debug 文件夾導出到最後項目的部署路徑。
1)選擇server路徑
右鍵點擊 項目>Properties>Flex Server:
Application Server type: J2EE(根據後臺環境選擇)
Use remote object access service 打鉤
選擇 BlazeDS (根據實際情況選擇)
Root folder: 選擇開發環境下項目部屬後的到得路徑,需要包含WEB-INF/flex,且flex文件夾下要有 flex-config.xml 或 services-config.xml。
比如我這裏用的是: F:/svn/ria-flexServer/target/ria-flexServer-1.0-SNAPSHOT/, 要有/號否則會出錯
Root URL : 開發環境下訪問項目的路徑
比如我這裏的是:http://localhost:8888/
Context root: 上下文路徑
比如:/
Output folder: flex 文件輸出目錄
2)輸出 html wrapper
根據項目需要,如果需要設置輸出html格式, 右鍵點擊 項目>Properties>Flex Compiler>HTML wrapper 選上,點確定。
結合剛纔的 Output folder路徑,就能將自動生成的 html 文件輸入到項目部署路徑。
之後就再讓程序調用該 html 就可以了。
最後說下實際開發步驟:
先在 IDEA 下運行 server,然後在 Eclipse 下開發頁面。
調整頁面的內容,刷新瀏覽器即可。
調整server端代碼,無需重啓server,只需對改寫過的java類,右鍵菜單選擇compile後,IDEA會自動reload到server。