Start Magazin Anwendungsentwicklung mit Basic4Android

Anwendungsentwicklung mit Basic4Android

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..

Beispieldateien zum Download

Die hier beschriebene App inklusive Quellcode gibt es auf der Android-User-Homepage zum Download. Den passenden Link [3] finden Sie über den QR-Code "Alle Links" am Ende des Artikels.

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 javac.exe (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.

Abbildung 1: Die Basic4Android IDE ist eine leistungsstarke Entwicklungsumgebung.
Abbildung 1: Die Basic4Android IDE ist eine leistungsstarke Entwicklungsumgebung.

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.

Abbildung 2: Der Programmeditor erleichtert die Variablendeklaration durch Vorschläge möglicher Variablentypen.
Abbildung 2: Der Programmeditor erleichtert die Variablendeklaration durch Vorschläge möglicher Variablentypen.

Abbildung 3: Bei Objekten wie File informiert der Editor automatisch über mögliche Funktionen und ihre Syntax.
Abbildung 3: Bei Objekten wie File informiert der Editor automatisch über mögliche Funktionen und ihre Syntax.

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.
  • Globals: 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.
  • Activity Resume: 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.

Abbildung 4: Der Abstract Designer erlaubt die rasche Gestaltung von Bildschirmlayouts.
Abbildung 4: Der Abstract Designer erlaubt die rasche Gestaltung von Bildschirmlayouts.

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).

Abbildung 5: Die B4A Bridge erlaubt die direkte Kommunikation zwischen IDE und Endgerät.
Abbildung 5: Die B4A Bridge erlaubt die direkte Kommunikation zwischen IDE und Endgerät.

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.

Abbildung 6: Mit unserer Beispiel-App lassen sich Fotos Notizen zuweisen.
Abbildung 6: Mit unserer Beispiel-App lassen sich Fotos Notizen zuweisen.

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.

Abbildung 7: Im Designer erzeugen Sie die Views und legen ihre Eigenschaften fest.
Abbildung 7: Im Designer erzeugen Sie die Views und legen ihre Eigenschaften fest.

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
RueckButton.enabled = 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 File.Exists(File.Dirinternal,dateiliste.Get(bildnummer)&".titel") Then
        TitelText.Text = File.ReadString(File.Dirinternal,dateiliste.Get(bildnummer)&".titel")
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 .titel wird dann mit dem Dateianhang .notiz 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 if...then...else 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

File.WriteString(File.DirInternal,dateiliste.Get(bildnummer)&".titel",TitelText.text)
File.WriteString(File.DirInternal,dateiliste.Get(bildnummer)&".notiz",NotizText.text)
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".

Abbildung 8: Ein kleines Widget bringt alle 30 Minuten eine zufällig ausgewählte Fotonotiz auf den Homescreen.
Abbildung 8: Ein kleines Widget bringt alle 30 Minuten eine zufällig ausgewählte Fotonotiz auf den Homescreen.

Abbildung 9: Ein Service Modul wird für die Programmsteuerung des Widgets verwendet.
Abbildung 9: Ein Service Modul wird für die Programmsteuerung des Widgets verwendet.

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 .titel 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: de.androiduser.foto-notiz. 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 http://www.basic4ppc.com/android/purchase.html die Zahlungsmethode "Plimus" und geben Sie den Gutschein-Code androiduser ein. Vom Kaufpreis werden dann automatisch 30 Prozent abgezogen.

Kommentiere den Artikel

Please enter your comment!
Please enter your name here