Your SlideShare is downloading. ×
0
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
First Sencha Touch2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

First Sencha Touch2

2,889

Published on

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

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

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,889
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. はじめてのSencha Touch2 2012/11/8 SenchaUG 勉強会 第2回@東京 @hiromitsuuuuu 1 Japan Sencha User Group
  • 2. 11/12/2012RIAのR&DチームでWeb標準系技術やってます。 2 Japan Sencha User Group
  • 3. 11/12/2012 クラスシステム? ビルド? コンポーネント?MVC? 名前空間?学習コストやハードルが高いらしい… (´・ω・`) しょぼーん最低限覚えておきたい基礎をまとめました 3 Japan Sencha User Group
  • 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. 11/12/2012Sencha Touch2でWebアプリ開発【基礎編】http://www.riaxdnp.jp/ 5 Japan Sencha User Group
  • 6. 11/12/2012まず知っておきたい基礎7つ 6 Japan Sencha User Group
  • 7. 11/12/2012スケルトンを作ってapp.jsに書いてみる (`・ω・´) 7 Japan Sencha User Group
  • 8. 11/12/20121. アプリケーションの生成 8 Japan Sencha User Group
  • 9. 11/12/2012 Ext.application({ name: myApp, launch: function() { console.log(Application launched!); }}); 9 Japan Sencha User Group
  • 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/12/2012 11Japan Sencha User Group
  • 12. 11/12/20122.ルートコンテナへのコンポーネントの追加 12 Japan Sencha User Group
  • 13. 11/12/2012UIコンポーネント 13 Japan Sencha User Group
  • 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. ルートコンテナへのコンポーネントの追加 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. 11/12/2012 16Japan Sencha User Group
  • 17. 11/12/20123. config option 17 Japan Sencha User Group
  • 18. 11/12/2012panel titlebar html 18 Japan Sencha User Group
  • 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. 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. 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. config option 11/12/2012 設定オブジェクトが増える …!! 22 Japan Sencha User Group
  • 23. 11/12/2012 23Japan Sencha User Group
  • 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. config option 11/12/2012 共通するものはdefaultsにまとめましょう defaults • すべての子コンポーネントに適用する設定を記述 25 Japan Sencha User Group
  • 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. config option 11/12/2012 ネストが深くなる…! 27 Japan Sencha User Group
  • 28. config option 11/12/2012 別クラスに切り出しましょう 28 Japan Sencha User Group
  • 29. 11/12/20124.イベントハンドリング 29 Japan Sencha User Group
  • 30. 11/12/2012 30Japan Sencha User Group
  • 31. 11/12/2012{ xtype: button, centered: true, text: My Button, handler: function() { alert("You tapped me"); }} 31 Japan Sencha User Group
  • 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. 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. イベントハンドリング 11/12/2012 scope • スコープを変更したい場合 • デフォルトスコープ:イベント送信元 fn: function() { this.getHtml(); thisはbutton } scope: panel, fn: function() { this.getHtml(); thisはpanel } 34 Japan Sencha User Group
  • 35. 11/12/20125.レイアウトシステム 35 Japan Sencha User Group
  • 36. レイアウトシステム 11/12/2012VBox HBox CardFit Docking 複雑なレイアウトも可能 36 Japan Sencha User Group
  • 37. 11/12/2012 37Japan Sencha User Group
  • 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. レイアウトシステム 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. 11/12/20126.ページ遷移 40 Japan Sencha User Group
  • 41. 11/12/2012 41Japan Sencha User Group
  • 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. ページ遷移 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. 11/12/2012http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList 44 Japan Sencha User Group
  • 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. 11/12/20127.クラスシステムと名前空間 46 Japan Sencha User Group
  • 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. 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. クラスシステムと名前空間 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. 11/12/2012知っておくと便利なこと 50 Japan Sencha User Group
  • 51. 11/12/2012外部ライブラリの追加 51 Japan Sencha User Group
  • 52. 外部ライブラリの追加 11/12/2012 resourcesフォルダ • 外部ライブラリやXML,画像等のリソース app.jsonに記述 • パスを追記 • cssはcss • jsはjs • その他はresourcesに 52 Japan Sencha User Group
  • 53. 11/12/2012ビルド時のちょっとしたTips 53 Japan Sencha User Group
  • 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. 11/12/2012FlexからSencha Touch2へ 55 Japan Sencha User Group
  • 56. 11/12/2012Free ActionScript toJavaScript & Sencha Migration Guide Sencha for Flex 56 Japan Sencha User Group
  • 57. 11/12/2012次のステップへ 57 Japan Sencha User Group
  • 58. どうやって勉強する? 11/12/2012 本家のドキュメント・フォーラム • Guides, Videosが役に立つ • API Documentationで使えそうなxtype, config, メソッドを探して使う • 英語版でも時々古い情報があるので注意 58 Japan Sencha User Group
  • 59. 使ってみて… 11/12/2012 • 基礎を押えれば簡単 • JSの基礎があると理解しやすい • かゆいところに手が届く • けど複雑なことをしようとするとつまづく • はじめからMVCで書くのがおすすめ • 複雑なレイアウトを組みやすいかも • ライブラリ本体は重い • Androidではやっぱりもっさり • Windows Phone8でも動く!? 今後に期待! (`・ω・´) 59 Japan Sencha User Group
  • 60. 11/12/2012 60Japan Sencha User Group

×