Einstieg in die App- Entwicklung

Transkript

1

2 Kapitel 3 Einstieg in die App- Entwicklung Endlich ist es so weit! Sie werden in diesem Kapitel Ihre erste eigenständige Android-App mit App Inventor entwickeln. Nachdem Sie in den vorangegangenen Kapiteln alle Vorbereitungen und Installationen hierfür erfolgreich durchgeführt und bereits Ihr erstes Projekt HelloAndroid- World angelegt haben, soll sich diese Mühe nun auszahlen. Und wie allgemein bekannt, lernt es sich mit Spaß am besten. Aus diesem Grund wird unsere erste App viel mit Lachen zu tun haben. Vielleicht erinnern Sie sich ja auch noch an den Lachsack, der in den 1970er-Jahren als Scherzartikel auf den Markt kam und bis heute produziert wird. Ursprünglich befand sich in einem Jute-Sack ein kleines Tonabspielgerät, das ein zwar blechernes, aber herzhaftes Lachen von sich gab, wenn man einen kleinen Knopf darauf drückte. Die Kinder in den 1970ern-Jahren hatten eine Menge Spaß mit dem Lachsack, also warum sollte sich dies im Zeitalter der Smartphones geändert haben? Bei der Entwicklung der Lachsack-App werden Sie bereits mit allen grundlegenden Elementen der App-Entwicklung mit AI in Berührung kommen. Sie werden im AI Designer die grafische Benutzeroberfläche der App aus verschiedenen Komponenten gestalten, verschiedene Medientypen integrieren, im AI Blocks Editor die Komponenten miteinander verbinden und durch die Kombination von Blöcken zu Blockstrukturen die Funktionalität der App entwickeln. Dabei werden wir die App nicht nur im Rahmen der AI-Entwicklungsumgebung testen, sondern diese über die verschiedenen Exportmöglichkeiten als eigenständige App und damit für den Upload auf beliebige Android-Endgeräte bereitstellen. Auch etwaige Probleme, die bei der App-Entwicklung mit AI auftreten können, werden wir ansprechen und Ihnen Lösungswege und alternative Vorgehensweisen aufzeigen. Am Ende des Kapitels werden Sie einen großen Schritt hin zu einem App- Entwickler mit AI gemacht haben und bereits über das Wissen verfügen, einfache Apps selbstständig zu entwickeln. Lachsack-App 99

3 Kapitel 3: Einstieg in die App-Entwicklung Entwicklungszyklus Die in diesem Kapitel verwendete Darstellung des Entwicklungsprozesses in sukzessiv aufeinander aufbauenden Schritte spiegelt lediglich die grundlegende Vorgehensweise wider. Bei einer einfachen App ist es durchaus möglich, in einem ersten Schritt die komplette App-Oberfläche zu gestalten und im zweiten Schritt dann die gesamten Blockstrukturen zu vervollständigen. Bei komplexeren App-Projekten ist es dagegen üblich, dass zwischen den Arbeitsbereichen Designer und Blocks Editor und damit auch zwischen den einzelnen Arbeitsschritten hin und her gesprungen beziehungsweise der Entwicklungszyklus für die verschiedenen funktionalen Komponenten und Blockstrukturen mehrfach durchlaufen wird. Im Laufe des Buches werden Sie beide Verfahren in fließenden Übergängen kennenlernen und Ihren eigenen Weg wie von selbst finden. 3.1 Das Projekt Lachsack anlegen Schritt 1 Im vorangegangenen Kapitel hatten wir unser erstes Projekt mit dem Namen HelloAndroidWorld angelegt. Dieses Projekt wurde beim Verlassen der AI-Entwicklungsumgebung automatisch auf den Google-Servern gespeichert. Wenn Sie nun App Inventor mit Ihrer Nutzerkennung neu starten, wird auch Ihr letzter Projektstatus automatisch geladen und angezeigt. Starten Sie also AI, indem Sie die Startseite in Ihrem Webbrowser aufrufen und sich mit Ihrer Google- -Adresse und Ihrem Passwort anmelden. Sicherlich macht es für die regelmäßige Entwicklungsarbeit mit AI Sinn, dass Sie die Webadresse als schnell zugängliches Lesezeichen in Ihrem Browser hinterlegen. AI Designer anmelden und starten AI Designer und Blocks Editor öffnen und... Mit einem Klick auf den Button Sign in beginnt der Webbrowser mit dem Laden von AI Designer. Beim Laden sehen Sie gegebenenfalls kurz die Projektübersicht, bevor die Anzeige auf den zentralen Arbeitsbereich mit seinen fünf Funktionsbereichen wechselt, in den das zuletzt bearbeitete Projekt HelloAndroidWorld geladen wird. Es ist zu empfehlen, dass Sie nun auch gleich den AI Blocks Editor über den Button Open the Blocks Editor starten und diesen sogleich über den Button Connect to phone mit Ihrem per USB-Kabel angeschlossenen Android-Smartphone verbinden (siehe Anleitung im vorangegangenen Kapitel). 100

4 Das Projekt Lachsack anlegen AI Designer, Blocks Editor und Phone Connect gleich zu Beginn starten Wenn Sie bei Ihrer Entwicklungsarbeit neben dem AI Designer immer auch gleich den AI Blocks Designer starten und über diesen Ihr Smartphone integrieren, können Sie bereits alle sichtbaren im Designer vorgenommenen Entwicklungsschritte parallel auch auf dem Smartphone mitverfolgen. Ist Ihr Smartphone von vornherein an die AI-Entwicklungsumgebung angebunden, können Sie die folgenden Entwicklungsschritte immer auch gleich auf dem Smartphone mitverfolgen und gegebenenfalls dort auch gleich ausprobieren. Optional können Sie den Blocks Editor und das Smartphone auch zu einem späteren Zeitpunkt starten, wir werden an der entsprechenden Stelle darauf hinweisen. Wechseln Sie nun zum Anlegen eines neuen Projekts im AI Designer über das Bereichsmenü und den Menüpunkt My Projects in die Projektübersicht, in der auch das Projekt HelloAndroidWorld aufgelistet ist. Legen Sie ein neues Projekt mit dem Namen Lachsack an, indem Sie auf den Button New im Funktionsmenü klicken. In dem sich öffnenden Fenster geben Sie den Projektnamen Lachsack an und bestätigen mit OK, wie in Bild 3.1 gezeigt.... Smartphone einbinden Projekt Lachsack Bild 3.1: Neues App- Projekt Lachsack im AI Designer anlegen Daraufhin legt AI Designer das neue Projekt an, speichert die Ausgangskonfiguration auf den entfernten Google-Servern und lädt diese mitsamt den Komponentengruppen in den sich öffnenden Arbeitsbereich. In der Statuszeile oberhalb des Bereichsmenüs werden diese Vorgänge durch kurze Statusmeldungen wie Save... und Load... dokumentiert. Wie bereits in unserem ersten Projekt zeigt sich nun auch unser neues Projekt Ausgangskonfiguration 101

