Ext JS version 5 を始めよう
•
0 likes•1,893 views
Sencha UG 第21回 勉強会@大阪 での発表資料です。 Sencha Ext JS は、HTML5ベースのJavaScriptフレームワークで、アプリケーションの構造部分から、豊富なウィジェット、開発ツールとすべてがオールインワンで揃っている唯一のフレームワークです。 Sencha Ext JS 5 では、MVVM アーキテクチャが導入され、タッチデバイスに対応しました。今回はそんな Ext JS の魅力を皆さんにお伝えしたいと思います。
More Related Content
What's hot
What's hot (20)
Similar to Ext JS version 5 を始めよう
Similar to Ext JS version 5 を始めよう (20)
More from 久司 中村
Recently uploaded
Recently uploaded (8)
Ext JS version 5 を始めよう
- 2. 自己紹介 @martini3oz • 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー • 著書 • Sencha Touch 2 実践開発ガイド
- 4. 2010 Sencha Touch 1.0 2012 Sencha Touch 2.0
- 5. タッチデバイスのサポート • Ext JS 4 までは、ブラウザ用フレームワークと言うこと で、タッチデバイスのサポートはなかった。 • Ext JS 4 のアプリをタブレットで動かす ことはできたが、一部おかしいところとか 操作できないところがあった。
- 6. イベント正規化 • タッチイベント／ポインターイベント／マウスイベント • mousedown リスナーをセットすると • タッチをサポートする場合は touchstart • ポインターをサポートする場合は pointerdown • 自動的に変換してくれる
- 7. ジェスチャー • 複雑なジェスチャーイベントも標準でサポート • drag、 swipe、 longpress、 • pinch、 rotate、 tap • someElement.on(‘swipe’, …) と簡単に使える
- 8. 代わりがないイベント • mouseover, mouseenter, mouseout, mouseleave • タッチデバイスではこれらに替わるものはないので、使って いる場合は、なんらかの代替策を考える • Grid のヘッダーメニュー • PCのブラウザ → ヘッダへのmouseoverで表示される • タブレット → ヘッダの longpress で表示される
- 9. MVVM アーキテクチャ • MVC から MVVM へ • SPA では、保持している値と画面表示 (DOM) の同期をとる ためのコードであふれることがある • その対策として考えられたのがデータバインディングであり、 MVVM アーキテクチャ • ViewModel による View への双方向データバインディング
- 10. ViewModel • View の viewModel コンフィグで指定する • ViewModel が保持するデータが変更されたら、それが自動 的に View に反映される (表示が更新される) • フォームにバインドされた場合は、フィールドの値が変えら れたら、ViewModelのデータも更新される • data / stores / formulas
- 11. ViewController • View の controller コンフィグで指定する • イベントハンドラ • View では ViewController にあるイベントハンドラ名を文 字列で指定するだけ。 • reference と lookupReference()
- 12. ライフサイクル • どちらも View のインスタンスと一蓮托生 • View のインスタンスが作られると、ViewModel も ViewController も作られ、破棄されるとなくなる • 通常の Controller は、アプリが終わるまで存在しつづける • 通常の Controller の利用場面は限定的になる
- 13. DEMO
- 14. ルーティング • Ext JS アプリはSPAだからページ遷移はない • # によるディープリンクをつけることでブラウザの履歴を記 録できる • ディープリンク以降の文字列を解釈して、アプリのある局面 を表示させる手段 • 実際にはメソッドが呼び出される
- 15. レスポンシブ • 一つのアプリで全てのデバイス・場面に対応する • 小さい画面、大きい画面、横向き、縦向き • CSS のメディアクエリでの切り替え • リキッドレイアウト • で実現
- 16. レスポンシブコンフィグ • Sencha は JavaScript で解決する。 • Sencha Touch ではデバイスプロファイル。 • Ext JS 5 ではレスポンシブコンフィグ • デバイスの様々な情報を組み合わせて、コンポーネントの設 定が変更できるようになっている
- 17. DEMO
- 18. データパッケージの改善 • rawData の廃止 • fields 定義が基本的に不要 • チェーンドストア • 他のストアを参照するストア、独自のフィルタ、ソート • カスタムフィールド • 独自のフィールドタイプを設定できる、コード重複回避
- 19. Sencha チャート • Sencha Touch に採用されていた HTML5 ベースの新しい チャートパッケージ • Canvas を使うことで表現力UP • スワイプ／ズームなどのインタラク ションにも対応 • チャートの種類も増えた
- 20. グリッドの進化 • セル内のコンポーネント • セルアップデーター • レンダリングの高速化 • ウィジェット
- 21. 他にも沢山 • タグフィールド • セグメンテッドボタン • トリガー • ダッシュボード • Ext.mixin.Mashup • private メソッド • コンフィグシステム • アソシエーション • Sencha Cmd
- 22. ご清聴ありがとうございました