Processing Sketch in eine vollständige Android-App einbinden


In diesem Tutorial wird gezeigt, wie man einen Procesing-Sketch in Eclipse zu einer vollständigen App mit Menü-Activity und einem Button ausbaut, der die Processing-Acitvity öffnet. Bei der Erstellung ist dabei die Processing-IDE auch weiterhin sinnvoll. Die Processing-Sketches werden weiterhin darin entwickelt und dann, wenn sie fertig sind exportiert. Dabei erstellt Processing im Sketchbook-Folder einen Ordner mit dem Namen Android. Darin sind im src Ordner die *.java – Dateien zu finden, die man dann in das Eclipse-Projekt importieren kann.

Vorbereitungen: Installation der Android SDK des ADT Plugins für Eclipse lt. Anleitung.

1. Wir erstellen mit Hilfe des Assistenten des ADT-Plugins ein neues Android Programm –> New Android Programm . Alle Felder ausfüllen und Create Projekt from existing Sample –> Skeleton App wählen. Das erstellt ein leeres Android Projekt mit einer Activity und allen Dateien, die sonst noch notwendig sind.

Die Ordner-Struktur sieht dann folgendermaßen aus:

  • src: enthält die Java-Quelltexte
  • gen: hier finden sich automatisch generierte Klassen, wie die R-Klasse
  • res: hier kommen die Resourcen hin
  • asset: weiterer Ordner für Ressourcen
  • im root liegt dann noch die Android Manifest.xml

2. Wir kopieren die Processing .java – Exportdatei aus dem Sketchbook /src/.. -Ordner in den Eclipse- /src-Ordner. Danach werden wir von Eclipse auf einige Fehler hingewiesen. Das liegt daran, dass Eclipse die Processing- Library nicht automatisch einbindet.

3. Die Library processing-core.jar einbinden. Re. Maustaste auf Projektname –> Build Path –> Add External Archieves. Dann die im Processing-Exportordner unter Android/libs processing-core.jar.

4. Die neue Activity muss in die AndroidManifest.xml eingetragen werden. Und zwar innerhalb des Application-Tags

<application android:icon="@drawable/icon" android:label="@string/app_name">
 <activity android:name="Proctest"
 android:label="@string/app_name">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <activity android:name=".Procactivity" />
 </application>

5. Zu guter Letzt müssen wir noch die Acitvity starten. Das machen wir, wie in Android üblich per Intent. Wir werden dafür einen Button in der Start-Activity erstellen und von dort aus die Processing-Activity starten. Dafür ergänzen wir die main.xml in /res/layout um die folgenden Zeilen:

<Button
 android:id="@+id/start"  
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"   
 android:text="@string/start"
 android:onClick="onClickStarten" />

Die erste Zeile android:id=“@+id/start“ bedingt, dass wir auch in der Datei stings.xml in /res/values die Zeile: <string name=“start“>Start</string> innerhalb des resources-Tags ergänzen müssen.

Dannach erweitern wir die, vom Android-Assistenten erstellte *.java -Datei um diese Zeilen innerhalb der onCreate-Funktion:

final Button buttonstart =
 (Button) findViewById(R.id.start);
 buttonstart.setOnClickListener(mStartenListener);

Dadurch wird unserem Button ein Listener hinzugefügt. In den folgenden Zeilen wird dann noch ein der Intent aufgerufen, der die Processing -Acitvity startet. Dieser Code muss nach der onCreate-Funktion aufgerufen werden.

private OnClickListener mStartenListener =
 new OnClickListener() {
 public void onClick(View v) {
 onClickStarten(v);
 }
 };

 public void onClickStarten(final View sfNormal) {
 final Intent i = new Intent(this, Procactivity.class);
 startActivity(i);
 }

Damit sind wir fertig und können nun eine Processing-Acitvity inkl. Optionsmenü von einer beliebigen Activity aus starten.

Hier noch der gesamte Quellcode zum Download: proctest.zip

Advertisements

Ein Kommentar

  1. Pingback: Processing – Über dieses Weblog « processing – tutorial

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: