Sencha Touchをはじめよう
佐竹裕行 株式会社sus4
sus4 Ext JSブログ● http://extjs.blog.sus4.co.jp/
● Ext JSチュートリアル● Ext JS勉強会@名古屋の資料
Sencha Touchをはじめよう● はじめに
● iPhoneアプリ● Sencha Touch アプリ
● Sencha Touchをはじめる● 開発環境● Hello, World
● Sample 1
● Carouselサンプル
● Sample 2
● Overlaysサンプル
iPhoneアプリ● ネイティブ型
● インストールするアプリ● Objective-C、C、C++で作成
● ハイブリッド型● iPhoneに特化したWebアプリ● HTML + CSS + Javascriptで作成
Sencha TouchでつくるiPhoneアプリ● HTML5をベース前提にしたWebアプリ● Web開発の知識でiPhoneに特化したアプリを開発● Androidやその他のモバイルプラットフォームでも動く
Sencha Touchをはじめる● ライブラリのダウンロード● エディタ、ブラウザ、検証機● Hello, World!
sencha-touch-beta-0.91の中身● docsフォルダ
● examplesフォルダ
● resourcesフォルダ
● srcフォルダ
● ext-touch.js
● ext-touch-debug-w-comments.js
● ext-touch-debug.js
● getting-started.html
● release-notes.html
● index.html
● license.inc/license.txt
Sench Touchのダウンロード● extjs.co.jpから
● http://extjs.co.jp/products/touch/
– 20MB位あるので注意
開発環境● お好きなエディタ● お好きなモバイルデバイス
● (iPhone、iPad、Androidデバイス、シュミレータでも良い)
● Javascriptコンソール● Mobile Safari + デバッグコンソール● Safari + デバッグコンソール● Firefox + Firebug
今すぐコード書きたい人● jsdo.itを使う
● Sencha Touch beta 091がサポートされています。KAYACさんありがとう!!
● 今日使うコード– http://jsdo.it/satake.sus4
Hello, Wolrd!● HTML
● index.html
– Sencha Touch ライブラリの読み込み– アプリケーションのJavascriptの読み込み
● JS
● Sencha Touchのパネルを起動● “Hello, Worldを表示”
HTMLファイルの編集● 1. Sencha Touch CSSの読み込み● 2. Sencha Touchの読み込み● 3. アプリケーションjsの読み込み
index.html<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>helloworld</title> <!-- 1. Sencha Touch CSSの読み込み--> <link rel="stylesheet" href="st/resources/css/ext-touch.css" type="text/css"> <!-- 2. Sencha Touch ライブラリの読み込み--> <script type="text/javascript" src="st/ext-touch-debug.js"></script> <!-- 3. Sencha Touch アプリケーションの読み込み--> <script type="text/javascript" src="main.js"></script></head><body></body></html>
Javascriptの編集
● ExtJSの書き方
● オブジェクトリテラル
● Ext.setUp()メソッド
● Ext.Panelクラス
● APIリファレンスの使い方
● 本家フォーラムの使い方
main.js
Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, styleHtmlContent:{ 'padding':'20px' }, html:'Hello, Sencha Touch!!' }); }});
Hello, World
dockedItem● パネルにツールバーを設定する場合に使う
● dockできる場所は4つ
● top
● bottom
● left
● Right
● dock先とdockアイテム
● dockアイテムはExt.Toolbarなど
● dock先のdockedItemコンフィグにオブジェクトまたは配列でアイテムを設定
Hello, World!にTbarを設置● 見づらいので外部エディタ表示● Ext.Toolbarを作成● Ext.PanelのdockedItemsコンフィグに設定
Hello, World + tbar
Sample 1:Carouselサンプル● Examples付属のCarouselサンプル
● example/carousel
● sus4 Ext Jsブログの記事● http://bit.ly/bkkscZ
● Ext.Carouselクラス● レイアウト
Ext.setup()のコンフィグ● Fullscreen : フルスクリーン設定
● TabletStartupScreen : iPad用起動画像
● phoneStartupScreen : iPhone起動画像
● Icon : 汎用アイコン画像へのパス
● TabletIcon : 汎用タブレット用アイコン画像
● PhoneIcon : 汎用スマートフォン用アイコン画像
● glossOnIcon : アイコンのグロスのエフェクト
● StatusBarStyle : のステータスバーのスタイル
● PreloadImages : プリロードする画像
● onReady : 起動ポイント
● scope : スコープの設定
Ext.Carouselクラス● itemsに子となる複数のパネルを持つ● フリックでパネルを切り替え● 水平方向 / 垂直方向に配置できる
レイアウト● Sencha Touchにもレイアウトがある。
● auto (初期値)
● card (Ext.Carouselクラスは内部的にcard使っている)
● ft
● hbox
● vbox
vboxレイアウト● Ext.layout.VBoxLayoutで定義● 縦方向にパネル等並べるレイアウト● 横方向に自動伸縮● 子となるパネルにfexの値を設定して、そのパ
ネルの比率を変更できる
fexオプション
A:1
B:0.5
C:1.5
● Aに対してBは0.5倍● Aに対してCは1.5倍
おわり
sus4 Ext JSブログ● http://extjs.blog.sus4.co.jp/
● Ext JSチュートリアル● Ext JS勉強会@名古屋の資料
Recommended
![[Curso de Sencha Touch 2] Aula 05: Arquitetura da API](https://img.pdfslide.tips/doc/110x75/547b7ac4b4795983098b4e0a/curso-de-sencha-touch-2-aula-05-arquitetura-da-api.jpg)
