Link Inhalt
KIO4.com Die Installation der Werkzeuge und die Entwicklung einer Beispiel-Extension ist hier sehr gut beschrieben. Leider ein Gemisch aus Englisch und Spanisch, aber trotzdem gut verständlich und vor allen Dingen Schritt für Schritt erklärt. Für den Fall, dass die Seite von Juan Antonio Villalpando (KIO4.com) nicht mehr erreichbar ist, habe ich seine Anleitung PDF ausgedruckt.
Oracle Java Documentation Oracle Java Dokumentation.
AI2 Extension Reference Referenz für die Erstellung von eigenen App Inventor Erweiterungen
AI2 Annotation Source Die Annotation für die Spezifizierung der Extension-Elemente sind nirgendwo gut erklärt. Im Source-Code findet man einiges.
Pura Vida Apps Snippets, Tutorials, Extensions und viel mehr. Umfangreicher Content!
AppyBuilder ... ist eine von mehreren alternativen Entwicklungsplattformen. Es gibt viele Hintergrundinformation, u.a. eine Dokumentation der AI2-Klassen: 3nportal.com/AIBridge/API/
Klassenreferenz Mit Doxigen erstellte Dokumentation mit Stand 23.1.2020.

Screen von einem AI2-Projekt in ein anderes kopieren| Screen von einem AI2-Projekt in ein anderes kopieren

Zunächst beide Projekte auf den eigenen Computer exportieren (.aia-Dateien). Die Dateien sin im ZIP-Format.

Beide Dateien öffnen und den Ordner "src" durchsuchen, bis man in einem Unterordner die Screen-Definitionen findet. Z.B. so:

Liste der Screen

Im Projektmappenexplorer rechte Maustaste auf das Projekt. Im Menüpunkt "Ansicht" gibt es den Unterpunkt "Klassendiagramm anzeigen".


Extensions entwickeln| Extensions entwickeln

Um eigene Erweiterungen entwickeln zu können, muss man einige Werkzeuge installieren. Die Installation der Werkzeuge und die Entwicklung einer Beispiel-Extension ist sehr gut bei KIO4.com beschrieben. Leider ein Gemisch aus Englisch und Spanisch, aber trotzdem gut verständlich und vor allen Dingen Schritt für Schritt erklärt.

Nur bei der Position der Quelldateien ist diese Anleitung etwas veraltet. Das dort vorgeschlagene Verzeichnis

     "~\appinventor-sources\appinventor\components\src\com\google\appinventor\components\runtime"


sollte NICHT benutzt werden! Man richtet statt dessen besser eine eigene Sourcen-Struktur ein, die der Java-Package-Nomenklatur entspricht. Diese Struktur startet, wie die Google-Sourcen, im Ordner

     "~\appinventor-sources\appinventor\components\src\".


Bei mir sieht das dann so aus:

Verzeichnis-Struktur

Die Package-Bezeichnung in den Quellen ist dann z.B. "package de.UllisRoboterSeite.UrsAI2UDPv3;" (Bezeichnung des Projekts ändern).

Auch der App Inventor hat eine Tutorial-Seite. Mehr Details zu Komponenten findet man unter dem Link How to Add a Component.

Für den Fall, dass die Seite von Juan Antonio Villalpando (KIO4.com) nicht mehr erreichbar ist, habe ich seine Anleitung PDF ausgedruckt.

 

Wenn man alles installiert hat, ist es mühselig immer wieder nachzuschauen, wo sich die einzelnen Komponenten befinden. Das folgende kleine Batch-Programm (AI2Ex.cmd) öffnet die entsprechenden Fenster (Pfad zu den Quellen ersetzen!):

cd %userprofile%\appinventor-sources\appinventor
start "" "C:\Program Files\Git\git-bash.exe"
start %userprofile%\appinventor-sources\appinventor\components\build\extensions
start %userprofile%\appinventor-sources\appinventor\components\src\de\UllisRoboterSeite

Zum Erstellen der Extension muss in das Git-Bash-Fenster der Befehl ant extensions eingegeben werden.


Develop Extensions| Develop Extensions

To develop your own extensions, you have to install some tools. The installation of the tools and the development of an example extension is very well described at KIO4.com. Unfortunately, a mixture of English and Spanish, but easy to understand and explained step by step.

