First Sencha Touch2

Japan Sencha User Group Japan Sencha User Group

はじめての Sencha Touch2

2012/11/8

1

SenchaUG 勉強会第2回@東京

Japan Sencha User Group

@hiromitsuuuuu


11/12/2012

2

RIAのR&Dチームで Web標準系技術やってます。


11/12/2012

3

学習コストやハードルが高いらしい… (´・ω・｀)

最低限覚えておきたい基礎をまとめました

しょぼーん

MVC?

クラスシステム？

名前空間？

コンポーネント？

ビルド？


Agenda

まず知っておきたい基礎７つ 1. アプリケーションの生成 2. コンポーネントの追加 3. config option 4. イベントハンドリング 5. レイアウトシステム 6. ページ遷移 7. クラスシステムと名前空間

知っておくと便利なこと 1. 外部ライブラリの追加 2. ビルド時のちょっとしたTips 3. FlexからSencha Touch2へ

次のステップへ

11/12/2012

4


11/12/2012

5

http://www.riaxdnp.jp/

Sencha Touch2で Webアプリ開発【基礎編】


11/12/2012

6

まず知っておきたい基礎７つ


11/12/2012

7

スケルトンを作って app.jsに書いてみる

(｀・ω・´)


1. アプリケーションの生成

11/12/2012

8


11/12/2012

9

Ext.application({ name: 'myApp', launch: function() { console.log('Application launched!'); } });


11/12/2012

10

Ext.application({ name: 'myApp', launch: function() { console.log('Application launched!'); } });

Ext.application • アプリケーションの生成 • ページ読み込み後に呼ばれる • 引数：オブジェクト生成時に必要なconfigオブジェクト

name • アプリケーションの名前空間 • クラス名は常にこの名前空間から始まる

launch • アプリの起動時に一度だけ呼び出される • これもconfigオブジェクト

アプリケーションの生成


11/12/2012

11


2.ルートコンテナへのコンポーネントの追加

11/12/2012

12


11/12/2012

13

ＵＩコンポーネント


11/12/2012

14

Ext.application({ name: 'myApp', requires: [ 'Ext.Panel' ], launch: function() { var myPanel = Ext.create("Ext.Panel"); Ext.Viewport.add(myPanel); } });


ルートコンテナへのコンポーネントの追加 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); } });


11/12/2012

16


3. config option

11/12/2012

17


11/12/2012

18

titlebar

html

panel


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("") }] }); }


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

xtype • コンポーネントのショートカット名

• Items config内で指定する場合 • 要素を取得するためのセレクタ

完全修飾名 xtype

Ext.Panel panel

Ext.dataview.List list

Ext.TitleBar titlebar

Ext.Button button

Ext.picker.Picker picker



22

設定オブジェクトが増える …！！


11/12/2012

23


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

共通するものはdefaultsにまとめましょう

defaults • すべての子コンポーネントに適用する設定を記述


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

ネストが深くなる…！



28

別クラスに切り出しましょう


4.イベントハンドリング

11/12/2012

29


11/12/2012

30


11/12/2012

31

{ xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }


イベントハンドリング 11/12/2012

32

handler • よく使われるイベント • デフォルトイベント

lisners • 一度に複数のハンドラーを追加

{ xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }


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"); } } }


イベントハンドリング 11/12/2012

34

scope • スコープを変更したい場合

• デフォルトスコープ：イベント送信元

fn: function() { this.getHtml(); }

scope: panel, fn: function() { this.getHtml(); }

thisはbutton

thisはpanel


5.レイアウトシステム

11/12/2012

35


レイアウトシステム 11/12/2012

36

VBox HBox Card

Fit Docking

複雑なレイアウトも可能


11/12/2012

37


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 }] });


レイアウトシステム 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 • 画面レイアウトの比


6.ページ遷移

11/12/2012

40


11/12/2012

41


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);


ページ遷移 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);


11/12/2012

44

http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList

http://docs.sencha.com/touch/2-0/


ページ遷移 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 },{……


7.クラスシステムと名前空間

11/12/2012

46


クラスシステムと名前空間 11/12/2012

47

Senchaの名前空間 • ファイルパス

• app/view/hoge/HogeHoge.js • 完全修飾名

• myApp. view.hoge. HogeHoge

app

view

hoge HogeHoge.js


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' }] } });


クラスシステムと名前空間 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' }] } });


11/12/2012

50

知っておくと便利なこと


外部ライブラリの追加

11/12/2012

51


外部ライブラリの追加

resourcesフォルダ • 外部ライブラリやXML,画像等のリソース

app.jsonに記述 • パスを追記

• cssはcss • jsはjs • その他はresourcesに

11/12/2012

52


ビルド時のちょっとしたTips

11/12/2012

53


ちょっとした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'); }


FlexからSencha Touch2へ

11/12/2012

55


11/12/2012

56

Free ActionScript to JavaScript & Sencha Migration Guide Sencha for Flex


11/12/2012

57

次のステップへ


どうやって勉強する？

本家のドキュメント・フォーラム • Guides, Videosが役に立つ • API Documentationで使えそうなxtype, config, メソッドを探して使う • 英語版でも時々古い情報があるので注意

11/12/2012

58


使ってみて…

• 基礎を押えれば簡単 • JSの基礎があると理解しやすい

• かゆいところに手が届く • けど複雑なことをしようとするとつまづく

• はじめからMVCで書くのがおすすめ

• 複雑なレイアウトを組みやすいかも • ライブラリ本体は重い • Androidではやっぱりもっさり • Windows Phone8でも動く！？

11/12/2012

59

今後に期待！ (｀・ω・´)


11/12/2012

60

Documents

First Sencha Touch2