Sencha的Eclipse外掛程式提示和技巧

原文：http://www.sencha.com/blog/sencha-eclipse-plugin-tips-tricks/

Sencha的Eclipse外掛程式是一個完整的用於流行的Eclipse IDE的代碼輔助和驗證外掛程式。有了該外掛程式，就可以獲得標準的Sencha Touch（最新的Sencha Eclipse Plugin 1.1）、Ext JS類型以及作為項目一部分定義的自訂類型的代碼輔助。在這篇文章中，將展示一些技巧和提示，可以令Sencha Touch開發更高效。

如何配置Sencha的Eclipse項目

在樣本中，將開始使用Sencha的CMD產生應用程式並在Eclipse使用外掛程式配置它。

首先，使用Sencha的CMD 3來產生一個Sencha Touch 2.1應用程式的架構。在樣本中將建立一個名為abc的應用程式。首先要做的是改變Touch SDK的根目錄然後運行以下命令：

sencha generate app abc abc

接著，要匯入Sencha Touch類型庫。因為該項目基於Sencha Touch 2.1，所以起名為“SenchaTouchTL-2.1 ”。這將提供所有所需的中繼資料用來支援豐富的代碼輔助和驗證。

現在，準備建立一個新的VJET項目，不過這裡使用的是已經存在的源檔案。這個可通過VJET項目嚮導來完成。

在新的VJET項目嚮導需要執行以下步驟：

1. 選擇從現有的原始碼建立項目並選擇產生的abc應用程式目錄。如果沒有指定目錄，會在Sencha Touch SDK目錄下建立一個。稍後也可以移動目錄。
2. 如果不想改變產生的應用程式的目錄結構，可以選擇“Use project folder as root for sources”，而不是選擇“Create separate folders for sources”，這樣可以阻止建立一個新目錄。
3. 如果要使用工作集，那麼選上“Add project to working sets”，否則，條過這一步。
4. 確保單擊的是下一步，而不是完成。如果單擊完成，項目可能會有多個錯誤。

在VJET設定頁：單擊Details地區下“Configure inclusion and exclusion filters”連結。

在“Inclusion and Exclusion Patterns”頁，可以為不需要掃描但希望保留在項目中的Javascript檔案添加排除規則。排除包含在Sencha Touch SDK中大量的JS庫檔案很有必要。在這一步，添加排除規則：touch/

現在，要設定項目的依賴來啟用已匯入Eclipse的Sencha Touch 2.1。選擇“Add...”並複選項目SenchaTouchTL-2。另外，如果要把SDK外共用的Ext JS類拉進來，還可以複選這些項目。在VJET，預設情況下，並不是每一個項目都能看到所有類的。預設情況下提供了以下3組API：

1. Javascript的API，如Math、Date等等。
2. 瀏覽器的API，如document、window等等。
3. 用來協助定義類型庫和全域變數的VJET VJO Javascript API

如果應用程式可以使用最新版的EcmaScript API或其它庫，可以從VJET開源項目下載頁https://www.ebayopensource.org/index.php/VJET/Downloads下載更多的類型庫並匯入更多的項目。

這就完成了！

查看指令碼資源總管，應該可以看到載入的項目abc。注意，Sencha Touch檔案看起來並不象一個包，只不過是一個普通檔案夾。這表示該檔案夾不需要進行驗證掃描，這樣，就看不到Sencha Touch的SDK的代碼錯誤了，只能看到應用程式代碼的錯誤。現在，編寫一些Sencha Touch的Javascript代碼。

進階代碼輔助

使用Sencha Touch要面對的一個挑戰就是要瞭解所有可用的配置項，並要確保設設定了正確的值。Sencha Eclipse外掛程式知道如何提示配置項，在Ext.create輸入第二參數時會提示，在Ext.define下輸入配置欄位時會提示，以及在任何Ext基本應用程式根據xtype對象輸入文字欄位時提示。

開啟abc/app/view/Main.js檔案，並轉到配置段，在這裡可添加一個面板的配置項並添加一些子組件到面板。在這種情況下，代碼輔助既需要面板的配置項，也需要標題列的輔助。正如所看到的，得到的建議還包含了直接從Sencha Touch SDK中嵌入的文檔。

要獲得建議，在高亮顯示的選擇行按下Ctrl+Space：

在另一個樣本，可以結合Ext.create和xtype來獲得正確的配置項輔助。開啟預設包下的app.js：

現在，轉到Ext.create函數調用處，為了示範添加第二個參數對象文本，然後按下Ctrl+Space，將看到的配置項：

另外，代碼輔助對對象文本和函數回調還有更進階的支援。下面通過Sencha Touch SDK做一下示範，然後示範如何通過添加JSDuck注釋來為Sencha Touch類提供一樣的代碼輔助。

例如，API中Ext.each的函數回調參數會提供正確的帶參數的替換代碼，並在選擇參數建議後返回語句，然後在使用任何定義的參數時，提供正確的輔助。

如果函數是帶有多個已知欄位的物件常值，那麼也可能獲得代碼輔助，如Ext.application：

為了事自訂的Sencha Touch類型能獲得外掛程式提供的參數輔助，可以使用JSDuck來注釋應用程式的類。這些添加的注釋可以用來作為輔助，也可以作為很好的代碼文檔。下面，使用JSDuck文檔來產生這些注釋。

Ext.define("abc.examples.CallBackDemo", { /** * @param {Function} arg * @param {String} arg.bar * @param {Boolean} arg.zot * @param {String[]} arg.three * @param {String/Date[]} arg.four * @param {String} arg.return Returns String  */ callbackEx:function(arg){} })

當輸入f並按下Ctrl+Space，將獲得匿名函數參數的提示。

一旦選擇了提示的參數，就會發現匿名函數作為一個參數添加到函數裡了。所有在JSDuck注釋指定的參數都會有正確的輔助，如參數bar的類型是字串，就能看到字串類型的提示。還支援不同類型的提示，如果是第4個參數請求提示，會看到數組和字串的提示，如果訪問的是數組的一個成員，將看到日期提示。

輔助還可以為已知欄位的物件常值提供提示。

以下這個例子，個個選項參數實際上有2個已知欄位startName和callback。callback事件上是一個帶已知參數和傳回型別的函數。

Ext.define("abc.examples.OptionsDemo", {myFunc:function(options) { // code here}}) Ext.define("abc.examples.OptionsDemo", {/** * @param {Object} options * @param {String} options.startName * @param {Function} options.callback * @param {String} options.callback.name * @param {Date} options.callback.startDate * @param {String} options.callback.return */myFunc:function(options) { // code here}})

小結

添加Sencha Touch 2.1類型庫到Sencha Eclipse外掛程式可為建立行動裝置 App程式提供豐富的代碼輔助、驗證和搜尋功能。要做的只是在Eclipse中建立一個新的帶Sencha Touch類型庫的VJET項目來使用很棒的代碼協助工具功能。可以獲得Sencha Touch SDK的內建類型的功能以及自訂的Sencha Touch類的功能。

相關閱讀：

VJETDoc comment syntax
Getting Started with Sencha Eclipse Plugin
The New Sencha Eclipse Plugin
Sencha Cmd

作者：Justin Early
Justin is currently the Lead Senior Software Engineer and Consultant at Avantsoft. He is the lead developer for the VJET JavaScript IDE project at Eclipse and leads the development effort for the Sencha Eclipse Plugin. Contact Justin on Twitter.