<< Teil 4  | Teil 5 meines Appcelerator Titanium Schulungs Skripts.

Ein erstes Projekt erstellen

File -> New Mobile Project


Template Kategorie "Classic", dann das Template "Default Project" wählen.


Dann folgendes ausfüllen:

Project Name: ein freier Name, z.B. "Test App 1"
App ID: ein eindeutige ID für die App im Stil einer Domain, z.B. "net.julianbuss.testapp1"
Company/Personal URL: die URL der eigenen Homepage oder Support-Seite eintragen, nur wichtig für die Distribution von Apps.
Deployment Targets: nur die Targets wählen, die auch bedient werden sollen.

Nach dem Erstellen des Projekts werden die Projekt-Eigenschaften geöffnet, wo noch weitere Daten wie ein Copyright und eine Description angegeben werden können (und sollten, wenn die App später über einen Appstore vertrieben werden soll).

In den Projekt-Eigenschaften kann auch ein Titanium SDK gewählt werden. Wenn man mehrere SDKs (ältere und neuere) hat, sollte hier immer das Neuste gewählt werden.

Analyse der neuen App vom Template "Default Project"

Ohne jede Änderung sieht die Vorgabe-App im iPhone so aus:



Projektstruktur

Ein Projekt besteht aus dieser Dateistruktur:



Die tiapp.xml enthält die Eigenschaften des Projekts.
Der Resources Ordner enthält Code und Dateien, die als Ressourcen verwendet werden sollen (z.B. Bilder).
die app.js ist der Einstiegspunkt in die App und wird als erstes ausgeführt.
Es können weitere JavaScript Dateien direkt in den Resources Ordner oder auch in Unterordner erstellt werden.

app.js

Die vorgegebene app.js aus dem Default Project Template enthält Code, um ein einfaches Layout mit zwei Tabs und jeweils einem Label zu erstellen.
Die Tabs werden durch eine TabGroup implementiert. Normalerweise ist ein Window das Top-Level Control einer App, bei einer TabGroup ist diese aber das erste Control.
Eine TabGroup enthält Tabs, die auf ein Window verweisen. Dieses Window muss erstellt werden, bevor ein Tab erstellt wird. Die Objekte werden also in folgender Reihenfolge erstellt:

TabGroup
Window
Tab, das auf das Window verweist


var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});


Dann wird das Tab der TabGroup hinzugefügt, und schließlich wird die TabGroup (also das oberste "Fenster") geöffnet:


tabGroup.add(tab1);
tabGroup.open();


In der app.js wird diese Logik mit zwei Tabs und dementsprechend zwei Window Objekten durchgeführt. Jedes Window erhält dabei auch noch ein Label.

Fortsetzung folgt.

Sie können mich für individuelle Schulungen buchen, klicken Sie hier, um mehr über meine Schulungen zu erfahren.

Eric Mack from eproductivity.com asked me if it would be possible to support his free EProductivityReference database, which is an improved version of the standard IBM Notes journal database.

I downloaded the free version of the EProductivityReference database and analyzed how NotesBook needs to be modified in order to support it. Luckily, there where only minor differences between the standard IBM Notes journal and Eric's EProductivityReference database.

So I was able to do the neccessary changes in an hour or so :-) And furthermore, I improved how entries are displayed and added the ability to zoom.
I just submitted NotesBook 3.3 to the Appstore, it should be available next week.

<< Teil 3  | Teil 4 meines Appcelerator Titanium Schulungs Skripts.

Events

Controls können Events auslösen, wie z.B. ein click bei einem Button. Diese Events können über EventHandler verarbeitet werden:


var button = Ti.UI.createButton({
       title:"klick mich"
});
button.addEventListener("click", function(e) {
       // e enthält das Event Objekt
});


EventHandler können jederzeit zur Laufzeit hinzugefügt und auch wieder entfernt werden (mit der removeEventListener Methode).

Das Event Objekt enthält:

bubbles: true wenn das Event an übergeordnete Controls weitergereicht werden möchte.
cancelBubble: auf false setzen wenn das weiterreichen gestoppt werden soll.
source: das Objekt, auf dem das Event ausgelöst wurde.
type: die Art des Events, z.B. "click".
x,y: die X- und Y-Koordinaten, wo das Event ausgelöst wurde.

Events müssen notiert werden, bevor sie das erste mal ausgelöst werden.