5 Kapitel 3: Einstieg in die App-Entwicklung Bild 3.2: Ausgangskonfiguration im Projekt Lachsack Lachsack in der bekannten Ausgangskonfiguration. Neben den Komponentengruppen in der Palette ist im Viewer lediglich die eine Ausgangskomponente Screen1 als leerer Bildschirmbereich zu sehen und unter Components vorselektiert. Entsprechend finden sich auch die Eigenschaften von Screen1 im Funktionsbereich Properties aufgeführt. Display-Titel anpassen Wie in Bild 3.2 gezeigt, können Sie nun den später auf Ihrem Smartphone angezeigten Titel der App von Screen1 auf Lachsack ändern, indem Sie die Eigenschaft Title editieren und entsprechend abändern. Mit einem abschließenden Druck auf die Return-Taste Ihres Computers wechselt analog auch die Titelanzeige im Viewer. Kontrolle auf dem Smartphone Haben Sie Ihr Smartphone bereits über den AI Blocks Editor eingebunden? Dann können Sie auch dort sehen, dass sich die Titelanzeige entsprechend angepasst hat. Die anderen Einstellungen der Screen-Komponente lassen wir noch unverändert. 102

6 Benutzerschnittstelle gestalten 3.2 Benutzerschnittstelle gestalten Nachdem das Projekt angelegt und der App-Titel auf Lachsack angepasst wurde, beginnt nun der gestalterische Teil der App-Entwicklung. Es ist kein Zufall, dass der für diese Aufgabe zuständige AI-Arbeitsbereich den Namen Designer trägt, denn hier designen Sie die Schnittstelle für die späteren Benutzer Ihrer App. Wie bereits im Kapitel zur Entwicklungsumgebung beschrieben, dient die Benutzerschnittstelle nicht nur der Eingabe durch den Benutzer (Input), sondern auch der interaktiven Ausgabe der entsprechenden Ergebnisse (Output) an diesen. Hinzu kommt, dass die Elemente der Benutzeroberfläche nicht nur visueller Natur sind (z.b. Text, Buttons, Bilder), sondern auch multimodalen Input (z.b. Mikrofon, Kamera, Akzelerator, Lagesensor, GPS) und Output (z.b. Sound, Vibration, Filme) ermöglichen und dabei teilweise auch auf entfernte Quellen (z.b. Web-Services, SMS, Bluetooth) zurückgreifen. Die Vielfalt der von AI hierfür bereitgestellten Komponenten ist bereits heute so groß, dass es schwierig ist, diese zusammenfassend zu kategorisieren, und die Google- Entwickler tun ihr Übriges, die Funktionalität von AI weiter auszubauen. Schritt 2 Ergonomie berücksichtigen Die Bedeutung der gestalterischen Aufgabe für den Erfolg einer App kann gar nicht genug betont werden, denn die Benutzerfreundlichkeit beziehungsweise Ergonomie ist auch oder vielleicht gerade für den Erfolg einer App die nichts anderes als ein kleines mobiles Software-Programm ist entscheidend. Je intuitiver, effektiver und praktischer eine App für die vorgesehene Aufgabe in der speziellen Situation des mobilen Gebrauchs ist, umso häufiger werden die Benutzer diese einsetzen, weiterempfehlen und herunterladen. Versuchen Sie, dies bei der Gestaltung Ihrer Apps zu berücksichtigen, und sich in die Situationen und Anforderungen Ihrer Zielgruppe hineinzuversetzen. In einer App für Autofahrer sollten beispielsweise die Buttons und Beschriftungen so groß gewählt sein, dass diese auch bei der Autofahrt bequem und vor allem sicher gelesen und bedient werden können. Wenn Sie sich für das Thema Ergonomie von Apps näher interessieren, werden Sie sicher bei der entsprechenden Suche im Web fündig. Alleine für die Gestaltung der Icons von Android-Apps gibt es online ganze Abhandlungen mit Empfehlungen und Vorgaben. 103

7 Kapitel 3: Einstieg in die App-Entwicklung Wir werden uns in diesem Buch weniger auf die kreativen beziehungsweise ergonomischen Aspekte konzentrieren, sondern Ihnen vor allem die funktionale Vielfalt der AI-Komponenten vermitteln. Stellen Sie von daher auch nicht zu hohe ästhetische Anforderungen an unseren Lachsack, selbst die Originale aus den 1970er-Jahren waren diesbezüglich wenig beeindruckend Komponente Label einfügen Zwei Komponenten Die Benutzeroberfläche der Lachsack-App wird sich entsprechend einfach gestalten und nur aus zwei sichtbaren Komponenten neben der Screen- Komponente bestehen. Zum einen soll ein kurzer Hinweistext die Bedienung der App beschreiben ( Bitte den Sack drücken! ). Zum anderen soll der eigentliche Sack mehrere Eigenschaften erfüllen: Er muss aussehen wie ein solcher, und man muss ihn drücken können, damit er loslachen kann. Auch wenn sich diese Eigenschaften bereits vergleichsweise komplex anhören, entsprechen sie lediglich denen, die Sie von jedem Button aus einer Windows- oder App-Umgebung her kennen. Neben der obligatorischen Grundeigenschaft der Drückbarkeit erhält ein solcher Button sein individuelles Aussehen durch eine Beschriftung oder eine Abbildung, die auf diesem Button wie ein Aufkleber platziert wird. Viele Wege führen nach Rom Machen Sie sich diesen Ansatz vor allem als Einsteiger in die App- Entwicklung bewusst. Es gibt immer mehr als einen einzigen Weg zur Realisierung einer App. Die meisten Apps erfüllen einen mehr oder minder sinnvollen Zweck. Wie Sie diesen umsetzen, ist im Wesentlichen Ihrer Kreativität als Entwickler überlassen. AI stellt Ihnen einen großen Werkzeugkasten an Tools zur Verfügung, den Sie zum Bau Ihrer App verwenden können. Ob Sie den Lachsack als aufwendig animierte 3D-Grafik mit haptischer Rückkopplung realisieren oder einfach als Button mit einem Bild darauf, bleibt Ihnen und Ihrer Motivation überlassen. Beide Varianten erfüllen Ihren Zweck, der Lachsack lacht, wenn er gedrückt wird. Wollen Sie die besondere Leistungsfähigkeit Ihres High-End-Smartphones mit Android 2.2 demonstrieren, beeindrucken Sie mit einem animierten 3D-Lachsack sicher mehr als mit einem 2D-Button, der jedoch selbst auf einfachen Smartphones mit Android 1.5 ohne Einschränkungen läuft. Wägen Sie also immer die Mittel und den Aufwand gegen die gewünschte Wirkung ab. 104

