前回、MVVMの構成について確認しました。今回は、具体的にビュー・ビューコントローラー・ビューモデルを簡単に使ってみましょう。
ビューコントローラーを使ったイベントハンドラ定義
とりあえず、Ext.button.Buttonという単純なボタンを使って説明します。むか〜しからある単純なボタンです。
|
1 2 3 4 5 6 7 8 9 10 |
Ext.define('MyApp.view.main.Main', { extend: 'Ext.panel.Panel', xtype: 'app-main', title: "Main Panel", bodyPadding: 10, items: [{ xtype: 'button', text: 'マイボタン' }] }); |
上記の形で、ボタンを配置します。今回から手元の環境で作っていく説明してると大変なので、Sencha Fiddleを使って行きます。
Previewを押すと実行できますんで、確認してみてください。
イベントハンドラを埋め込む
ボタンを押した時に、何らかの処理をする場所をイベントハンドラといいます。 このイベントハンドラは、ボタンを定義している場所に直接書き込むことができますし、そもそも古いExt JSを使ってた人は、そこに書くしかないでしょ？と思うかも知れません。
では、早速やってみます。
|
1 2 3 4 5 6 7 |
items: [{ xtype: 'button', text: 'マイボタン', handler: function() { alert("マイボタンが押されたよ！"); } }] |
このように、handlerに関数オブジェクトを指定することで、ボタンが押された時の処理を記述することができます。
はい、できましたね、この状態は、Viewとロジックが混在している 状態になります。昔はこれで頑張ってたんですよねぇ・・・（遠い目 想像できるように、まだボタンが1つ、そして表示しているコンテナー（Main Panel）も1つだから、いいようなものの、コレが数百となると当然長ったらしいビューコードが出来上がるわけです。
それを何とかしようと、Ext JS 4からMVC構造が取り入れられコントローラーと呼ばれる場所に切り離すことができるようになったのですが、いまはこれをビューコントローラーに切り離して処理を記述することになります。もちろん、handlerに関数オブジェクトを記述しても、上記の様に動きますしダメなわけじゃないんですが、メンテナンス性は悪くなるので、できればこれからはビューコントローラーをに切り出して処理を記述していくようにしましょう。
イベントハンドラを切り離す
さて、ではビューコントローラーを作って、先ほどのボタンが押された時の処理を切り離してみます。今回は、Main PanelのビューコントローラーMainControllerを作って、そこに処理を書いてみたいと思います。
まず、完成品を見て見ましょう。
MyApp.view.main.Main クラスにrequiresを記述し配列を指定します。この中で、MyApp.view.main.MainController と記述します。
このrequiresは、Ext.defineを詳しくやるときに説明しますが、このクラスには、requiresに設定したクラスが必要だから、よしなに読み込んでおいてくれな！って頼んでる設定です。
そして、controller: ‘main’ を追加しました。これは、この後定義するMainControllerクラスの中で定義するエイリアスですが、Mainから見たときに、どのコントローラを使うか設定する場所です。
もう1つが、先ほど関数オブジェクトを指定した handler を handler: ‘onClickMyButton’に変更します。‘onClickMyButton’という文字列が指定されているところが味噌です。オブジェクトではなく、文字列でメソッド名を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Ext.define('MyApp.view.main.Main', { extend: 'Ext.panel.Panel', requires: [ 'MyApp.view.main.MainController' ], xtype: 'app-main', controller: 'main', title: "Main Panel", bodyPadding: 10, items: [{ xtype: 'button', text: 'マイボタン', handler: 'onClickMyButton' }] }); |
次に、ビューコントローラーを作成しましょう。Main.jsと同じディレクトリに、MainController.jsを作成します。 aliasにcontroller.XXXXXとコントローラーのエイリアス名を指定します。今回はmainと指定します。 そして、hanlderに設定したメソッド名のメソッドを定義します。onClickMyButtonですね、ここに先ほどの処理を移行します。
|
1 2 3 4 5 6 7 |
Ext.define('MyApp.view.main.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onClickMyButton: function(btn) { alert("マイボタンが押されたよ！"); } }); |
このように、ビュークラスから、処理を切り出して、ビューコントローラーに設置します。 実際には、もっと複雑な条件で柔軟に、この切り出しができますが、まずはイベントハンドラの場所に文字列でメソッド名を記述すれば、ビューコントローラーのメソッドを呼び出してくれるということを理解してください。
おわりに
ビューとビューコントローラーを実際に使ってみました。MVC時代の人、そもそもMVC時代も体感せず、いきなりMVVMに来た人も、MVVM構造なんてどうでもいんです。何ができるかのポイントを押さえていきましょう。どうも、キーワードだけ押さえて、何ができるか後回しになったり、難しそうということで手を付けなかったりする人が結構いるんだなぁというのを最近みてて思うので、できるだけ簡単に、必要十分な確認を行って行きたいと思います。
また、あと何回だろ、次回はビューモデルについて確認します、そしてクラスシステムを説明します、レイアウトについても。 そこから、アプリケーションの実際の作りや、各コンポーネントに関して触れていきます。
ともかく、Sencha Ext JSの仕事が増えてきているんですが（弊社的に）、圧倒的に人数が足りないので、できる人増やしていきたいと、教育などいまやってます。新人が増えてもまた教育だし… パートナーさんにお願いしたら、そのパートナーさんも勉強することになるだろうし、世の中的にSencha Ext JSの大きめの案件がエンプラ界隈で色々動いているのも耳にしています。
会社単位ではなく、世の中のSencha Ext JSを適用していっている仕事に対して、すこしでも底上げになればと思います。
しかし、なげ〜な〜、分かりきってる人には、暇つぶしに読んでもらえたら幸いです。
