MyEclipse +Flex 整合


     最近想利用red5開發一個流媒體的程序,在網上找了半天沒有一個可用的代碼,要么是下載需要多少幣,要么是沒有。糾結了半天,最后決定自檢看着文字版本的教程,自己編寫一個。

        看着一個文字版本的demo,發現需要運用flex ,flex 用來顯示,以前學過兩節flex,且那時候是利用myeclipse +flex build 版本+ssh 框架,開發了一個小小的demo。大概知道了怎么用,現在電腦安裝的myecplise 10 ,下載了flex4,配置失敗,又在網上看了很多myecplise 10+flex 組合教程,都沒有一個適合自己的。最后想到以前配置的是用低版本的myecplise 配置的,所以有把myecplise 10 卸載掉,下了myecplise 5.5   的,試了幾次,終於整合成功!

 

在整合過程中,發現一篇博文寫的非常詳細,就轉過來,大概過程僅供參考。

                原文如下:  (原網址為http://blog.sina.com.cn/s/blog_4c4a24db0100get7.html

 

MyEclipse6.5 + Adobe Flex Builder 3 插件版

 

2009年10月18日 星期日 下午 01:31

一、准備工作:

所需要的軟件:

FlexBuilder3 插件版: FB3_WWEJ_Plugin

(需要注冊下載,由於是正式版還需要序列號:

1377-4168-2018-0771-2432-1495
1377-4760-3354-0772-2773-8996
1377-4165-2080-7265-7813-8901
1377-4964-5021-8182-2399-8235 )

MyEclipse 6.5:http://www.myeclipseide.com/

Lcds :http://www.adobe.com/products/livecycle/dataservices/

(序列號:

1306-4100-8708-9432-2243-5880
1306-4867-8501-8670-3893-7864 )

Tomcat 5.5: http://tomcat.apache.org/

二、安裝過程:

1.  安裝MyEclipse6.5(在此不再詳述)。

2.  安裝FlexBuilder3 beta2 插件版(FB3_WWEJ_Plugin.exe),請參考下圖所示

(1)雙擊可執行文件

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版
(2)彈出對話框,不用管它,直接點擊”OK”就可以了

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(3)現在是詢問你是否要安裝FLEX BUILDER 3插件,選擇“next”。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(4)現在是詢問你是否同意協議,選擇“同意”,點擊“next”按鈕。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(5)請你選擇FLEX BUILDER的安裝路徑,你可以自行選擇,然后點擊“next”按鈕。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(6)注意:這一步很重要,是要你選擇MyEclipse6.5中的Eclipse的安裝路徑,請仔細選擇。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

然后點擊“next”按鈕即可。

(7)然后彈出讓你耐心等待的界面,過一會兒然后彈出一個對話框,詢問你是不是安裝的是Eclipse3.2或3.3以及更高版本,請大家選擇“Proceed with Caution”按鈕即可。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(8)此界面是詢問你是不是要安裝IE和FireFox瀏覽器上的flash play 9,我還是希望大家兩項都選,便於調試。然后點擊“next”按鈕。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(9)彈出窗口,點擊“安裝”。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(10)打開你FlexBuilder插件安裝的文件夾,打開下面的“eclipse”文件夾,可以看到里面有features和plugins兩個文件夾,將他們copy到MyEcipse6.5下的eclipse文件夾下的features和plugins兩個文件夾內(一一對應上,不要放錯)。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

(11)然后將FlexBuilder插件安裝的文件夾中的sdks放入到MyEcipse6.5下的eclipse文件夾下。
(12)配置基本完成。只是你就可以在MyEclipse6.5下切換視圖,從中找到Flex對應的的視圖結構。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

在MyEclipse6.5中部署FLEX的WEB工程的過程

1) 建立Flex項目,首先在MyEclipse下打開Flex視圖,右鍵建立Flex工程。

在其中輸入項目名稱,點擊“Next”按鈕。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版
2)此頁面點擊“New”按鈕(為了建立Tomcat服務器)

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

PS:此處的output folder應該是context folder一樣,都是WebRoot

建立TomCat服務器,如下圖所示

注意一定要選擇和你MyEclipse下對應的TomCat版本,然后點擊“Next”按鈕,進入下一個界面,點擊“finish”即可。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

3)回到了第二步的界面,點擊“Brower..”按鈕,選擇ds-console.war這個文件(此文件需要安裝lcds軟件,
我們只是要此軟件下的這個war文件即可,對於此軟件的安裝,沒有特殊的地方,正常安裝即可完成),
最后點擊“Next”即可進入以下界面,點擊完成即可。

 

4) 此時Flex項目已經建立好,再切換到MyEclipse視圖下,如圖所示:

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

各個包的講解:

src:放的是Java的項目包

flex_src:放的是Flex項目用的文件

(實際上這個項目是有兩個項目框架組成的)

5)在項目上右鍵,向Flex項目中加入Web支持(作用:為了讓TomCat可以加載此項目,因為Tomcat只可以加載Web項目),如下圖所示:
MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

6) 彈出的對話框后,將下面的Create web.xml這一項的對勾去除(因為項目下面已經存在了web.xml文件,
所以去除掉。),點擊“Finish”按鈕即可。

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版
7) 項目已經全部搭建完成。(可以發現項目的圖標變為兩個地球的樣子)
MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

在Flex中完成項目各個文件的部署工作

1)我們先總體看一下項目現在的樣子

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

可以看到其中有一個Flex_J2eeDemo.mxml文件,它就是Flex項目的應用程序的入口位置,

項目的開始都是從這里開始的,一個項目中只有一個這樣的文件,其他均是組件文件。

2)Flex項目的分層結構,下圖是我現在的項目樣子:

MyEclipse6.5 <wbr>+ <wbr>Adobe <wbr>Flex <wbr>Builder <wbr>3 <wbr>插件版

我們可以看到flex_src文件夾下,我建立了三個文件夾

ascode:用於放ActionScript文件。

css:用於放css樣式文件。

view:用於放項目中組件文件(mxml文件)。

(注意:這三個文件夾很像Java中的包,當然也可以像Java一樣按照功能模塊進行划分,這里面只是分一個大體的層,要根據項目決定。)

3)Java項目下的分層步驟:

和以前的Java項目一樣,還是在src包中建立自己所需要的包結構。

在此項目中,我們是按照模塊進行划分的,然后在每個模塊下分出:Biz,Dto,Dao,Entity層,而VO層將交給Flex中的View文件夾進行統一管理。

4)DeBug調試可以使用MyEclipse6.5進行JavaCode調試,再使用FlexBuilder進行頁面調試。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM