天天看點

在MyEclipse 6.5中配置ext開發環境

https://code.google.com/p/extbuilder/wiki/UserGuide

要用到ext,就将我配置的過程跟大家說說,第一次用,有沒有多餘的步驟,暫時不知道呢,歡迎大家指正。

剛開始也是在網上找了一大堆的,都是轉載又轉載,或說得不清楚的,本人是昨天搞到現在才總算是把環境給搭建起來了。

原環境:MyEclipse 6.5 + jdk1.6.0_18

這個過程需要下載下傳的檔案:

spket-1.6.18.jar

ext-3.3.1.zip

extbuilder_update-20081116.zip

extbuilder-src-20081116.zip

GEF-ALL-3.7.0RC4.zip

總共安裝過程包括下面3步:

第一步:安裝Spket(參考:http://blog.csdn.net/lizh0912/archive/2009/02/23/3929925.aspx,不用每一步都按裡面的走,根據自己看到的界面參考這篇文章設定就ok了)

1、方法一:線上安裝

MyEclipse -> Help -> Software Updates -> Find and Install...-> Search for new features to install ->New remote site...

Name: "Spket", Url: "http://www.spket.com/update/",選擇finish後,提示錯誤。(這種方法安裝不成功)

2、方法二:下載下傳jar包安裝

我這裡下載下傳的是最新版spket-1.6.18.jar,在網上一搜一大堆下載下傳連結的。

直接輕按兩下spket-1.6.18.jar運作安裝,安裝過程參考:http://blog.csdn.net/lizh0912/archive/2009/02/23/3929925.aspx

重新開機MyEclipse,初始化插件。

然後就是配置ext,也參考http://blog.csdn.net/lizh0912/archive/2009/02/23/3929925.aspx這裡,因為這裡已經介紹得很詳細了,圖文并貌。簡單文字說明:

Window -> Preferences -> Spket -> JavaScript Profiles -> New ;

輸入“ExtJS”點選OK;

選擇“ExtJS” 并點選“Add Library”然後在下拉條中選取“ExtJS”;

選擇 “ExtJS”并點選“Add File”,然後在你的./ext-3.3.1目錄中選取“ext.jsb2” 檔案。

Add File這步要注意的是,3.0以後的版本添加的檔案是:ext.jsb2(D:/design soft/ext/ext-3.3.1這是我的檔案所在目錄)。

(這種方法安裝成功)

3、方法三:下載下傳壓縮包

下載下傳spket的壓縮封包件,将features和plugins檔案夾裡的内容copy到MyEclipse的對應檔案夾下(D:/Program Files/MyEclipse 6.5/eclipse這是我的目錄)。(這種方法沒有嘗試)

第一步隻是安裝了開發ext的IDE,要實作可視化界面開發,還需要安裝extbuilder。

第二步:安裝extbuilder

extbuilder插件的安裝配置及使用

下載下傳位址:http://code.google.com/p/extbuilder/downloads/list

(extbuilder-src-20081116.zip,extbuilder_update-20081116.zip)

使用者手冊: http://code.google.com/p/extbuilder/wiki/UserGuide

參考網址:

http://blog.sina.com.cn/s/blog_4b3b7aff0100eimi.html

http://hi.baidu.com/zst89/blog/item/2c00c089d9af92729e2fb4ef.html

(1)、make sure you eclipse version is 3.2,3.3 or 3.4 with GEF installed.

(2)、download archived update site from http://code.google.com/p/extbuilder/downloads/list

(3)、Click Help->Software Updates->Find and Install...->Search for new features to install,Click Next

(4)、Click New Archived Site-> Browse to extbuilder_update.zip and click Open.

(5)、Click OK and follow the instructions to install.

(6)、Restart you myeclipse

(這種方法安裝不成功)

2、方法二:link方法

D:/Program Files/MyEclipse 6.5/eclipse/links在這個檔案夾下建立extbuilder.link檔案,

檔案内容:path=D://dragon//lib//extbuilder_update-20081116

這種方法在myEclipse裡沒看到有反應。(這種方法安裝不成功)

(1)、D:/dragon/lib/extbuilder_update-20081116将這個檔案夾下features、plugins檔案夾裡的内容複制到D:/Program Files/MyEclipse 6.5/eclipse檔案夾下對應的檔案夾裡面

(2)、重新開機myeclipse,在prefrences下面找到ExtJs Builder,裡面的ExtJs Directory就是你存放extjs的目錄D:/design soft/ext/ext-3.3.1

做完第二步之後,New -> Other... -> ExtJs Page建立一個ext頁面:

在MyEclipse 6.5中配置ext開發環境

問題來了!!!!!

(問題1:ExtBuilder沒顯示界面,解決:第三步)

剛開始的時候,UI Editor界面是一片空白,沒有顯示控件,但js代碼正常,待做完第三步之後,才會出現上圖看到的界面。

(問題2:工具欄控件無法拖動,解決:參考http://hi.baidu.com/zst89/blog/item/2c00c089d9af92729e2fb4ef.html)

到這裡有一點是很多初初接觸extbuilder的人不解的地方,網上也很少有人說到這點,我是找了很久,才看到有一個人說到點上的。

這裡隻是大家對extbuilder不了解,因為一般的圖形開發工具,控件都是直接拖動的,如JBPM等。

UI Editor 其實是一個浏覽器,不然ext基于JavaScript的效果不會這麼快的顯示出來了。是以工具欄的控件是不能拖動到頁面上的。用滑鼠點選左邊工具欄,如Button按鈕後,将滑鼠移動到Outline裡某個panel上,就會在這個panel上建立一個button了。如下圖:

在MyEclipse 6.5中配置ext開發環境

第三步:安裝GEF

下載下傳位址:http://www.eclipse.org/gef/(http://www.eclipse.org/gef/downloads/index.php)

我這裡下載下傳的是GEF-ALL-3.7.0RC4.zip

在MyEclipse 6.5中配置ext開發環境

  • Update site for releases: http://download.eclipse.org/tools/gef/updates/releases/
  • Update site for milestones: http://download.eclipse.org/tools/gef/updates/milestones/
  • Update site for integration and maintenance builds: http://download.eclipse.org/tools/gef/updates/interim/

2

方法二:下載下傳壓縮包

繼續閱讀