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

Sencha Touch & PhoneGap

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Stefan Kolb Stefan Kolb
January 05, 2012
Programming
4
330

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
150
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Avatar for Stefan Kolb stefankolb
1
250

Other Decks in Programming

See All in Programming
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1k
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
530
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
210
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
630
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
Avatar for Takashi Kokubun k0kubun
1
390
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
650
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
100
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.2k
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
430
SourceGeneratorのススメ
Avatar for tkym htkym
0
170
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
160
Python札幌 LT資料
Avatar for t3tra t3tra
7
1.1k

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
220
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
60
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
75
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
150
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k

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