8 Benutzerschnittstelle gestalten In unserem bescheidenen Vorhaben, eine überschaubare und auf möglichst vielen Android-Endgeräten lauffähige Einsteiger-App zu entwickeln, verwenden wir zur optischen Oberflächengestaltung unserer Lachsack- App also nur folgende zwei Komponenten: Label: Ein Textfeld, das einen beliebigen Text aufnehmen kann und sich wie ein Etikett auf dem Bildschirm platzieren lässt. Button: Ein Schaltfläche, die neben ihrer Schaltfunktion ebenfalls einen Text und/oder ein Bild tragen kann. Weitere Informationen in der Komponenten-Referenz Weitere Informationen zu den Funktionen und Eigenschaften zu allen Komponenten finden Sie in der Komponenten-Referenz online unter: Direkt zu den beiden Komponenten Label und Button unter: basic.html#label und: basic.html#button Wie alle anderen Komponenten finden Sie auch das Label und den Button in der Werkzeugkiste von AI, dem Funktionsbereich Palette auf der linken Seite im AI Designer. Die beiden Komponenten gehören zu der Gruppe Basic. Sofern diese noch nicht geöffnet ist, klicken Sie bitte auf den entsprechenden Gruppennamen, worauf die enthaltenen Komponenten sichtbar werden. An der ersten Position finden Sie den Button und an der sechsten das Label. In unserer Lachsack-App soll der Hinweistext Bitte den Sack drücken! als Erstes unterhalb der Titelleiste erscheinen. Insofern werden wir zuerst das Label im Viewer platzieren, auch wenn sich die Komponenten später jederzeit zueinander verschieben lassen. Greifen Sie nun ein Label in der Palette, indem Sie auf den Namen oder das Icon der Komponente Label klicken und diese mit gedrückter Maustaste in den Viewer ziehen. Beim Ziehen verändert sich Ihr Mauszeiger von seinem üblichen grafischen Mauszeiger-Icon bereits zu einem Textfeld dem Label mit dem Ausgangstext Text for Label1, wie in Bild 3.3 zu sehen ist. Palette öffnen Label in den Viewer ziehen 105

9 Kapitel 3: Einstieg in die App-Entwicklung Bild 3.3: Neues Label aus der Palette in den Viewer ziehen Wenn Sie das Label beziehungsweise die Maustaste im Viewer loslassen, rastet das Label automatisch direkt unterhalb der Titelleiste ein. Sie haben damit Ihre erste zusätzliche Komponente in Ihrer Lachsack-App angelegt (beziehungsweise ein Objekt vom Komponententyp Label erzeugt). Exkurs zur Unterscheidung zwischen Komponente und Komponentenobjekt An dieser Stelle sei noch einmal an die Unterscheidung zwischen der abstrakten Komponente aus der Palette und dem konkreten Objekt im Viewer erinnert. Wenn Sie eine Komponente aus der Palette in den Viewer ziehen, wird die Komponente nicht wirklich verschoben, sondern ein konkretes Objekt vom Typ dieser Komponente erzeugt, ein sogenanntes Komponentenobjekt. Sie können theoretisch beliebig viele Objekte vom gleichen Komponententyp erzeugen und in Ihrer App verwenden. Die Unterscheidung lehnt sich an die zwischen Klasse und Objekt in der objektorientierten Programmierung an. Kontrolle auf dem Smartphone Wenn Sie Ihr Smartphone angeschlossen haben, erscheint auch auf diesem umgehend das neue Label mit dem Ausgangtext Text for Label1. Dies gilt für alle weiteren sichtbaren Erweiterungen oder Änderungen, die Sie im AI Designer vornehmen und die analog auch auf dem angebundenen Smartphone im Debugging- Modus zu sehen sind. 106

10 Benutzerschnittstelle gestalten Doch damit nicht genug der Reaktionen im Arbeitsbereich von AI Designer. Mit dem Anlegen des Labels ist dieses nicht nur im Viewer (und auf dem angebundenen Smartphone) zu sehen, sondern auch in den Funktionsbereichen Components und Properties haben sich Änderungen ergeben. Wie in Bild 3.4 zu sehen ist, erscheint das neue Label nun auch im Funktionsbereich Components als Komponentenobjekt mit der Bezeichnung Label1, hierarchisch der zentralen Ausgangskomponente Screen1 untergeordnet. Der Name beziehungsweise die Indexnummer in der Bezeichnung Label1 wird von AI automatisch bei der Erzeugung eines neuen Komponentenobjekts vergeben. Wenn Sie eine weitere Label-Komponente in den Viewer ziehen würden, bekäme das somit erzeugte zweite Label-Objekt den Namen Label2 zugewiesen und so weiter. Sie können dies gerne jetzt einmal ausprobieren. Das zweite Label würde sich im Viewer unterhalb des ersten einordnen, ebenso wie im Funktionsbereich Components. Bitte löschen Sie danach aber wieder alle überschüssigen Label außer dem ersten, indem Sie diese nacheinander entweder im Viewer oder unter Components per Mausklick markieren und dann unter Components jeweils den Button Delete drücken. Bestätigen Sie die darauffolgende Sicherheitsabfrage zum Löschen jeweils mit OK. Bevor Sie weitermachen, sollte Ihr Arbeitsbereich dann wieder wie in Bild 3.4 aussehen. Das neue Label unter Components Bild 3.4: Das Label in den Bereichen Viewer, Components und Properties 107

11 Kapitel 3: Einstieg in die App-Entwicklung Komponentennamen vergeben Ein treffender Name für das neue Label Bevor wir uns den Eigenschaften des Labels zuwenden, wollen wir diesem Objekt aber noch einen einprägsamen Namen vergeben. Die Vergabe von einprägsamen Namen erleichtert später insbesondere bei der Arbeit im AI Blocks Editor die Zuordnung. Wenn Sie in komplexen Apps viele Label oder andere Objekte gleichen Komponententyps einsetzen, die sich namentlich nur durch ihre Indexnummer unterscheiden (Label1, Label2, Label3 etc.), können Sie diese nur schwer auseinanderhalten. Da ist es hilfreich, wenn das Objekt einen Namen trägt, der beispielsweise dessen Funktion in der App widerspiegelt. Exkurs zur Namensvergabe in der Programmierung Auch in der Programmierung ist es üblich, für Objekte, Konstanten, Funktionen oder Variablen treffende Namen zu vergeben, um den ohnehin bisweilen recht abstrakten und kryptischen Programmcode besser überschauen und bei späteren Nachbearbeitungen einfacher nachvollziehen zu können. Eine gute Namensvergabe kann also ein wesentlicher Aspekt für eine gute und effektive Anwendungsentwicklung sein. Wir wollen das Label also von Label1 in Hinweistext umbenennen. Wählen Sie also Label1 per Mausklick unter Components aus, und drücken Sie dort den Button Rename. Daraufhin öffnet sich ein kleines Fenster, in dem Sie den neuen Namen unter New name eingeben und diesen mit OK bestätigen (siehe Bild 3.5). Unter Components ist das Label nun mit seiner neuen Bezeichnung Hinweistext aufgeführt. Bild 3.5: Vergabe eines einprägsamen Namens für das neue Label 108

