Sencha touchのはじめかた
- 2. sus4 Ext JSブログ ¢ http://extjs.blog.sus4.co.jp/ ¢ Ext JSチュ`トリアル ¢ Ext JS茶氏@兆硬塁のY創
- 3. Sencha Touchをはじめよう ¢ はじめに ¢ Sample 1 ¢ iPhoneアプリ ¢ Carouselサンプル ¢ Sencha Touch アプリ ¢ Sample 2 ¢ Sencha Touchをはじめる ¢ Overlaysサンプル ¢ _kh廠 ¢ Hello, World
- 4. iPhoneアプリ ¢ ネイティブ侏 ¢ インスト`ルするアプリ ¢ Objective-C、C、C++で恬撹 ¢ ハイブリッド侏 ¢ iPhoneに蒙晒したWebアプリ ¢ HTML + CSS + Javascriptで恬撹
- 5. Sencha TouchでつくるiPhoneアプリ ¢ HTML5をベ`ス念戻にしたWebアプリ ¢ Web_kの岑RでiPhoneに蒙晒したアプリを_k ¢ Androidやその麿のモバイルプラットフォ`ムでも咾
- 6. Sencha Touchをはじめる ¢ ライブラリのダウンロ`ド ¢ エディタ、ブラウザ、編^C ¢ Hello, World!
- 7. 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
- 8. Sench Touchのダウンロ`ド ¢ extjs.co.jpから ¢ http://extjs.co.jp/products/touch/ C 20MB了あるので廣吭
- 9. _kh廠 ¢ お挫きなエディタ ¢ お挫きなモバイルデバイス ¢ (iPhone、iPad、Androidデバイス、シュミレ`タでも措い) ¢ Javascriptコンソ`ル ¢ Mobile Safari + デバッグコンソ`ル ¢ Safari + デバッグコンソ`ル ¢ Firefox + Firebug
- 10. 書すぐコ`ドきたい繁 ¢ jsdo.itを聞う ¢ Sencha Touch beta 091がサポ`トされています。 KAYACさんありがとう!! ¢ 書晩聞うコ`ド C http://jsdo.it/satake.sus4
- 11. Hello, Wolrd! ¢ HTML ¢ index.html C Sencha Touch ライブラリのiみzみ C アプリケ`ションのJavascriptのiみzみ ¢ JS ¢ Sencha Touchのパネルを軟 ¢ ＾Hello, Worldを燕幣￣
- 12. HTMLファイルのｼ ¢ 1. Sencha Touch CSSのiみzみ ¢ 2. Sencha Touchのiみzみ ¢ 3. アプリケ`ションjsのiみzみ
- 13. index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>helloworld</title> <!-- 1. Sencha Touch CSSのiみzみ--> <link rel="stylesheet" href="st/resources/css/ext-touch.css" type="text/css"> <!-- 2. Sencha Touch ライブラリのiみzみ--> <script type="text/javascript" src=/slideshow/sencha-touch/4869142/"st/ext-touch-debug.js"></script> <!-- 3. Sencha Touch アプリケ`ションのiみzみ--> <script type="text/javascript" src="main.js"></script> </head> <body></body> </html>
- 14. Javascriptのｼ ¢ ExtJSのき圭 ¢ オブジェクトリテラル ¢ Ext.setUp()メソッド ¢ Ext.Panelクラス ¢ APIリファレンスの聞い圭 ¢ 云社フォ`ラムの聞い圭
- 15. main.js Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, styleHtmlContent:{ 'padding':'20px' }, html:'Hello, Sencha Touch!!' }); } });
- 16. Hello, World
- 17. dockedItem ¢ パネルにツ`ルバ`をO協する栽に聞う ¢ dockできる侭は4つ ¢ top ¢ bottom ¢ left ¢ Right ¢ dock枠とdockアイテム ¢ dockアイテムはExt.Toolbarなど ¢ dock枠のdockedItemコンフィグにオブジェクトまたは塘双でアイテムをO協
- 18. Hello, World!にTbarをO崔 ¢ づらいので翌何エディタ燕幣 ¢ Ext.Toolbarを恬撹 ¢ Ext.PanelのdockedItemsコンフィグにO協
- 19. Hello, World + tbar
- 20. Sample 1:Carouselサンプル ¢ Examples原奉のCarouselサンプル ¢ example/carousel ¢ sus4 Ext Jsブログの並 ¢ http://bit.ly/bkkscZ ¢ Ext.Carouselクラス ¢ レイアウト
- 21. Ext.setup()のコンフィグ ¢ Fullscreen : フルスクリ`ンO協 ¢ glossOnIcon : アイコンのグロスのエ フェクト ¢ TabletStartupScreen : iPad喘軟啝 ¢ StatusBarStyle : のステ`タスバ`のス phoneStartupScreen : iPhone軟啝 タイル ¢ ¢ Icon : 喘アイコン鮫颪悗離僖 ¢ PreloadImages : プリロ`ドする鮫 ¢ TabletIcon : 喘タブレット喘アイコン ¢ onReady : 軟咼櫂ぅ鵐 鮫 ¢ scope : スコ`プのO協 ¢ PhoneIcon : 喘スマ`トフォン喘アイ コン鮫
- 22. Ext.Carouselクラス ¢ itemsに徨となる}方のパネルを隔つ ¢ フリックでパネルを俳り紋え ¢ 邦峠圭 / 換岷圭鬚謀籌辰任る
- 23. レイアウト ¢ Sencha Touchにもレイアウトがある。 ¢ auto (兜豚) ¢ card (Ext.Carouselクラスは坪何議にcard聞っている) ¢ ft ¢ hbox ¢ vbox
- 24. vboxレイアウト ¢ Ext.layout.VBoxLayoutで協x ¢ k圭鬚縫僖優覽Kべるレイアウト ¢ 罪圭鬚没喇貎s ¢ 徨となるパネルにfexの､鰓O協して、そのパ ネルの曳楕を筝できる
- 25. 韓艶恰オプション ¢ AにしてBは0.5蔚 A:1 ¢ AにしてCは1.5蔚 B:0.5 C:1.5
- 26. おわり
- 27. sus4 Ext JSブログ ¢ http://extjs.blog.sus4.co.jp/ ¢ Ext JSチュ`トリアル ¢ Ext JS茶氏@兆硬塁のY創