With the position of the source files, this manual is outdated. The directory proposed there

     "~\appinventor-sources\appinventor\components\src\com\google\appinventor\components\runtime"

should NOT be used! Instead, it is better to set up your own source structure, which corresponds to the Java Package nomenclature. This structure, like the Google sources, starts in the folder

     "~\appinventor-sources\appinventor\components\src\"
.

 For me it looks like this:

 

Verzeichnis-Struktur

The package name in the sources is then e.g. "package de.UllisRoboterSeite.UrsAI2UDPv3;" (change name of project).

The App Inventor also has a tutorial page too. More details on components can be found under the link How to Add a Component.

In the event that the page of Juan Antonio Villalpando (KIO4.com) is no longer available, I have printed his instructions to PDF.

 

When everything is installed, it is tedious to keep checking where the individual components are. The following small batch program (AI2Ex.cmd) opens the needed windows (replace the path to the sources!):

cd %userprofile%\appinventor-sources\appinventor
start "" "C:\Program Files\Git\git-bash.exe"
start %userprofile%\appinventor-sources\appinventor\components\build\extensions
start %userprofile%\appinventor-sources\appinventor\components\src\de\UllisRoboterSeite

To build the extension, you have to enter the command ant extensions in the git-bash window.


Google App Engine starten| Google App Engine starten

Die Google App Engine kann auch per Kommando-Zeile gestartet werden. Dort stehen eine Reihe von Optionen zur Verfügung, die der Launcher nicht bietet, z.B. die Spezifizierung der Host-Adresse und der Port über den die Anwendung kommunizieren soll. Wenn Google App Engine korrekt installiert wurde, befindet sich dev_appserver.py im Order C:\Program Files (x86)\Google\google_appengine\ und die Umgebungsvariable PATH enthält einen Eintrag zu dem Ordner. Wenn nicht, neu installieren, Pfad selbst eintragen oder bei den Kommandos explizit angeben.

 Nun wechselt man in das Verzeichnis, in dem sich die zur Applikation gehörende Datei app.yaml befindet. Dann z.B.

dev_appserver.py app.yaml --host 192.168.178.99 --port 8080

Nun kommuniziert die Applikation nicht mehr über localhost sondern über 192.168.178.99.

Alle möglichen Einstellungen bekommt man per

dev_appserver.py -h

Tiefergehende Informationen| Tiefergehende Informationen

Die Dokumentation für die Entwicklung von eigenen Extensions ist recht dürftig. Mit solchen Informationen kommt man dann deutlich weiter. Z.B.:

Der Konstruktor einer Extension-Klasse erhält eine Referenz container auf die Instanz einer ComponentContainer-Klasse. Diese bietet u.a. die beiden Methoden container.$context() und container.$form(). Dies sind Referenzen auf die zu Grunde liegende Activity bzw. Form-Instanz. Die Form-Klasse wiederum bietet viele zusätzliche Methoden, z.B. registerForOnPause(OnPauseListener component) mit der man sich informieren lassen kann, wenn die App in den Zustand Paused wechselt. Leider muss man in den Quellcode schauen, um zu verstehen, was genau passiert.

Ich habe mit Doxigen eine Klassenreferenz erstellt zum Stand, der am 23.1.2020 gültig war. Es lohnt sich, hier ein wenig zu stöbern.

Nicht jede Methode ist sauber dokumentiert. Weitere Informationen erhält man, wenn man von Verzeichnis "C:\Users\<meinUser>\appinventor-sources\appinventor\components\src\com" mit findstr nach Stellen sucht, wo die gesuchte Klasse oder Methode benutzt wird, und dann in der entsprechenden Quelle nachschaut:

findstr /S /C:"funktionxyz" *.java

Dit und Dat| Dit und Dat

Bei der Annotation @DesignerProperty kann man einen defaultValue angeben. Dieser Wert ist dann die Voreinstellung der Eigenschaft im Designer-Fenster des App Inventor. Für Eigenschaften vom Typ boolean (editorType = PropertyTypeConstants.PROPERTY_TYPE_BOOLEAN) sind der Wert für die Voreinstellung true der Text "True" (mit großem "T"!). Alle anderen Angaben führen zu Voreinstellung false.

Voreinstellung