1

GUI-Programmierung

(1)Einführung in Eclipse

Auf diesem ersten Arbeitsblatt werdet ihr die Programmierumgebung Eclipse

kennenlernen, die eure Oberfläche zum Bearbeiten des Android-Projekts „Schiffe

versenken“ sein wird. Dabei macht ihr euch einen Überblick über die Oberfläche des

Programms und übt euch an den Grundfunktionalitäten, das heißt dem Erstellen eines neuen

Projekts, der Navigation in Eclipse und dem ersten Aufspielen eures Programms auf ein

Smartphone oder Tablet.

Während des gesamten Moduls führen euch die Arbeitsblätter durch die Erstellung

der GUI (Graphical User Interface - Graphische Benutzeroberfläche) und geben euch

Hinweise zur Ausgestaltung und Programmierung des Spiels „Schiffe versenken“.

Achtet dabei einfach auf folgende Symbole, die…

euren Arbeitsablauf strukturieren und Teilziele aufzeigen,

euch Hilfen geben, Wichtiges, Schwieriges, etc. kennzeichnen und

die Arbeitsaufträge und Aktionen beinhalten!

Was ist Eclipse?!

Eclipse ist eine sehr mächtige, kostenlos erhältliche IDE (Integrated

Development Environment – Integrierte Entwicklungsumgebung) für

Java. Ihr werdet im Folgenden Eclipse benutzen, da es für diese

Entwicklungsumgebung Pakete gibt, die die Android-Programmierung

unterstützen. Auf den ersten Blick ist die Umgebung etwas

unübersichtlich, da sie sehr viele Möglichkeiten bietet.

Deshalb werden auf den folgenden Arbeitsblättern immer wieder Screenshots zu sehen sein, um

euch den Einstieg in die Arbeit mit Eclipse - im Speziellen bei Android-Projekten – zu erleichtern.

Einen ersten Überblick erhaltet ihr auf der folgenden Seite, die euch die grundlegenden

Arbeitsbereiche und Fenster zeigt:

den Package-Explorer zum Navigieren durch das Projekt

den Editor zum Programmieren, Bearbeiten und Ändern eures Projekts und

die Konsole zum Auslesen der Ausgaben und zur Fehleranzeige.

2

GUI-Programmierung

(1)Einführung in Eclipse

Im Verlauf der Arbeit mit Eclipse werdet ihr noch einige weitere Ansichten kennen lernen, die

besonders die GUI-Programmierung betreffen und euch den Editor für XML-Code bereitstellen

oder die Eigenschaften der Objekte anzeigen – dazu aber später mehr.

Ein neues Projekt anlegen…

Zuerst legt ihr nun ein neues Projekt in Eclipse und damit das Grundgerüst für das „Schiffe

versenken“-Spiel an:

1. Klickt in der Eclipse-Oberfläche oben links auf File New Android Application

Project.

2. In dem neuen Fenster (Abbildung 1, ab S.4) müsst ihr jetzt …

i. … den Namen der App (Application Name) – der als Anzeigename auf dem

Smartphone oder auch z.B. im Google Play Store auftaucht – eingeben,

wodurch der Projektname (Project Name) automatisch ausgefüllt wird.

ii. Behaltet den Vorschlag bei Project Name bei und ändert den Paketnamen

(Package Name) in de.sli.schiffeversenken.*

* Info: Eine Namenskonventon in der Programmierung ist es, dem Package den umgekehrten

Domain-Namen des auftraggebenden Unternehmens zu geben und den Namen des Programms /

der App hinten an zu stellen.

Editor

Konsole

Package Explorer

Run Button

3

GUI-Programmierung

(1)Einführung in Eclipse

iii. Der letzte wichtige Schritt hier ist die Auswahl der minimal zu

unterstützenden Android-Version (Minimum Required SDK), der Ziel-Version

(Target SDK), der Version, mit der das Programm kompiliert werden soll

(Compile With) und des Standard-Designs (Theme).

[Hinweis: Wählt aus Kompatibilitätsgründen mit den ausgeteilten Geräten die

in Abbildung 1 gezeigten Einstellungen der SDKs!]

3. Bestätigt mit Next und achtet auf der nächsten Seite darauf, dass bei Create Activity

ein Häkchen gesetzt ist (Abbildung 2). Dadurch erstellt Eclipse bereits eine leere

Activity, ein wesentliches Element der Android-Programmierung.

4. Ladet aus dem GUI-Programmierung-Ordner auf dem Desktop die Datei schiffe-

versenken-logo.png! Dieses Icon könnt ihr dann als App-Symbol nutzen und in

Farbe, Form und Größe anpassen…oder ihr lasst eurer Phantasie freien Lauf und

gestaltet ein eigenes

Icon (Abbildung 3).

5. Nach der Wahl des Icon müsst ihr ein weiteres Mal ein Häkchen bei Create Activity

setzen und im Auswahlmenu die leere Activity (Blank Activity) markieren – dies lädt

später die Ansicht einer ganz normalen App: mit Statusleiste und sonstigen

(optionalen) Elementen (Abbildung 4).

6. Im letzten Fenster (Abbildung 5) gilt es jetzt der Activity, die ihr erstellt, einen

Namen zu geben (Activity Name). Da ihr mit dem Startbildschirm beginnt, wählt

einen entsprechend sinnvollen Namen und tragt ihn ein – Layout Name füllt sich

dabei wieder automatisch aus! Behaltet die anderen Einstellungen bei und klickt

zum endgültigen Erstellen des Projektes auf Finish.

Ein erster Test

Geschafft! Das Projekt ist erstellt und Eclipse generiert nach dem letzten Klick alle Dateien, die ihr

für’s Erste benötigt.

Doch auch, wenn das Projekt noch nicht mit Inhalt gespickt ist,

sollt ihr einen ersten Blick auf die App werfen und das Projekt

kompilieren (wenn euer Smartphone per USB angeschlossen

ist). Ein einfacher Klick auf den Pfeil neben dem Run-Button (s.

Abb auf S. 2) öffnet das Menü rechts, bei dem ihr dann „Android

Application“ auswählen müsst.

Auf den nächsten Seiten findet ihr nun noch die

Abbildungen zu den einzelnen Fenstern, die ihr bei der Projekterstellung

durchgeklickt habt und die euch zur Unterstützung und zum Nachschlagen dienen

sollen. Ganz am Ende habt ihr auch Platz für eigene Notizen und Fragen.

4

GUI-Programmierung

(1)Einführung in Eclipse

Abbildung 2: Hä kchen setzen bei Creäte Activity

Abbildung 1: Projekt- und Anwendungsnäme sowie Systemvoräussetzungen festlegen

5

GUI-Programmierung

(1)Einführung in Eclipse

Abbildung 3: App-Icon wä hlen und gestälten

Abbildung 4: Eine leere Activity zum Stärtpunkt des Projekts bestimmen.

6

GUI-Programmierung

(1)Einführung in Eclipse

Platz für Notizen:

__________________________________________________________________________________________________

__________________________________________________________________________________________________

__________________________________________________________________________________________________

__________________________________________________________________________________________________

__________________________________________________________________________________________________

__________________________________________________________________________________________________

__________________________________________________________________________________________________

__________________________________________________________________________________________________

Abbildung 5: Näme der ersten Activity festlegen und Projekt erstellen.