12 Benutzerschnittstelle gestalten Eigenschaften einstellen Um die Eigenschaften einer Komponente einzusehen und zu verändern, muss diese per Mausklick ausgewählt werden. Sie können ein Komponentenobjekt entweder im Viewer oder unter Components auswählen. Das ausgewählte Objekt erscheint dann im Viewer mit einer grünen Umrandung und unter Properties mit einem grünen Hintergrund. Die Eigenschaften der ausgewählten Komponente werden im Funktionsbereich Properties aufgelistet. Bereits eine einfache Komponente wie das Label verfügt über eine beachtliche Eigenschaftsliste. So lassen sich für das Textfeld ähnlich wie in einem Textverarbeitungsprogramm die Textausrichtung (Alignment), die Hintergrundfarbe (BackgroundColor), Fettdruck (FontBold), Kursivdruck (FontItalic), Schriftgröße (FontSize), Schrifttyp (FontTypeface) und die Textfarbe (TextColor) einstellen beziehungsweise auswählen. Daneben gibt es weitere Eigenschaften, wie die Größe des Labels, separat anzugeben für die Breite (Width) und Höhe (Height) des Textfelds. Dabei kann gewählt werden, ob sich die Label-Größe automatisch den Textausmaßen (Automatic) oder den Ausmaßen des hierarchisch übergeordneten Objekts (Screen1) anpassen soll (Fill parent) oder ob die Labelgröße explizit in Bildschirmpunkten (Pixel) angegeben wird. Ebenso gibt es die Option Visible, mit der ausgewählt werden kann, ob das Label beziehungsweise der darin enthaltene Text sichtbar angezeigt werden soll oder nicht. Vielleicht werden Sie sich fragen, welchen Sinn es machen kann, einen Text zu definieren, der dann nicht zu sehen ist. Wie wir bereits erwähnt haben, können die Komponenteneigenschaften nicht nur initial bei der Entwicklung im AI Designer, sondern auch während der späteren Ausführung (Laufzeit) der App auf einem Smartphone im Rahmen der durch die Blockstrukturen festgelegten Programmlogik dynamisch verändert werden. So ist es beispielsweise möglich, einen Hinweistext in einem Label beim App- Aufruf noch nicht zu zeigen und diesen erst dann einzublenden, wenn ein bestimmtes Ereignis auftritt, wie etwa beim Drücken eines Buttons. Und schließlich weist das Label natürlich auch ein Textfeld Text auf, in dem der eigentliche Text des Labels eingegeben werden kann. Hier sollten Sie nun den vorgegebenen Text Text for Label1 mit unserem Hinweistext Bitte den Sack drücken! ersetzen. Wenn Sie den neuen Hinweistext im Viewer oder aber auf dem Smartphone kontrollieren, erscheint dieser noch recht unspektakulär. Stellen Sie also ruhig noch eine peppige Hintergrundfarbe ein, verändern Sie die Schriftfarbe, und erhöhen Sie auch die Schriftgröße. Die anderen Einstellungen belassen wir in deren Voreinstellungen (Default). Ihre App sollte im Viewer nun ungefähr wie in Bild 3.6 aussehen. Eigenschaften des neuen Labels einstellen Label-Größe und Sichtbarkeit Label-Text 109

13 Kapitel 3: Einstieg in die App-Entwicklung Bild 3.6: Veränderte Eigenschaften und neues Design des Labels Hinweistext Offene Angelegenheit Umlaute beachten Umlaute auf dem Android- Smartphone Werfen Sie auch noch einen Blick auf Ihr angeschlossenes Smartphone zur Kontrolle. Wenn sich die Anzeigen zwischen Viewer und Smartphone- Display gleichen, wurde zwischenzeitlich eine weitere Anforderung vom Google-Entwicklerteam erfüllt, nämlich die Unterstützung von Umlauten und sonstigen Sonderzeichen. Bei der Erstellung dieses Buchkapitels konnten diese jedoch noch nicht für die mit AI erstellten Android-Apps umgesetzt werden. Entsprechend erscheint auf dem Smartphone derzeit noch ein Fragezeichen-Symbol anstelle des Umlauts ü, wie in Bild 3.7 zu sehen ist. Bild 3.7: Platzhalter für nicht unterstützte Umlaute und Sonderzeichen 110

14 Benutzerschnittstelle gestalten Natürlich sind Sie nicht der einzige App-Entwickler, der gerne Umlaute und Sonderzeichen in seinen Android-Apps verwenden würde. Aus diesem Grunde hat bereits ein anderer AI-Beta-Nutzer dieses Leistungsmerkmal als wünschenswert bei den Google-Entwicklern adressiert. Dies geschieht über den sogenannten Issues Tracker, den die Google-Entwickler eingeführt haben, um die zahlreichen Verbesserungsvorschläge und Fehlerhinweise der AI-Nutzer in der Beta-Phase schneller und übersichtlicher strukturieren und bearbeiten zu können. Der Wunsch nach Mehrsprachigkeit (Multilanguage Support) und damit eingeschlossen nach Unterstützung auch von Umlauten wird dort unter dem Issue 152 geführt. Die Nummer 152 steht dabei nicht etwa für die Priorität der Angelegenheit, sondern lediglich dafür, dass dies die 152. adressierte Angelegenheit ist. Feature Request im Issues Tracker Fehlerbearbeitung und Verbesserungsvorschläge im Issues Tracker Das Google-Entwicklungsteam stellt den Issues Tracker als Sammelstelle für alle offenen technischen Angelegenheiten bezüglich AI-Beta-Software bereit: Bugs Die AI-Beta-Nutzer sind aufgefordert, hier in einer standardisierten Form die in der Beta-Phase beobachteten Fehler von AI zu reporten. Ebenso können hier Vorschläge für neue Leistungsmerkmale (Feature Requests) von AI gemacht werden. Vor dem Eröffnen eines neuen Issues sollte der AI-Beta-Nutzer jedoch sicherstellen, dass das Thema nicht bereits in einem anderen Issue behandelt wird oder bereits in der Google Group diskutiert und gelöst wurde. Die hier behandelten Themen sollten von allgemeinem Interesse sein und keine individuellen Probleme betreffen, wie beispielsweise Fragen zum Setup des eigenen Smartphones, da hierfür die AI-Online-Dokumentation oder die Google Group zur Verfügung steht. Je fokussierter der Issues Tracker arbeitet, umso stärker können sich die Google-Entwickler auf die wesentlichen Themen konzentrieren und AI weiterentwickeln, ohne sich in Nebenschauplätzen zu verlieren. Aus diesem Grund wird jede Angelegenheit von den Google-Entwicklern bewertet, in verschiedenen Phasen bearbeitet und nach folgendem Schema der Status dokumentiert. 111

15 Kapitel 3: Einstieg in die App-Entwicklung Offene Angelegenheiten New Investigating Noted Accepted Started Testing Issue noch nicht geprüft und bewertet Weitere Informationen werden benötigt Issue wurde geprüft, aber noch bewertet Issue wurde akzeptiert und steht zur Bearbeitung an Bearbeitung des Issue ist im Gange Issue ist gelöst, wird gerade getestet und im neuen AI Release veröffentlicht Geschlossene Angelegenheiten Fixed Invalid Duplicate Won t fix Forum Issue wurde erfolgreich bearbeitet und abgeschlossen Formfehler im Antrag zur Bearbeitung des Issue Issue wird bereits an anderer Stelle behandelt Issue wird nicht vom Google-Team bearbeitet Aufforderung, die Angelegenheit in der Google Group zu adressieren Wenn Sie schauen möchten, wie weit die Bearbeitung des Issue 152 gediehen ist und welche Wünsche andere AI-Beta-Nutzer mit diesem Leistungsmerkmal (Feature) verbinden, suchen Sie doch einfach mal mit den Suchbegriffen 152 oder Multilanguage Support auf der Issue-Suchseite. Issues suchen und Bearbeitungsstatus einsehen Zum Zeitpunkt der Kapitelerstellung befand sich der Issue 152 im Status Accepted, wie in Bild 3.8 zu sehen ist. Die Unterstützung von Umlauten und anderen Sonderzeichen wurde also als sinnvolle Erweiterung von AI akzeptiert, mit der Arbeit daran jedoch noch nicht begonnen. Vielleicht hat sich dieser Status jedoch zwischenzeitlich verändert, schauen Sie doch einfach mal nach. 112

