Die drei Musketiere - Ein Programm – drei Plattformen

Die drei Musketiere – Thomas Künneth 1 Copyright © 2014 MATHEMA Software GmbH

Die drei Musketiere

Ein Programm – drei Plattformen

Thomas Künneth

[email protected]

www.mathema.de


Über den Vortragenden

Mitarbeiter der MATHEMA Software GmbH seit

März 2014

Vorher fast 11 Jahre in der IT der Bundesagentur

für Arbeit

Themen: Softwareentwicklung und Architektur von

Enterprise Anwendungen

Steckenpferde: UI/UX, Mobility


Der Roman von Alexandre Dumas

Wurde 1844 kapitelweise in der Zeitung Le Siècle

urveröffentlicht

Erster Teil einer Trilogie über d’Artagnan und seine drei

Freunde

Folgebände:

Zwanzig Jahre danach (1845 erschienen)

Der Vicomte von Bragelonne oder Zehn Jahre später (1847

erschienen)


Und so beginnt die Geschichte

[…] Im April des Jahres 1625 bricht der junge Gascogner d’Artagnan nach Paris auf, um Musketier zu

werden. In der Stadt Meung macht sich Rochefort, ein Agent des Kardinals Richelieu, über d’Artagnans

Pferd lustig, was zu einer Auseinandersetzung führt. D’Artagnan wird verprügelt, und Rochefort stiehlt

ihm sein Empfehlungsschreiben. Doch d’Artagnan sieht, wie Rochefort einer Frau, Milady de Winter,

Befehle Richelieus überbringt. Milady ist ebenfalls eine Agentin des Kardinals.

In Paris wird d’Artagnan bei dem Hauptmann der Musketiere, Monsieur de Tréville, vorstellig, doch

dieser kann ihm keinen Platz in der Musketiersgarde geben, denn man muss besondere Verdienste

dafür vorweisen oder in einer anderen Kompanie gedient haben. Vom Fenster Trévilles aus bemerkt

d’Artagnan Rochefort auf der Straße und stürzt aus dem Hauptquartier, um seinen „Mann aus Meung”

einzuholen. Auf der Treppe prallt er gegen die Schulter von Athos, verwickelt sich draußen in den Mantel

von Porthos und zieht vor einer Taverne ein Taschentuch unter Aramis’ Fuß hervor, was ihm drei Duelle

mit diesen Musketieren einbringt.

Duelle sind durch ein Edikt des Königs Ludwig XIII. verboten, und so versuchen die Kardinalsgarden,

als sie die vier Duellanten überraschen, die Musketiere festzunehmen. Die Musketiere ergeben sich

nicht, obwohl sie in der Minderheit sind. D’Artagnan schlägt sich auf die Seite der Musketiere, und nach

einem hart erkämpften Sieg wird er von Athos, Porthos und Aramis als Freund angenommen. Tréville

vermittelt d’Artagnan einen Platz in der Garde von Monsieur des Essarts. […] -------------

Seite „Die drei Musketiere“. In: Wikipedia, Die freie Enzyklopädie. Bearbeitungsstand: 13. März 2014, 16:35 UTC.

URL:http://de.wikipedia.org/w/index.php?title=Die_drei_Musketiere&oldid=128208737 (Abgerufen: 15. März 2014, 15:46 UTC)

http://de.wikipedia.org/w/index.php?title=Die_drei_Musketiere&oldid=128208737


In den (neu interpretierten) Hauptrollen

d’Artagnan

Weltoffener, neugieriger Programmierer

Auftrag: eine „Wetter-App“ zu bauen (im Nebel duelliert es sich nicht gut)

Athos (Android)

Spitzname „Platzhirsch“

Viele Fähigkeiten, im Umgang manchmal etwas schwierig

Aramis (Windows 8.1)

Noch jung

Träumt von den Erfolgen seiner Vorfahren

Porthos (JavaFX)

Modern und schön

Kaum jemand kennt ihn


Android

Mobile Plattform mit aktuell riesigen Marktanteil

Teile der Plattform sind als Open Source verfügbar; Tendenz

abnehmend

