Download pdf - Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ

Sencha のフレームワークExt JS 5 について 15分で説明するよ

@martini3oz

自己紹介• 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所事業所長 • Sencha オフィシャルトレーナー

著書• Sencha Touch 2 実践開発ガイド • HTML5/JavaScriptモバイルアプリケーションフレーム

ワークであるSencha Touchは、 iOS、Androidを始めとす

る多くのプラットフォーム上で、ネィティブに負けないアプ

リをスピーディに開発できる唯一のフレームワークであるこ

とで、世界中のデベロッパーの関心を集めています。

• 本書では、Sencha Touchを使ってのモバイルアプリケー

ション作成を手助けする、実践的な内容を盛り込みました。

• カリフォルニア州レッドウッドシティにある企業

• HTML5について先駆者として取り組み

• フレームワーク／ツール／サービスを提供

Sencha 社

どこから始める？• sencha generate app です

• このコマンドで、アプリの雛形を作ってくれますので、そこから始めます。

• 作ってくれるのはアプリの枠組みです。必要なところを書き加えていきます。

スキャッフォルディング

表示すると、こんな感じの Webアプリができます

index.html

1 <!DOCTYPE HTML>! 2 <html manifest="">! 3 <head>! 4 <meta http-equiv="X-UA-Compatible" content="IE=edge">! 5 <meta charset="UTF-8">! 6 ! 7 <title>MyList</title>! 8 ! 9 !10 <script id="microloader" type="text/javascript" src="bootstrap.js"></script>!11 !12 </head>!13 <body></body>!14 </html>!

index.html

• これだけ

• Sencha では HTML を書くことは少ない

• index.html を自分で触ることは少ない

• バージョンが上がるほど少なくなってきている

ディレクトリ構造アプリケーションのルート

サブディレクトリで名前空間を分ける

ここから始まる

デザインは SASS で

クラスシステム• JavaScript には「クラス」は存在しない。 • そのため、Alter JS では「クラス」が追加されている • Sencha のフレームワークでは、素の JavaScript 上にクラスシステムを構築している

• 継承、オーバーライド、スタティックメソッド、ミックスインなどの一通りの機能を備える

クラスシステム 1 // クラスの定義! 2 Ext.define('MyApp.mypackage.MyClass', {! 3 extend: 'MyApp.SuperClass',! 4 config: {! 5 myConfig: true! 6 }! 7 });! 8 ! 9 // インスタンス化!10 var instance = Ext.create('MyApp.mypackage.MyClass', {!11 myConfig: false!12 });!

コンポーネント

コンポーネントTreePanel


GridPanel

コンポーネントToolBar


Chart



200種類以上！

1 // コンポーネントを使う! 2 Ext.define('MyApp.view.MyPanel', {! 3 extend: 'Ext.form.Panel',! 4 config: {! 5 title: '俺聞け11',! 6 items: [{! 7 xtype: 'textfield',! 8 fieldLabel: 'お名前',! 9 name: 'name'!10 },{!11 xtype: 'datefield',!12 fieldLabel: 'お誕生日',!13 name: 'birthday'!14 }]!15 }!16 });

1 // コンポーネントを使う! 2 Ext.define('MyApp.view.MyPanel', {! 3 extend: 'Ext.form.Panel',! 4 config: {! 5 title: '俺聞け11',! 6 items: [{! 7 xtype: 'textfield',! 8 fieldLabel: 'お名前',! 9 name: 'name'!10 },{!11 xtype: 'datefield',!12 fieldLabel: 'お誕生日',!13 name: 'birthday'!14 }]!15 }!16 });

MVC - MVVM

Application

View

ViewModel

ViewController

Model

Store

Proxy

Controller

MVC - MVVM

Application

View

ViewModel

ViewController

Model

Store

Proxy

Controllerコンポーネント

イベント処理

バインドするデータ

あまり使わない

スタートポイント

データ構造の定義レコードの保持

レコードの集合

サーバーなどとの通信

ではアプリを作ってみます

スキャッフォルディング

サーバーからデータを取得

グリッドにバインド

ViewController

でイベントをハンドリング

テーマ設定

Sencha UG

• 定期的に Sencha の勉強会とかやっています

• http://www.meetup.com/Japan-Sencha-User-Group/

• https://atnd.org/users/160956

http://www.meetup.com/Japan-Sencha-User-Group/

https://atnd.org/users/160956

ご清聴ありがとうございました