16 Benutzerschnittstelle gestalten Bild 3.8: Bearbeitungsstatus im Issue 152 Multilanguage Support Sollte sich auf Ihrem Smartphone jedoch weiterhin das Fragezeichen-Symbol anstelle des Umlauts ü im Label mit der Aufschrift Bitte den Sack drücken! zeigen, bleibt Ihnen unter diesen Umständen derzeit nur die Alternative, das ü mit einem ue zu ersetzen. Ändern Sie dies einfach in der Eigenschaft Text der Komponente Hinweistext. Nachtrag zu Issue 152: Fixed Seit dem AI-Update vom 28. Januar 2011 werden auch Umlaute und andere Non-ascii -Zeichen mit AI voll unterstützt. Sehen Sie unter Issue 152 nach. Dort lautet der Status jetzt Fixed. Nehmen Sie die obigen Ausführungen zu den Umlauten von daher als Beispiel und Anleitung für andere, noch offene Angelegenheiten. Sie merken also, an diesen wird wirklich gearbeitet! Interaktive Komponente Button ergänzen Doch nun zu unserer zweiten Komponente, mit der wir die Benutzeroberfläche unserer Lachsack-App vervollständigen wollen. Wie angekündigt, soll ein Button mit einem Bild darauf den interaktiven Lachsack repräsentieren. Den Button hinzufügen und positionieren 113

17 Kapitel 3: Einstieg in die App-Entwicklung Interaktive Komponenten Bei der Komponente Button handelt es sich im Gegensatz zum Label um ein interaktives Element der Benutzerschnittstelle, da der Button eine Aktion des Users (ein Ereignis) entgegennimmt (das Drücken des Buttons), die von der App verarbeitet wird und auf die die App mit einem Resultat (Lachen) reagiert. Neben dem Button gibt es viele andere interaktive Komponenten in AI, beispielsweise Auswahlelemente wie Checkboxen und Listen oder auch Sensoren, die auf Bewegungen des Benutzers reagieren. Bild 3.9: Komponente Button aus der Palette in den Viewer ziehen Auch die Komponente Button finden wir in der Komponentengruppe Basic in der Palette des AI Designer. Greifen Sie sich die Komponente Button, und ziehen Sie diese ebenfalls in den Viewer. Auch hier wird beim Ziehen der Komponente Button bereits deren Voreinstellung angezeigt, ein Button mit der Aufschrift Text for Button1. Während Sie den Button über den Viewer bewegen, wird im Bildschirmbereich zusätzlich ein schmaler horizontaler blauer Balken angezeigt, wie in Bild 3.9 unterhalb des Labels zu sehen ist. Der Balken zeigt die Position an, in der die gerade gewählte Komponente einrasten wird, wenn Sie diese im Viewer loslassen. Wenn Sie die Komponente Button also oberhalb des Labels ziehen, springt der Positionsbalken über das Label. Würden Sie dann die Komponente loslassen, würde diese zwischen der Titelleiste und dem Label eingefügt. Ziehen Sie die Komponente aber bitte unterhalb des Labels, sodass der Button darunter einrastet. Sie können die Objekte im Viewer unterhalb der Titelleiste später jederzeit wieder greifen und beliebig verschieben. Button-Name vergeben Wie bereits zuvor beim Label haben Sie nun ein weiteres Komponentenobjekt vom Typ Button im Viewer erzeugt. Nach dem Einfügen ist der Button automatisch selektiert. Im Viewer ist der grafisch dargestellte Button entsprechend grün umrandet, und auch auf dem Smartphone ist 114

18 Benutzerschnittstelle gestalten der neue Button zu sehen. Nun wollen wir auch dem Button für die Verwendung in unserer Lachsack-App einen individuellen Charakter verleihen. Im ersten Schritt erhält der Button einen einprägsamen Namen. Wie Sie in Bild 3.10 sehen können, wurde auch der Button im Funktionsbereich Components hierarchisch unterhalb des übergeordneten Objekts Screen1 eingeordnet. Ebenso hat der Button eine Standardbezeichnung mit einem Indexwert Button1 erhalten. Drücken Sie auch hier den Button Rename, und ändern Sie die Standardbezeichnung Button1 in Lachknopf. Bild 3.10: Anzeige des Buttons unter Viewer, Components und Properties Im nächsten Schritt schauen wir uns ebenfalls die Eigenschaften des Buttons Lachknopf an. Diese decken sich zu einem großen Teil mit denen des Labels. Auch hier finden wir Einstellmöglichkeiten für die Ausrichtung des Beschriftungstextes, die Hintergrundfarbe, Fett- und Kursivschrift, Schriftgröße, -typ und -farbe. Ebenso lässt sich auch hier die Button-Größe in Breite und Höhe einstellen sowie die initiale Sichtbarkeit festlegen. Im Textfeld Text können Sie wie gewohnt die Beschriftung ändern. Ersetzen Sie hier bitte den voreingestellten Text Text for Button1 mit Drueck mich!. Vielleicht passen Sie auch die Schrift ein wenig an, indem Sie Fett und Kursiv auswählen. Natürlich wäre es auch möglich, dass der Button überhaupt keine Beschriftung trägt, dafür müssten Sie einfach das Textfeld leer lassen. Neben den bekannten Eigenschaften weist der Button zwei neue Merkmale auf. So gibt es einerseits ein zusätzliches Auswahlfeld (Checkbox) Enabled. Ähnlich wie bei Visible lässt sich hierüber bestimmen, ob der Button beim Aufruf der App aktiv (enabled) ist, also auf das Drücken reagiert oder nicht. Natürlich soll der den Lachsack repräsentierende Button von Anfang an auf das Drücken reagieren, weshalb wir die Eigenschaft Enabled aktiviert lassen. Als zweite neue Eigenschaft gibt es das Feld Image, dessen Name uns bereits stark an unser geplantes Vorhaben erinnert, dem Button ein Bild zuzufügen. Derzeit zeigt dieses Feld mit None noch an, dass der Button kein Bild trägt. Doch das werden wir nun ändern. Button-Eigenschaften Aktive und inaktive Buttons 115

