Ein Tutorial von Olena Bochkor und Dr. Veikko Krypczyk, was ich hier auf meinem Blog poste
Mit Delphi zu mobilen Welten – App Programmierung Tutorial Teil 1
Wer eine App für Android und iOS programmieren will, der hat inzwischen mehrere Optionen. Geräte- bzw. plattformübergreifende Ansätze haben das Ziel, mehrere Systeme mit einem Rutsch zu bedienen. Im Idealfall kann man aus einer Quellcodebasis Apps für alle relevanten Systeme generieren. Wie das genau mit Delphi geht, das erfahren Sie in diesem Tutorial. Dank der kostenfreien Testversion oder der lizenzrechtlich leicht eingeschränkten Community Edition können Sie gleich durchstarten.
Apps für die mobilen Systeme faszinieren nach wie vor. Das gilt sowohl für die private Verwendung und auch zunehmend für Unternehmen. Auf nahezu allen Smartphones und Tablets werden Versionen von Android und iOS eingesetzt. Möchten Sie keine Nutzergruppe außen vorlassen, dann müssen Sie beide Systeme unterstützen. Aus der Sichtweise des Programmierers heißt es, dass man zwei Apps entwickeln muss. Für Android mit Java in Android Studio und für iOS mit Swift in Xcode. In beiden Fällen entstehen native Apps, welche bestmöglich an die Systeme angepasst werden können. Leider sind Android und iOS grundverschieden, so dass man nahezu keinen Quellcode zwischen den beiden Systemen teilen kann. Möchte man beide Plattformen gemeinsam unterstützen, müssen Sie eine andere Vorgehensweise wählen. Web-Apps oder hybride Apps kommen dann zum Einsatz, wenn es auf die Performance nicht allzu sehr ankommt bzw. die jeweils zu unterstützenden Systemfunktionen auf Basisfeatures beschränkt bleiben. Ein dritter Weg sind plattform- bzw. geräteübergreifende Programmieransätze. Hier besteht das Ziel, aus einer gemeinsamen Codebasis Apps für alle Zielsysteme in nahezu einem Schritt zu erstellen. Dieses Tutorial stellt Ihnen in zwei Teilen die Arbeit mit der integrierten Entwicklungsumgebung Delphi vor:
Teil 1: Installation, Einrichtung und eine erste App
Teil 2: Eine komplette App, welche auf die Sensoren des Smartphones zugreift.
Mit Delphi können Sie auf einfache Art und Weise native Apps für Android und iOS erstellen. Ein großer Vorteil: Das gesamte User Interface gestalten Sie mit Hilfe des leistungsfähigen Grafikframeworks FireMonkey im Designer. Wenn Sie dieses Tutorial durcharbeiten, dann erfahren Sie im ersten Teil Folgendes:
Was ist Delphi: Wir stellen Ihnen die Entwicklungsumgebung kurz vor.
Ihre Systemumgebung: Welche Möglichkeiten hat man, um geräte- bzw. plattformübergreifend mit Delphi zu programmieren, d.h. wie arbeiten Windows, Android und iOS zusammen.
Entwicklermaschine klar machen: Wir zeigen Ihnen die Installation von Delphi Schritt für Schritt.
Nacharbeiten zur Installation: Notwendige Nacharbeiten, um für mehrere Plattformen zu entwickeln und die Versionsverwaltung einzurichten.
Eine erste App für Android und iOS: Wir stellen den kompletten Entwicklungszyklus für eine Android und iOS App vor.
Da geht noch mehr: Nach einer kurzen Zusammenfassung geben wir Ihnen einen Ausblick auf den zweiten Teil des Tutorials. Diesen können Sie auch hier demnächst lesen.
Wir wünschen Ihnen viel Spaß beim Durcharbeiten des Tutorials und freuen uns auf Ihre Apps in den Stores von Apple und Google!
Was ist Delphi
Delphi ist sowohl die Bezeichnung für die Entwicklungsumgebung als auch für die zugrundeliegende Programmiersprache, welche eine erweiterte Version von Objekt Pascal ist. Die Entwicklungsumgebung Delphi hat Tradition insbesondere für das Entwickeln von datenbankgetriebenen Business-Applikationen für Windows Betriebssysteme. Delphi und die verwandte Entwicklungsumgebung C++-Builder werden zu RAD Studio zusammengefasst. RAD steht als Abkürzung für Rapid Application Development. Der Applikationsrahmen wird dabei aus visuellen und nicht visuellen Komponenten mit Hilfe eines grafischen Designers zusammengesetzt. Visuelle Komponenten sind beispielsweise die typischen Elemente der Benutzeroberfläche, wie Buttons, Labels und Textfelder. Nicht visuelle Elemente unterstützen den Entwickler bei alltäglichen Programmieraufgaben, zum Beispiel Komponenten für Datei- oder Datenbankzugriffe. Dieser effektive Programmieransatz wurde auf die Entwicklung von Apps für Android und iOS übertragen. Das User Interface setzen Sie aus Komponenten zusammen und der Compiler generiert aus dem Quellcode die Anwendungspakete für Android und iOS.
Ihre Systemumgebung
Delphi läuft unter Microsoft Windows. Möchten Sie Anwendungen für weitere Systemumgebungen erstellen, müssen Sie sich über die Systemkonfiguration einige Gedanken machen. Dazu gibt es unterschiedliche Möglichkeiten, je nachdem über welche Hardware Sie verfügen. Um Apps für iOS zu erstellen, braucht man den Zugriff auf einen Mac-PC, um die finalen Anwendungspakete zu erzeugen. In Kombination mit einem Windows Rechner kann die Systemkonfiguration wie folgt aussehen:
Die Systemumgebung im Überblick, um geräteübergreifende Apps zu entwickeln.
Im Zentrum steht der Entwicklungsrechner mit Microsoft Windows als Betriebssystem. Auf diesem werden unsere Entwicklungsumgebung Delphi, weitere Tools zum Beispiel für die Versionsverwaltung und die Bibliotheken für die zu entwickelnden Plattformen, d.h. für Android und iOS installiert. Am Windows Rechner wird über USB ein Android Smartphone bzw. Tablet angeschlossen, damit man die Apps direkt testen kann. Alternativ kann man einen Android Emulator installieren. Dieser ist über das aktuelle Android SDK verfügbar. Die Verwendung eines Emulators für Android kann jedoch hier auf Grund einer mangelnden Performance nur bedingt empfohlen werden. Der Emulator muss bestimmte Hardwarevoraussetzungen, insbesondere eine CPU der ARM-Serie, erfüllen. Damit scheidet der Einsatz von Emulatoren mit dem hardwareunterstützten Virtualisierungsmodul HAXM aus, da diese auf einem angepassten x86-Image basieren. Aus diesem Grund greift man besser zu einem echten Smartphone bzw. Tablet. Möchte man ausschließlich Apps für Android erstellen, benötigt man also nur einen Rechner mit Windows als Betriebssystem.
Wie bereits gesagt, benötigt man zum Erstellen von Apps für iOS einen Mac mit einer aktuellen Version von macOS. Auf diesen müssen Sie die Entwicklungsumgebung Xcode installieren. Diese können Sie aus dem App Store von Apple kostenfrei laden. Über Xcode installieren Sie auch den iOS Simulator zum Testen der App. Zusätzlich benötigen Sie für den Fernzugriff auf den Mac den so genannten PAServer (Platform Assistent Server). Auf die einzelnen Installationsschritte kommen wir später nochmals genauer zurück. Am Mac kann man ein iPhone bzw. einen iPad anschließen, um auch Apps für iOS auf einem echten Gerät zu testen.
Statt zwei Rechner (Windows und macOS) zu verwenden, kann man Delphi auch in einer virtuellen Maschine unter Windows auf einem Mac ausführen. Für die Virtualisierung eignen sich entweder Apples eigenes Parallels oder Virtual PC. Wichtig ist es, dass der Mac über ausreichend Systemressourcen, insbesondere Prozessorleistung und Arbeitsspeicher verfügt. Der Zugriff von Delphi auf den Mac erfolgt nun über ein virtuelles Netzwerk, da sich alle Systemkomponenten auf dem Mac befinden. In diesem Fall muss man die VM so konfigurieren, dass diese einen Zugriff auf das Android Gerät hat und damit das testen der Apps auf einem echten Smartphone bzw. Tablet möglich ist.
Und was machen nun all diejenigen, welche keinen eigenen Mac haben? Ohne diesen kann man zwar keine Apps für iOS bauen, aber es gibt Abhilfe! Sie müssen keinen Mac kaufen, um das Erstellen von iOS Apps zu probieren. Die Cloud bietet Abhilfe. Einen Mac können Sie zum Beispiel über die Seite mieten und über das Internet auf diesen zugreifen. Die notwendige Software Xcode und PA-Server sind bereits in der Cloud Variante vorinstalliert. Ebenso haben Sie darüber Zugriff auf einen iOS Simulator.
Kommen wir jetzt dazu, dass wir Delphi auf Ihren Windows PC installieren. Also starten Sie den Rechner und es kann endlich losgehen!
Entwicklermaschine – den Windows Rechner – klar machen
Für die Programmierung von Apps müssen Sie Ihren Entwicklungsrechner einrichten. Neben der eigentlichen Entwicklungsumgebung (Delphi) müssen auch die Bibliotheken für iOS und Android auf Ihrem System hinzugefügt werden. Das sind zwar durchaus ein paar Gigabyte, aber der Installationsassistent von Delphi führt Sie sicher zum Ziel. Gehen wir dieses Vorhaben jetzt Schritt für Schritt an. Als Betriebssystem ist Windows 10 zu empfehlen. Bevor Sie mit der Installation starten, führen Sie nochmals mögliche Systemupdates durch! Wir wollen die kostenfreie Community Edition von Delphi installieren. Dazu ist es notwendig, dass Sie sich zuvor mit Hilfe Ihrer E-Mail-Adresse registrieren. Sie bekommen an dieser E-Mail-Adresse Ihren persönlichen Key zur Freischaltung übermittelt. Nach dem Download starten Sie die Installation.
Start der Installation von Delphi.
Sie müssen den Lizenzbestimmungen zustimmen. Weiter geht es mit einer Frage nach der Seriennummer.
Auswahl der Registrierungsvariante.
Da wir den Schlüssel bereits erhalten haben, belassen wir es bei der zweiten Option. Delphi erfordert die Version 3.5 des .Net-Frameworks. Sofern dieses noch nicht auf Ihren Rechner installiert ist, holt der Assistent dieses jetzt nach. Auch dieser Vorgang kann ein paar Minuten dauern.
Installation des .Net-Frameworks 3.5.
Im nächsten Schritt machen Sie die Angaben zur Lizenzierung, d.h. Sie müssen die Seriennummer und die Anmeldedaten zu Ihrem Developer-Account eingeben.
Registrierung durchführen.
Nach der Bestätigung wird die Installation fortgesetzt. Es werden die Programmdateien installiert.
Installation der Programmdateien.
Warten Sie, bis das nächste Dialogfeld erscheint, um die Plattformen auszuwählen, für welche Sie Anwendungen entwickeln möchten.
Auswahl der Zielplattformen.
Mit Delphi können Sie für die folgenden Plattformen programmieren:
Microsoft Windows: Anwendungen für den Desktop und den Server. Es entstehen native 32/ 64-Bit-Anwendungen. Diese haben keine Abhängigkeiten zu weiteren Bibliotheken. Delphi bietet die Option die fertige Anwendung zu einem APPX-Package zu packen und sie damit über den Microsoft Store zu deployen.
macOS: Im Moment erzeugt der Compiler nur 32-bit-Anwendungen. Es werden die macOS Versionen ab OS X 10.10 Yosemite unterstützt.
iOS: Apps für iPhone und iPad ab den Versionen iOS 9.
Android: Apps für Smartphones und Tablets. Dabei ist zu beachten, dass das Zielgerät bestimmte Hardwarevoraussetzungen mitbringt. Konkret eine CPU der ARM Cortex-A-Serie, ARMv7-Anweisungen, NEON-Technologie und GPU. Die NEON-Technologie dient zum Beschleunigen von Multimedia-Anwendungen, insbesondere von Grafik. Nahezu alle aktuellen Geräte erfüllen diese Voraussetzungen.
Hinweis: Mit den Enterprise Editionen lassen sich Anwendungen für Linux entwickeln, d.h. Konsolenapplikationen für den Server. Mit einem Zusatz können die auf FireMonkey basierten Anwendungen auch für Linux mit einem grafischen User Interface ausgestattet werden. Wir aktivieren alle möglichen Plattformen. Angezeigt wird die Downloadgröße, die voraussichtliche Dauer (in Abhängigkeit der Geschwindigkeit Ihrer Internetverbindung) und der benötigte Speicherplatz. Das nächste Dialogfeld enthält weitere Installationsoptionen.
Zusätzliche Installationspakete auswählen.
Konkret haben Sie die folgenden Optionen:
Zusätzliche Sprachpakete (französisch, deutsch, japanisch) für die Entwicklungsumgebung.
Samples: Vielfältige Beispiele für unterschiedliche Aufgaben und Anwendungsarten.
Help: Die Dateien für die Offline-Hilfe.
IntraWeb: Ein Tool zur Entwicklung von Web-Server-Anwendungen.
TeeChart Standard: Visuelle Komponenten, um Geschäftsgrafiken (wie aus Excel bekannt) zu erstellen.
DUnit Testing Frameworks: Bibliotheken, um Unit-Tests zu erstellen.
InterBase Express (IBX) Components: Komponenten zur Integration der Datenbank InterBase Express.
Android SDK-NDK: Die aktuelle Version des Android Software Development Kits.
Java Development Kit: Die aktuelle Version des Java Development Kits.
InterBase 2017 Developer Edition: Plattformübergreifende, einbettungsfähige SQL-Datenbank für Windows, Linux, macOS, iOS und Android.
Die Auswahl ist nicht endgültig, d.h. Sie können den Assistenten für die Features später wieder direkt aus der Entwicklungsumgebung (Menüpunkt: Tools | Plattformen verwalten ) aufrufen. Für unsere Zwecke haben wir die SDKs für Android und Java installiert, da man diese für das Entwickeln von Apps für Android benötigt. Bestätigen Sie die Auswahl mit Install . Danach wird die Installation der Plattformdateien und ergänzenden Tools gestartet. Dieser Vorgang kann etwas dauern.
Die Installationsdateien werden aus dem Internet geladen.
Der laufende Installationsfortschritt wird Ihnen dabei stets angezeigt. Es bleibt Zeit für einen Kaffee oder Sie blicken im Tutorial schon etwas voraus.
Der laufende Installationsfortschritt.
Der erfolgreiche Abschluss des Installationsprozesses wird Ihnen ebenfalls angezeigt.
Die Installation ist abgeschlossen.
Jetzt sind wir fast fertig. Einige wenige Konfigurationsarbeiten sind noch notwendig. Beim ersten Start von Delphi erscheint die Auswahloption für das Farbschema. Entscheiden Sie je nach Geschmack zwischen einer hellen und einer dunklen Oberfläche. Auch diese Wahl können Sie später jederzeit direkt in der Entwicklungsumgebung erneut anpassen.
Auswahl des Farbschemas der Entwicklungsumgebung.
Ebenfalls zu den essenziellen Konfigurationseinstellungen gehört die Auswahl des von Ihnen bevorzugten Systems zur Versionsverwaltung.
Konfigurationsmöglichkeit der Versionsverwaltung.
Natürlich können Sie auch ohne Versionsverwaltung programmieren, aber i.d.R. werden Sie eine solche einsetzen. Sofern sich auf Ihren Rechner bereits die zugehörigen ausführbaren Dateien befinden, können Sie die Konfiguration gleich an dieser Stelle vornehmen. Auch dieses können Sie später problemlos aus der Installationsumgebung nachholen. Wir kommen gleich darauf zurück. Da sich auf unseren Rechner noch keine Versionsverwaltung befunden hat, haben wir diesen Punkt übersprungen. Nach der Bestätigung dieses Dialogfeldes startet Delphi das erste Mal.
Der erste Start von Delphi.
Sie sehen den Startbildschirm von Delphi mit unterschiedlichen Informationen, u.a. Hilfen, Lehrvideos und der Möglichkeit ein bestehendes Projekt zu öffnen bzw. ein neues Projekt anzulegen. Wir werden gleich mit unseren ersten App-Projekt starten. Zuvor sind noch einige wenige Nacharbeiten zur Installation notwendig.
Nacharbeiten zur Installation
Sie sind noch nicht ganz fertig mit installieren und konfigurieren! Mit anderen Worten ein paar Nacharbeiten sind noch notwendig. Diese sehen wir uns jetzt an:
Professionelle Softwareentwicklung kommt heute nicht mehr ohne den Einsatz eines Versionskontrollsystems aus. Delphi unterstützt Git, Mercurial und Subversion. Gehen wir davon aus, dass Sie Git verwenden und installiert haben Merken Sie sich den Installationspfad. Verweisen Sie auf die ausführbare Datei von Git direkt in Delphi unter den Menüpunkt Tools | Optionen … | Versionskontrolle | Git .
Einrichten der Versionsverwaltung (hier Git) in Delphi.
Geben Sie ebenfalls den Benutzernamen und die E-Mail-Adresse an, um direkt ein Commit aus Delphi ausführen zu können.
Um Apps für iOS zu bauen und diese auf dem Mac (Simulator) zu testen sind noch einige wenige Schritte notwendig. Wechseln Sie zu macOS und installieren Sie den PAServer. Dieser sorgt dafür, dass Sie den Mac aus Windows, genauer aus Delphi steuern können, d.h. dass Sie die App Pakete mit Hilfe von Xcode erstellen und auf einen iOS Simulator oder einem echten Gerät ausführen können. Den PAServer laden Sie bitte von Starten Sie die Installation! Höchstwahrscheinlich müssen Sie die Berechtigungen im Dialogfeld Sicherheit unter macOS dazu erteilen. Der PAServer läuft später im Hintergrund als Konsolen-Applikation. Installieren Sie Xcode, sofern Sie die Entwicklungsumgebung von Apple noch nicht auf dem Rechner haben. Auch diese Installation kann – je nach Geschwindigkeit Ihres Internetanschlusses – einige Zeit in Anspruch nehmen.
Bitte beachten Sie unbedingt den folgenden Hinweis, der ggf. zu einem späteren Zeitpunkt nicht mehr gültig, aber im Moment wichtig ist. Version Delphi 10.2.3 (Tokyo) kann Apps für das aktuelle SDK 11.3 für iOS erstellen. Es wird jedoch im Moment nicht der Simulator der Version 11.3 unterstützt. Wir müssen daher einen älteren Simulator „nachrüsten“. Starten Sie Xcode und rufen Sie das Dialogfeld zum Nachinstallieren „älterer“ Simulatoren über das Menü Preferences | Components auf.
Einen iOS Simulator in Xcode nachinstallieren.
Installieren Sie den Simulator aus dem Knoten iOS 10.3.1! Auch hier wartet ein Download von ca. 2 GB auf Sie. Bevor Sie zurück nach Delphi wechseln, starten Sie noch den PAServer unter macOS. Dieses müssen Sie später auch immer dann machen, wenn Sie eine iOS App aus Delphi erstellen möchten. Den PAServer können Sie über den Finder als Konsolen-App aufrufen.
Starten des PAServer in macOS.
Es erscheint ein Terminal-Fenster. Den Start des PAServer müssen Sie im Terminal mit Enter bestätigen und können optional ein Passwort vergeben. Sie erhalten den Vorgang im Terminal quittiert.
Der PAServer wird ausgeführt.
Notieren Sie sich bitte ebenso Ihre lokale IP-Adresse unter macOS. Wir wollen später über den PAServer auf den Mac zugreifen. Jetzt sind wir auch unter macOS fertig. Nun wollen wir endlich unsere erste App in Delphi für Android und iOS programmieren. Los gehts und seien Sie gespannt!
Eine App für Android und iOS
Jetzt durchlaufen wir alle notwendigen Schritte, um eine App für Android und iOS zu erstellen und diese auch zu testen. Beginnen wir damit ein neues Projekt anzulegen. Dieses geschieht über den Menüpunkt Datei| Neu| Geräteübergreifende Anwendung – Delphi . Es folgt das Dialogfeld zur Auswahl einer Vorlage für die App.
Auswahl der Vorlage für die App.
Für einen ersten Test wählen wir Leere Anwendung . Für spätere Projekte können Sie in diesem Dialogfeld gleich eine passende Vorlage wählen, welche die Hauptnavigation der App bestimmt, zum Beispiel mit Registerkarten . Wenn Sie Ihre Auswahl mit dem OK -Button bestätigen, dann erstellt Delphi das Projektskelett und Sie gelangen zum grafischen Designer der Entwicklungsumgebung.
Das Projekt wird in Delphi geöffnet.
Bevor Sie jedoch weiterarbeiten, sollten Sie das Projekt speichern! Das geschieht über den Menüpunkt Datei |Projekt speichern unter… bzw. über das entsprechende Icon in der Symbolleiste. Es erscheint das typische Dialogfeld zum Speichern von Dateien. Sie müssen sowohl die Projektdatei (Dateiendung dpr ), als auch die einzelnen Units – zunächst nur für das Formular – speichern.
Das Projekt speichern.
Wir haben das Projekt als „HelloWorld“ bezeichnet. Orientieren Sie sich zunächst in Delphi! Rechts oben sehen Sie die Projektverwaltung . Dieser liefert einen Überblick über das gesamte Projekt.
Die Projektverwaltung gibt einen Überblick über das Projekt.
Jetzt ist ein guter Zeitpunkt die Versionsverwaltung einzurichten. Das geht direkt aus Delphi heraus, genauer aus der Projektverwaltung. Öffnen Sie das Kontextmenü Ihres Projektes und wählen Sie den Menüpunkt Der Versionskontrolle hinzufügen.
Ein Projekt der Versionsverwaltung hinzufügen.
Sie erhalten die Auswahl zwischen verschiedenen Systemen.
Auswahl der Versionsverwaltung.
Wir wählen Git . Dieses System haben wir auch im Vorfeld konfiguriert. Das nächste Dialogfeld fordert Sie zum initialen Import der Git-Dateien in das Repository auf. Verweisen Sie auf den Pfad des Repositories und geben Sie eine Meldung für den Import Kommentar ein. Dieses entspricht dem Hinzufügen der Dateien, welche ab nun unter der Beobachtung von Git stehen.
Importieren der Dateien in das Projekt.
Später können Sie die wichtigsten Git-Operationen direkt aus Delphi heraus ausführen. Das geht ebenso über das Kontextmenü der Projektverwaltung. Beispielsweise können Sie auf diese Weise eine Projektänderung mit Commit übernehmen.
Änderungen am Projekt mit Übergeben (Commit) in das Repository schreiben.
In der Projektverwaltung sehen Sie die Struktur des Projektes. Unterhalb des Knotens Zielplattformen sehen Sie unterstützten Systeme. In unserem Fall sind es Windows, Android und iOS. Sie aktvieren eine Plattform durch Doppelklick, dann wird der Eintrag in Fettdruck hervorgehoben. So weit sind wir jedoch noch nicht. Zunächst geht es darum ein rudimentäres User Interface zu gestalten. Dieses geschieht mit Hilfe des integrierten grafischen Designers. Im Zentrum von Delphi ist bereits das erste Formular geöffnet. Dieses ist im Moment noch leer.
Rechts unten haben Sie die Tool-Palette mit einer Vielzahl von Komponenten. Aus diesen visuellen Komponenten, wie zum Beispiel Label , Button oder Image erstellen wir die Benutzeroberfläche. Aus der Tool-Palette können Sie eine Komponente mittels Drag & Drop auf das Formular verschieben und dort über den Objektinspektor konfigurieren. Wählen wir eine Komponente in der Tool-Palette aus, werden die unterstützten Zielplattform als Hinweistext angezeigt.
Alle Komponenten sind in der Tool-Palette zu finden.
Dazu zwei Beispiele: Einen Button gibt es auf allen Plattformen, dagegen gibt es ein Menü nur auf den Desktop-Systemen. Auf mobilen Geräten würde diese Komponente keinen Sinn ergeben. Die App soll auf unterschiedlichen Geräten laufen. Dabei hat jedes Gerät eine andere Bildschirmgröße und -auflösung. Daher platziert man die Komponenten nicht mit absoluten Positionsangaben, sondern verwendet so genannte Layoutcontainer , welche die Positionierung der Komponenten zur Laufzeit automatisch nach bestimmten Regeln vornehmen. FireMonkey bietet unterschiedliche Layout Container:
TLayout : Ein einfacher Container, welcher zur Laufzeit nicht sichtbar ist. Er kann zur Gruppierung anderer Komponenten, die dann gemeinsam geändert werden können, verwendet werden. Sie können beispielsweise die Sichtbarkeit einer Gruppe von Komponenten gleichzeitig festlegen, indem Sie nur die Eigenschaft Visible von TLayout setzen. TLayout legt keine Eigenschaften der untergeordneten Komponenten automatisch fest.
TScaledLayout : Ein skaliertes Layout ist ein Container, welcher die untergeordneten Komponenten gemäß den Vorgaben skaliert.
TScrollBox : Ein Layout welches einen Bildlauf ermöglicht.
TFlowLayout : Die untergeordneten Komponenten werden in der Reihenfolge angeordnet und angezeigt, in der sie dem Layout hinzugefügt wurden. Fügen Sie eine TFlowLayoutBreak -Komponente hinzu, damit die nächste Komponente in einer neuen Zeile angezeigt wird.
TGridLayout : Ordnet untergeordnete Komponenten in einem Gitter mit gleich großen Zellen an.
TGridPanelLayout : Ordnet untergeordnete Komponenten ebenfalls in einem Gitter-Bereich an. Im Gegensatz zu TGridLayout können Sie die Komponenten manuell ausrichten und deren Größe ändern. Ebenso können sich Komponenten über mehrere Zellen erstrecken.
Hinweis zum Layout mit FireMonkey finden Sie unter Wir wählen aus der Tool-Palette eine TGridPanelLayout -Komponente und ziehen diese auf das Formular. Für jede Komponente müssen die Eigenschaften angepasst werden. Man wählt die Komponente auf dem Formular aus und ändert die gewünschte Eigenschaft im Objektinspektor . Wir machen dieses für die TGridPanelLayout -Komponente. Als erstes passen wir die Eigenschaft Align an, welche für die Ausrichtung der Komponente zuständig ist.
Die Eigenschaften einer Komponente werden im Objektinspektor konfiguriert.
Wir ändern die Eigenschaft Align auf den Wert Client . Damit wird bestimmt, dass die Komponente das gesamte Formular ausfüllt. Da TGridPanelLayout für die Platzierung der weiteren untergeordneten Komponenten zuständig ist, wollen wir genau diesen Zustand erreichen.
Eine Komponente vom Typ TGridPanelLayout ordnet die untergeordneten Komponenten in einem Gitter an (siehe oben). Das Gitter teilen wir in Zeilen und Spalten ein. Für unseren ersten Test möchten wir lediglich ein Label und ein Button platzieren. Zusätzlich sehen wir oben und unten ein Rand im Formular vor. Wir teilen dazu das gesamte Formular über die TGridPanelLayout -Komponente in vier Zeilen und eine Spalte. Das erledigen wir über das Tool Fenster Struktur . Dazu verwenden wir das Kontextmenü zur TGridPanelLayout -Komponente.
Die Struktur Ansicht gibt einen Überblick über den Aufbau der Oberfläche.
Über das Kontextmenü Eintrag hinzufügen können wir neue Zeilen hinzufügen. Ebenso kann man Spalten oder Zeilen über das Kontextmenü löschen, indem man diese zuvor auswählt. Alle Zeilen sollen eine identische Größe aufweisen. Wir selektieren alle Zeilen gleichzeitig (durch Drücken der STRG -Taste) und passen die Größe über den Objektinspektor für alle Zeilen auf einen Wert von 25 Prozent an. Dazu muss der Wert mehrfach im entsprechenden Feld des Objektinspektors eingegeben werden, damit Delphi diesen für alle Zeilen anwendet. Dieses ist notwendig, da Delphi sicherstellen muss, dass sich die einzelnen Werte immer zu 100 Prozent addieren und daher Abweichungen in der Summe – durch die Eingabe eines Einzelwertes – mit der automatischen Anpassung eines anderen Wertes ausgleicht.
Teilen Sie das Formular über die TGridPanelLayout-Komponente in Zeilen und Spalten.
Nach diesen Vorbereitungen haben Sie das Formular entsprechend unseren Wünschen mittels der TGridPanelLayout -Komponente in vier Zeilen und eine Spalte eingeteilt.
Das Layout des Formulars in Form eines Gitternetzes.
Jetzt können wir ein Label und ein Button platzieren, indem wir die entsprechende Komponente aus der Tool Palette auswählen und par Drag and Drop auf das Formular ziehen. Die betreffende Komponente wird jedoch noch nicht in der richtigen Zeile bzw. Spalte platziert. Dieses erledigen Sie wieder über die Ansicht Struktur in Kombination mit dem Objektinspektor . Wenn Sie das Label auf das Formular gezogen haben, wird unterhalb des GridPanelLayouts im Zweig ControlCollection ein Eintrag angezeigt. Wenn Sie den Eintrag auswählen, dann können Sie für die betreffende Komponente (in diesem Fall das Label ) im Objektinspektor die gewünschte Zeile und Spalte einstellen. Beachten Sie, dass die Zählung der Spalten und Zeilen bei null beginnt.
Platzierung der Komponenten im Grid über Angabe der Zeilen- und Spaltennummer.
In unserem Fall stellen wir für den Label den Wert der Spalte ( Column ) auf den Wert null und den Wert der Zeile (Row ) auf den Wert eins ein. Die Beschriftung für das Label wird über die EigenschaftText angepasst. Den Button platzieren wir eine Zeile tiefer und passen die Eigenschaft Text entsprechend an. Unser Formular ist fertig und sieht wie folgt aus:
Ansicht des Formulars (Screen) in der Master Ansicht für Android.
Dieses ist die Masteransicht für Android. Für die anderen verfügbaren Systeme, hier Windows und iOS ist auch eine solche Ansicht verfügbar. Diese zeigt das Erscheinungsbild der Benutzeroberfläche für das jeweilige System, ohne dass die Darstellung bereits für ein spezielles Gerät konkretisiert ist. Probieren Sie es aus und schalten Sie beispielsweise auf iOS um! Der deutlichste Unterschied ist die Darstellung des Buttons gegenüber Android. Um eine Vorstellung zu entwickeln, wie das Formular auf dem späteren Gerät aussieht, kann man statt der jeweiligen Masteransicht zu spezifischen Ansichten wechseln. Aktivieren Sie beispielsweise die Ansicht Android 5‘‘ Phone :
Vorschau für Android 5‘‘ Phone.
Alternativ können wir uns auch die Vorschau auf einem iPhone ansehen. Wir wechseln zur Ansicht iPhone 5,5‘‘ :
Vorschau für iPhone 5‘‘.
Einen sehr guten Überblick über alle möglichen Zielgeräte liefert die Geräteübergreifende Vorschau. Sie aktivieren diese über den Menüpunkt Ansicht | Tool Fenster | Geräteübergreifende Vorschau.
Die Multi-Device-Preview liefert einen Überblick über alle Zielgräte.
An dieser Stelle können wir die App bereits das erste Mal starten. Auch wenn Sie letztendlich eine App für Android und iOS erstellen möchten, können Sie die App unter Windows ausführen. Hier arbeitet der Compiler sehr zügig und die Anwendung ist schneller erstellt, als das Generieren der Anwendungspakete für die mobilen Plattformen. Aktivieren Sie Windows als Zielsystem und starten Sie die App mit oder ohne Debugger über die Symbolleiste! Der Compiler beginnt seine Arbeit.
Die App wird kompiliert.
Wenige Augenblicke später wird die Windows Anwendung gestartet.
Die App als Windows Anwendung.
Jetzt geht es darum die App auf Android und iOS zu starten. Aktivieren Sie Android als Zielplattform in der Projektverwaltung und schließen Sie Ihr Android Gerät (Smartphone bzw. Tablet) an. Wählen Sie dieses als Zielgerät aus. Klicken Sie jetzt wiederum auf Starten der App. Beim ersten Start kann es erforderlich sein, dass Delphi noch die Android SDK-Tools nachinstallieren möchte.
Frage nach den Android SDK-Tools.
Wenn Sie dieses bestätigen, dann erfolgt die Installation automatisch.
Nachinstallation der Android SDK-Tools.
Im Hintergrund wird zusätzlich ein Fenster auf Konsolenebene geöffnet.
Sie Konsole zeigt die laufende Installation der Android SDK-Tools.
Nachdem die Installation ausgeführt wurde, sollte wenige Augenblicke später das Anwendungspaket auf Ihr Smartphone übertragen werden. Dieses müssen Sie natürlich zuvor in den Einstellungen für den Entwicklermodus freischalten. Danach ergibt sich in etwa das folgende Bild, d.h. unsere App wird gestartet.
Die auf einem Android Smartphone gestartete App.
Für Android empfehlen wir grundsätzlich den Test auf einem Echtgerät wegen der o.g. Hardwarevoraussetzungen. Emulatoren dürften bei komplexeren Apps meist zu langsam sein.
Delphi ermöglicht eine geräteübergreifende Entwicklung, d.h. wir wollen den Quellcode nun noch zu einer App für iOS kompilieren. Beenden Sie die Android App und kehren Sie zu Delphi zurück. Aktivieren Sie in der Projektverwaltung den iOS Simulator als Zielplattform. Zu diesem Simulator müssen wir jetzt eine Verbindung herstellen. Klicken Sie im Kontextmenü auf Verbindung bearbeiten…
Verbindung zum Mac herstellen.
Über diesen Menüpunkt stellen wir die Verbindung zu einem Mac her. Bitte erinnern Sie sich an unsere Ausführungen zur Einrichtung der Entwicklungsmaschine. Voraussetzung für das Erstellen der Pakete für iOS sind:
Ein Zugriff auf den Mac über das Netzwerk, gleichgültig ob dieses über das lokale Netzwerk, aus einer virtuellen Maschine oder auf einen entfernten Rechner als Cloud-Service erfolgt.
Auf dem Mac muss der PAServer installiert und gestartet werden.
Sie müssen die IP-Adresse des Mac kennen.
Sie müssen die Entwicklungsumgebung Xcode und den iOS Simulator mit der Versionssummer 10.3.1 installiert haben.
Es erscheint das folgende Dialogfeld, um eine Verbindung von Delphi (Windows) zu macOS aufzubauen.
Verbindung von Delphi zu macOS.
Passen Sie die IP-Adresse und ggf. optional das Passwort an und überprüfen Sie die Verbindung mit dem Button Verbindung testen . Sofern dieses funktioniert, können Sie das Dialogfeld schließen und die Liste der Zielgeräte im Zweig iOS der Projektverwaltung wird aktualisiert.
Die iOS Geräte sind aufgeführt.
Wählen Sie ein iPhone oder iPad mit einer Betriebssystemversion von 10.3 und starten Sie die Applikation! Jetzt müssen Sie zum Bildschirm Ihres Mac schauen und nach kurzer Zeit sollte der iOS Simulator gestartet werden. Ebenso wird unsere App gestartet, wie das folgende Bildschirmfoto beweist.
Unsere App unter iOS.
Soweit so gut! Unsere App kann sowohl unter Android als auch unter iOS ausgeführt werden. Beachten Sie, es waren keine Anpassungen im Quellcode notwendig. Im Formular sehen Sie noch jeweils einen Button mit der Aufschrift Klick mich. Wenn Sie auf diesen Button drücken, dann erscheint jeweils eine einfache Meldung. Unter iOS sieht das wie folgt aus:
Eine einfache Message unter iOS.
Wechseln Sie wieder zu Android, dann ergibt sich folgende Darstellung:
Die gleiche Meldung unter Android.
So simpel wie dieses Beispiel der Message auch erscheinen mag, es zeigt wunderbar die Vorteile der geräteübergreifenden Programmierung. Unter allen Systemen muss man die Funktionen jeweils vollständig anders Programmieren. Delphi und das Grafikframework FireMonkey kapseln die Komplexität der unterschiedlichen Systeme und bieten den Entwickler eine einheitliche Programmierschnittstelle. Damit ein Button auf einen Klick reagiert, ist in Delphi dasOnClick -Event des Buttons über den Objektinspektor zu binden.
Die Events, zum Beispiel OnClick bei einem Button werden über den Objektinspektor gebunden.
Wenn man auf das OnClick -Event doppelt klickt, dann landet man im Quelltexteditor in der entsprechenden Prozedur. Für die Meldung muss man dazu nur eine Zeile Quellcode ergänzen:
procedure TForm1.Button1Click(Sender: TObject);
begin
TDialogServiceAsync.ShowMessage(‚Hello from Delphi‘);
end;
Notwendig ist noch die Einbindung der Unit (Bibliothek) FMX.DialogService.Async über die davor stehende uses-Klausel. Sehen Sie sich den gesamten Quellcode im Beispielprojekt an.
Da geht noch viel mehr!
Sie haben jetzt Delphi installiert und Ihren Entwicklungsrechner eingerichtet. Mit Hilfe eines klassischen „Hello-World“-Tutorials haben Sie den kompletten Entwicklungszyklus für eine App durchlaufen. Sie haben ein neues Projekt auf der Basis des Grafikframeworks FireMonkey angelegt. Dabei haben Sie gesehen, wie man das User Interface gestaltet. Am Ende haben wir die App unter Android und iOS gestartet.
Jetzt geht es erst richtig los mit der App-Programmierung! Wir hoffen das Beispiel hat Lust auf Mehr gemacht. Dazu gehören zum Beispiel komplexere Benutzerschnittstellen, die Verwendung von spezieller Hardware der mobilen Geräte, wie Kamera oder Ortungssensoren und das Senden und Empfangen von Daten über das Internet. Dank leistungsfähiger Komponenten bietet Delphi auch hier viel Unterstützung. Demnächst finden Sie hier ein weiteres Tutorial, welches fortgeschrittene Themen der App-Programmierung vorstellt. Bis dahin wünschen wir Ihnen viel Spaß bei Ihrem Einstieg in die App-Entwicklung mit der der Community Edition von Delphi. Für die weitere Lektüre empfehlen wir Ihnen:
Ein Überblick über die Entwicklungsumgebung:
Sprachreferenz zu Delphi:
Entwicklung von Android Apps:
Entwicklung von iOS Apps:
Krypczyk, Veikko und Bochkor, Olena: Geräteübergreifende Entwicklung mit RAD Studio (E-Book, shortcut), zum Beispiel erhältlich über Amazon.
Ein abschließender Hinweis: Den Quellcode zu diesem Tutorial können Sie von hier herunterladen.
Die Entwicklungsumgebung Basic4Android bietet mit einer leicht zu erlernenden Sprache einen eleganten Mittelweg zwischen komplexer Java-Programmierung und simplem App-Baukasten, quasi Android-Apps für Anfänger.
Der Königsweg zur Android-Programmierung führt über Java. Doch Java ist recht komplex, die Lernkurve entsprechend groß. Der App Inventor [1] reduziert die App-Entwicklung auf eine sehr einfache, abstrakte Ebene – allerdings mit eingeschränktem Funktionsumfang. Basic4Android prescht in die Lücke und ermöglicht die schnelle Entwicklung leistungsstarker Android Apps ganz ohne Java-Kenntnisse.
Auf Basic basierende Anwendungen lassen sich relativ leicht auf andere Systeme portieren, denn Basic-Entwicklungsumgebungen gibt es fast überall. Mit der von Anywhere Software entwickelten Basic4Android Entwicklungsumgebung (B4A) ist es möglich, in recht kurzer Zeit leistungsfähige Apps zu entwickeln. Wer schon mal Kontakt mit Basic hatte, wird sich besonders leicht zurechtfinden. Aber auch Einsteigern ohne jegliche Vorkenntnis gelingen dank guter Tutorials und einer aktiven B4A-Community schnell die ersten Programmiererfolge. Dieser Workshop soll beim Einstieg helfen. Für die Beispiel-App in unserem Workshop ist die Testversion von Basic4Android ausreichend, die Sie unter [2] zum Download finden..
Basic für Android
Um Basic4Android nutzen zu können, müssen Sie zunächst das JDK und das Android-SDK installieren. Anschließend starten Sie Basic4Android und wählen Tools | Configure Paths. Hier wählen Sie über den Button Browse die Pfade zu den Dateien (im Unterverzeichnis in des JDK-Ordners) und android.jar (im Unterverzeichnis platformsandroid-x des SDK Ordners), die mit dem JDK und SDK installiert wurden. Anschließend ist die Basic4Android Entwicklungsumgebung startklar.
Die grafische Oberfläche hält sich an die Gepflogenheiten üblicher Windows-Anwendungen und enthält Menü- und Iconleiste sowie einen zweigeteilten Arbeitsbereich: Der linke Teil ist der Quellcode-Editor, im rechten Teil werden wahlweise die Module (Modules) der App, die genutzten Dateien (Files), die verwendeten Bibliotheken (Libs) sowie das Systemprotokoll des angeschlossenen Geräts (Logs) dargestellt.
Die Menüs File und Edit sind größtenteils selbsterklärend. Sie stellen vorwiegend Funktionen zum Öffnen und Speichern von App-Projekten (File) und zum Kopieren, Einfügen und Finden von Programmtext (Edit) bereit. Für die Gestaltung von Benutzeroberflächen steht der „Designer“ zur Verfügung. Über das Menü Project werden wichtige Einstellungen für die zu programmierende App vorgenommen. Auf den Designer und das Project-Menü kommen wir später ausführlich zurück. Unter Tools finden sich einige Zusatzwerkzeuge, unter anderem die B4A-Bridge, die es ermöglicht, über WLAN oder Bluetooth direkt auf dem Smartphone zu testen. Im Menü Help schließlich findet sich ein Link zu den ausführlichen Online-Tutorials.
Der Programmeditor ist recht komfortabel ausgelegt und denkt mit: Eine AutoComplete-Funktion bietet beim Tippen ein Pop-Up mit den möglichen Befehlen. Bei der Variablendeklaration etwa wird eine Auswahlliste der verfügbaren Variablentypen angeboten. Für Objekte wie zum Beispiel File schlägt der Editor die existierenden Funktionen vor und beschreibt die Syntax des Befehls.
Die Grundstruktur des Quellcodes
Nach dem Start der IDE wird bereits automatisch ein neues Programmprojekt mit einem Modul Main angelegt. Dieses Modul ist als Activity Module definiert. Als Activity bezeichnet man eine Bildschirmseite einer Android App. Das Activity Modul Main definiert also den Startbildschirm einer App. Eine App muss mindestens aus diesem Modul bestehen.
Ein Activity Modul besteht grundsätzlich aus folgenden fünf Unterprogrammen (Subroutinen, im Folgenden Subs genannt):
Process Globals: Definiert globale Variablen, die beim Start der App deklariert werden und auch aus anderen Modulen heraus aufgerufen werden können.
Definiert globale Variablen, die beim Start der App deklariert werden und auch aus anderen Modulen heraus aufgerufen werden können. Globals: Definiert globale Variablen, die bei jedem Aufruf der Activity deklariert werden und nur innerhalb des Moduls zur Verfügung stehen.
Definiert globale Variablen, die bei jedem Aufruf der Activity deklariert werden und nur innerhalb des Moduls zur Verfügung stehen. Activity Create: Programmteile in dieser Subroutine wird bei jedem Start der Activity abgearbeitet.
Programmteile in dieser Subroutine wird bei jedem Start der Activity abgearbeitet. Activity Resume: Programmteile in dieser Subroutine werden abgearbeitet, wenn die Activity vom Hintergrund in den Vordergrund rückt.
Programmteile in dieser Subroutine werden abgearbeitet, wenn die Activity vom Hintergrund in den Vordergrund rückt. Activity Pause: Programmteile in dieser Subroutine wird abgearbeitet, wenn die Activity aus dem Vordergrund in den Hintergrund rückt.
Jede Subroutine beginnt im Quellcode mit dem Wort „Sub“ und schließt mit „End Sub“ ab. Es können beliebige weitere Subs erstellt werden. Sie helfen, den Quellcode zu strukturieren. Immer wieder genutzte Programmteile müssen nur ein einziges Mal als Subroutine angelegt werden und lassen sich durch Aufruf der Sub überall nutzen.
Der Designer
Mit dem Designer erstellen Sie schnell und einfach grafische Benutzeroberflächen (GUIs) für Ihre App. Nach dem Aufruf über das gleichnamige Menü öffnen sich zwei Fenster: Designer und Abstract Designer. Über das Menü AddView im Designer fügen Sie dem Layout so genannte Views zu. Als View bezeichnet man sämtliche Elemente innerhalb eines Bildschirmlayouts: interaktive Elemente wie Buttons oder Texteingabefelder sowie Elemente zur Anzeige von Text oder Grafiken. Nachdem die gewünschte View im Menü ausgewählt ist, zeigt der Abstract Designer das Objekt gezeigt und Sie können es an die gewünschte Stelle verschieben und Länge sowie Breite anpassen.
Auf dem Reiter Main im Designer bestimmen Sie die Eigenschaften einer jeden View sehr genau. Hier geben Sie einer View einen aussagekräftigen Namen und definieren Aspekte wie Farbe, Text, Textausrichtung und ob die View beim Start der Activity sichtbar sein soll oder nicht.
Achtung: Der Abstract Designer ist keine WYSIWYG-Vorschau. Er stellt sämtliche Objekte nur stilisiert dar. Für eine präzise Vorschau des Layouts empfiehlt es sich, eine Verbindung zum Emulator oder zu einem Android Gerät zu nutzen (siehe Kasten „B4A Bridge“). Über Tools | Connect Device | Emulator stellen Sie im Designer eine Verbindung zum Gerät oder Emulator her (Abbildung 5).
B4A Bridge Zum Testen der App während der Entwicklung empfiehlt es sich, den Emulator des SDK zu nutzen oder die App gleich auf dem echten Smartphone auszuprobieren. Basic4Android stellt dafür eine Schnittstelle bereit, die sich über WLAN oder Bluetooth nutzen lässt. Installieren Sie sich dazu aus dem Play Store die App B4A Bridge [4]. Starten Sie die App auf Ihrem Gerät und wählen Sie Start – Wireless. In Basic4Android rufen Sie Tools | B4A Bridge | Connect Wireless auf und geben die IP-Adresse ein, die die App auf dem Handy anzeigt. Die Verbindung über Bluetooth erfolgt auf ähnliche Weise. Da unsere Beispiel-App „Foto-Notiz“ auf Fotos auf Ihrem Smartphone zugreifen will, eignet sich der Emulator in diesem Falle nicht zum Testen.
Die erste App: Foto-Notiz
Unsere erste App heißt nicht „Hello World“, sondern „Foto-Notiz“. Es ist eine schlichte und einfache App. Sie bietet aber bereits etwas praktischen Nutzwert und liefert Beispiele für häufige Anwendungsfälle – zum Beispiel das Lesen und Schreiben von Dateien oder das Anzeigen einer Grafik. Die App soll die Fotos eines Ordners auf Ihrem Android-Geräts anzeigen und Ihnen die Möglichkeit bieten, Notizen zu den Fotos abzuspeichern und mit dem jeweiligen Foto anzuzeigen. Über Vorwärts- und Rückwärts-Buttons navigiert der Nutzer durch die Fotosammlung.
Auf der Android-User-Homepage finden Sie das vollständige App-Projekt inklusive Quellcode. Öffnen Sie das Projekt über File | Open Source in Basic4Android. Wählen Sie dazu die Datei fotonotiz.b4a aus. Alternativ legen Sie über File | New ein neues Projekt an und nutzen den fertigen Quellcode nur zum Gegenprüfen. Wenn Sie die Testversion von Basic4Android nutzen, dann löschen Sie zunächst den Inhalt der Zeile 17: "Msgbox("Welcome to Basic4android!", "")" . Diese von der Testversion automatisch erstellte Zeile wird nicht benötigt.
Das Bildschirmlayout
Wir starten mit der Gestaltung der App-Oberfläche. Rufen Sie dazu den Designer auf. Über Add View im Menü fügen Sie Views zum Layout hinzu. Die hinzugefügten Views ordnen Sie entsprechend Abbildung 7 an. Im Abstract Designer lässt sich jede View bequem verschieben, vergrößern und verkleinern. Rufen Sie anschließend über die Listbox im Designer Fenster die einzelnen Views auf und tragen Sie im Feld „Name“ sinnvolle Namen ein (siehe Name in Klammern). Wir benötigen für das Layout folgende Views:
ImageView zur Darstellung des Fotos
Button für den Wechsel zum vorherigen Foto („RueckButton“)
Button für den Wechsel zum nächsten Foto („VorButton“)
EditText für den Titel der Notiz („TitelText“)
EditText für den Notiz-Text („NotizText“)
Button zum Speichern der Notiz („SpeichernButton“)
Zwei Label zur Beschriftung der beiden EditText Views
Tragen Sie unter Text in den Common properties des Label1 den Text Titel sowie bei Label2 den Text Notiz ein. An gleicher Stelle definieren Sie auch den Text für die Buttons. Für den RueckButton tragen Sie << ein, für den VorButton >> und für den SpeichernButton das Wort „Speichern“.
Im Abschnitt Text Style unter Common properties nehmen Sie auf Wunsch weiteren Einfluss auf die Gestaltung der Texte. Hier lassen sich Schriftart, Schriftgröße oder die Textausrichtung bestimmen.
Damit die Views auch im Quellcode der App nutzbar sind, übertragen Sie die dafür notwendigen Informationen über Tools | Generate Members in das Programmmodul. Markieren Sie hier alle aufgelisteten Views – mit Ausnahme der View „Activity“. Über das + erreichen Sie weitere Unterfunktionen zu den einzelnen Views. Wählen Sie hierüber bei TitelText und NotizText jeweils die Funktion TextChanged und bei RueckButton, VorButton und SpeichernButton jeweils Click aus. Anschließend betätigen Sie den Button Generate Members.
Das Layout ist damit bereits fertiggestellt. Speichern Sie das Layout über File | Save as unter dem Namen main ab und wechseln Sie zur Basic4Android IDE. Im Arbeitsfenster der IDE wurden durch die Generate Members Funktion bereits einige Programmzeilen automatisch eingetragen: In der Sub Globals finden Sie jetzt Deklarationen der einzelnen Views des Layouts. Außerdem wurden neue Subroutinen erstellt für die Behandlung von Ereignissen (Events) – für die Click-Events der Buttons und für die TextChange-Events der beiden EditText Felder.
Variablendeklaration
In der Sub Globals müssen wir zunächst noch weitere Variablen deklarieren. Die Syntax dazu lautet stets: dim Variable as Variablentyp. Wir starten mit der Variable verzeichnis , die den Pfad zum Ordner der Fotos enthalten soll:
dim verzeichnis as String
Der Variablen weisen wir hier bereits einen Inhalt zu, nämlich den Pfad zum Foto-Ordner. Der Beispiel-Code nutzt /mnt/sdcard/DCIM/Camera . Bitte prüfen Sie, ob dieser Pfad auf Ihrem Gerät passt und passen Sie ihn gegebenenfalls an. Weitere Variablen, die wir hier festlegen: dateiliste als List, bildnummer als Int sowie veraenderung und vorwaerts jeweils als Boolean. Mit den Boolean-Variablen werden wir im Programmtext Merker setzen, die uns helfen, im Programmablauf Entscheidungen zu treffen. In die dateiliste wollen wir eine Liste aller Fotos aus dem Foto-Verzeichnis speichern und bildnummer verwenden wir für die Nummerierung der Fotos.
Starten der App
In der Sub Activity_Create bestimmen Sie, was beim Starten der App passieren soll. Zunächst soll die App das Bildschirmlayout laden. Diese Anweisung lautet: Activity.LoadLayout("main") , wobei "main" der Name der Layoutdatei ist, den wir beim Speichern des Layouts vergeben haben.
Im zweiten Schritt initialisieren wir die Listvariable dateiliste und füllen sie mit der Liste sämtlicher Fotos aus dem definierten Ordner. Für diesen Schritt benötigen wir lediglich zwei Programmzeilen:
dateiliste.initialize dateiliste = File.listfiles(verzeichnis)
Schon hier ist zu erkennen, dass Basic4Android auch für recht umfangreiche Aufgaben vergleichsweise wenig Programmzeilen benötigt. Damit beim Programmstart zunächst immer das erste Foto der Liste geladen wird, setzen wir bildnummer auf 0. Da beim ersten Foto der Liste aber ein Wechsel zum vorherigen Foto noch nicht möglich ist, muss der RueckButton zunächst inaktiv sein:
bildnummer = 0 = false
Alles ist relativ
Damit das Bildschirmlayout der App auch auf unterschiedlichen Geräte- und Displaygrößen gut aussieht, empfiehlt es sich, in der Sub Activity_Create auch die einzelnen Views relativ zur Bildschirmauflösung zu positionieren. Die Grundstruktur dieser Anweisungen lautet: View.SetLayout(Abstand linker Rand, Abstand oberer Rand, Breite, Höhe) .
Neben festen Werten in Bildpunkten (z. B. „10dip“) sind hierbei auch relative Angaben in Bezug auf Höhe und Breite des Bildschirmes möglich (z. B. „75%x“ oder „50%y“). Definieren Sie die Größen und Position der einzelnen Views von oben (oberste View im Layout) nach unten. Wir beginnen mit der ImageView1:
ImageView1.SetLayout(0,0,100%x,75%x)
Die ImageView1 soll demnach 0 Punkte von link, 0 Punkte von oben (also exakte in der oberen linken Ecke des Bildschirmes) liegen und so breit sein wie die Bildschirmbreite (100%x). Als Höhe legen wir 75%x (3/4 der Bildschirmbreite) fest. So erhalten wir für das Foto ein Bildformat von 4:3 (100:75).
Alle weiteren Views positionieren wir auf ähnliche Weise, berücksichtigen dabei aber immer die Position und Höhe der darüber liegenden View. Der Button soll also 10 Bildpunkte von linkem Bildschirmrand liegen. Für den Abstand vom oberen Bildschirmrand rechnen wir: Oberer Rand der ImageView1 ( ImageView1.Top ) plus Höhe der ImageView1 ( ImageView1.Height ) abzüglich 40 Bildpunkte (40dip). Die 40dip ziehen wir ab, weil der Button nicht unterhalb des Fotos liegen soll, sondern das Foto überdecken soll. Die Breite definieren wir mit 80dip, die Höhe mit 40dip.
Für die Positionierung des VorButton machen wir es ähnlich, der Button soll aber weiter rechts im Bild liegen. Deshalb müssen wir den Abstand von links anders definieren: 100%x-90dip. Der Button möge also 90 Bildpunkte vom rechten Rand des Bildschirms entfernt liegen. Nach gleichem Prinzip legen Sie nun auch die Position und Größe aller weiteren Views an. Im Beispiel-Quellcode finden Sie alle SetLayout-Anweisungen in den Zeilen 47 bis 55.
Das etwas fummelige relative Positionieren der Views mag nervig erscheinen. Dennoch ist es äußerst sinnvoll, um zu vermeiden, dass auf Geräten mit kleinen Displays Views nicht vollständig dargestellt werden oder umgekehrt auf großen Bildschirmen die Views zu klein erscheinen und weiträumig verteilt sind.
Foto laden und darstellen
Der Startvorgang der App mit dem Aufbau des Screens ist damit bereits abgeschlossen. Fehlt noch das Laden des Fotos. Dazu erstellen wir eine eigene Subroutine Foto_oeffnen . Erstellen Sie dazu am Ende des Programmcodes einen neuen Block bestehend aus Sub und End Sub:
Sub Foto_oeffnen End Sub
Am Ende der Subroutine Activity_Create, nach der Positionierung der Views, rufen wir diese Subroutine dann mit folgendem kurzen Befehl auf:
Foto_oeffnen
Beim Start der App wurde ja bereits die Variable „dateiliste“ mit den Dateinamen aus dem Foto-Verzeichnis befüllt. Wenn sich neben Grafikdateien auch Unterverzeichnisse in dem Ordner befinden, sind auch diese in der „dateiliste“ mit enthalten. Aus diesem Grund muss für das Öffnen des Fotos zunächst geprüft werden, ob der gewählte Eintrag aus der „dateiliste“ ein Verzeichnis ist oder nicht. Das machen wir in der ersten Zeile in der Sub Foto_oeffnen:
If File.IsDirectory(verzeichnis,dateiliste.get(bildnummer)) = False then
Mit dateiliste.get(bildnummer) wird dabei der Eintrag der Liste genommen, der an der durch die Zahl in der Variablen bildnummer bestimmten Stelle steht. Beim Start der App ist das die Stelle „0“ – also der erste Eintrag der Liste. Die Zeile prüft also, ob dieser Eintrag ein Verzeichnis ist oder nicht. Wenn nicht (False), dann ist von einer Datei auszugehen und die if... then Bedingung ist erfüllt. Dann kann das Foto in die ImageView1 geladen werden:
ImageView1.Bitmap = LoadBitmapSample(verzeichnis,dateiliste.get(bildnummer),500,500)
Im Anschluss prüfen wir das Vorhandensein eines Notiz-Titels und Notiz-Texts und laden diesen in die entsprechenden EditText Views (Listing 1).
Listing 1 Existenz prüfen If Then TitelText.Text = Else TitelText.Text = "" End If
File.DirInternal ist eine in Basic4Android fest integrierte Variable, die den Pfad des zu jeder Android App gehörenden internen App-Verzeichnis im Telefonspeicher führt – ein idealer Speicherort für alles, was die App zwar braucht, aber für den Nutzer nicht von außen zugänglich sein soll. File.Exists prüft, ob die zu lesende Datei überhaupt existiert. Wenn ja, wird die Textdatei mit File.ReadString ausgelesen. Wenn nein, wird der Text in der TitelText View gelöscht. Auf gleiche Weise laden wir auch den Notiz-Text. Statt wird dann mit dem Dateianhang gearbeitet.
In der Abzweigung legen wir nun noch fest, was passieren soll, wenn es sich nicht um eine Datei handelt, die aus dateiliste gelesen wurde, sondern um ein Verzeichnis. In diesem Falle erhöhen bzw. verringern wir unseren internen Bildzähler bildnummer um 1, und zwar in Abhängigkeit von der Bewegungsrichtung. Hat der Nutzer vorher den VorButton betätigt (vorwaerts = true), dann wird der Zähler erhöht, sonst verringert. Danach wird mit Foto_oeffnen die Subroutine erneut aufgerufen, um es mit dem nächsten Foto zu versuchen. Damit ist die Konstruktion abgeschlossen.
Falls es sich beim zuletzt gewählten Foto um das erste oder letzte des Verzeichnisses handelt, muss der RueckButton bzw. VorButton noch auf inaktiv gesetzt werden. Außerdem setzen wir unseren internen Merker für Veränderungen am Notiz-Text zurück, wie in Listing 2 zu sehen.
Listing 2 Merker zurücksetzen If bildnummer = 0 then RueckButton.Enabled = False if bildnummer = dateiliste.size -1 then VorButton.Enabled = False veraenderung = False
Diesen Merker setzen Sie in den Subroutinen TitelText_TextChanged und NotizText_TextChange entsprechend auf True. Die in diesen Subs definierten Events greifen, sobald der Nutzer in den Feldern Titel oder Notiz Veränderungen vornimmt.
Der Sinn dieses Merkers: Beim Drücken des VorButton und RueckButton soll die Abfrage erfolgen, ob der Nutzer die Notiz speichern will, sofern dies noch nicht passiert ist. Dazu erstellen Sie die Sub Abfrage, in der eine entsprechende Message Box ausgegeben wird, wenn der Merker den Wert True enthält. Beantwortet der Nutzer die Abfrage positiv ( result = DialogResponse.positive ), dann ruft die Routine die Sub SpeichernButton_click auf. Im Quellcode finden Sie diese Subroutine in den Zeilen 133 bis 141. In den Subs VorButton_click und RueckButton_click rufen Sie die Abfrageroutine auf (Zeilen 81 und 91).
In gleichen Subs erhöhen bzw. verringern wir den internen Fotozähler bildnummer um 1 und setzen den jeweils anderen Button wieder aktiv: RueckButton_enabled = True . Hier merken wir uns in der Variablen vorwaerts auch, ob der Anwender sich vorwärts ( vorwaerts = True ) oder rückwärts ( vorwaerts = False ) durch die Fotos bewegt hat. Am Ende der beiden Button_Click -Events rufen Sie die Subroutine zum Öffnen des neuen Fotos auf.
Nun fehlen nur noch ein paar Programmzeilen für die Sub SpeichernButton_click . Dort sollen Titeltext und Notiztext in eine Textdatei gespeichert werden, die beim Öffnen des Fotos ausgelesen wird. Außerdem setzen wir in dieser Sub die Variable „veraenderung“ auf False (denn die Veränderung wurde ja gerade gespeichert) und liefern dem Nutzer eine kleine ToastMessage als Vollzugsmeldung auf den Bildschirm. Das Ergebnis zeigt Listing 3.
Listing 3 Notiz speichern ToastMessageShow("Notiz gespeichert.", True)
Widgets ganz easy
Um mit der App gespeicherte Foto-Notizen auch direkt auf dem Homescreen zu sehen, möchten wir noch ein kleines Widget erzeugen. Das geht mit Basic4Android verblüffend leicht.
Dazu definieren Sie zunächst ein Widget Layout im Designer. Dort erzeugen Sie eine Panel View – sie ist der Rahmen des Widgets. Für ein Widget der Größe 3×2 sollte Sie das Panel in einer Größe von 237 (Width) mal 158 (Height) dimensionieren. Zwei Labels (für Titel und Notiz) sowie eine ImageView (für das Foto) legen Sie auf das Panel. Fertig ist das Layout. Speichern Sie es unter dem Namen „widgetlayout“.
Zurück in der IDE erstellen Sie über Project | Add Module ein Service Modul. Geben Sie ihm den Namen fotowidget . In der Sub Process_Globals des Service Moduls definieren Sie eine Variable als RemoteViews . Diese RemoteView steuert die Intelligenz des Widgets:
dim rv as RemoteViews
In der Sub „Service_Create“ wird das Widget definiert:
rv = ConfigureHomeWidget("widgetlayout.bal", "rv",30, "Foto-Notiz",True)
Die Zahl 30 gibt in Minuten an, wie häufig sich das Widget selbst aktualisieren soll.
In einer neuen Sub rv_RequestUpdate erzeugen wir den Programmcode für die Zufallsauswahl eines Fotos und das Laden von Foto, Notiz-Titel und Notiz-Text – siehe Quellcode Zeile 33 bis 64. Die Zufallsauswahl wird dabei über die Random-Funktion rnd realisiert:
zufallszahl = Rnd(0,notizliste.size-1)
Die Liste notizliste befüllen wir zuvor mit allen Dateinamen aus dem Verzeichnis File.DirInternal , die den String im Dateinamen tragen (Zeile 38-48). Über rv.SetText und rv.SetImage werden den Label und ImageView Views des Widgets Inhalte zugewiesen, rv.UpdateWidget ordnet die Aktualisierung des Widgets an (Zeile 57-60).
Zu guter Letzt erstellen Sie noch eine neue Sub Panel1_Click . Beim Drücken auf das Widget soll sich selbiges aktualisieren:
rv_RequestUpdate
Damit ist das Widget bereits fertig!
App kompilieren
Bevor das Projekt compiliert werden kann, müssen Sie im Menü Projekt noch ein paar Einstellungen vornehmen. Wählen Sie über Choose Icon ein App-Icon im PNG Format mit der Größe 48×48 Pixel. Über Package Name vergeben Sie einen frei definierbaren Paketnamen. In der Praxis ist es üblich, hierfür einen Domainnamen rückwärts zu verwenden, also zum Beispiel: . Unter Application Label vermerken Sie den Namen der App, zum Beispiel Foto-Notiz und bei Application Version geben Sie der App eine Versionsnummer.
Nun ist Ihre erste App bereit zum Compilieren. Wählen Sie dazu Project | Compile & Run. Wenn Sie eine Verbindung über die B4A-Bridge aktiviert haben, dann überträgt Basic4Android die App nun automatisch auf Ihr Smartphone und Sie können sie sofort ausprobieren.
Fazit
Keine Frage, unsere Beispiel-App ist noch nicht perfekt. Fotos im Hochformat werden um 90 Grad gedreht dargestellt und der Pfad des Foto-Ordners ist fest im Quellcode hinterlegt. Das geht natürlich alles viel schöner und eleganter. Statt mit Vorwärts- und Rückwärts-Buttons durch die Fotos zu navigieren, wäre die gezielte Auswahl eines Fotos aus der Galerie eigentlich schöner. Das ist mit Hilfe eines so genannten Content Choosers in Basic4Android auch ganz leicht realisierbar. Hierfür ist allerdings die Nutzung zusätzlicher Bibliotheken notwendig. Da die Testversion von Basic4Android dies nicht erlaubt, haben wir in diesem Workshop darauf verzichtet. Wenn Sie Lust bekommen haben, eigene Apps zu programmieren, dann sollten Sie den Kauf der Vollversion in Erwägung ziehen. Für unsere Leser haben wir einen attraktiven Rabatt mit dem Hersteller ausgehandelt (siehe Kasten). Empfehlenswert ist auch die sehr aktive B4A-Community, die sogar ein deutschsprachiges Forum bietet.
30 Prozent Rabatt Anywhere Software bietet den Lesern von Android User 30 Prozent Rabatt beim Kauf einer Basic4Android-Lizenz. Wählen Sie dazu auf der Webseite die Zahlungsmethode „Plimus“ und geben Sie den Gutschein-Code androiduser ein. Vom Kaufpreis werden dann automatisch 30 Prozent abgezogen.
Brauchst Du eine Schreib-App, um Texte auf Deinem Android-Smartphone zu schreiben? Es gibt sogar passende Apps, mit denen Du auf Deinem Tablet ein Buch verfassen kannst. Hier stellen wir die acht besten Apps zum Schreiben für Android vor.
Microsoft Word
Das altehrwürdige Microsoft Word gibt es im Rahmen des Office-365-Abos inzwischen auch für Android-Geräte. Vor allem, wer auf seinem Tablet längere Texte schreibt, ist mit Word besonders gut beraten. Microsoft hat lange an der Tablet-Version gefeilt und sie für die Touch-Eingabe angepasst. Nicht zuletzt ist die App für diejenigen besonders gut zugänglich, die auch auf dem PC mit Word arbeiten. Allerdings kostet das günstigste Abo, Office 365 Personal, 70 Euro im Jahr.
Zur App: Microsoft Word
Tablets mit Android Bei SATURN gibt es eine große Auswahl von Tablets mit dem Betriebssystem Android.
Google Docs
fullscreen Bild: ©Google Play Store / Google 2017 Das Synchronisieren von Dokumenten klappt mit Google Docs besonders gut.
Google Docs ist wie Word gut für Tablets und Smartphones angepasst. Die Office-App von Google ist allerdings besser für die gemeinsame Arbeit von mehreren Personen an einem Dokument zugleich geeignet, weil die Online-Synchronisation schneller funktioniert als bei Word. Google Docs ist inzwischen auch offline nutzbar. Ein Nachteil besteht darin, dass Microsoft Word mehr Features bietet. Als Vorteil kann Google Docs wiederum für sich verbuchen, dass die App kostenlos ist.
Zur App: Google Docs
Quip
Bei Quip handelt es sich nicht um eine mobile Office-Suite, sondern um eine App, die Dokumente und Nachrichten in einem Beitrag kombiniert. Mit Quip machst Du Notizen oder fertigst To-Do-Listen an. Die App funktioniert auch offline, ist aber in erster Linie für die gemeinsame Erstellung von Texten vorgesehen.
Zur App: Quip
JotterPad
fullscreen Bild: ©Google Play Store / Two App Studio 2017 JotterPad beschränkt sich auf das Nötigste, bietet aber immerhin ein Wörterbuch.
JotterPad ist eine einfache Schreibsoftware ohne Formatierungsoptionen. Dir werden lediglich einige Schriftarten und Satzzeichen sowie ein Reimlexikon und ein Wörterbuch angeboten. So tippst Du ungestört Deine Texte auf dem Smartphone, zum Beispiel spontane Gedichte. Mit an Bord sind auch ein Wort- und Zeichenzähler sowie eine Dropbox-Integration.
Zur App: JotterPad
Office HD
Office HD macht keine halben Sachen, sondern möchte eine umfassende Alternative zu Microsoft Word darstellen. Daher werden Features wie Tabellen, automatische Nummerierung, Absatz- und Zeichenvorlagen, Fußnote, Bibliografie und mehr geboten, wie man es von vollwertiges Office Suites wie Libre Office oder natürlich Word kennt. Ein großer Vorteil gegenüber dem Microsoft-Vorbild: Die App kostet nur einmalig sechs Euro.
Zur App: Office HD
iA Writer
fullscreen Bild: ©Google Play Store / Information Architects 2017 iA Writer möchte verhindern, dass Du beim Schreiben abgelenkt wirst.
Der iA Writer möchte das Schreiben von Texten erleichtern, indem es alles weglässt, was davon ablenken könnte. Auf Wunsch kannst Du den Kontrast der Zeile erhöhen, an der Du gerade schreibst, damit Du Dich besser konzentrieren kannst. Mit dabei sind ein Dateien-Explorer sowie voreingestellte Templates mit zugehörigen Schriftarten. Dateien lassen sich als HTML, PDF oder in einem Word-Format speichern. Für längere Texte ist iA Writer weniger geeignet, sondern eher für das Schreiben auf dem Smartphone optimiert.
Zur App: iA Writer
Polaris Office
Polaris Office möchte die gesamte Office-Suite von Microsoft ersetzen. Du kannst also Texte, Tabellen und auch Präsentationen mit Polaris Office erstellen und auch die von Microsoft bekannten Dateiformate öffnen. Polaris hat seinen eigenen Cloud-Dienst, aber es können auch Dienste wie Google Drive, Dropbox, Box und OneDrive genutzt werden. Ein Nachteil sind jedoch die Abo-Modelle für weitere Features.
Zur App: Polaris Office
WPS Office + PDF
fullscreen Bild: ©Google Play Store / Kingsoft Office Software 2017 WPS Office ist ein komplettes Paket inklusive Tabellenkalkulation.
WPS Office + PDF von Kingsoft ist ebenfalls eine komplette Office-Suite. Du kannst Word-, PowerPoint-, Excel- und Textdateien öffnen und bearbeiten. Auch Google Docs, Sheets, Slide und PDF werden unterstützt. In WPS Office können obendrein Dokumente verschlüsselt werden, um sie vor den Augen Dritter zu schützen. Das kostenpflichtige WPS Premium entfernt die Werbung und ergänzt Features wie eine PDF-Signatur und die Lesezeichenfreigabe.
Zur App: WPS Office + PDF
Sonstige
Es gibt noch weitere Office-Pakete für Android. Einige von diesen, darunter Smart Office 2 und Docs To Go, erfordern jedoch fragwürdige Berechtigungen wie "Telefonstatus und Identität abrufen". Es ist unklar, inwiefern diese Berechtigungen für die Nutzung der Apps notwendig sind. Wir raten bei solchen Apps eher zur Vorsicht.
Leave a Comment