PC Magazin mit Film DVD Windows Extreme (Vorschau)

it professional
Beispielprojekte als
DVD CD
Programmierung Application Package 117
Hinzu kommt noch ein virtuelles Smartphone.
Googles Hallo-Welt-Beispiel-Programm mit AI
heißt Hello Purr, und indem Sie es nachvollziehen,
machen Sie sich mit den wichtigsten Entwicklungsschritten
vertraut. Für das Programm
benötigen Sie die beiden Dateien kitty.png
(appinventor.googlelabs.com/learn/tutori
als/hellopurr/HelloPurrAssets/kitty.png) und
meow.mp3 (appinventor.googlelabs.com/
learn/tutorials/hellopurr/HelloPurrAssets/
meow.mp3). Natürlich können Sie das Beispiel
mit Ihren eigenen Dateien entsprechend
abwandeln. Klicken Sie im AI Designer auf die
Schaltfläche New, um ein neues Projekt anzulegen.
Geben Sie dem Projekt einen Namen,
z.B. Maunz1 (Leerzeichen sind nicht erlaubt),
und bestätigen Sie mit OK.
Danach wird die Design-Oberfläche gleich
etwas bunter. In der linken Palette sehen Sie
jetzt alle Steuerelemente, die Sie Ihrem Projekt
hinzufügen können, im Viewer-Fenster
erscheint das Bild eines Handys. Der Bereich
Components zeigt die jeweils aktiven Komponenten.
Da Sie ja noch keine hinzugefügt
haben, sehen Sie hier nur die Screen-Komponente,
die das Display des
Smartphones darstellt. Im
Bereich Properties können Sie
die Eigenschaften der jeweils
selektierten Komponente bearbeiten.
Ändern Sie hier doch
gleich einmal die Hintergrundfarbe,
indem Sie für die Eigenschaft
BackgroundColor eine
neue wählen.
Für die App benötigen Sie nur eine zusätzliche
sichtbare Komponente, nämlich einen Button.
Ziehen Sie diesen mit der Maus aus der
Palette auf den Viewer. Überzeugen Sie sich
davon, dass das Button-Steuerelement im
Bereich Components selektiert ist. Löschen
Sie nun im Bereich Properties den Text für
den Button. Klicken Sie anschließend in das
Textfeld unter Image und dann auf Add. Es
erscheint das Dialogfeld Upload File. Wählen
Sie in diesem über die Schaltfläche Durchsuchen
die Datei kitty.png oder ein anderes Bild
aus und klicken Sie auf Öffnen. Bestätigen
Sie den Dialog Upload File mit OK. Der Button
erscheint nun in entsprechender Größe mit
dem hinzugefügten Bild (die Größe passen
Sie gegebenenfalls über die Eigenschaften
Width und Height an). Erweitern Sie nun in
der Palette den Abschnitt Media und fügen
Sie dem Viewer per Drag & Drop noch eine
Sound-Komponente unter den Button. Das
Steuerelement erscheint im Viewer ganz unten
in einem separaten Bereich für nicht sichtbare
Komponenten. Klicken Sie im Abschnitt
Media des Bereichs Components auf Add und
Statt Code zu
schreiben,
klickt der
Programmierer
Puzzleteile
öffnen Sie die Datei meow.mp3. Danach weisen
Sie die Datei der Eigenschaft Source der
Sound-Komponente zu. Selektieren Sie dazu
die Sound-Komponente, klicken Sie in das
Feld Source und wählen Sie die Datei aus.
Nun fehlt noch die Funktionalität des Programms.
Öffnen Sie dazu den Blocks Editor
über die Schaltfläche Open the Blocks Editor
rechts oben im AI Designer. Bei dem Blocks
Editor handelt es sich um eine
Java-Anwendung (AppInventorForAndroidCodeblocks.
jnlp), die sich in einem separaten
Fenster öffnet. Im
Blocks Editor starten Sie auch
den Handy-Simulator. Klicken
Sie oben auf die Schaltfläche
New emulator. Bevor auf dem
Smartphone der passende
Hintergrund erscheint, müssen Sie gegebenenfalls
noch die Bildschirmsperre aufheben,
indem Sie das linke Schloss-Symbol mit dem
Mauszeiger zum rechten hin schieben. Warten
Sie anschließend ab, bis der Simulator die
SD-Karte initialisiert hat. Danach wählen Sie
das virtuelle Gerät in der Liste zur Schaltfläche
smartphone in die entwicklung einbeziehen
Die App Inventor Setup Software installiert
auch Treiber für die gängigsten
Android­Smartphones. Wie gesagt: Sie
können Apps auch ohne angeschlossenes
Smartphone entwickeln, indem Sie auf
den Simulator zurückgreifen (was wir im
Folgenden tun werden). Wenn Sie Ihr
Smartphone einbinden wollen, müssen
Sie auf diesem USB­Debugging aktivieren
und dafür sorgen, dass das Display
des Telefons immer aktiv bleibt. Die entsprechenden
Optionen finden Sie gewöhnlich
im Menü Entwicklung (unter
Einstellungen/Anwendungen). Setzen Sie
Das erstes AI-Projekt:
Alles ist übersichtlich
angeordnet und nahezu
selbsterklärend.
Connect to Device aus. Auch die Verbindung
zum Gerät kann einige Minuten in Anspruch
nehmen. Danach sehen Sie die Oberfläche
Ihrer App auf dem Screen.
Auf der linken Seite des Blocks Editor finden
Sie die verschiedenen Bausteine nach Funktionalität
geordnet. Das Register Built-in zeigt
allgemeine Bausteine, im Register My Blocks
finden Sie die Bausteine, die sich speziell auf
die von Ihnen hinzugefügten Komponenten
beziehen. Im Beispiel sind das Screen1, Button1
und Player1. Jede Komponente hat einen
Objektnamen, den Sie im AI Designer auch
ändern können (Schaltfläche Rename). Um es
einzurichten, dass die Anwendung beim Anklicken
des Buttons die Sound-Datei abspielt,
führen Sie nun folgende Schritte durch: Ziehen
Sie im Blocks Editor den when Button1.
Click do-Block auf die noch leere Editorfläche.
Sie finden diesen Block im Abschnitt Button1
des Registers My Blocks. Platzieren Sie anschließend
den Methodenblock call Player1.
Start (unter My Blocks/Player1) in die Öffnung
des when Button1.Click do-Blocks. Das war‘s
auch schon. Wenn Sie nun im Smartphone
den Button mit dem Bild der Katze anklicken,
hier bei USB-Debugging und Aktiv bleiben
jeweils ein Häkchen.
Außerdem müssen Sie sicherstellen, dass
die Autorotation des Displays abgeschaltet
ist (Einstellungen, Display bzw. Sound
und Display, Option Ausrichtung deaktivieren).
Beachten Sie, dass der permanente
Betrieb des Displays verhältnismäßig
viel Strom verbraucht und damit die
Akkulaufzeit verringert. Sie sollten die
Einstellung Aktiv bleiben daher wieder
deaktivieren, wenn Sie Ihr Smartphone
nicht mehr für die Entwicklung brauchen.
www.pc-magazin.de PC Magazin 10/2011