19 Kapitel 3: Einstieg in die App-Entwicklung Mediendatei hochladen und einbinden Die Bilddatei Wie oben angekündigt, werden wir unseren interaktiven Lachsack als Button gestalten, auf dem ein Bild von einem Sack aufgebracht ist. Da der betroffene Button Lachknopf ja bereits im Viewer und damit in der App platziert ist, müssen wir diesen nur noch mit einem Bild belegen. Hierfür benötigen wir eine entsprechende Bilddatei, die einen Sack zeigt. Sollten Sie zufällig ein tolles Foto von einem formschönen Sack elektronisch zur Verfügung haben, können Sie gerne dieses verwenden. Beachten Sie dabei aber die Anforderungen an das Dateiformat, damit die Bilddatei auch von AI beziehungsweise von den Android-Endgeräten unterstützt wird. Bildformate im Kapitel Tipps & Tools Weitere Informationen zu den von Android unterstützten Dateiformaten für Bilder finden Sie im Kapitel Tipps & Tools im Abschnitt Bildformate. Für den wahrscheinlichen Fall, dass Sie keine entsprechende Bilddatei vorrätig haben, finden Sie auf der Website zum Buch im Verzeichnis /MEDIA die Bilddatei lachsack.jpg zu Ihrer Verwendung im Rahmen der Beispiel-App. Auf der Website zum Buch: Mediendateien zu allen Beispiel-Apps im Verzeichnis /MEDIA Sämtliche Audio-, Bild- und Videodateien aus den Beispielen finden Sie auch auf der Website zum Buch im Verzeichnis /MEDIA. Upload der Bilddatei auf die AI Server Um das Bild aus der Datei lachsack.jpg auf dem Button Lachknopf zu platzieren, muss dieses zuerst einmal für Ihre Entwicklungsarbeit verfügbar gemacht und in die AI-IDE (Entwicklungsumgebung) beziehungsweise auf die entfernten Google-Server hochgeladen werden (Upload). Klicken Sie hierzu in den Eigenschaften ( Properties ) des Buttons Lachknopf auf das Feld Image, worauf sich dort die Auswahlliste aus Bild 3.11 öffnet. Da Sie in Ihrem aktuellen App-Projekt bislang noch keine Bilddatei hochgeladen haben, ist die Liste derzeit noch leer, und es steht kein Bild zur Auswahl zur Verfügung ( None ). Also müssen Sie die gewünschte Bilddatei auf Ihrer lokalen Festplatte (oder der Website zum Buch) suchen, indem 116

20 Benutzerschnittstelle gestalten Sie den Button Add anklicken. Hierauf öffnet sich das kleine Fenster Upload File aus Bild 3.11, über das Sie mit einem Klick auf Durchsuchen den Zugriff auf Ihr lokales Dateiverzeichnis beispielsweise über den Windows Explorer erhalten. Steuern Sie darin zu der gewünschten Bilddatei lachsack.jpg und wählen Sie diese mit Öffnen aus. Danach erscheint der Dateiname inklusive Verzeichnispfad im Fenster Upload File, den Sie nun mit OK bestätigen können. Bild 3.11: Die Bilddatei lachsack.jpg in die AI-IDE hochladen Damit beginnt der Upload der Bilddatei, kommentiert mit der AI-Statusmeldung Uploading lachsack.jpg to the App Inventor server. Nachdem der Upload abgeschlossen ist, präsentiert sich unser Lachsack in seiner ganzen Schönheit im Viewer (und auf dem angeschlossenen Smartphone), wie in Bild 3.12 zu sehen ist. Auch wird der Name der Bilddatei, mit der der Button nun belegt ist, in den Eigenschaften von Lachknopf im Feld Image angezeigt. Hinzu kommt, dass die Bilddatei lachsack.jpg nun auch generell zur weiteren Verwendung im aktuellen Lachsack-Projekt zur Verfügung steht, angezeigt durch die Aufführung im Funktionsbereich Media. Sollten Sie beispielsweise einen weiteren Button mit der gleichen Bilddatei belegen wollen, erscheint diese nun in der Auswahlliste des jeweiligen Image -Feldes, sodass Sie die Datei nicht erneut hochladen müssen, sondern innerhalb des Projekts nun mittels Referenz immer wieder verwenden können. Wenn Sie die Bilddatei aus der AI-IDE beziehungsweise von den Google-Servern wieder löschen wollten, müssten Sie diese im Funktionsbereich Media anklicken und in dem darauf erscheinenden Menü den Punkt Delete auswählen. Die Datei würde dann gelöscht, und der Button Lachknopf würde wieder ohne Bild angezeigt werden. Anzeige und Verwendung der Bilddatei 117

21 Kapitel 3: Einstieg in die App-Entwicklung Bild 3.12: Der Button Lachknopf mit dem Bild lachsack.jpg Optimierung des App-Designs Optimierung des App- Designs Mit diesem Schritt haben wir eigentlich bereits die optische Gestaltung unserer Lachsack-App abgeschlossen. Eigentlich deshalb, weil wir noch ein wenig Feinkosmetik vornehmen möchten. Schauen Sie sich die Benutzeroberfläche im Viewer und auf dem Smartphone an: Der Hinweistext hängt auf der linken Bildschirmseite, ebenso wie der Lachknopf. Merklich besser und professioneller wäre es doch, wenn beide Elemente zentriert in der Bildschirmmitte platziert wären, und dies nicht nur im statischen Viewer, sondern insbesondere auf den unterschiedlich großen Displays aller möglichen Android-Smartphones. Sie ahnen sicher bereits, wie wir das optische Design noch optimieren können. Klicken Sie in AI auf das Label, und ändern Sie in dessen Eigenschaften die Einstellung für die horizontale Ausdehnung Width auf Fill parent. Damit passt sich die Label-Breite automatisch an die Breite des übergeordneten Objekts Screen1 und damit an die jeweilige Bildschirmbreite des Smartphones an. Sie können dies sofort im Viewer als auch auf Ihrem Smartphone kontrollieren. Nun steht aber noch der Text in der linken Ecke des Labels. Zentrieren Sie diesen, indem Sie Ausrichtung Alignment auf center ändern. Texturierung In der Computergrafik wird das Bild, das auf ein 2D- oder 3D- Objekt aufgebracht wird, auch als Textur bezeichnet und der Vorgang entsprechend als Texturierung. 118

22 Benutzerschnittstelle gestalten Die gleiche Optimierung wollen wir auch dem Button zukommen lassen. Wählen Sie diesen aus und ändern Sie auch hier die Eigenschaft Width auf Fill parent. Da das zugrunde liegende Bild eine geringere Breite hat als der nunmehr auf Bildschirmbreite vergrößerte Button im Viewer und auf dem Smartphone, rückt das Bild mitsamt der Beschriftung und dank der Voreinstellung in der Eigenschaft Alignment auf center automatisch in die Bildschirmmitte. Die somit optisch aufbereitete Benutzeroberfläche unserer Lachsack-App macht nun auch auf dem Smartphone einen aufgeräumten Eindruck, wie in Bild 3.13 zu sehen ist. Bild 3.13: Optimierte Benutzeroberfläche auf dem Smartphone LG P500 Falls Sie kein Bild sehen Sollten Sie das Bild vom Sack auf Ihren Systemen nicht sehen, ist das noch kein Grund zur Sorge. Auf den verschiedenen Computer-Systemen und Android-Smartphones ist es derzeit leider nicht unüblich, dass das Bild entweder nur im Viewer oder auf dem Smartphone oder aber auch auf keinem von beiden angezeigt wird. So ist das Bild beispielsweise auf dem Smartphone LG P500 mit Android 2.2 oder dem Standard-Emulator von AI mit Android 2.1 zu sehen, auf dem HTC Tattoo mit Android 1.6 jedoch nicht. Das Problem ist bekannt, die Google-Entwickler arbeiten daran, und zwischenzeitliche Lösungsvorschläge sind auf der AI Website zum Troubleshooting (siehe Punkt I set the image property of a button to an image file, but nothing shows on the phone ) ausführlich dokumentiert: 119

