Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめての Sencha Touch2 / First Sencha Touch2

はじめての Sencha Touch2 / First Sencha Touch2

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

Hiromi Morikawa

November 08, 2012
Tweet

More Decks by Hiromi Morikawa

Other Decks in Technology

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 Agenda  まず知っておきたい基礎7つ 1. アプリケーションの生成 2.

    コンポーネントの追加 3. config option 4. イベントハンドリング 5. レイアウトシステム 6. ページ遷移 7. クラスシステムと名前空間  知っておくと便利なこと 1. 外部ライブラリの追加 2. ビルド時のちょっとしたTips 3. FlexからSencha Touch2へ  次のステップへ 11/12/2012 4
  3. Japan Sencha User Group 11/12/2012 9 Ext.application({ name: 'myApp', launch:

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

    function() { console.log('Application launched!'); } });  Ext.application • アプリケーションの生成 • ページ読み込み後に呼ばれる • 引数:オブジェクト生成時に必要なconfigオブジェクト  name • アプリケーションの名前空間 • クラス名は常にこの名前空間から始まる  launch • アプリの起動時に一度だけ呼び出される • これもconfigオブジェクト アプリケーションの生成
  5. 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); } });
  6. 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); } });
  7. 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("") }] }); }
  8. 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("") }] }); }
  9. 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
  10. 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' }] }]
  11. Japan Sencha User Group config option 11/12/2012 25 共通するものはdefaultsにまとめましょう 

    defaults • すべての子コンポーネントに適用する設定を記述
  12. 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' }] }]
  13. Japan Sencha User Group 11/12/2012 31 { xtype: 'button', centered:

    true, text: 'My Button', handler: function() { alert("You tapped me"); } }
  14. Japan Sencha User Group イベントハンドリング 11/12/2012 32  handler •

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

    スコープを変更したい場合 • デフォルトスコープ:イベント送信元 fn: function() { this.getHtml(); } scope: panel, fn: function() { this.getHtml(); } thisはbutton thisはpanel
  17. 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 }] });
  18. 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 • 画面レイアウトの比
  19. 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);
  20. 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);
  21. 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 },{……
  22. Japan Sencha User Group クラスシステムと名前空間 11/12/2012 47  Senchaの名前空間 •

    ファイルパス • app/view/hoge/HogeHoge.js • 完全修飾名 • myApp. view.hoge. HogeHoge app view hoge HogeHoge.js
  23. 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' }] } });
  24. 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' }] } });
  25. Japan Sencha User Group 外部ライブラリの追加  resourcesフォルダ • 外部ライブラリやXML,画像等のリソース 

    app.jsonに記述 • パスを追記 • cssはcss • jsはjs • その他はresourcesに 11/12/2012 52
  26. 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'); }
  27. Japan Sencha User Group どうやって勉強する?  本家のドキュメント・フォーラム • Guides, Videosが役に立つ

    • API Documentationで使えそうなxtype, config, メソッドを探して使う • 英語版でも時々古い情報があるので注意 11/12/2012 58
  28. Japan Sencha User Group 使ってみて… • 基礎を押えれば簡単 • JSの基礎があると理解しやすい •

    かゆいところに手が届く • けど複雑なことをしようとするとつまづく • はじめからMVCで書くのがおすすめ • 複雑なレイアウトを組みやすいかも • ライブラリ本体は重い • Androidではやっぱりもっさり • Windows Phone8でも動く!? 11/12/2012 59 今後に期待! (`・ω・´)