はじめての Sencha Touch2 / First Sencha Touch2

Slide 1

Slide 1 text

Japan Sencha User Group Japan Sencha User Group はじめての Sencha Touch2 2012/11/8 1 SenchaUG 勉強会第2回@東京 Japan Sencha User Group @hiromitsuuuuu

Slide 2

Slide 2 text

Japan Sencha User Group 11/12/2012 2 RIAのR&Dチームで Web標準系技術やってます。

Slide 3

Slide 3 text

Japan Sencha User Group 11/12/2012 3 学習コストやハードルが高いらしい… (´・ω・｀) 最低限覚えておきたい基礎をまとめましたしょぼーん MVC? クラスシステム？名前空間？コンポーネント？ビルド？

Slide 4

Slide 4 text

Japan Sencha User Group Agenda  まず知っておきたい基礎７つ 1. アプリケーションの生成 2. コンポーネントの追加 3. config option 4. イベントハンドリング 5. レイアウトシステム 6. ページ遷移 7. クラスシステムと名前空間  知っておくと便利なこと 1. 外部ライブラリの追加 2. ビルド時のちょっとしたTips 3. FlexからSencha Touch2へ  次のステップへ 11/12/2012 4

Slide 5

Slide 5 text

Japan Sencha User Group 11/12/2012 5 http://www.riaxdnp.jp/ Sencha Touch2で Webアプリ開発【基礎編】

Slide 6

Slide 6 text

Japan Sencha User Group 11/12/2012 6 まず知っておきたい基礎７つ

Slide 7

Slide 7 text

Japan Sencha User Group 11/12/2012 7 スケルトンを作って app.jsに書いてみる (｀・ω・´)

Slide 8

Slide 8 text

Japan Sencha User Group 1. アプリケーションの生成 11/12/2012 8

Slide 9

Slide 9 text

Japan Sencha User Group 11/12/2012 9 Ext.application({ name: 'myApp', launch: function() { console.log('Application launched!'); } });

Slide 10

Slide 10 text

Japan Sencha User Group 11/12/2012 10 Ext.application({ name: 'myApp', launch: function() { console.log('Application launched!'); } });  Ext.application • アプリケーションの生成 • ページ読み込み後に呼ばれる • 引数：オブジェクト生成時に必要なconfigオブジェクト  name • アプリケーションの名前空間 • クラス名は常にこの名前空間から始まる  launch • アプリの起動時に一度だけ呼び出される • これもconfigオブジェクトアプリケーションの生成

Slide 11

Slide 11 text

Japan Sencha User Group 11/12/2012 11

Slide 12

Slide 12 text

Japan Sencha User Group 2.ルートコンテナへのコンポーネントの追加 11/12/2012 12

Slide 13

Slide 13 text

Japan Sencha User Group 11/12/2012 13 ＵＩコンポーネント

Slide 14

Slide 14 text

Japan Sencha User Group 11/12/2012 14 Ext.application({ name: 'myApp', requires: [ 'Ext.Panel' ], launch: function() { var myPanel = Ext.create("Ext.Panel"); Ext.Viewport.add(myPanel); } });

Slide 15

Slide 15 text

Japan Sencha User Group ルートコンテナへのコンポーネントの追加 11/12/2012 15  Ext.Viewport • 画面全体を表すルートコンテナ • UIコンポーネントをaddしていくことで画面を作成  Ext.create • インスタンスを生成するメソッド • 第1引数：クラスの完全修飾名 • 第2引数：オブジェクト生成時に必要な設定オブジェクト  requires • 必要コンポーネントのインポート • 動的に読み込まれる Ext.application({ name: 'mysundbox', requires: [ 'Ext.Panel' ], launch: function() { var myPanel = Ext.create("Ext.Panel"); Ext.Viewport.add(myPanel); } });

Slide 16

Slide 16 text

Japan Sencha User Group 11/12/2012 16

Slide 17

Slide 17 text

Japan Sencha User Group 3. config option 11/12/2012 17

Slide 18

Slide 18 text

Japan Sencha User Group 11/12/2012 18 titlebar html panel

Slide 19

Slide 19 text

Japan Sencha User Group 11/12/2012 19 launch: function() { Ext.create("Ext.Panel", { fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', title: 'Welcome' },{ html: [ "First page.
", "link : ”, "riaddnp" ].join("") }] }); }

Slide 20

Slide 20 text

Japan Sencha User Group config option 11/12/2012 20  config option • 新しいオブジェクトを生成する際に引数として指定 • コンポーネントごとに異なる • 生成後も好きなタイミングで変更可能 • setterとgetterが自動生成される  items config • コンテナ内に子要素を内包するための仕組み • インラインで生成される launch: function() { Ext.create("Ext.Panel", { fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', title: 'Welcome' },{ html: [ "First page.
", "link : ”, "riaddnp" ].join("") }] }); }