23 Kapitel 3: Einstieg in die App-Entwicklung Aber selbst wenn die Anzeige des Bilds auf Ihren Entwicklungssystemen zu diesem Zeitpunkt dauerhaft ausbleiben sollte, besteht die große Chance, dass das Bild später in der fertigen App auf Ihrem Smartphone einwandfrei angezeigt wird. Gedulden Sie sich in diesem Falle also bis zu dem später noch folgenden Abschnitt, in dem Sie lernen werden, wie Sie die App auf Ihr Smartphone laden und dort ausführen. Spätestens dann sollten auch Sie in den Genuss des Bildes kommen. Denken Sie sich bis dahin einfach das Bild in der Entwicklungsumgebung dazu. Wie schon zuvor einmal gesagt, Improvisation und Geduld sind bei der Anwendungsentwicklung generell und besonders in der Beta-Phase von AI auf dem sehr dynamischen Android-Betriebssystem durchaus angebrachte Tugenden Nichtsichtbare Komponente Sound Audiodatei Auch wenn das optische Design unserer Lachsack-App mit nur zwei Komponenten und einer Mediendatei bereits recht überzeugend ist, fehlt doch noch etwas Entscheidendes. Richtig, denn was ist ein Lachsack ohne Lachen? Wir müssen der App also noch eine weitere Mediendatei hinzufügen, eine Audiodatei mit einem herzhaften Lachen. Auch hierfür finden Sie wieder eine Beispieldatei lachen.wav auf der Website zum Buch im Verzeichnis /MEDIA. Wie bei allen Mediendateien, müssen Sie auch bei den Audiodateien auf die Unterstützung des Audioformats durch AI beziehungsweise Android achten. Audioformate im Kapitel Tipps & Tools Weitere Informationen zu den von Android unterstützten Dateiformaten für Audio finden Sie im Kapitel Tipps & Tools im Abschnitt Audioformate. Nichtsichtbare Komponente Sound Um die Audiodatei in Ihre App einzufügen, müssen Sie eine weitere Komponente in den Viewer ziehen. Die Komponente Sound zum Abspielen von Audiodateien finden Sie in der Komponentengruppe Media, die Sie mit einem Klick auf den Gruppennamen in der Palette öffnen. Greifen Sie die Komponente Sound, und ziehen Sie diese wie gewohnt in den Viewer hinein. Wenn Sie die Komponente mit dem voreingestellten Namen Sound1 nun im Viewer loslassen, erscheint diese nicht innerhalb 120

24 Benutzerschnittstelle gestalten des dargestellten Bildschirmbereichs, sondern darunter. Als nichtsichtbare Komponente wird das Sound-Objekt auch nicht im sichtbaren Bereich des Viewer angezeigt, sondern lediglich im speziellem Bereich Non-visible components aufgeführt, wie in Bild 3.14 am unteren Rand des Viewer zu sehen ist. Bild 3.14: Aufführung der nichtsichtbaren Komponente Sound im Viewer Auch wenn die Komponente Sound1 naturgemäß nicht im sichtbaren Bereich des Viewer (und auch nicht auf dem Smartphone) angezeigt wird, erscheint sie in den anderen Funktionsbereichen wie jede andere sichtbare Komponente auch. So wird sie ebenso unter Components hierarchisch dem Screen1 untergeordnet, und auch unter Properties erscheinen die spezifischen Eigenschaften wie gewohnt, wenn das Komponentenobjekt Sound1 ausgewählt und mit einer grünen Umrandung markiert ist (siehe Bild 3.14). Entsprechend können die Einstellungen wie gewohnt vorgenommen werden. Ändern Sie bitte auch hier unter Components den Namen von Sound1 auf Lachen. Die Anzahl der Eigenschaften des Sound-Objekts Lachen unter Properties ist überschaubar. So lässt sich mit der Eigenschaft MinimumInterval die Abspieldauer der Audiodatei in Millisekunden einstellen. Ist die Spieldauer der Audiodatei kürzer als das Intervall, wird die Datei entsprechend wiederholt abgespielt. In der Regel sollten sich die Abspielzeit und die Intervallzeit möglichst decken, es sei denn, Sie streben einen entsprechenden akustischen Effekt an. Wir können diese gegebenenfalls später noch justieren, falls dies nötig sein sollte. Nicht-sichtbare Eigenschaften Abspielzeiten Audiodateien 121

25 Kapitel 3: Einstieg in die App-Entwicklung Audiodatei hochladen und einbinden Interessanter ist zu diesem Zeitpunkt die zweite Eigenschaft von Lachen zum Hochladen und Einbinden der Audiodatei in die App über die Angabe der Audioquelle im Eigenschaftsfeld Source, die ähnlich wie bei der Bilddatei den Eintrag None zeigt. In der Tat handelt es sich hierbei um genau den gleichen Mechanismus zum Einbinden einer Mediendatei, unabhängig davon, ob es sich um eine Bild- oder Audiodatei handelt. Klicken Sie also auf Source, und Sie sehen auch hier die Liste der verfügbaren Mediendateien. Dieses Mal steht dort bereits die Datei lachsack.jpg, denn die Auswahlliste unterscheidet nicht zwischen den Medientypen. Über den Button Add haben Sie hier erneut die Möglichkeit, eine neue Datei von Ihrer lokalen Festplatte in die AI-IDE hochzuladen. Gehen Sie dabei genauso vor wie zuvor bereits beim Hochladen der Bilddatei, nur wählen Sie dieses Mal auf der Website zum Buch die Audiodatei lachen.wav im Verzeichnis /MEDIA aus. Wenn Sie alles richtig gemacht haben und keine Fehler beim Upload aufgetreten sind, erscheint nun auch die Datei lachen.wav im Funktionsbereich Media sowie im Eigenschaftsfeld Source unter Properties, wie in Bild 3.15 zu sehen ist. Bild 3.15: Erfolgreich eingebundene Audiodatei lachen.wav Damit ist die Gestaltung der Benutzerschnittstelle unserer Lachsack-App mit Komponenten vorläufig abgeschlossen. Wenn Sie jetzt allerdings im Viewer oder auch auf Ihrem Smartphone auf den Lachknopf drücken, passiert rein gar nichts. Dies liegt nicht zuletzt daran, dass die Objekte Ihrer App-Benutzerschnittstelle bislang lediglich unverbunden und ohne Funktionalität nebeneinander stehen. Um dies zu ändern, müssen wir uns dem zweiten Arbeitsbereich zuwenden, dem Blocks Editor. 3.3 App-Funktionalität entwickeln Schritt 3 In diesem Schritt werden wir für die im AI Designer platzierten Komponentenobjekte festlegen, welche Aufgaben sie im Rahmen unserer App übernehmen sollen. Dabei werden wir im AI Blocks Editor die aktiven Komponenten (Button und Sound) miteinander verbinden und zu einer interaktiven 122

