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

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 : フルスクリーン設定 ● 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

おわり

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

http://www.extjs.co.jp	55
http://wiki.onakasuita.org	14
http://webcache.googleusercontent.com	1
http://www.techgig.com	1

Sencha touchのはじめかた

by Yuki Naotori on Jul 29, 2010

Accessibility

Tags

Upload Details

Usage Rights

4 Embeds 71

Statistics

Sencha touchのはじめかた — Presentation Transcript