Contenu connexe Similaire à App Entwicklung mit Appcelerator Titanium - MTC 2014 (20) App Entwicklung mit Appcelerator Titanium - MTC 20141. Marcel Pociot | ORT Interactive GmbH
App Entwicklung mit Appcelerator Titanium
14. Appcelerator Titanium
• > 500.000 Entwickler weltweit
• > 205 mio Geräte mit Titanium Apps
• iOS,Android, Blackberry,Windows Phone
(Beta)
15. ImVergleich
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[myButton setTitle:@"Hallo!" forState:UIControlStateNormal];
Button myButton = new Button( this );
myButton.setText(“Hallo!“);
JAVA
var myButton = Ti.UI.createButton({
title: “Hallo!“
});
Javascript / Titanium API
Objective-C
17. IDE - Titanium Studio
• kostenlos
• Eclipse / Aptana basiert
• Integrierter Debugger
20. Titanium API - Zugriff
•Lokalisierung
•Karten
•GPS
•Gyroskop
•SQLite Datenbank
•Dateisystem Zugriff
•Kamera
•Adressbuch
•…
22. User Interface
var win = Ti.UI.createWindow({
backgroundColor: "white"
});
!
var button = Ti.UI.createButton({
title: "Hallo MTC 2014!"
});
button.addEventListener("click",function(e)
{
alert( L("Hallo“) );
});
win.add( button );
!
win.open();
25. User Interface
var detailWindow = Ti.UI.createWindow({
title: 'Informationen',
backgroundColor: '#EDEDED'
});
var detailView = Ti.UI.createScrollView({});
detailView.contentHeight = 0;
// icon
var icon = Ti.UI.createImageView({
image: appData.icon,
width: 57,
height: 57,
hires: true,
top: 5,
left: 5,
borderRadius: 5
});
detailView.add(icon);
5,
left: 10,
right: 10,
height: 'auto',
text: appData.description,
font: {fontSize: 15},
width:
(Ti.Platform.displayCaps.platformWidth-20)
});
detailView.add(description);
// title
var title = Ti.UI.createLabel({
text: appData.title,
top: 5,
left: 70,
height: 50,
width: 200,
font: {fontSize: 16, fontWeight: 'bold'}
});
detailView.add(title);
var publisher = Ti.UI.createLabel({
text: appData.publisher,
top: 40,
left: 70,
height: 20,
color: '#666',
font: {fontSize: 12, fontWeight: 'bold'}
});
detailView.add(publisher);
// Version
var version = Ti.UI.createLabel({
text: 'Version '+appData.version,
top: 55,
left: 70,
height: 20,
color: '#666',
font: {fontSize: 12, fontWeight: 'bold'}
});
30. Aufbau einer Alloy App
Plattform abhängige Assets
Applikations-Logik
CSS ähnliche Syntax
XMLViews
31. XMLViews
<Alloy>
<Window>
<Button platform="android" onClick="pressButton">Android Press me</Button>
<Button platform="ios" onClick="pressButton">iOS Press me</Button>
<Button platform="blackberry" onClick="pressButton">BB10 Press me</Button>
<View top="75%" backgroundColor="red">
<TextArea width="90%" height="90%" value="lorem ipsum"></TextArea>
</View>
</Window>
</Alloy>
36. Models
var session = Alloy.createModel('session', {
title: 'App Entwicklung mit Titanium',
speaker: 'Marcel Pociot'
});
var title = session.get('title');
var speaker = session.get('speaker');
// Ausgabe in der View
$.label.text = title + ' von ' + speaker;
37. Was Alloy daraus macht
function pressButton() {
alert("Hallo!");
var newWindow = Alloy.createController("secondWindow", {}).getView();
newWindow.open();
}
require("alloy/controllers/BaseController").apply(this,
Array.prototype.slice.call(arguments));
this.__controllerPath = "index";
arguments[0] ? arguments[0]["__parentSymbol"] : null;
arguments[0] ? arguments[0]["$model"] : null;
arguments[0] ? arguments[0]["__itemTemplate"] : null;
var $ = this;
var exports = {};
var __defers = {};
$.__views.index = Ti.UI.createWindow({
backgroundColor: "white",
id: "index"
});
$.__views.index && $.addTopLevelView($.__views.index);
$.__views.__alloyId3 = Ti.UI.createButton({
title: "BB10 Press me",
id: "__alloyId3"
});
$.__views.index.add($.__views.__alloyId3);
45. Wozu?
•Zugriff auf nicht abgedeckte OS Features
•Bestehende Libraries in Titanium nutzen
•Kritische Bereiche der App anpassen
•Das Core Framework erweitern /
verbessern
46. Und wie?
•Titanium Framework von Github forken
•Unflexibel
•Kann sinnvoll sein für Core Änderungen
!
•Ein natives Modul durch das Titanium SDK
•Sehr flexibel
•Am besten zur Distribution
49. ACS Features
•Mobile Backend as a Service
•Viele fertige Schnittstellen
•User, Fotos, Push, …
•Speichern von eigenen Objekten
•Titanium Integration
51. Fazit
•Sehr schnelles Crossplatform Prototyping
•Gutes Ökosystem
•Super Einstieg für Leute mit Web-Hintergrund
!
•Anpassungen am Core sind aufwändig
•Performance kann ein Problem werden