HOME > 開発者向けBLOG > Sencha Blog >  Sencha GXT アプリへのタッチ機能の追加

Technology Note 開発者向けBLOG

Sencha Blog

Sencha GXT アプリへのタッチ機能の追加

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログAdding Touch Features to Sencha GXT Apps (2015年10月29日| David Chandler) を翻訳したものです。

先月末、Sencha GXT 4 の早期アクセス版を公開しました。GXT コミュニティから大量のフィードバックを集めながら GAリリースに向けて開発を進めているところですが、 GXT 4 の一番重要な機能とも言える「タブレット端末へのタッチ対応」について解説していきたいと思います。これにより最低限の労力で、GXT 3.1 アプリケーションをタブレットや大きなタッチスクリーン端末に移行できます。

アプリケーションにタッチ機能を追加するため3つの方法を提供しています:

  • タッチ操作に有効なウィジェット
  • ジェスチャーレコグナイザー
  • ジェスチャーイベントをリッスン

タッチ操作に有効なウィジェット

GXT 4 ではウィジェットの大半、タッチ操作に対応するよう改良されています。たいていの場合はコードをアップデートすることなくタッチ機能を利用することができます。例えば、マウスクリックで SelectEvent を発火させる TextButton はタッチイベントにも対応しています。同様にツリーコンポーネントにおいてもタッチイベントに自動的に反応して、ノードを折りたたんだり展開したりします。

たいていのGXT コンポーネントはタッチイベントを、それと似たマウスイベントの論理関数に委任することで機能しています(onTapに対してonClickのように)。ClickEventのようなブラウザのイベントをGXTのコンポーネントで利用しておらずまた、その代わりにSelectEventEnableEventを利用しているのであれば、コードを書き換える必要はなさそうです。

ジェスチャレコグナイザ

ジェスチャはシンプルなタッチイベントと異なるため、特別な方法で処理することになります。我々は’ジェスチャレコグナイザ’ という機能を開発し、タッチイベントをタップやダブルタップ、長押しなどのジェスチャに変換することができるようにしました。

繰り返しになりますが、初期搭載の大半のウィジェットとセルには’ジェスチャレコグナイザ’ を入れており、一般的なタッチジェスチャに対応しています。また、ジェスチャレコグナイザをカスタムウィジェットやコアGWTウィジェットに追加することも簡単にできます。例えばタップジェスチャを特定の方法でカスタムセルに利用したい場合、AbstractEventCellクラスを拡張し、コンストラクタに以下を書き加えてください:

addCellGestureAdapter(new TapGestureRecognizer.CellTapGestureRecognizer<C>(){
    @Override
    protected void onTap(TouchData tap, Context context, Element parent, C value, ValueUpdater<C> valueUpdater){
        doSomething(...);
    }
};

詳しく知りたい場合はGXT 4 ジェスチャーガイドをご覧ください。利用可能なジェスチャレコグナイザのリストを解説や実例付きで掲載しています。

ジェスチャイベントをリッスン

ジェスチャレコグナイザは、それを登録をしたコンポーネントやセル、ウィジェットにイベントを発火します。もうひとつの方法は、ジェスチャレコグナイザを利用しているウィジェットにジェスチャイベントハンドラ(Widget.addHandler()) を追加することでジェスチャイベントをリッスンします。例えばTabPanelTabGestureRecognizerを登録しています。パネルでのTapGestureEventの通知を受け取りたい場合は、ハンドラに以下を書き加えてください:

tabPanel.addHandler(new TapGestureRecognizer.TapGestureEvent.TapGestureHandler{
    @Override
    void onTapGesture(TapGestureEvent event) {
        doSomething(...);
    }
}, TapGestureRecognizer.TapGestureEvent.getType());

GXT アプリをモバイル化

GXT 4 のタッチ機能はほんとうに素晴らしいです。これは既存のGXT アプリを最低限の労力でタブレットに移植することができるからです。GXT 4 早期アクセス版をダウンロードしてGXT 3.1 アプリケーションをアップグレードし、タッチ機能を追加してみてください。フィードバックもお待ちしています。

PAGETOP