CodeZine(コードジン)

特集ページ一覧

従来型C/SアプリケーションをSenchaを使ってWeb化してみる

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/07/23 11:00

目次

アプリケーションの動作を確認する

 動作するアプリケーションがいったんできあがりました。Sencha Ext JSに用意されたコンポーネントやデータパッケージを用いることで、C/Sアプリケーションで提供してきた機能を容易に実装できることが理解できたと思います。

 作成したアプリケーションをSencha Architectから実行するには、プレビューボタンをクリックします。ブラウザでアプリの動作を確認できます。

図18 プレビューの実行
図18 プレビューの実行

 一覧表示の行を選択すると、URLの遷移なしに検索の実行や詳細画面への切り替わりが行え、デスクトップアプリケーションと同様に操作できることが確認できます。

図19 アプリケーションの実行
図19 アプリケーションの実行

 ところが、この状態はC/Sアプリケーションとは異なり、画面下部のツールバーでのページング操作が必要です。このツールバーはスクロール操作が可能ですが、元のC/Sアプリケーションと比べると操作性で若干劣るように見えます。C/Sアプリケーションと同様の操作性を求めるユーザーの声には応えたいですよね。

 Ext JSでは、このようにスクロールバーだけで操作させたい場合には、VirtualStoreというストアを利用します。

 VirtualStoreの基本的な設定はStoreと同様でProxy、Readerを組み合わせます。設定すべきプロパティ(autoLoad、store.model、proxy.url、reader.rootProperty)も同じです。

 ただし、VirtualStoreはRead Onlyでの利用となるため、通常のStoreとは制御方法が少し異なります。そのため検索やGridの選択、[保存]ボタン、[戻る]ボタンに関するイベントハンドラの実装を修正します。

onSearchfieldKeyup: function(textfield, e, eOpts) {
    if (e.getKey() === e.ENTER) {
        let store = Ext.getStore('MyVirtualStore');
        store.proxy.extraParams = { 'name':textfield.getValue() };
        store.reload();
    }
}

onGridSelect: function(dataview, selected, eOpts) {
    let store  = dataview.getStore('MyVirtualStore');
    let record = store.getAt(selected);

    this.getViewModel().set('record', record);
    this.getView().animateActiveItem(1,'slide');
}

onCancelButtonTap: function(button, e, eOpts) {
    let record = this.getView().getViewModel().getData().record;
    let store  = Ext.getStore('MyVirtualStore');

    store.reload();
    this.getView().animateActiveItem(0,{type:'slide', direction: 'right'});
}

onSaveButtonTap: function(button, e, eOpts) {
    let record = this.getView().getViewModel().getData().record;
    let store = this.getStore('MyVirtualStore');

    store.sync();
    record.save(); // VirtualStore 自体は ReadOnly なので、かわりに Model の record を操作する
    store.reload();
    this.getView().animateActiveItem(0,{type:'slide', direction: 'right'});
}

 これでC/Sアプリケーションと同様の操作性が実現でき、満足のいくWebアプリケーションを提供できるようになりました。


関連リンク

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:EDN CodeZine出張所

もっと読む

著者プロフィール

  • EDN編集部(イーディーエヌ編集部)

    エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5