Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sencha Touch & PhoneGap
Search
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
Share
More Decks by Stefan Kolb
See All by Stefan Kolb
Desktop? Mobile? Unify!
stefankolb
0
130
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
stefankolb
1
230
Other Decks in Programming
See All in Programming
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
2
140
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
940
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
みんなでプロポーザルを書いてみた
yuriko1211
0
280
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
KATA
mclloyd
29
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Happy Clients
brianwarren
98
6.7k
Scaling GitHub
holman
458
140k
4 Signs Your Business is Dying
shpigford
180
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Unsuck your backbone
ammeep
668
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
What's in a price? How to price your products and services
michaelherold
243
12k
Facilitating Awesome Meetings
lara
50
6.1k
Transcript
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
Me, Myself & I Softwareentwickler Hier macht‘s Spaß :-) @stefan_kolb
Social Media, baby! stefankolb.de My blog is my castle
Sencha Touch https://lh5.googleusercontent.com/-MJUrGT-iyqQ/TYind_vJ7BI/AAAAAAAAKPM/lw7NADI2qgg/Japanese_Sencha_9_Tea.JPG
“ 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
jQuery <HTML> DOM DOM Element DOM Element DOM Element ...
$(‘#selector‘); jQuery Wrapper position(); append(); removeClass();
Sencha Touch <HTML> DOM List Button Toolbar ... new Ext.List({
... }); Sencha Touch Widgets
Sencha Touch • HTML5, CSS3, JavaScript • Basiert auf Ext
JS (Platform) • Cross-Platform
http://www.sencha.com/img/20110222-loopfuse.png
http://dev.sencha.com/deploy/touch/examples/kitchensink/
Sencha Touch
index.html
Model-View-Controller MVC http://rarewallpapers.com/_wallpapers/blueprint-1024x768.jpg
• Ext.regModel(); • Ext.regController(); • Ext.reg(); • new Ext.###CLASS###({ });
Managers
Model erstellen
View erstellen
Controller erstellen
Funktionen
Data Package http://www.etleboro.com/picture_library/Server_room_4.jpg
http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/ & Sencha Touch
• Repräsentiert Daten • Validierung von Daten • Verbindung zu
anderen Modellen Model
Store • Sammlung von Model-Instanzen • Datenmanagement für UI- Komponenten
Proxy • Laden / Speichern von Model-Daten • ClientProxy vs.
ServerProxy • LocalStorageProxy, SessionStorageProxy, MemoryProxy • AjaxProxy, ScriptTagProxy • CRUD / Operation-Objekt
Design User Interface http://culturedcode.com/things/iphone/makingof/ThingsTouch-InterfaceStillLife.jpg
• Visuellen Bestanteile einer App • User Interface Components
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Components Demo
• Wrapper für andere Components • Hinzufügen, Einfügen und Entfernen
von Components • Anordnung der beinhaltenden Components mittels Layout Container
Layout • Legt fest, wie Components innerhalb eines Containers gerendert
wrden • auto, fit, card, hbox, vbox • dock, field, box
fit
card
hbox
vbox
Container/Layout Konfiguration • pack: start, center, end, justify • align:
start, center, end, stretch • direction: normal, reverse • width, height, flex
Container/Layout Konfiguration
None
Events & Gestures Touch http://www.sencha.com/products/touch/ tap/double-tap pinch/rotate swipe tap &
hold
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Touch Solitaire Demo
• CSS3 • Unabhängig der Bildschirmauflösung • Icons • Animations
• slide, pop, fade, flip & cube • Eigene Animationen mittels CSS Style & Design
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Styles & Design Demo
Theming http://www.sencha.com/products/touch/style-design
Lizenzen • Open Source Licenses • GPL v3 & FLOSS
• Commercial Software License • Commercial OEM License
Lizenzen • Open Source Licenses • GPL v3 & FLOSS
• Commercial Software License • Commercial OEM License
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
PhoneGap http://lh5.ggpht.com/-rmzR397-NWM/SJFLfL6_0OI/AAAAAAAAAB8/-yL_flScXAY/UTGC0101.jpg
Web-App HTML5 CSS JavaScript Native APIs
PhoneGap • Native Bibliothek • JavaScript • navigator.*
http://www.phonegap.com/about/features
http://docs.phonegap.com
deviceready?
build.phonegap.com PhoneGap Build
http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg Sencha Touch & PhoneGap Demo
Fragen? Bitte nicht so schwierige :-) @stefan_kolb
[email protected]
I‘m up for beers THX http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959