Systemarchitektur mit Linux als Grundlage; native

Bibliotheken sind vom Zugriff durch Apps gekapselt

Apps werden üblicherweise in Java geschrieben

Laufzeitumgebung mit eigener virtueller Maschine Dalvik inkl.

Just in time-Compiler; deren Ablösung durch neue

Laufzeitumgebung ART mit Ahead of time-Übersetzung steht

bevor


Windows 8.1

Mit Windows 8 wollte Microsoft die Abkehr vom klassischen

Desktop und den mit ihm einher gehenden

Programmiermodellen einläuten

Idee: Apps wie unter iOS, Android und Windows Phone mit

zentralem Store

Windows Runtime (WinRT) ist Laufzeitumgebung für Windows

Store-Apps in Windows 8.x und Windows RT

basiert auf dem Component Object Model (gegenüber

Entwicklern gekapselt)

Anwendungen werden mit HTML, CSS und JavaScript oder

XAML (UI) und Visual Basic, C# oder C++ (Anwendungslogik)

entwickelt


JavaFX

Ursprünglich für den Bau von RIAs (als Konkurrenz zu Adobe

Flash/Flex und Microsoft Silverlight) gedacht

Programme sollten mit einer eigenen Programmiersprache

(JavaFX Script) realisiert werden

JavaFX 2 brachte native Java APIs

Mit Java 8 wird JavaFX integraler Bestandteil der Plattform

Löst Swing als Standard-UI-Toolkit ab


Open Source Wetterdaten

OpenWeatherMap bietet kostenlos aktuelle Wetterdaten und

Vorhersagen

Inspiriert von Wikipedia und OpenStreetMap

Enthält Daten aus offiziellen Quellen und mehr als 40.000

(privaten) Wetterstationen

Mittels API Zugriff auf

Aktuelles Wetter

5- und 14-Tage-Vorhersage

Suche und Wetterkarten

Ergebnisse können in HTML, XML oder JSON empfangen

werden

http://www.openweathermap.org/

http://www.openweathermap.org/


Beispielabfragen

Aktuelles Wetter in Nürnberg (JSON) http://api.openweathermap.org/data/2.5/weather?q=Nuremberg,de

"coord":"lon":11.07,"lat":49.45,"sys":"message":0.0047,"country":

