Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sencha Touch & PhoneGap

Avatar for Stefan Kolb Stefan Kolb
January 05, 2012
Programming
4
320

Sencha Touch & PhoneGap

Introduction to both Sencha Touch and PhoneGap
Note: Slides are in mostly in German

Avatar for Stefan Kolb

Stefan Kolb

January 05, 2012
Tweet

More Decks by Stefan Kolb

See All by Stefan Kolb
Desktop? Mobile? Unify!
Avatar for Stefan Kolb stefankolb
0
140
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Avatar for Stefan Kolb stefankolb
1
240

Other Decks in Programming

See All in Programming
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
1
240
なぜ今、Terraformの本を書いたのか？ - 著者陣に聞く！『Terraformではじめる実践IaC』登壇資料
Avatar for Ryoma Fujiwara fufuhu
4
630
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
Avatar for tk1351 tk1351
2
180
AHC051解法紹介
Avatar for eijirou eijirou
0
600
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
Avatar for adachi.ryo rvirus0817
1
1.9k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
Avatar for JaiChangPark itsmedreamwalker
0
140
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
160
エンジニアのための”最低限いい感じ”デザイン入門
Avatar for しゅん🌙 shunshobon
0
110
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
210
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
1
200
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
Avatar for r-kagaya rkaga
12
2.7k

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
It's Worth the Effort
Avatar for 3n 3n
186
28k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k

Transcript

  1. Sencha Touch & PhoneGap Cross-Plattform Mobile Development Stefan Kolb Indiginox

    GmbH MobileTechCon 2011 14/Sep/2011 - Mainz, Germany http://www.intomobile.com/wp-content/uploads/2011/02/pile-of-phones.jpg

  2. Me, Myself & I Softwareentwickler Hier macht‘s Spaß :-) @stefan_kolb

    Social Media, baby! stefankolb.de My blog is my castle

  3. Sencha Touch https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG

  4. “ http://fc04.deviantart.net/fs50/f/2009/333/1/7/Blue_Bubbles_Wallpaper_by_SonnyKingBlack.jpg http://www.sencha.com/products/touch The first HTML5, Mobile Web App Framework

  5. jQuery <HTML> DOM DOM Element DOM Element DOM Element ...

    $(‘#selector‘); jQuery Wrapper position(); append(); removeClass();

  6. Sencha Touch <HTML> DOM List Button Toolbar ... new Ext.List({

    ... }); Sencha Touch Widgets

  7. Sencha Touch • HTML5, CSS3, JavaScript • Basiert auf Ext

    JS (Platform) • Cross-Platform

  8. http://www.sencha.com/img/20110222-loopfuse.png

  9. http://dev.sencha.com/deploy/touch/examples/kitchensink/

  10. Sencha Touch

  11. index.html

  12. Model-View-Controller MVC http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg

  13. • Ext.regModel(); • Ext.regController(); • Ext.reg(); • new Ext.###CLASS###({ });

    Managers

  14. Model erstellen

  15. View erstellen

  16. Controller erstellen

  17. Funktionen

  18. Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg

  19. http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/ & Sencha Touch

  20. • Repräsentiert Daten • Validierung von Daten • Verbindung zu

    anderen Modellen Model

  21. Store • Sammlung von Model-Instanzen • Datenmanagement für UI- Komponenten

  22. Proxy • Laden / Speichern von Model-Daten • ClientProxy vs.

    ServerProxy • LocalStorageProxy, SessionStorageProxy, MemoryProxy • AjaxProxy, ScriptTagProxy • CRUD / Operation-Objekt

  23. Design User Interface http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg

  24. • Visuellen Bestanteile einer App • User Interface Components

  25. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Components Demo

  26. • Wrapper für andere Components • Hinzufügen, Einfügen und Entfernen

    von Components • Anordnung der beinhaltenden Components mittels Layout Container

  27. Layout • Legt fest, wie Components innerhalb eines Containers gerendert

    wrden • auto, fit, card, hbox, vbox • dock, field, box

  28. fit

  29. card

  30. hbox

  31. vbox

  32. Container/Layout Konfiguration • pack: start, center, end, justify • align:

    start, center, end, stretch • direction: normal, reverse • width, height, flex

  33. Container/Layout Konfiguration

  34. None

  35. Events & Gestures Touch http://www.sencha.com/products/touch/ tap/double-tap pinch/rotate swipe tap &

    hold

  36. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Touch Solitaire Demo

  37. • CSS3 • Unabhängig der Bildschirmauflösung • Icons • Animations

    • slide, pop, fade, flip & cube • Eigene Animationen mittels CSS Style & Design

  38. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Styles & Design Demo

  39. Theming http://www.sencha.com/products/touch/style-design

  40. Lizenzen • Open Source Licenses • GPL v3 & FLOSS

    • Commercial Software License • Commercial OEM License

  41. Lizenzen • Open Source Licenses • GPL v3 & FLOSS

    • Commercial Software License • Commercial OEM License

  42. Offline HTML5 CSS3 Touch Events Animations Theming MVC Data Package

    iOS BlackBerry Android Windows Phone Charts Ajax Forms Layouts Audio Video History Templates Animations ScrollView Maps

  43. PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg

  44. Web-App HTML5 CSS JavaScript Native APIs

  45. PhoneGap • Native Bibliothek • JavaScript • navigator.*

  46. http://www.phonegap.com/about/features

  47. http://docs.phonegap.com

  48. deviceready?

  49. build.phonegap.com PhoneGap Build

  50. http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Sencha Touch & PhoneGap Demo

  51. Fragen? Bitte nicht so schwierige :-) @stefan_kolb [email protected]

  52. I‘m up for beers THX http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959