Guest Blog Post

Sencha Eclipse Pluginは人気のEclipse IDE用の完全なコードアシストとバリデーションのプラグインです。 このプラグインでスタンダードのSencha Touch（Sencha Eclipseプラグイン1.1で追加されました）やExt JSのタイプだけではなく、プロジェクトの中で定義したカスタムタイプのコードアシストが可能になります。 この記事では、あなたがSencha Touch開発者として生産力を高める技や提案をご覧に入れます。

Sencha Eclipse プロジェクトの設定方法

このサンプルでは、始めにSencha Cmdでアプリケーションを生成して、それをプラグインと一緒にEclipseに設定します。

まず最初にSencha Cmd 3を使ってSencha Touch 2.1のアプリケーションのスケルトンを生成しましょう。 このサンプルでは「abc」という名前のアプリケーションを作ります。 最初にSencha Touch SDKにルートディレクトリを変更して、次のコマンドを実行します。

1

sencha generate app abc abc

次に、Sencha Touchタイプライブラリを取り込みます。 Sencha Touch 2.1のプロジェクト名はSenchaTouchTL-2.1です。 これはリッチなコードアシストやバリデーションのサポートに必要となるメタデータを全て提供してくれます。

これで新しいVJETプロジェクトを作る準備ができましたが、既存のソースを使いたいと思います。 それは新しいVJETプロジェクトウィザードを使ってできます。

新しいVJETプロジェクトのウィザードで次のように選択します。

1. “Create project from existing source” を選択して、”abc”アプリケーションが生成されたディレクトリを指定して下さい。もしディレクトリを指定しなければ、Sencha Touch SDKディレクトリの下に作られます。後でいつでもプロジェクトを移動する事ができます。
2. 生成されたアプリケーションのディレクトリ構成を変えたくないので、新たなディレクトリが作られないように”Create separate folders for sources”ではなく”Use project folder as root for sources”を選択して下さい。
3. ワーキングセットを使う場合は、”Add project to working sets”をチェックします。そうでなければこのステップを飛ばしてください。
4. 必ず“Next”をクリックしてください。“Finished”は絶対にクリックしないでください。もし”finished”をクリックすると、あなたのプロジェクトに様々なエラーが発生します。

VJETの設定ページの”Detail”部分にある、”Configure inclusion and exclusion filters”のリンクをクリックして下さい。

“Inclusion and Exclusion Patterns”のページでは、スキャンしなくても良いがプロジェクト追加したいJavaScriptのファイルを排除するルールを追加できます。 これはSencha Touch SDKに含まれている大きなライブラリJSファイルを排除するために、とても便利です。 ここでは、Exclusion patternsに”touch/”を追加して下さい。

すでにEclipseにインポートしたSencha Touch 2.1を有効化するためにプロジェクト依存関係の設定をします。 “Add…”を選択して、プロジェクト”SenchaTouchTL-2″にチェックを入れて下さい。 さらに、SDKの外部から共有のExt JSクラスを引っ張って来たかったら、そのプロジェクトをチェックするだけで選択できます。 VJETの中では、デフォルトでは全てのクラスは全てのプロジェクトには見えません。 しかしデフォルトでAPIのグループが三つ提供されます：

1. Math、Date、などのJavaScriptのAPI。
2. documentやwindowなどのブラウザーAPI
3. タイプライブラリやグローバルの定義を援助するVJET VJ0 JavaScript API。

もしアプリケーションに新しいEcmaScript APIや他のライブラリを使うのであれば、 VJETオーペンソースプロジェクトのダウンロードページ https://www.ebayopensource.org/index.php/VJET/Downloads から、 タイプライブラリに多くのプロジェクトをインポート出来ます。

これで完了です。

Scriptエクスプローラーを見てみると、abcプロジェクトがロードされているのが見えるはずです。 touchフォルダがパッケージの表示ではなく、単なる一般的なフォルダの表示になっていることに注意してください。 これはフォルダがバリデーションスキャンから除外されていることを示していて、Sencha Touch SDKコードのエラーチェックはせず、アプリケーションのコードだけをチェックすることになります。さて、Sencha Touch JavaScriptコードを書きましょう。

