Sencha touchのはじめかた

Sencha Touchをはじめよう

佐竹裕行　株式会社sus4

sus4 Ext JSブログ
●
http://extjs.blog.sus4.co.jp/
●
Ext JSチュートリアル
●
Ext JS勉強会@名古屋の資料

Sencha Touchをはじめよう
●
はじめに ●
Sample 1
●
iPhoneアプリ ●
Carouselサンプル
●
Sencha Touch アプリ ●
Sample 2
●
Sencha Touchをはじめる ●
Overlaysサンプル
●
開発環境
●
Hello, World

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フォルダ ●
getting-started.html

●
examplesフォルダ ●
release-notes.html

●
resourcesフォルダ ●
index.html

●
srcフォルダ ●
license.inc/license.txt

●
ext-touch.js

●
ext-touch-debug-w-comments.js

●
ext-touch-debug.js

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>

<link rel="stylesheet" href="st/resources/css/ext-touch.css" type="text/css">

<script type="text/javascript" src="st/ext-touch-debug.js"></script>

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

dockedItem
●
パネルにツールバーを設定する場合に使う

●
dockできる場所は4つ

●
top

●
bottom

●
left

●
Right

●
dock先とdockアイテム

●
dockアイテムはExt.Toolbarなど

●
dock先のdockedItemコンフィグにオブジェクトまたは配列でアイテムを設定

Hello, World!にTbarを設置
●
見づらいので外部エディタ表示
●
Ext.Toolbarを作成
●
Ext.PanelのdockedItemsコンフィグに設定

Sample 1:Carouselサンプル
●
Examples付属のCarouselサンプル
●
example/carousel

●
sus4 Ext Jsブログの記事
●
http://bit.ly/bkkscZ

●
Ext.Carouselクラス
●
レイアウト

Ext.setup()のコンフィグ
●
Fullscreen : フルスクリーン設定 ●
glossOnIcon : アイコンのグロスのエ
フェクト
●
TabletStartupScreen : iPad用起動画像
●
StatusBarStyle : のステータスバーのス
phoneStartupScreen : iPhone起動画像
タイル
●

●
Icon : 汎用アイコン画像へのパス ●
PreloadImages : プリロードする画像
●
TabletIcon : 汎用タブレット用アイコン ●
onReady : 起動ポイント
画像
●
scope : スコープの設定
●
PhoneIcon : 汎用スマートフォン用アイ
コン画像

Ext.Carouselクラス
●
itemsに子となる複数のパネルを持つ
●
フリックでパネルを切り替え
●
水平方向 / 垂直方向に配置できる

レイアウト
●
Sencha Touchにもレイアウトがある。
●
auto　(初期値)
●
card　(Ext.Carouselクラスは内部的にcard使っている)
●
ft
●
hbox
●
vbox

vboxレイアウト
●
Ext.layout.VBoxLayoutで定義
●
縦方向にパネル等並べるレイアウト
●
横方向に自動伸縮
●
子となるパネルにfexの値を設定して、そのパ
ネルの比率を変更できる

fexオプション
●
Aに対してBは0.5倍
A:1
●
Aに対してCは1.5倍
B:0.5

C:1.5

Sencha touchのはじめかた

More Related Content

Viewers also liked

Similar to Sencha touchのはじめかた

More from Yuki Naotori

Sencha touchのはじめかた