はじめての Sencha Touch2 / First Sencha Touch2

SenchaUG 勉強会 第2回@東京 での発表資料です。

Transcript

1. Japan Sencha User Group Japan Sencha User Group はじめての Sencha Touch2 2012/11/8 1 SenchaUG 勉強会 第2回@東京 Japan Sencha User Group @hiromitsuuuuu
2. Japan Sencha User Group 11/12/2012 2 RIAのR&Dチームで Web標準系技術 やってます。
3. Japan Sencha User Group 11/12/2012 3 学習コストやハードルが高いらしい… (´・ω・｀) 最低限覚えておきたい基礎をまとめました しょぼーん MVC? クラスシステム？ 名前空間？ コンポーネント？ ビルド？
4. 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
5. Japan Sencha User Group 11/12/2012 5 http://www.riaxdnp.jp/ Sencha Touch2で Webアプリ開発【基礎編】
6. Japan Sencha User Group 11/12/2012 6 まず知っておきたい基礎７つ
7. Japan Sencha User Group 11/12/2012 7 スケルトンを作って app.jsに書いてみる (｀・ω・´)
8. Japan Sencha User Group 1. アプリケーションの生成 11/12/2012 8
9. Japan Sencha User Group 11/12/2012 9 Ext.application({ name: 'myApp', launch: function() { console.log('Application launched!'); } });
10. Japan Sencha User Group 11/12/2012 10 Ext.application({ name: 'myApp', launch: function() { console.log('Application launched!'); } });  Ext.application • アプリケーションの生成 • ページ読み込み後に呼ばれる • 引数：オブジェクト生成時に必要なconfigオブジェクト  name • アプリケーションの名前空間 • クラス名は常にこの名前空間から始まる  launch • アプリの起動時に一度だけ呼び出される • これもconfigオブジェクト アプリケーションの生成
11. Japan Sencha User Group 11/12/2012 11
12. Japan Sencha User Group 2.ルートコンテナへのコンポーネントの追加 11/12/2012 12
13. Japan Sencha User Group 11/12/2012 13 ＵＩコンポーネント
14. 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); } });
15. 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); } });
16. Japan Sencha User Group 11/12/2012 16
17. Japan Sencha User Group 3. config option 11/12/2012 17
18. Japan Sencha User Group 11/12/2012 18 titlebar html panel
19. 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.<br>", "link : <a href=¥”http://www.riaxdnp.jp/¥">”, "riaddnp</a>" ].join("") }] }); }
20. 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.<br>", "link : <a href=¥”http:“, "//www.riaxdnp.jp/¥">”, "riaddnp</a>" ].join("") }] }); }
21. 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
22. Japan Sencha User Group config option 11/12/2012 22 設定オブジェクトが増える …！！
23. Japan Sencha User Group 11/12/2012 23
24. 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' }] }]
25. Japan Sencha User Group config option 11/12/2012 25 共通するものはdefaultsにまとめましょう  defaults • すべての子コンポーネントに適用する設定を記述
26. 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' }] }]
27. Japan Sencha User Group config option 11/12/2012 27 ネストが深くなる…！
28. Japan Sencha User Group config option 11/12/2012 28 別クラスに切り出しましょう
29. Japan Sencha User Group 4.イベントハンドリング 11/12/2012 29
30. Japan Sencha User Group 11/12/2012 30
31. Japan Sencha User Group 11/12/2012 31 { xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }
32. Japan Sencha User Group イベントハンドリング 11/12/2012 32  handler • よく使われるイベント • デフォルトイベント  lisners • 一度に複数のハンドラーを追加 { xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }
33. 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"); } } }
34. Japan Sencha User Group イベントハンドリング 11/12/2012 34  scope • スコープを変更したい場合 • デフォルトスコープ：イベント送信元 fn: function() { this.getHtml(); } scope: panel, fn: function() { this.getHtml(); } thisはbutton thisはpanel
35. Japan Sencha User Group 5.レイアウトシステム 11/12/2012 35
36. Japan Sencha User Group レイアウトシステム 11/12/2012 36 VBox HBox Card Fit Docking 複雑なレイアウトも可能
37. Japan Sencha User Group 11/12/2012 37
38. 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 }] });
39. 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 • 画面レイアウトの比
40. Japan Sencha User Group 6.ページ遷移 11/12/2012 40
41. Japan Sencha User Group 11/12/2012 41
42. 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);
43. 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);
44. Japan Sencha User Group 11/12/2012 44 http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList
45. 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 },{……
46. Japan Sencha User Group 7.クラスシステムと名前空間 11/12/2012 46
47. Japan Sencha User Group クラスシステムと名前空間 11/12/2012 47  Senchaの名前空間 • ファイルパス • app/view/hoge/HogeHoge.js • 完全修飾名 • myApp. view.hoge. HogeHoge app view hoge HogeHoge.js
48. 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' }] } });
49. 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' }] } });
50. Japan Sencha User Group 11/12/2012 50 知っておくと便利なこと
51. Japan Sencha User Group 外部ライブラリの追加 11/12/2012 51
52. Japan Sencha User Group 外部ライブラリの追加  resourcesフォルダ • 外部ライブラリやXML,画像等のリソース  app.jsonに記述 • パスを追記 • cssはcss • jsはjs • その他はresourcesに 11/12/2012 52
53. Japan Sencha User Group ビルド時のちょっとしたTips 11/12/2012 53
54. Japan Sencha User Group ちょっとしたTips  <debug>〜</debug>タグ • <debug>と</debug>タグで囲むとビルドの際にapp.jsに含まれなくなる 11/12/2012 54 function getPanel(html) { // <debug> if (!Ext.isDefined(html)) { throw new Error('html is required.'); } // </debug> var panel = Ext.create('Ext.Panel'); }
55. Japan Sencha User Group FlexからSencha Touch2へ 11/12/2012 55
56. Japan Sencha User Group 11/12/2012 56 Free ActionScript to JavaScript & Sencha Migration Guide Sencha for Flex
57. Japan Sencha User Group 11/12/2012 57 次のステップへ
58. Japan Sencha User Group どうやって勉強する？  本家のドキュメント・フォーラム • Guides, Videosが役に立つ • API Documentationで使えそうなxtype, config, メソッドを探して使う • 英語版でも時々古い情報があるので注意 11/12/2012 58
59. Japan Sencha User Group 使ってみて… • 基礎を押えれば簡単 • JSの基礎があると理解しやすい • かゆいところに手が届く • けど複雑なことをしようとするとつまづく • はじめからMVCで書くのがおすすめ • 複雑なレイアウトを組みやすいかも • ライブラリ本体は重い • Androidではやっぱりもっさり • Windows Phone8でも動く！？ 11/12/2012 59 今後に期待！ (｀・ω・´)
60. Japan Sencha User Group 11/12/2012 60