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
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
750
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
15
3k
ReadMoreTextView
Avatar for Sungyong An fornewid
1
450
統一感のある Go コードを生成 AI の力で手にいれる
Avatar for Kotaro Otaka otakakot
1
3k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
260
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.3k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
110
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
170
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
4
180
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
170
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
WindowInsetsだってテストしたい
Avatar for RyuNen344 ryunen344
1
190

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k

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