Slide 21

Slide 21 text

Japan Sencha User Group config option 11/12/2012 21  xtype • コンポーネントのショートカット名 • Items config内で指定する場合 • 要素を取得するためのセレクタ完全修飾名 xtype Ext.Panel panel Ext.dataview.List list Ext.TitleBar titlebar Ext.Button button Ext.picker.Picker picker

Slide 22

Slide 22 text

Japan Sencha User Group config option 11/12/2012 22 設定オブジェクトが増える …！！

Slide 23

Slide 23 text

Japan Sencha User Group 11/12/2012 23

Slide 24

Slide 24 text

Japan Sencha User Group 11/12/2012 24 items:[{ xtype: "fieldset", title: "フォーム", items:[{ xtype: "textfield", labelWidth: "35%" label : 'text1' },{ xtype : "datepickerfield", label : "日付", picker : { yearFrom : 1930 } },{ xtype: "textfield", labelWidth: "35%" label : 'text2' },{ xtype: "textfield", labelWidth: "35%" label : 'text3' }] }]

Slide 25

Slide 25 text

Japan Sencha User Group config option 11/12/2012 25 共通するものはdefaultsにまとめましょう  defaults • すべての子コンポーネントに適用する設定を記述

Slide 26

Slide 26 text

Japan Sencha User Group 11/12/2012 26 items:[{ xtype: "fieldset", title: "フォーム", defaults:{ xtype: "textfield", labelWidth: "35%" }, items:[{ label : 'text1' },{ xtype : "datepickerfield", label : "日付", picker : { yearFrom : 1930 } },{ label : 'text2' },{ label : 'text3' }] }]

Slide 27

Slide 27 text

Japan Sencha User Group config option 11/12/2012 27 ネストが深くなる…！

Slide 28

Slide 28 text

Japan Sencha User Group config option 11/12/2012 28 別クラスに切り出しましょう

Slide 29

Slide 29 text

Japan Sencha User Group 4.イベントハンドリング 11/12/2012 29

Slide 30

Slide 30 text

Japan Sencha User Group 11/12/2012 30

Slide 31

Slide 31 text

Japan Sencha User Group 11/12/2012 31 { xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }

Slide 32

Slide 32 text

Japan Sencha User Group イベントハンドリング 11/12/2012 32  handler • よく使われるイベント • デフォルトイベント  lisners • 一度に複数のハンドラーを追加 { xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }

Slide 33

Slide 33 text

Japan Sencha User Group 11/12/2012 33 { xtype: 'button', centered: true, text: 'My Button', listeners: { tap: { scope: panel, fn: function() { alert("You tapped me"); this.getHtml(); } }, initialize: function() { alert("initialized"); } } }

Slide 34

Slide 34 text

Japan Sencha User Group イベントハンドリング 11/12/2012 34  scope • スコープを変更したい場合 • デフォルトスコープ：イベント送信元 fn: function() { this.getHtml(); } scope: panel, fn: function() { this.getHtml(); } thisはbutton thisはpanel

Slide 35

Slide 35 text

Japan Sencha User Group 5.レイアウトシステム 11/12/2012 35

Slide 36

Slide 36 text

Japan Sencha User Group レイアウトシステム 11/12/2012 36 VBox HBox Card Fit Docking 複雑なレイアウトも可能

Slide 37

Slide 37 text

Japan Sencha User Group 11/12/2012 37

Slide 38

Slide 38 text