Advanced Code assist

Sencha Touchの一つの難題は、全ての使用出来るコンフィグオプションを知り、そこに正しいタイプのデータを渡すようにすることです。 Sencha Eclipse Pluginは全てのExtベースのアプリケーションに、Ext.createに設定されるべき第二引数のコンフィグオプション、Ext.defineの下のコンフィグフィールド、やxtypeオブジェクト定数フィールドを理解しています。

abc/app/view/Main.jsファイルを開いて、コンフィグセクションに移動してください。 そこでパネルにアイテムやコンフィグオプションを追加できます。 この場合は、パネルのコンフィグとタイトルバーのオプション両方にコードアシストが欲しいです。 ご覧のように、両方の候補が表示されます。 それだけでなくSencha Touch SDKから直接とってきた組み込みドキュメントも表示されます。

候補を表示するには、淡いブルーの行を選択して、Control + Spaceを入力します：

もう一つの例です。Ext.createをxtypeと合わせて正確なコンフィグオプションをアシストします。 デフォルトパッケージの下のapp.jsを開いて下さい：

Ext.create関数が呼ばれている場所に行って、デモンストレーション用にオブジェクトリテラルに第二引数を足してControl + Spaceを押してください。ここでもオプションが表示されることがわかります。

尚、関数コールバックやオブジェクトリテラルのコードアシストの上級サポートも提供します。 最初はSencha Touch SDKからいくつの例から始めて、それからJSDuckのコメントをSencha Touchのクラスに足して同じコードアシストができる方法をご覧に入れます。

例えば、 Ext.eachのAPIにあるコールバック関数の引数はいったん引数候補が選択されたら、引数とreturnステートメントに正しく変更され、そしてその後、定義ずみの引数が使われる時には正しいアシストが提供されます。

もし関数がExt.applicationのようにマルチフィールドのオブジェクトリテラルをとる場合もコードアシストされます。

Sencha Eclipse Pluginを自前のSencha Touchタイプの引数アシストを提供するようにするには、自前のアプリケーションクラスにJSDuckのコメントをつけます。 これはアシストにとって価値がありますし、コードのドキュメント化の助けになります。 後で、このコメントを使用するJSDuckドキュメントジェネレーターを使うことが出来ます。

1
2
3
4
5
6
7
8
9
10
11
12
13

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をタイプしてcontrol + spaceを押すと、無名関数の引数候補が提供されます。

候補の引数を選択すると、一つの無名関数が引数として追加されたことに気づくことでしょう。 JSDuckコメントで指定されたすべての引数の正しいアシストが表示されます。 例えば引数barは文字列型なので、次のようにString型のメンバーがアシストされます。 可変型のアシストのサポートもまた可能です。 引数fourのアシストをリクエストした場合、配列型と文字列型の候補が表示され、 配列のメンバーにアクセスすると日付型の候補が表示されます。

アシストは既知のフィールドのオブジェクトリテラルにも利用できます。

この例をご覧下さい。 引数optionsにはstartNameとcallbackという二つのフィールドがあります。 さらにcallbackには引数と戻り値の型がわかっている関数があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
    }
})

結論

Senchan Touch 2.1タイプライブラリをSencha Eclipse Pluginに追加するとモバイルアプリケーションを作る為の豊かなコードアシスト、バリデーション、検索機能が提供されます。 Sencha TouchタイプライブラリでEclipseの中で新しいVJETプロジェクトを作るだけでとても素晴らしいコードアシスト機能が手に入ります。 この機能は、組み込みSencha Touch SDKタイプだけでなく、自分の定義したSencha Touchクラスでも利用できます。

参考文献:

Getting Started with Sencha Eclipse Plugin

The New Sencha Eclipse Plugin

Sencha Cmd <