この記事は Sencha Advent Calendar 2014 18日目の記事です。
キーボード入力でボタンを押せる
ExtJSのプラグインを作ってみようと思います。
要件
プラグインの要件を以下と定めます。
- ファンクションキーの押下でボタンのクリックがされること
- ボタンとキーの対応は自由に設定できること
- ボタンがクリックできる条件下（表示・活性）でのみ動作すること
実装
簡単に作り方を解説していきます。
1. プラグインクラス定義
いつも通りExt.defineを使ってクラス定義をしていきます。
extendはExt.plugin.Abstractを指定します。
プラグインのベースクラスです。
これから作るプラグイン名は BtnKeyMapperとします（命名センスのなさはお察し）。
Ext.define('Adventer.plugin.BtnKeyMapper', {
// {{{ extend
extend : 'Ext.plugin.Abstract',
// }}}
// {{{ alias
alias: 'plugin.btnkeymapper'
// }}}
});
これで何もしない空のプラグインがとりあえずできました。
前回作ったフォームにボタンを置いて読み込んでみます。
/* Form.js */
// {{{ tbar
tbar: [
{
text: '保存',
plugins: [{
ptype: 'btnkeymapper'
}]
}
],
// }}}
もちろんまだ何も変わりません。
ここからが本番です。
2. initメソッド作成
initメソッドは、プラグインの起点になります。
pluginを設定したコンポーネントが引数（ここでは client）として渡されます。
このclientになんやかんやしていきます。
ちなみに、initが呼ばれるタイミングは コンポーネントの initComponentが呼ばれた後になります。レンダリング前ですね。
/* plugin.BtnKeyMapper.js*/
// {{{ init
init: function (client) {
var me = this;
console.log(clinent);
},
// }}}
3. どのキーを割り当てるか？
この設定はボタン側でやりますね。
とりあえずプラグインにコンフィグを渡す形を想定。
/* Form.js*/
{
text: '保存',
plugins: [{
ptype: 'btnkeymapper',
keyCode: Ext.event.Event.F1
}]
}
プラグイン側でとれるか確認。
アクセサーメソッドが欲しかったので、configに入れてinitConfigをコンストラクタで呼んでおきます。
/* plugin.BtnKeyMapper.js*/
// {{{ config
config: {
keyCode: null
},
// }}}
// {{{ constructor
constructor: function (config) {
this.callParent(config);
this.initConfig(config);
},
// }}}
// {{{ init
init: function (client) {
var me = this;
console.log('KeyCode:' + me.getKeyCode());
// }}}
},
無事とれたので、このキーコードのイベントをまず拾います。
4. キーイベントを拾う
キーイベントを拾うには Ext.util.KeyMapを使うと簡単です。
/* plugin.BtnKeyMapper.js*/
// {{{ init
init: function (client) {
var me = this,
keyCode = me.getKeyCode(),
bind;
bind = {
target: document,
key : keyCode,
fn : me.doEmulate,
defaultEventAction: 'stopEvent',
scope : me
};
me.keyMap = new Ext.util.KeyMap(bind);
},
// }}}
// {{{ doEmulate
// キーイベントハンドラー
doEmulate: function(keyCode, e) {
var me = this;
console.log('type : ' + keyCode);
}
// }}}
Ext.util.KeyMap にコンフィグオブジェクトを渡して、キーイベントと、呼び出す関数を設定します。
ひとまず、document全体のイベントですが拾えました。
この辺はあとで調整したい。
5. ボタンをクリックさせる
実はpluginは、cmp というプロパティに設定されたコンポーネントを持っています。
そいつに対してクリックの動作をしてやればOKです。
まずはクリックイベントのハンドラーを用意しておきます。
本来はViewControllerに書くべきですが、試しなのでViewに直接書いてしまいます。
/* Form.js*/
{
text: '保存',
plugins: [{
ptype: 'btnkeymapper',
keyCode: Ext.event.Event.F1
}],
listeners: {
'click': function(btn) {
Ext.Msg.alert(
'イベント',
'保存ボタンがクリックされました!'
);
}
}
}
そして、プラグイン側でクリックイベントに変換します。
/* plugin.BtnKeyMapper.js*/
// {{{ doEmulate
// キーイベントハンドラー
doEmulate: function(keyCode, e) {
var me = this,
button = me.cmp;// ボタン
button.fireEvent('click', button, e);
}
// }}}
ボタンクリック・F1キー入力でこれが出ます。
問題発生!
/* Form.js*/
{
text: '保存',
plugins: [{
ptype: 'btnkeymapper',
keyCode: Ext.event.Event.F1
}],
handler: function(btn) {
Ext.Msg.alert(
'イベント',
'保存ボタンがクリックされました!'
);
}
}
これが動きませんでした。。
修正!
/* plugin.BtnKeyMapper.js*/
// キーイベントハンドラー
doEmulate: function(keyCode, e) {
var me = this,
button = me.cmp;// ボタン
// TODO: 見た目変える
// event発火/handler実行
button.fireHandler(e);
}
// }}}
fireHandlerでclickイベントの発火とhandlerの呼び出しが行われます。
見た目
見た目上で押されたように見せるのはちょっと無理矢理ですが、
クラスの付け替えをdeferを使って行います。
ここはもう少しなんとかしたい所……
// 見た目変える
button.addCls('x-btn-pressed’);// 押された
Ext.defer(function() {
button.removeCls('x-btn-pressed’);// 離れた
},300);
ここまでで
要件1と要件2はクリアかな。
6. ボタンの状態チェック
ボタンの状態チェックを入れます。
以下２点をチェック。
- ボタンが表示されていること
- ボタンがenableであること
チェックは doEmulate の前でやります。
1の条件はこのボタンをもつコンテナーが表示されているかまで見ないといけません。
どこまで見るかは設定できるようにしましょうか。
parentQuery というコンフィグで設定できるようにします。
/* Form.js*/
{
text: '保存',
plugins: [{
ptype: 'btnkeymapper',
keyCode: Ext.event.Event.F1,
parentQuery: 'form'
}],
handler: function(btn) {
プラグイン側ではそのクエリをもとに親コンテナの状態を確認します。
/* plugin.BtnKeyMapper.js*/
// {{{ config
config: {
keyCode: null,
parentQuery: 'container'
},
// }}}
…
// {{{ doEmulate
// キーイベントハンドラー
doEmulate: function(keyCode, e) {
var me = this,
button = me.cmp;// ボタン
if (!me.checkBtnEnable(button, keyCode, e)) {
return false;
}
// 見た目変える
button.addCls('x-btn-pressed');
Ext.defer(function() {
button.removeCls('x-btn-pressed');
},300);
// event発火/handler実行
button.fireHandler(e);
},
// }}}
// {{{ checkBtnEnable
checkBtnEnable: function(button, keyCode, e) {
var me = this,
parent = button.up(me.getParentQuery()),
parentIsVisible = true,
clickable = true;
// 親コンテナーの状態チェック
parentIsVisible = parent.isVisible();
// 表示状態 かつ 活性状態であること
clickable = parentIsVisible && button.isVisible() && !button.disabled;
return clickable;
}
// }}}
要件3 もクリアです!
7. お掃除
いろいろお掃除します。
ボタンが破棄されたらイベントハンドラも破棄したりとか。
以下、全コードです。
Ext.define('Adventer.plugin.BtnKeyMapper', {
// {{{ extend
extend : 'Ext.plugin.Abstract',
// }}}
// {{{ alias
alias: 'plugin.btnkeymapper',
// }}}
// {{{ mixins
mixins: {
observable: 'Ext.util.Observable'
},
// }}}
// {{{ requires
requires: [
'Ext.util.KeyMap'
],
// }}}
// {{{ config
config: {
/**
* @cfg {Number} keyCode
* 監視するキーイベント
* @accessor
*/
keyCode: null,
/**
* @cfg {String} parentQuery
* ボタンが表示状態かを確認する親コンテナ
* @accessor
*/
parentQuery: 'container'
},
// }}}
// {{{ constructor
constructor: function (config) {
this.callParent(config);
this.mixins.observable.constructor.call(this, config);
this.initConfig(config);
},
// }}}
// {{{ init
init: function (client) {
var me = this,
bind;
// ボタンがレンダリングされている間だけ実行するようにする
me.mon(client, {
destroy : me.stopEmulation,
afterrender: me.startEmulation,
scope: me
});
},
// }}}
// {{{ startEmulation
startEmulation: function(button) {
var me = this,
keyCode = me.getKeyCode(),
bind = {
target: document,
key : keyCode,
fn : me.doEmulate,
defaultEventAction: 'stopEvent',
scope : me
};
me.keyMap = new Ext.util.KeyMap(bind);
},
// }}}
// {{{ stopEmulation
stopEmulation: function(button) {
var me = this;
// keyイベント削除
me.keyMap.destroy();
},
// }}}
// {{{ doEmulate
// キーイベントハンドラー
doEmulate: function(keyCode, e) {
var me = this,
button = me.cmp;// ボタン
if (!me.checkBtnEnable(button, keyCode, e)) {
return false;
}
// 押されて
button.addCls('x-btn-pressed');
// 離す
Ext.defer(function() {
button.removeCls('x-btn-pressed');
},300);
// event発火/handler実行
button.fireHandler(e);
},
// }}}
// {{{ checkBtnEnable
checkBtnEnable: function(button, keyCode, e) {
var me = this,
parent = button.up(me.getParentQuery()),
parentIsVisible = true,
clickable = true;
// 親コンテナーの状態チェック
parentIsVisible = parent.isVisible();
// 表示状態 かつ 活性状態であること
clickable = parentIsVisible && button.isVisible() && !button.disabled;
return clickable;
}
// }}}
});
まとめ
- pluginは Ext.plugin.Abstract を継承して作ります。
- plugin内で this.cmp に対してなんやかんやして作っていきます。
- keyイベントを拾うのは Ext.util.KeyMap を使うと楽。
作る過程を書いていった結果、無駄に長くなってしまいました。反省。
コードの無駄も多いのでまだまだ調整の必要ありですがご勘弁を。
明日は toshimitsusato さんです。