Japan Sencha User Group 11/12/2012 38 Ext.create(‘Ext.Container', { fullscreen : true, layout : 'vbox', items : [{ xtype : 'panel', html : 'panel1', flex : 1, style: 'background:pink;', }, { xtype : 'panel', html : 'panel2', flex : 2 }] });

Slide 39

Slide 39 text

Japan Sencha User Group レイアウトシステム 11/12/2012 39 Ext.create(‘Ext.Container', { fullscreen : true, layout : 'vbox', items : [{ xtype : 'panel', html : 'panel1', flex : 1, style: 'background:pink;', }, { xtype : 'panel', html : 'panel2', flex : 2 }] });  layout • コンテナのレイアウトのための設定  flex • 画面レイアウトの比

Slide 40

Slide 40 text

Japan Sencha User Group 6.ページ遷移 11/12/2012 40

Slide 41

Slide 41 text

Japan Sencha User Group 11/12/2012 41

Slide 42

Slide 42 text

Japan Sencha User Group 11/12/2012 42 var nav = Ext.create('Ext.NavigationView', { fullscreen : true, items : [{ title : 'First', items : [{ xtype : 'button', text : 'Push a new view!', handler : function() { nav.push({ title : 'Second', html : 'Second view!' }); } }] }] }); Ext.Viewport.add(nav);

Slide 43

Slide 43 text

Japan Sencha User Group ページ遷移 11/12/2012 43  Ext.NavigationView • cardレイアウトのコンテナ • スタックへコンテナを追加、削除することでページアニメーション • push：ビューの追加 • pop：ビューの削除 • ※Backボタンを押して戻る場合、自動的にpopされる var nav = Ext.create('Ext.NavigationView', { fullscreen : true, items : [{ title : 'First', items : [{ xtype : 'button', text : 'Push a new view!', handler : function() { nav.push({ title : 'Second', html : 'Second view!' }); } }] }] }); Ext.Viewport.add(nav);

Slide 44

Slide 44 text

Japan Sencha User Group 11/12/2012 44 http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList

Slide 45

Slide 45 text

Japan Sencha User Group ページ遷移 11/12/2012 45  Ext.dataview.NestedList • ドリルダウン形式のリスト • TreeStoreをバインディングする var data = { text: 'Groceries', items: [{ text: 'Drinks', items: [{ text: 'Water', items: [{ text: 'Sparkling', leaf: true }, { text: 'Still', leaf: true },{……

Slide 46

Slide 46 text

Japan Sencha User Group 7.クラスシステムと名前空間 11/12/2012 46

Slide 47

Slide 47 text

Japan Sencha User Group クラスシステムと名前空間 11/12/2012 47  Senchaの名前空間 • ファイルパス • app/view/hoge/HogeHoge.js • 完全修飾名 • myApp. view.hoge. HogeHoge app view hoge HogeHoge.js

Slide 48

Slide 48 text

Japan Sencha User Group 11/12/2012 48 Ext.define(“MyApp.view.Foo ", { extend: 'Ext.Container', requires: [ ‘MyApp.view.Bar', ‘MyApp.view.Baz ' ], xtype:‘foo', config: { xtype: "container", fullscreen : true, layout : 'vbox', items: [{ flex:1, xtype: ‘bar' },{ flex:1, xtype: ‘baz' }] } });

Slide 49

Slide 49 text

Japan Sencha User Group クラスシステムと名前空間 11/12/2012 49  Ext.define • クラス定義（完全修飾名） • インスタンスの生成はExt.create  extend • ベースとなるクラス（完全修飾名）  xtype • 任意の短縮名称 • Requiresを書く事もわすれずに Ext.define(“MyApp.view.Foo ", { extend: 'Ext.Container', requires: [ ‘MyApp.view.Bar', ‘MyApp.view.Baz ' ], xtype:‘foo', config: { xtype: "container", fullscreen : true, layout : 'vbox', items: [{ flex:1, xtype: ‘bar' },{ flex:1, xtype: ‘baz' }] } });

Slide 50

Slide 50 text

Japan Sencha User Group 11/12/2012 50 知っておくと便利なこと

Slide 51

Slide 51 text

Japan Sencha User Group 外部ライブラリの追加 11/12/2012 51

Slide 52

Slide 52 text

Japan Sencha User Group 外部ライブラリの追加  resourcesフォルダ • 外部ライブラリやXML,画像等のリソース  app.jsonに記述 • パスを追記 • cssはcss • jsはjs • その他はresourcesに 11/12/2012 52

Slide 53

Slide 53 text

Japan Sencha User Group ビルド時のちょっとしたTips 11/12/2012 53

Slide 54

Slide 54 text

Japan Sencha User Group ちょっとしたTips  〜タグ • とタグで囲むとビルドの際にapp.jsに含まれなくなる 11/12/2012 54 function getPanel(html) { // if (!Ext.isDefined(html)) { throw new Error('html is required.'); } // var panel = Ext.create('Ext.Panel'); }

Slide 55

Slide 55 text

Japan Sencha User Group FlexからSencha Touch2へ 11/12/2012 55

Slide 56

Slide 56 text

Japan Sencha User Group 11/12/2012 56 Free ActionScript to JavaScript & Sencha Migration Guide Sencha for Flex

Slide 57

Slide 57 text

Japan Sencha User Group 11/12/2012 57 次のステップへ

Slide 58

Slide 58 text

Japan Sencha User Group どうやって勉強する？  本家のドキュメント・フォーラム • Guides, Videosが役に立つ • API Documentationで使えそうなxtype, config, メソッドを探して使う • 英語版でも時々古い情報があるので注意 11/12/2012 58

Slide 59

Slide 59 text

Japan Sencha User Group 使ってみて… • 基礎を押えれば簡単 • JSの基礎があると理解しやすい • かゆいところに手が届く • けど複雑なことをしようとするとつまづく • はじめからMVCで書くのがおすすめ • 複雑なレイアウトを組みやすいかも • ライブラリ本体は重い • Androidではやっぱりもっさり • Windows Phone8でも動く！？ 11/12/2012 59 今後に期待！ (｀・ω・´)

Slide 60

Slide 60 text

Japan Sencha User Group 11/12/2012 60