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

Sencha Touch & PhoneGap

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

Stefan Kolb

January 05, 2012
Tweet

More Decks by Stefan Kolb

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

Other Decks in Programming

See All in Programming
[Fin-JAWS 第38回 ～re:Invent 2024 金融re:Cap～]FaultInjectionServiceアップデート＠pre:Invent2024
shintaro_fukatsu
0
400
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
最近のVS Codeで気になるニュース 2025/01
74th
1
250
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Software Architecture
hschwentner
6
2.1k
Unity Android XR入門
sakutama_11
0
140
Domain-Driven Transformation
hschwentner
2
1.9k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Rails アプリ地図考 Flush Cut
makicamel
1
110
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GraphQLとの向き合い方2022年版
quramy
44
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
4 Signs Your Business is Dying
shpigford
182
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Typedesign – Prime Four
hannesfritz
40
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Testing 201, or: Great Expectations
jmmastey
41
7.2k

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