Für die beste Peformance, sollten Events trotzdem so spät wie möglich notiert werden (z.B. ein click Handler für ein Button sollte erst nach dem open des übergeordneten Window notiert werden).

Methoden

Controls haben Methoden, um z.B. den Fokus auf ein Feld zu setzen oder das Control zu verstecken.

Die meisten Methoden sind Getter und Setter für die Properties des Controls.

Beispiel:


var window = Ti.UI.createWindow({});
var field = Ti.UI.createTextField({
       editable: true
});
window.add(field);

var button = Ti.UI.createButton({
       title:'Feld verstecken',
       top:10
});
window.add(button);

button.addEventListener("click", function(e) {
       field.hide();
}):


Hier klicken, um Teil 5 zu lesen.

Sie können mich für individuelle Schulungen buchen, klicken Sie hier, um mehr über meine Schulungen zu erfahren.

Neben individuellen Schulungen für XPages, JavaScript, HTML, CSS und Appcelerator Titanium biete ich die Entwicklung von individueller Software an:

• Plattformen: IBM XPages, Appcelerator Titanium (Mobile Apps für iPhone, iPad, Android und Blackberry 10), Mobile Web und IBM Notes.
• Die Entwicklung basiert auf Standard-Komponenten, in denen alle Grundlagen bereits implementiert sind.
• Für das Projektmanagement steht ein online Issue-Management System zur Verfügung.
• Die Entwicklung erfolgt nach Absprache remote, on-site oder in einer Kombination.
• Die Erarbeitung des Pflichtenheftes kann ich auf Wunsch ebenfalls übernehmen, inklusive Aufnahme der Anforderungen von der Fachabteilung und Beratung hinsichtlich wirtschaftlich und technisch sinnvollen Möglichkeiten.
• Die Dokumentation der Software erfolgt je nach Bedarf mindestens in-line oder gemäß Ihrer Richtlinien.
• Bei cooperativen Entwicklungen verwende ich gerne agilen Entwicklungsmethoden.
• Mein Code ist sauber modularisiert, lesbar, effizient, dokumentiert und sehr gut wartbar.

Ein aktueller Schwerpunkt meiner Arbeit ist die Entwicklung von mobilen IBM Notes Anwendungen für iPhone, iPad, Android und Blackberry 10  mit Hilfe von YouAtNotes Domino To Go oder als Mobile Web Apps, basierend auf IBM XPages.

Neben schlüsselfertigen Anwendungen biete ich auch die Entwicklung von Frameworks an: wenn Ihre eigenen Entwickler für die effiziente Entwicklung von XPages oder XPages Mobile Web Anwendungen ertüchtigt werden sollen, kann ich ein individuelles Framework dafür entwickeln. Das Framework enthält Layout sowie UI- und Backend-Komponenten, so dass in einer neuen Anwendung nur die individuellen Masken, Ansichten und Geschäftslogik implementiert werden müssen. Damit erreichen Sie kurze Entwicklungszeiten und eine sehr gute Wartbarkeit der Anwendungen.

Ich habe weit über 10 Jahre Erfahrung in der professionellen Software-Entwicklung für Unternehmen jeder Branche und jeder Größenordnung. Bitte sprechen Sie mich an, in der Regel kann ich schon beim ersten Gespräch eine Einschätzung zum Projekt hinsichtlich Machbarkeit, Zeitrahmen und Aufwand geben.

Bitte sprechen Sie mich bei Interesse an:

• Mail: jbuss@youatnotes.com
• Skype: julianbuss

Kundenmeinungen über mich finden Sie hier:

• Referenzen auf Xing
• Referenzen auf Linkedin

<< Teil 2  | Teil 3 meines Appcelerator Titanium Schulungs Skripts.

Wichtige URLs

Titanium API:
http://docs.appcelerator.com/titanium/3.0/#!/api

Titanium API für UI Elemente:
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI


Wichtige grundlegende Codestücke

Einen Text auf der Konsole ausgeben:

Ti.API.log('text');


Kommentare wie in JavaScript üblich:

// eine auskommentierte Zeile
/*
      Mehrere Zeilen Kommentar
*/


Traditionelle Entwicklung

Erstellen der UI

UI Elemente ("Controls"), wie Buttons und Tabellen werden über die Titanium API mittels JavaScript erstellt und plaziert.

Beispiel:


var window = Ti.UI.createWindow({
      backgroundColor:"#ffffff"
});
var label = Ti.UI.createLabel({
      color:"#000000",
      text:"Text für das Label"
}):
window.add(label);


