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