View
9
Download
0
Category
Preview:
Citation preview
Cross-PlatformMobile Apps
05. Juni 2013
Mittwoch, 5. Juni 13
• Master of Science (2009)
• Arbeitet bei 1&1 Internet AG
• Head of Frameworks & Tooling
• Tech Lead von qooxdoo
Martin Wittemann
Mittwoch, 5. Juni 13
PlattformenRest7 %
Java ME12 %
Android26 %
iOS55 %
Mobile-Phone + Tablet, Stand: 21.05.2013, Quelle: http://netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpct=3
Mittwoch, 5. Juni 13
PlattformenRest7 %
Java ME12 %
iOS & Andoid81 %Mobile-Phone + Tablet, Stand: 21.05.2013,
Quelle: http://netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpct=3Mittwoch, 5. Juni 13
Plattformen
Mittwoch, 5. Juni 13
Plattformen
Objective-C Java
Mittwoch, 5. Juni 13
Plattformen
Webtechnologien
Mittwoch, 5. Juni 13
Plattformen
Webtechnologien
Mittwoch, 5. Juni 13
Webtechnologien
HTML CSSJAVASCRIPT
Mittwoch, 5. Juni 13
Mobile Apps
Cross-Platform
Dev
ice
API
/ A
pp S
tore
s
Mittwoch, 5. Juni 13
Mobile Apps
Cross-Platform
Dev
ice
API
/ A
pp S
tore
s
Native Apps
Mittwoch, 5. Juni 13
Mobile Apps
Cross-Platform
Dev
ice
API
/ A
pp S
tore
s
Native Apps
Mobile Website
Mittwoch, 5. Juni 13
Mobile Apps
Cross-Platform
Dev
ice
API
/ A
pp S
tore
s
Native Apps
Mobile Website
Hybrid Apps
Mittwoch, 5. Juni 13
Mobile Apps
Cross-Platform
Dev
ice
API
/ A
pp S
tore
s
Native Apps
Mobile Website
Hybrid Apps
Mittwoch, 5. Juni 13
Native Entwicklung
SDK
SDK
Code
Code
Test
Test
Build
Build
Mittwoch, 5. Juni 13
Webtechnologien
SDK Code Test
Build
Build
Mittwoch, 5. Juni 13
Webtechnologien
SDK Code Test
Build
Build
Build
Build
Build ...Mittwoch, 5. Juni 13
• Programmierung der Oberfläche
Herausforderungen
Mittwoch, 5. Juni 13
Programmierung der Oberfläche
Normal:
Pressed:
Mittwoch, 5. Juni 13
Programmierung der Oberfläche
<!DOCTYPE html><html><head> <style type="text/css" media="screen"> .button { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 1px solid #B4B4B4; background-color: white; color: #666; cursor: pointer; font-weight: 700; text-align: center; padding: 2px 20px; margin-top: 4px; height: 30px; width: auto; line-height: 30px; font-size: 15px; font-family: Helvetica; }
.button:active { background-image:-webkit-gradient(linear,center top,center bottom,from( #4583fd),to(#194ae4)); background-image:-webkit-linear-gradient(top, #4583fd, #194ae4); background-image:-moz-linear-gradient(top, #4583fd, #194ae4); background-image:linear-gradient(to bottom, #4583fd, #194ae4); color:#fff } </style></head><body> <div class="button">Button</div></body></html>
Normal:
Pressed:
Mittwoch, 5. Juni 13
✓Programmierung der Oberfläche
• Cross-Browser Unterschiede
Herausforderungen
Mittwoch, 5. Juni 13
Cross-Browser Unterschiede
Mittwoch, 5. Juni 13
Cross-Browser Unterschiede
[1] Quelle: http://caniuse.com/#feat=transforms3d
Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen!
Mittwoch, 5. Juni 13
Cross-Browser Unterschiede
[1] Quelle: http://caniuse.com/#feat=transforms3d
[1]• Unterstützt von iOS und ab Android 3.0
• Feature Checks zur Laufzeit --> zukunftssicher
Beispiel 3D Transforms
Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen!
Mittwoch, 5. Juni 13
Cross-Browser Unterschiede
[1] Quelle: http://caniuse.com/#feat=transforms3d
[1]• Unterstützt von iOS und ab Android 3.0
• Feature Checks zur Laufzeit --> zukunftssicher
Beispiel 3D Transforms
Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen!
Mittwoch, 5. Juni 13
✓Programmierung der Oberfläche
✓Cross-Browser Unterschiede
• Probleme mit dem Scrolling
Herausforderungen
Mittwoch, 5. Juni 13
Scrolling-Probleme
fix
beweglich
fix
Mittwoch, 5. Juni 13
Scrolling-Probleme
fix
beweglich
fix
Mittwoch, 5. Juni 13
Scrolling-Probleme
position: fixed bzw. overflow: scroll
fix
beweglich
fix
Mittwoch, 5. Juni 13
Scrolling-Probleme
position: fixed bzw. overflow: scroll
[1] Quelle: http://caniuse.com/#feat=css-fixed
fix
beweglich
fix
Natives scrolling ab iOS 5.0 und Android 3.0 [1]!
Mittwoch, 5. Juni 13
✓Programmierung der Oberfläche
✓Cross-Browser Unterschiede
✓Probleme mit dem Scrolling
• Beschränkter Zugriff auf die Hardware
• Keine Distribution über die AppStores
Herausforderungen
Mittwoch, 5. Juni 13
PhoneGap
Mittwoch, 5. Juni 13
PhoneGap
Verpacken
Mittwoch, 5. Juni 13
PhoneGap
Verpacken Installieren
Mittwoch, 5. Juni 13
✓Programmierung der Oberfläche
✓Cross-Browser Unterschiede
✓Probleme mit dem Scrolling
✓Beschränkter Zugriff auf die Hardware
✓Keine Distribution über die AppStores
Herausforderungen
Mittwoch, 5. Juni 13
Frameworks
qooxdoo
Mittwoch, 5. Juni 13
Frameworks
qooxdoo
LGPL / EPL GPL / Commercial MIT✓ - ✓
Cross-Browser Kompatibilität✓Umfangreiche Widget-Sets✓
Vorgefertigte Themes✓Scrolling via iScroll Eigene Scrolling-Lösung Natives Scrolling✓ ✓ -
Mittwoch, 5. Juni 13
qooxdoo Mobile Beispiel
var page = new qx.ui.mobile.page.NavigationPage();page.setTitle("Hello World");
page.addListener("initialize", function() { var button = new qx.ui.mobile.form.Button("Button"); button.addListener("tap", function() { alert("Hello World"); }); page.getContent().add(button);});
JavaScript
Mittwoch, 5. Juni 13
Sencha-Touch Beispiel
Ext.define('Button.view.Main', { extend: 'Ext.Container', xtype: 'main', requires: ['Ext.TitleBar' ], config: { items: [{ title: 'Welcome', items: [{ docked: 'top', xtype: 'titlebar', title: 'Hello World' }, { title : 'Button', items : { xtype : 'button', text : 'Button', margin: 10, handler: function () { alert("Hello World"); } } }] } ] }});
JavaScript
Mittwoch, 5. Juni 13
jQuery-mobile Beispiel
<div data-role="header" data-position="fixed"> <h1>Hello World</h1></div><a id="button" href="#" data-role="button" style="margin: 10px;"> Button</a>
HTML
JavaScript
$("#button").on("tap", function() { alert("Hello World");});
Mittwoch, 5. Juni 13
Widgets
Mittwoch, 5. Juni 13
Vordefinierte Themes
iOS Android Custom
Mittwoch, 5. Juni 13
Entwicklung
• Objekt-Orientierung
• Data-Binding
• Entwicklungsumgebung
• Tooling
Mittwoch, 5. Juni 13
Objekt-Orientierung
qx.Class.define("Bicycle", { extend : Vehicle, members : { speed : 0, speedUp : function(increment) { this.speed += increment; } }});
class Bicycle extends Vehicle { int speed = 0; void speedUp(int increment) { speed += increment; }
}
qooxdoo
Mittwoch, 5. Juni 13
Objekt-Orientierung
Mittwoch, 5. Juni 13
Data-Binding
Model View
Mittwoch, 5. Juni 13
Data-Binding
Model Viewbinding
Mittwoch, 5. Juni 13
Data-Binding
Model Viewbinding
Mittwoch, 5. Juni 13
Data-Binding
Model bindingStoreWebservice
Mittwoch, 5. Juni 13
Data-Binding
Model bindingStoreWebservice load
Mittwoch, 5. Juni 13
Data-Binding
Model bindingStoreWebservice load create
Mittwoch, 5. Juni 13
Data-Binding
clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',
JSON-P Service Mobile-List
Data-Binding
Mittwoch, 5. Juni 13
Data-Binding
clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',
JSON-P Service Mobile-ListData-Binding
var store = new qx.data.store.Jsonp(url);
// Viewvar page = new qx.ui.mobile.page.NavigationPage();page.addListener("initialize", function() { var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setTitle( data.getHometeam() + " vs. " + data.getAwayteam() ); } });
store.bind("model", list, "model"); page.getContent().add(list);});
Mittwoch, 5. Juni 13
Data-Binding
clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',
JSON-P Service Mobile-ListData-Binding
var store = new qx.data.store.Jsonp(url);
// Viewvar page = new qx.ui.mobile.page.NavigationPage();page.addListener("initialize", function() { var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setTitle( data.getHometeam() + " vs. " + data.getAwayteam() ); } });
store.bind("model", list, "model"); page.getContent().add(list);});
Mittwoch, 5. Juni 13
Data-Binding
clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',
JSON-P Service Mobile-ListData-Binding
var store = new qx.data.store.Jsonp(url);
// Viewvar page = new qx.ui.mobile.page.NavigationPage();page.addListener("initialize", function() { var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setTitle( data.getHometeam() + " vs. " + data.getAwayteam() ); } });
store.bind("model", list, "model"); page.getContent().add(list);});
Mittwoch, 5. Juni 13
Data-Binding
clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',
JSON-P Service Mobile-ListData-Binding
var store = new qx.data.store.Jsonp(url);
// Viewvar page = new qx.ui.mobile.page.NavigationPage();page.addListener("initialize", function() { var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setTitle( data.getHometeam() + " vs. " + data.getAwayteam() ); } });
store.bind("model", list, "model"); page.getContent().add(list);});
Mittwoch, 5. Juni 13
Development
JS
Mittwoch, 5. Juni 13
Development
JS run
Mittwoch, 5. Juni 13
Development
JS run error
Mittwoch, 5. Juni 13
Development
JS run debugger
Mittwoch, 5. Juni 13
Dev Tools Settings
Mittwoch, 5. Juni 13
Tooling
Mittwoch, 5. Juni 13
Tooling
JScreate
Mittwoch, 5. Juni 13
Tooling
JScreatevar x = 123;function a() { return true;
Mittwoch, 5. Juni 13
Tooling
JScreatevar x = 123;function a() { return true;
lint
Warning: x is gWarning: unusedWarning: ...
LOG
Mittwoch, 5. Juni 13
Tooling
JScreatevar x = 123;function a() { return true;
lint
Warning: x is gWarning: unusedWarning: ...
LOG
test Test
Mittwoch, 5. Juni 13
Tooling
JScreatevar x = 123;function a() { return true;
lint
Warning: x is gWarning: unusedWarning: ...
LOG
api API
test Test
Mittwoch, 5. Juni 13
Tooling
JScreatevar x = 123;function a() { return true;
lint
Warning: x is gWarning: unusedWarning: ...
LOG
api API
test Testbuild
JSvar x=123;function a(){return true;}
Mittwoch, 5. Juni 13
Tooling
JScreatevar x = 123;function a() { return true;
lint
Warning: x is gWarning: unusedWarning: ...
LOG
api API
test Testbuild
JSvar x=123;function a(){return true;}
PhoneGap App
Mittwoch, 5. Juni 13
Fazit
✓sind geeignet um mobile Apps zu schreiben
✓ermöglichen Multi-Platform-Lösungen
✓reduzieren Entwicklungsaufwände
✓machen Spaß!
Webtechnologien und Frameworks ...
Mittwoch, 5. Juni 13
Danke
@wittemannmartin.wittemann@1und1.de
http://qooxdoo.org
Mittwoch, 5. Juni 13
Recommended