Grundlegende Elemente

Das erste Control jeder App ist ein Window. Dies  ist der Container für alle folgenden Controls.

Eine App kann aber mehrere Window Controls besitzen, die jeweils geöffnet und geschlossen werden können, um unterschiedliche Inhalte darzustellen (z.B. Navigation und Daten).

Ein View Control ist ein ebenfalls ein Container, das andere Controls wie z.B. Label oder Button aufnehmen kann.
Jedes weitere UI Control erbt von View und kann also (meistens) alles, was eine View kann. In der Titanium API wird daher häufig UI Controls allgemein als View bezeichnet.

Controls werden mit einer Ti.UI.create Methode erzeugt und dann mit .add() einem Container hinzugefügt.

Optik und Inhalte von Controls werden über Properties gesteuert, die direkt in der create Methode angegeben werden, aber auch nachträglich über Setter-Methoden verändert werden können. Properties können natürlich auch über Getter-Methoden ausgelesen werden.

Layout

Die Controls folgen den allgemeinen Layout-Regeln des Containers, dem sie hinzugefügt wurden und können auch pixelgenau plaziert werden.

Im obigen Beispiel ist das Window der Container. Die Labels folgen dem Layout des Windows, was als Vorgabe composite (ehemals "absolute") ist und eine Positionierung eines Controls mit Hilfe von top, bottom, left, right Angaben erlaubt.
In einem vertical Layout dagegen werden Controls automatisch untereinander plaziert, bei horizontal entsprechend nebeneinander.

Beispiel für composite:


var window = Ti.UI.createWindow({
      backgroundColor:"#ffffff"
});
var label1 = Ti.UI.createLabel({
      color:"#000000",
      text:"Text für das Label1",
      top:1
}):
var label2 = Ti.UI.createLabel({
      color:"#000000",
      text:"Text für das Label2",
      top:20
}):
window.add(label1);
window.add(label2);


Layout mit verschachtelten Containern

Verschiedene Layout-Arten lassen sich kombinieren, in dem in einen Container (z.B. dem Window) weitere Container mit jeweils unterschiedlichen Layout-Angaben hinzugefügt werden (z.B. View Controls).

Beispiel:

var window = Ti.UI.createWindow({
      backgroundColor:"#ffffff",
      layout:"vertical"
});

var container1 = Ti.UI.createView({
      layout:"composite",
      backgroundColor:"#00ff00",
      height:200
});
var container2 = Ti.UI.createView({
      layout:"composite",
      backgroundColor_"#ff0000",
      height:200
});

window.add(container1);
window.add(container2);

var label1 = Ti.UI.createLabel({
      color:"#000000",
      text:"Text für das Label1",
      top:1
}):
var label2 = Ti.UI.createLabel({
      color:"#000000",
      text:"Text für das Label2",
      top:20
}):

container1.add(label1);
container2.add(label2);


Hier klicken, um Teil 4 zu lesen.

Sie können mich für individuelle Schulungen buchen, klicken Sie hier, um mehr über meine Schulungen zu erfahren.

<< Teil 1  | Teil 2 meines Appcelerator Titanium Schulungs Skripts.

Zwei Entwicklungsansätze

Titanium bietet mittlerweile zwei Methoden der Entwicklung:

1. Die traditionelle Entwicklung, ausschließlich mit JavaScript und direkt mit der Titanium API.
2. Das Alloy Model-View-Controller Framework, mit dem die Gestaltung der UI von Geschäftslogik und Datenmodellen getrennt wird.

Die Alloy Methode ist neu, aber mittlerweile soweit gereift, dass sie eingesetzt werden kann.

Für den Einstieg ist das Lernen der traditionellen Methode sinnvoll. Wenn man damit Apps entwickeln kann, sollte man sich mit Alloy beschäftigen und dann entscheiden, welcher Ansatz einem persönlich mehr liegt.
Eine generelle Richtlinie könnte sein, für einfache, kleine Apps die von einem Entwickler gebaut werden, die tradionelle Methode zu verwenden. Komplexe Apps, die im Team entwickelt werden, profitieren sehr von der Alloy Methode.

Titanium IDE und notwendige SDKs

Die Entwicklung wird in der Titanium IDE durchgeführt, die auf Eclipse basiert. Alle bekannten Eclipse Plugins und Arbeitsweisen funktionieren wie gewohnt.
Für jede Plattform sind das jeweilige SDK und Tools des Herstellers notwendig, z.B. XCode und das iOS SDK von Apple oder das Android SDK von Google.

