はじめてのSencha Touch2   2012/11/8   SenchaUG 勉強会 第2回@東京   @hiromitsuuuuu                                         1           ...
11/12/2012RIAのR&DチームでWeb標準系技術やってます。                              2        Japan Sencha User Group
11/12/2012              クラスシステム?       ビルド?                         コンポーネント?MVC?                           名前空間?学習コストやハードル...
Agenda                                                 11/12/2012    まず知っておきたい基礎7つ     1.   アプリケーションの生成     2.   コンポーネントの...
11/12/2012Sencha Touch2でWebアプリ開発【基礎編】http://www.riaxdnp.jp/                                               5               ...
11/12/2012まず知っておきたい基礎7つ                                      6                Japan Sencha User Group
11/12/2012スケルトンを作ってapp.jsに書いてみる      (`・ω・´)                                7          Japan Sencha User Group
11/12/20121. アプリケーションの生成                                       8                 Japan Sencha User Group
11/12/2012 Ext.application({      name: myApp,         launch: function() {            console.log(Application launched!);...
アプリケーションの生成                                                                   11/12/2012 Ext.application   • アプリケーションの生成 ...
11/12/2012                     11Japan Sencha User Group
11/12/20122.ルートコンテナへのコンポーネントの追加                                        12                   Japan Sencha User Group
11/12/2012UIコンポーネント                                 13            Japan Sencha User Group
11/12/2012Ext.application({          name: myApp,       requires: [          Ext.Panel      ],      launch: function() {  ...
ルートコンテナへのコンポーネントの追加                                                                       11/12/2012 Ext.Viewport   • 画面全...
11/12/2012                     16Japan Sencha User Group
11/12/20123. config option                                        17                   Japan Sencha User Group
11/12/2012panel        titlebar         html                                        18                   Japan Sencha User...
launch: function() {                                                 11/12/2012    Ext.create("Ext.Panel", {          full...
config option                                                                11/12/2012 config option   •   新しいオブジェクトを生成す...
config option                                                          11/12/2012 xtype  • コンポーネントのショートカット名     • Items c...
config option                                                   11/12/2012                設定オブジェクトが増える …!!                ...
11/12/2012                     23Japan Sencha User Group
items:[{   xtype: "fieldset",                               11/12/2012   title: "フォーム",   items:[{       xtype: "textfield...
config option                                                       11/12/2012             共通するものはdefaultsにまとめましょう defaul...
items:[{                                           11/12/2012   xtype: "fieldset",   title: "フォーム",   defaults:{       xty...
config option                                             11/12/2012                ネストが深くなる…!                            ...
config option                                                11/12/2012                別クラスに切り出しましょう                      ...
11/12/20124.イベントハンドリング                                    29               Japan Sencha User Group
11/12/2012                     30Japan Sencha User Group
11/12/2012{    xtype: button,    centered: true,    text: My Button,    handler: function() {       alert("You tapped me")...
イベントハンドリング                                                       11/12/2012 handler   •   よく使われるイベント   •   デフォルトイベント lis...
11/12/2012{    xtype: button,    centered: true,    text: My Button,    listeners: {      tap: {          scope: panel,   ...
イベントハンドリング                                                   11/12/2012 scope  •   スコープを変更したい場合       • デフォルトスコープ:イベント送信元...
11/12/20125.レイアウトシステム                                   35              Japan Sencha User Group
レイアウトシステム                                        11/12/2012VBox   HBox      CardFit    Docking        複雑なレイアウトも可能         ...
11/12/2012                     37Japan Sencha User Group
11/12/2012Ext.create(‘Ext.Container, {      fullscreen : true,      layout : vbox,      items : [{         xtype : panel, ...
レイアウトシステム                                                                      11/12/2012 layout   •   コンテナのレイアウトのための設定 ...
11/12/20126.ページ遷移                               40          Japan Sencha User Group
11/12/2012                     41Japan Sencha User Group
var nav = Ext.create(Ext.NavigationView, {                   11/12/2012      fullscreen : true,      items : [{         ti...
ページ遷移                                                                                11/12/2012 Ext.NavigationView  •   c...
11/12/2012http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList                                                 ...
ページ遷移                                                      11/12/2012 Ext.dataview.NestedList   •   ドリルダウン形式のリスト   •   Tr...
11/12/20127.クラスシステムと名前空間                                      46                 Japan Sencha User Group
クラスシステムと名前空間                                                                   11/12/2012 Senchaの名前空間  • ファイルパス     • app...
Ext.define(“MyApp.view.Foo ", {                                                  11/12/2012      extend: Ext.Container,   ...
クラスシステムと名前空間                                                                    11/12/2012 Ext.define   • クラス定義(完全修飾名)   ...
11/12/2012知っておくと便利なこと                                   50              Japan Sencha User Group
11/12/2012外部ライブラリの追加                                  51             Japan Sencha User Group
外部ライブラリの追加                                           11/12/2012 resourcesフォルダ  • 外部ライブラリやXML,画像等のリソース app.jsonに記述  • パスを...
11/12/2012ビルド時のちょっとしたTips                                       53                  Japan Sencha User Group
ちょっとしたTips                                                                   11/12/2012 <debug>〜</debug>タグ     • <debug>と...
11/12/2012FlexからSencha Touch2へ                                            55                       Japan Sencha User Group
11/12/2012Free ActionScript toJavaScript & Sencha Migration Guide   Sencha for Flex                                       ...
11/12/2012次のステップへ                               57          Japan Sencha User Group
どうやって勉強する?                                                              11/12/2012 本家のドキュメント・フォーラム • Guides, Videosが役に立つ ...
使ってみて…                                            11/12/2012 • 基礎を押えれば簡単 • JSの基礎があると理解しやすい • かゆいところに手が届く    • けど複雑なことをしようと...
11/12/2012                     60Japan Sencha User Group
Upcoming SlideShare
Loading in …5
×

First Sencha Touch2

3,329 views

Published on

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

First Sencha Touch2

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

×