"DE","sunrise":1394947554,"sunset":1394990555,"weather":["id":804,"

main":"Clouds","description":"overcast

clouds","icon":"04d"],"base":"cmc

stations","main":"temp":283.22,"humidity":80,"pressure":1016.5,"temp

_min":282.15,"temp_max":284.15,"wind":"speed":8.97,"deg":277.007,"

rain":"3h":0,"clouds":"all":92,"dt":1394979618,"id":2861650,"name

":"Nuremberg","cod":200

Geografische Koordinaten: lon=11.07&lat=49.45

Darstellung in XML: mode=xml

Darstellung in HTML: mode=html

Sprache: lang=de

http://api.openweathermap.org/data/2.5/weather?q=Nuremberg,de

http://api.openweathermap.org/data/2.5/weather?q=Nuremberg,de


Aufgabe

Eine Wetter-App bauen, die …

… die OpenWeatherMap-API nutzt, …

… unter Android, …

… Windows 8.1 und …

… JavaFX läuft.

Ziel dabei ist, …

… soweit möglich Code wiederzuverwenden, …

… Programmierparadigmen der Plattform zu nutzen …

… und die Ergebnisse vergleichbar zu machen

Das können nur …


Weltenbummler

Für das tolle Foto vielen Dank an Monika Künneth


Polyglott (mehrsprachig)

eine Person, die viele Fremdsprachen spricht

wie viele Sprachen man sprechen muss, um polyglott genannt

zu werden, und wie gut, ist nicht genau definiert

Der englische politische Ökonom, Reisende und Schriftsteller

Sir John Bowring (1792 – 1872) kannte über 200 Sprachen

und sprach über 100 davon.

Der italienische Kardinal Giuseppe Mezzofanti (1774 - 1849)

beherrschte 38 Sprachen (obwohl er Italien nie verließ).


Übertragung des Begriffs in die Informatik

Der Begriff Polyglot Programming wird Neal Ford

zugeschrieben (sein Blogpost vom 05.12.2006)

Mehrere bedeutende Ökosysteme (Java und .Net)

Innerhalb eines Projekts unterschiedliche Programmiersprachen

für unterschiedliche Aufgaben-/Problemstellungen

Knapp zwei Jahre später prägt Scott Leberknight den Begriff

Polyglot Persistence (sein Blogpost vom 15.10.2008)

Daten müssen nicht zwingend in relationalen Datenbanken

abgelegt werden

Anwendungen bedienen sich aus unterschiedlichen Quellen

Mittlerweile wird der Begriff recht frei verwendet.

http://memeagora.blogspot.de/2006/12/polyglot-programming.html




https://www.altamiracorp.com/blog/employee-posts/polyglot-persistence





Selbst IDEs sind polyglott


Programmablauf der Wetter-App

Eingabe des Städtenamens abwarten

Auf Anklicken einer Schaltfläche reagieren

Webservice aufrufen und Daten herunterladen

Daten auswerten und anzeigen

Auf neue Benutzereingabe warten


Einer für alle, alle für einen


IDE für die Android-Entwicklung


IDE für die Windows Store Apps-Entwicklung


IDE für die JavaFX-Entwicklung


Android-Apps

Android strukturiert Apps in Activities.

Navigation durch das System und durch Apps entspricht dem

Starten und Beenden von Activities. Activities können durch

Intents Nachrichten austauschen.

Die Bedienoberfläche besteht aus Komponentenbäumen.

Views sind einzelne Elemente, ViewGroups sind Layout-

fähige Container

Oberflächen werden in XML-Dateien definiert und zur Laufzeit

der App zu Objektgeflechten entfaltet

Texte können für beliebig viele Sprachen hinterlegt werden

Vertrieb über Appstores oder direkten Download


Windows Store-Apps

Windows Store Apps werden mittels Seiten strukturiert

Navigation innerhalb einer App erfolgt durch gezielte

Seitenwechsel

Bedienelemente finden sich im Namespace Windows.UI.Xaml.Controls

Keine unmittelbare Unterscheidung zwischen

„Bedienelementen“ und „Containern“

Oberflächen werden in XAML-Dateien definiert und zur

Laufzeit der App zu Objektgeflechten entfaltet


Vertrieb über den Windows Store


JavaFX-Apps

Die Bedienoberfläche besteht aus Komponentenbäumen.

Oberflächen werden in FXML-Dateien definiert und zur

Laufzeit der App zu Objektgeflechten entfaltet

Erstellung des Layouts im Scene Builder


Kein Plattform-Store, Vertrieb über die Java-üblichen Wege

(kennt noch jemand Suns Project Vector?)

http://java.dzone.com/news/project-vector-ultimate-app

http://java.dzone.com/news/project-vector-ultimate-app


OpenWeatherMapWeather für Android

Wichtige Klassen:

MainActivity bildet den Lebenszyklus einer Android-App ab,

läd den Komponentenbaum und zeigt ihn an

WeatherData repräsentiert als lokales Datenobjekt die

anzuzeigenden Informationen

WeatherUtils holt die Wetterinformationen ab und bereitet sie

lokal auf

Wichtige Dateien:

activity_main.xml enthält die Beschreibung der Oberfläche

strings.xml enthält internationalisierbare Texte


OpenWeatherMapWeather für Windows 8.1

Wichtige Klassen:



WeatherUtils bereitet die bereits abgeholten

Wetterinformationen lokal auf

Wichtige Dateien:

MainPage.xaml enthält die Beschreibung der Oberfläche

MainPage.xaml.cs (Code-Behind) enthält Logik, die mit der

Oberfläche verknüpft ist (zum Beispiel das Anklicken einer

Schaltfläche)


OpenWeatherMapWeather für JavaFX

Wichtige Klassen:

OpenWeatherMapWeather ist die Hauptklasse der Anwendung;

initialisiert den Komponentenbaum und zeigt ihn an

FXMLDocumentController reagiert auf Benutzereingaben

und spricht den Webservice an



WeatherUtils holt die Wetterinformationen ab und bereitet sie

lokal auf

Wichtige Dateien:

FXMLDocument.fxml enthält die Oberflächenbeschreibung

strings.properties enthält internationalisierbare Texte


Zugriff auf den Webservice in Android

findet in der Klasse WeatherUtils statt

die Methode getFromServer() erhält als Argument eine

URL

liefert die heruntergeladenen Daten als String

nutzt bekannte Klassen wie HttpURLConnection,

InputStreamReader und BufferedReader

Java-typisch etwas „geschätzig“


Zugriff auf den Webservice in Windows 8.1

sehr elegante, schlanke Implementierung

Nebenläufigkeit „kostenlos“ durch Schlüsselwörter async und

await

nur zwei Klassen: HttpClient und HttpResponseMessage


Zugriff auf den Webservice in JavaFX

findet in der Klasse WeatherUtils statt

die Methode getFromServer() erhält als Argument eine

URL

liefert die heruntergeladenen Daten als String

nutzt bekannte Klassen wie HttpURLConnection,

InputStreamReader und BufferedReader

Java-typisch etwas „geschätzig“

Es wird dieselbe Klasse wie unter Android verwendet


Interpretieren der Daten in Android

Zugriff findet in Klasse WeatherUtils statt

Android bietet Zugriff auf JSON über das Paket org.json

Strategie:

Aus Daten des Webservice Objekt des Typs JSONObject

erzeugen

Mit has() prüfen, ob gewünschte Elemente vorhanden sind

Auslesen mit getJSONArray(), getJSONObject() und

getString()

Zur weiteren Verarbeitung wird ein Objekt des Typs WeatherData erzeugt


Interpretieren der Daten in Windows 8.1

Zugriff findet in Klasse WeatherUtils statt

Windows 8.1 bietet Zugriff auf JSON über den namespace Windows.Data.Json

Strategie:

Aus Daten des Webservice Objekt des Typs JsonObject

erzeugen

Mit ContainsKey() prüfen, ob gewünschte Elemente

vorhanden sind

Auslesen mit GetNamedString(), GetNamedArray () und

GetNamedNumber()

Zur weiteren Verarbeitung wird ein Objekt des Typs WeatherData erzeugt


Interpretieren der Daten in JavaFX

JSR 353 Java API for JSON Processing einschl.

Referenzimplementierung

JSON-java von Douglas Crockford scheint auch in Android

verwendet zu werden (kompatible API)

Quellen sind verfügbar, lassen sich leicht zu kleiner Lib

zusammenfassen

Deshalb Nutzung der Klasse WeatherUtils aus dem

Android-Projekt möglich

Es wird dieselbe Klasse wie unter Android verwendet

http://www.json.org/java/




Button-Klicks in Android

Für die Schaltfläche wird ein OnClickListener gesetzt

Dessen Methode onClick() muss implementiert werden

Implementierung holt Daten vom Webservice und aktualisiert

die übrigen Bedienelemente


Button-Klicks in Windows 8.1

Für die Schaltfläche wird die Methode button_Click() als

Code-Behind in MainPage.xaml.cs implementiert




Button-Klicks in JavaFX

In der Klasse FXMLDocumentController wird die Methode

handleButtonAction() implementiert




Grafiken anzeigen in Android

Die Klasse MainActivity enthält die Methode getImage()

Sie liefert ein Objekt des Typs android.graphics.Bitmap

Dieses Objekt wird mittels setImageBitmap() als

Datenquelle für das korrespondierende Bedienelement

gesetzt


Grafiken anzeigen in Windows 8.1

In der Methode button_Click() wird eine URL

zusammengesetzt

Diese wird direkt an das korrespondierende Bedienelement

übergeben


Grafiken anzeigen in JavaFX

In der Methode handleButtonAction() wird ein Objekt

des Typs javafx.scene.image.Image erzeugt

Diese wird mittels setImage() direkt an das

korrespondierende Bedienelement übergeben


Internationalisierung in Android

Android kann Texte sprachspezifisch vorhalten

Texte werden in strings.xml abgelegt und je Locale in eigenen

Unterverzeichnissen abgelegt

Zugriff erfolgt im Quelltext über Konstanten (R.string.) und

in XML-Dateien über (@string/)


Internationalisierung in Windows 8.1

Texte werden analog zu Android in hierarchischen

Ressourcendateien ausgelagert

Vorgehen

Standardsprache in Package.appxmanifest auf en-US einstellen

Verzeichnis Strings anlegen, dann Unterverzeichnis en-US

Dort eine Ressourcendatei (Resources.resw) hinzufügen

Name-Wert-Paar eintragen

mit x:Uid=… Komponente mit Ressource verbinden

siehe Quickstart: Translating UI resources

http://msdn.microsoft.com/en-us/library/windows/apps/hh965329.aspx







Internationalisierung in JavaFX

Nutzung des Java-Standard-Vorgehens ResourceBundle.getBundle()

Das Bundle wird einfach beim Laden der FXML-Datei an FXMLLoader.load() übergeben

Der zu verwendende Schlüssel kann im Scene Builder

eingetragen werden


Threading in Android

Android kennt den main thread oder ui thread, in dem alle

Oberflächenoperationen stattfinden müssen

üblicherweise werden Netzwerkzugriffe auf diesem Thread mit

einer Ausnahme beendet (Stichwort StrictMode)

Start zusätzlicher Threads ist mit den bekannten Java-Bordmitteln möglich (Thread, Runnable)

Hierbei ist der Lifecycle von Activities zu beachten

Android kennt weitere, komfortable Möglichkeiten (u. a. android.os.AsyncTask)

Ausführen eines Runnables auf den ui thread mit

runOnUiThread()

http://developer.android.com/reference/android/os/StrictMode.html


Threading in Windows 8.1

Nebenläufigkeit entsteht durch die zwei Schlüsselwörter async und await

die Methode button_Click() holt die Daten vom

Webservice und aktualisiert die Oberfläche


Threading in JavaFX

JavaFX kennt den application thread; in diesem wird die start()-Methode der App ausgeführt; auch Manipulationen

der Oberfläche und Modifikationen des Szene-Graphen

müssen hier erfolgen

JavaFX gestattet den Zugriff auf das bewährte Java-

Threading-Modell

bietet neu die einfach nutzbare Klasse Task

das gezielte Ausführen von Aktionen auf dem application thread ist mit Platform.runLater() möglich


Leicht überbrückbare Unterschiede

Platzhalter-Substitution

In Java zum Beispiel für http://api.openweathermap.org/data/2.5/weather?q

=0&lang=de: MessageFormat.format(URL, city)

In C#: String.Format("0 \u2103", (int)temp);

Konstanten-artiges Verhalten

In Java: private static final String

In C#: private const String

http://api.openweathermap.org/data/2.5/weather?q=0&lang=de





Was haben wir gelernt?

Android und JavaFX sehr ähnlich

Gleiche Programmiersprache

In Teilen gleiche Klassenbibliothek

Die Klassen WeatherData und WeatherUtils sind gleich

Konzepte lassen sich leicht von Java nach C# übertragen

import analog zu using

parametrisierbare Zeichenketten treten in Java und C# Erbe von

C an

einige universelle Konzepte

Internationalisierung durch Auslagerung von Zeichenketten

UI-Frameworks sind seit jeher single threaded


Warum Entwickler polyglott sein sollten

Weil es Geld bringt

Weil der Kunde oder Auftraggeber es möchte

Weil es Spaß macht

Weil es den Horizont erweitert

Weil es hilft, Sachverhalte besser zu verstehen


Worauf man achten sollte

Best Practices einer Plattform nicht unreflektiert übertragen

Sich stets an die Konventionen der jeweiligen Plattform halten

Nicht spekulieren

Es ist schwer genug, eine Sache wirklich gut zu beherrschen.

Auf mehreren Hochzeiten zu tanzen, umso mehr.


Fragen?

Vielen Dank!

[email protected]