Installation überprüfen

Beim Start von Titanium öffnet sich das Dashboard. Im "Get Started" Tab unter "Configure native SDKs" wird angezeigt, welche SDKs korrekt installiert sind.
Für die Installation von SDKs wird dort Hilfestellung gegeben.
Weitere Hilfe gibt es unter http://docs.appcelerator.com/titanium/3.0/#!/guide/Installing_Platform_SDKs.

Hinweis für Android:
Für Android muss nicht nur das aktuelle SDK, sondern unbedingt auch das SDK Version 8 installiert werden. Ansonsten funktioniert der Preview der App im Simulator von Titanium aus nicht.

Hier klicken, um Teil 3 zu lesen.

Sie können mich für individuelle Schulungen buchen, klicken Sie hier, um mehr über meine Schulungen zu erfahren.

Version 3.2 had an unfortunate bug that caused connection problems on servers with a self signed SSL certificate. Sorry for that.
This should be fixed in 3.21, which has been just submitted to the Appstore.

NotesBook was developed with Titanium and Domino To Go. Click here to read more about NotesBook.

Ich arbeite gerade eine Schulung über Appcelerator Titanium für einen Kunden aus und hab mir gedacht, ich poste Teile meiner Schulungsunterlagen nach und nach im Blog :-)

Hier der erste Teil:
---
Appcelerator Titanium

Schulungsskript von Julian Buß - www.julianbuss.net
Mai 2013
basierend auf Titanium 3.1


Grundlagen

In Titanium werden Apps mit JavaScript entwickelt. Im Build Prozess wird dieses JavaScript in einen nativen Container für die jeweilige Plattform (iOS, Android, Blackberry) verpackt und dann zur Laufzeit auf dem Endgerät ausgeführt.

Die Titanium API verwendet die nativen APIs der jeweiligen Plattform, so dass UI Elemente wie z.B. Buttons, die via JavaScript generiert werden, auf dem jeweiligen Endgerät mit den entsprechenden nativen UI Elementen dargestellt werden. Eine Titanium App sieht also aus und fühlt sich an wie eine echte, native App.

Die Performance von Titanium Apps reicht häufig an echte, native Apps heran. Kritische Apps wie z.B. Spiele sind damit aber nicht umsetzbar.
Die Titanium API vereinheitlicht die Gemeinsamkeiten der unterschiedlichen Plattformen, bietet aber auch die Möglichkeit, plattformspezifische Fähigkeiten zu nutzen (z.B. eine SplitView auf einem iPad, die es auf iPhone oder Android nicht gibt). Eine plattformübergreifende Entwicklung ist mit Titanium gut machbar.

Neben den nativen Fähigkeiten der jeweiligen Plattform bietet die Titanium API auch eine Reihe von "ready to use"-Funktionalitäten, wie z.B. die Anbindung an Facebook und Cloud Dienste.

Hier klicken, um Teil 2 zu lesen.

- new: open attachments in quicklook, mail, dropbox etc.
- fix for lost linebreaks when notes was edited on the device
- improved performance
- other minor bug fixes

NotesBook was developed with Titanium and Domino To Go. Click here to read more about NotesBook.

If you think about creating mobile apps, Appcelerator Titanium is my recommended tool. In case you don't know about it yet, I strongly suggest taking a look at it.



The upcoming version 3.1 brings notable performance improvements in all areas:

• an average 20% performance improvement for iOS apps
• an average of over 30% performance improvement for Android apps
• a replacement for the TableView control, which is multiple times faster

Futhermore, support for Blackberry 10 devices gets into an official beta phase with Titanium 3.1.

Beside that, Titanium 3.1 delivers a lot of additional features like:

• support for Facebook V3 API
• support for Google Maps V2 API on Android
• support for Newsstand API on iOS
• support for NFC on Android
• support for calendar events and reminders on iOS (EventKit UI Framework)
• updates to the Alloy framework (model view controller framework - seperates design from data and logic)

and more.

I'm working with Titanium for quite some time now, about two years. And in that time, Titanium made and impressive progress. I still think it's far superior to the HTML5 approach, mostly because in the end, you get native apps that look & feel native and that are full offline capable.
And, if you need to work with Notes and Domino data in a mobile app, you can use Domino To Go.