26 App-Funktionalität entwickeln Funktionalität (auf Knopfdruck Lachen) kombinieren. Auch wenn sich diese Beschreibung der nun anstehenden Entwicklungsarbeit ein wenig hochtrabend anhört, bildet sie jedoch das grundlegende Element jedes App- Entwicklungsprozesses mit AI, so umfangreich und komplex die daraus resultierende App auch werden sollte. Wenn Sie diesen grundlegenden Schritt nachvollzogen und verinnerlicht haben, beherrschen Sie das grundlegende Prinzip der App-Entwicklung mit AI und sind gewappnet für zukünftige, größere Projekte. Mit diesem Schritt bewegen wir uns auch in einen Entwicklungsbereich, der der klassischen App-Entwicklung mit einer Programmiersprache wie Java am nächsten kommt. Bislang haben Sie im AI Designer die Objekte der Benutzerschnittstelle erzeugt und die sichtbaren entsprechend optisch angeordnet. Nun greifen Sie im AI Blocks Editor auf die Funktionen dieser Objekte (komponentenspezifische Blöcke) zu und gestalten daraus Teile oder auch die gesamte Funktionalität (Blockstruktur) der App. Neben den Objektfunktionen stehen Ihnen dabei auch allgemeine Funktionen (generische Blöcke) zur Ergänzung und Entwicklung der Anwendungslogik und Funktionalität der App zur Verfügung. Im Grunde werden Sie gleich damit beginnen, eine App zu programmieren, ohne dabei eine Programmiersprache im engeren Sinne zu verwenden. Lassen Sie sich als Einsteiger dadurch keinesfalls abschrecken, im Gegenteil, lernen Sie quasi nebenbei auch die Prinzipien der objektorientierten Programmierung kennen. Vielleicht wollen Sie später auch einmal Apps in einer Programmiersprache wie Java entwickeln, dann werden Ihnen Ihre Erfahrungen mit AI sehr hilfreich sein. Kompliziert wird es wirklich nicht. Falls Sie den AI Blocks Editor bislang noch nicht gestartet haben, machen Sie dies nun, indem Sie im AI Designer auf den Button Open Blocks Editor drücken. Wählen Sie im Blockauswahlbereich auf der linken Seite den Reiter My Blocks aus. Nun sehen Sie in Bild 3.16 alle Komponenten mit ihren Objektnamen, die Sie im AI Designer in den Viewer geschoben und mit einem treffenden Namen versehen hatten. So finden sich hier das Label Hinweistext, der Sound Lachen und der Button Lachknopf. Ebenso finden Sie hier auch die Bildschirmkomponente mit ihrer unveränderten Ausgangsbezeichnung Screen1 sowie einen Bereich Definitions, in dem eigene Definitionen vorgenommen werden können. Programmierluft schnuppern Wiedersehen mit den Komponentenobjekten 123

27 Kapitel 3: Einstieg in die App-Entwicklung Bild 3.16: Die Komponentenobjekte im AI Blocks Editor unter My Blocks Objektblöcke anzeigen Genauso wie im einführenden Kapitel zur AI-Entwicklungsumgebung am Beispiel der Komponente Screen1 gezeigt, lassen sich nun auch für alle selbst erzeugten Komponentenobjekte die jeweils zur Verfügung stehenden Funktionsblöcke mit einem Mausklick auf den Objektnamen anzeigen. Erinnern Sie sich noch an die Eigenschaft Visible im Label Hinweistext? Wir hatten in dem vorangegangenen Abschnitt zum Einstellen der Eigenschaften der Objekte im AI Designer bereits darauf hingewiesen, dass die dort eingestellten Ausgangseigenschaften zur Laufzeit der App über gleichnamige Funktionsblöcke dynamisch verändert werden können. In Bild 3.17 sehen Sie die entsprechenden Blöcke Hinweistext.Visible für diese dynamischen Anpassungen. Bild 3.17: Eigenschaften des Komponentenobjekts Label Hinweistext Interaktive App-Logik entwerfen In unserer Lachsack-App wollen wir den Label-Text von Hinweistext jedoch erst einmal unverändert lassen und werden von daher auch keinen dieser Funktionsblöcke nutzen. Stattdessen wollen wir ja den Button Lachknopf mit einer interaktiven Funktion versehen. Dieser soll eine Benutzereingabe 124

28 App-Funktionalität entwickeln (Drücken von Lachknopf) entgegennehmen und daraufhin eine Reaktion (Abspielen des Sounds Lachen) der App auslösen. Wir können diese Funktion des Buttons Lachknopf demnach folgendermaßen ausdrücken: Wenn der Lachknopf gedrückt wird, dann spiele das Lachen ab! Sie werden es als Einsteiger ohne Programmierkenntnisse kaum glauben, aber damit haben Sie bereits eine programmierähnliche Anweisung in Form eines wenig formalen Pseudocodes formuliert. In die bei der Programmierung typischerweise verwendete englische Sprache übersetzt, lautet die gleiche Funktionsanweisung für die App ungefähr so: Funktion in Pseudocode When button Lachknopf is clicked, do play sound Lachen! Genau diese Funktion werden wir nun in unserer Lachsack-App implementieren und die App damit anweisen, das Lachen abzuspielen, wenn der Benutzer den Lachsack drückt. In der Programmierung spricht man dabei allgemein von einer Ereignisbehandlungsroutine (Event Handler), die nur dann ausgeführt wird, wenn ein bestimmtes Ereignis (Event) auftritt. In unserem Beispiel ist das Drücken des Button das Ereignis, die Anweisung Wenn Klick, dann [Aktion] die Ereignisroutine, und das Abspielen des Sounds die Aktion. Ereignisbehandlungsroutine (Event Handler) Ereignisse und ereignisgesteuerte Programme Der Begriff Ereignis (Event) ist ein wichtiger Schlüsselbegriff für ein grundlegendes Prinzip in der objektorientierten Programmierung, nämlich das der Ereignissteuerung. Im Gegensatz zum klassischen sequenziellen Programmablauf wartet ein ereignisgesteuertes Programm auf Eingaben beziehungsweise Ereignisse verschiedener Art und reagiert dann mit der passenden Funktion darauf. Ein Programm beziehungsweise eine App kann auf verschiedenste Ereignisse reagieren, wie beispielsweise haptische, textliche, akustische oder sonstige sensorische Eingaben, aber auch auf Input aus anderen Anwendungen, wie eingehende Anrufe, SMS, s oder News aus Web-Services wie Twitter. Um die oben genannte Funktionsanweisung in der visuellen Entwicklungssprache von AI auszudrücken, benötigen wir nur zwei komponentenspezifische Blöcke (siehe Bild 3.18). Der erste Block bildet den Rahmen der Ereignisroutine und umfasst die Anweisung: Wenn der Button Lachknopf ein Click-Ereignis empfängt, dann tue etwas. Und der zweite Block bildet die Aktion und übernimmt die Aufgabe: Rufe den Audio-Player auf und spiele die Audiodatei von Lachen ab. Funktion in Blöcken 125