Technische Hochschule Georg Agricola WORKSHOP TEIL 2. Veranschaulichung des EVA-Prinzips

Transkript

1 Technische Hochschule Georg Agricola WORKSHOP TEIL 2 Veranschaulichung des EVA-Prinzips

2 Inhaltsverzeichnis 1. Kurzfassung zur Projekterstellung Erklärung zum EVA-Prinzip Benötigte Komponenten Erstellen der Oberfläche (auch GUI genannt) Ausblick auf die fertige GUI Umsetzung der GUI in AndroidStudio Erstellen des Eingabe-Elements Erstellen eines Button bzw. Verarbeitungs-Elements Erstellen des Ausgabe-Elements Erster Test der APP auf dem Smartphone Die Programmierung der App Quellcode der Endanwendung Programmierung in AndroidStudio Programmierung der Ausgabe Erstellen der Verarbeitung/s-Funktion Resümee

3 1. Kurzfassung zur Projekterstellung An dieser Stelle soll noch einmal kurz auf die Erstellung des Projektes eingegangen werden, die ausführliche Anleitung finden Sie im ersten Teil des dreiteiligen Workshops. Diese Bilder sollen den Ablauf exemplarisch darstellen, Sie dürfen Namen und Pfade natürlich Ihren Bedürfnissen anpassen. Bedenken Sie jedoch, dass Sie dann auch in den umbenannten Dateien arbeiten müssen und somit nicht alle Bilder der Anleitung einfach zu adaptieren sind. 2

4 2. Erklärung zum EVA-Prinzip Hinter diesem Prinzip oder besser gesagt der Abkürzung "EVA" verbergen sich aufgelöst folgende Schritte: E Eingabe V Verarbeitung A Ausgabe Mit diesen drei Punkten wird sich, das in diesem Workshop beschriebene Projekt bzw. App befassen. Wir beginnen mit der Erstellung der gesamten Oberfläche und arbeiten dann, Schritt für Schritt die Punkte ab. Bitte lassen Sie sich nicht verwirren, da die Punkte in der Reihenfolge A Ausgabe V Verarbeitung (Veränderung der Ausgabe) E Eingabe (eines Wertes) in diesem Workshop abgehandelt werden. Dies erleichtert die Einarbeitung in die gesamte Thematik und es können abschnittsweise Änderungen geprüft und live getestet werden. Am Ende dieses Workshops soll ein Währungsumrechner erstellt werden, welcher anhand eines festgelegten Wechselkurses Dollar zu Euro umrechnen kann. 2.1 Benötigte Komponenten 1. Ein PC oder Laptop mit AndroidStudio als Entwicklungsumgebung. 2. Ein Android-Smartphone (mit Entwicklerrechten) um die APP live testen zu können. 3. Ein Mirco-USB-Kabel um das Smartphone mit dem PC oder Laptop zu verbinden. 3

5 3. Erstellen der Oberfläche (auch GUI genannt) 3.1. Ausblick auf die fertige GUI 4

6 3.2 Umsetzung der GUI in AndroidStudio Zu Beginn und nach der Erstellung des Projektes sollten Sie folgende Oberfläche vor sich haben. Nun wechseln Sie bitte mit Hilfe der beiden markierten Reiter des Registers von der MainActivity.java zu der activity_main.xml. Klicken Sie dazu einfach auf den entsprechenden Reiter. Nun sollten Sie diese Oberfläche vorfinden. Wechseln Sie im unteren Register, zum Reiter Design um die Oberfläche Ihrer APP grafisch gestalten zu können. Sollten Sie bereits im richtigen Reiter (Design) sein, können Sie den Schritt überspringen. Mit der nun folgenden grafischen Gestaltungsoberfläche können Sie entsprechend der Vorlage Ihre APP-Oberfläche erstellen und designen. 5

7 Nun zu den drei in rot markierten Feldern. Beginnen wir mit dem Feld auf der oberen linken Seite, hier finden Sie eine Auswahl der nutzbaren grafischen Elemente, wobei wir uns jedoch auf ein Ausgabefeld (TextView), einem Button (Button zur Verarbeitung) und einem Eingabefeld (EditText) beschränken werden. Im unteren linken rot markierten Feld sehen Sie nun, dass schon ein TextView-Element angelegt wurde. Dieses soll, wie im nächsten Abschnitt bzw. Absatz beschrieben, zunächst entfernt werden. Im rechten Feld, finden Sie die Einstellungsmöglichkeiten oder Eigenschaften der grafischen Elemente. (Properties) Um nun mit der Gestaltung zu beginnen, löschen Sie bitte das TextView-Element im rechten oberen Feld. Klicken Sie es dazu (einmal) an und drücken Entf auf der Tastatur. 6

8 3.3 Erstellen des Eingabe-Elements Wie Ihnen aufgefallen sein dürfte, ist nun der Text im Handydisplay sowie der Eintrag im unteren linken Feld verschwunden. Nun haben Sie eine identische Grundlage um die Oberfläche zu erstellen. Wählen Sie nun, aus dem linken oberen Feld unter Text Fields, das Element "Plain Text" aus und ziehen es per Drag and Drop einfach auf die weiße Fläche des abgebildeten Handys. Nun haben Sie das erste der drei benötigten Elemente platziert. Im nächsten Schritt sind nun die Einstellungen vorzunehmen. Dazu markieren Sie das Element im unteren linken Feld durch einfaches anklicken. Im Anschluss können Sie nun die folgenden Einstellungen im rechten Feld vornehmen. 7

9 Scrollen Sie nun hoch, bis im rechten Feld, das Element "id" erscheint. Ändern Sie nun den Eintrag von "id" (EditText) zu Eingabe. Sie sollten nun eine ähnliche bis identische Oberfläche vor sich auf Ihrem PC vorfinden. Sie haben somit erfolgreich das erste der drei benötigen Elemente angelegt. 8

10 3.4 Erstellen eines Button bzw. Verarbeitungs-Elements Gehen Sie in diesem Abschnitt wie zuvor in Abschnitt 3.1 vor. Nutzen Sie die Drag and Drop - Funktion und ziehen,aus dem oberen linken Feld, einen Button auf die Handyoberfläche. Versuchen Sie den Button, wie oben abgebildet, zu platzieren und tragen Sie, wie bereits unter Abschnitt 3.3 beschrieben, die folgenden Änderungen im rechten unteren Feld ein. Vergessen Sie nicht den "button" im unteren linken Feld vorher zu markieren. Ändern Sie zunächst unter "id" den Eintrag von button zu Verarbeitung. Mit dem Eintrag bei "text" ändern Sie die Beschriftung des Buttons von BUTTON zu Dollar -> Euro, wie es in der vorherigen Abbildung zu sehen ist. 9

11 Suchen Sie nun den Eintrag "onclick" im rechten Feld und tragen Sie dort umrechnen ein, diese Einstellung ist wichtig, damit unsere spätere Funktion auf diesen Button reagiert. Nun haben Sie bereits das zweite der drei benötigten Elemente erstellt. 10

12 3.5 Erstellen des Ausgabe-Elements Um nun die Ausgabe zu realisieren, gehen Sie erneut wie in Abschnitt 3.3 und 3.4 vor. Wählen Sie jedoch nun im oberen linken Feld unter Widgets das Element TextView (vom Typ TextView) aus. Dazu müssen Sie im oberen linken Feld etwas nach oben scrollen. Dort sollten Sie dann das entsprechende Element finden. Nutzen Sie erneut die Drag and Drop -Funktion und positionieren Sie das Element wie oben abgebildet. Nun ergänzen Sie bitte noch den folgenden Eintrag. Ändern Sie den Eintrag bei "id" in Ausgabe. Wenn Sie der Anleitung richtig gefolgt sind, sollte Ihre Oberfläche nun dem gezeigten Schaubild sehr ähneln. Nun können wir uns der eigentlichen Programmierung widmen, zuerst wollen wir die Oberfläche jedoch "live" auf dem angeschlossenen Handy anzeigen lassen. (testen) 11

13 4. Erster Test der APP auf dem Smartphone Um nun Ihre APP zum ersten Mal auf dem realen Smartphone starten und testen zu können, klicken Sie bitte auf das rot umrandete Play-Symbol. Im Anschluss sollte sich bei Ihnen folgendes Fenster öffnen: Wählen Sie das rot umrahmte Gerät. (Das andere angezeigte Gerät ist ein virtuelles Gerät) 12

14 Auf dem Handy sollte in diesem Fall nun die folgende Abbildung zu finden sein, bestätigen Sie diese mit OK. Nachdem Sie die Meldung bestätigt haben, sollte nun auf dem PC dieses Fenster zu sehen sein: Wenn Sie nun das Fenster mit OK bestätigen, sollte nach einiger Zeit Ihre APP auf dem Smartphone starten. Wichtig: Das hier verwendete Smartphone ist ein Wiko Jimmy, bei Ihrem Smartphone erscheint ein anderer Eintrag! 13

15 5. Die Programmierung der App 5.1 Quellcode der Endanwendung public class MainActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); } public void umrechnen (View v) { double dollar; double euro; EditText eingabe = (EditText) findviewbyid(r.id.eingabe); dollar=double.parsedouble(eingabe.gettext().tostring()); euro=dollar / 1.20; } } TextView ausgabe = (TextView) findviewbyid(r.id.ausgabe); ausgabe.settext(double.tostring(euro)); 14

16 5.2 Programmierung in AndroidStudio Im fünften Abschnitt, dieses Workshops, beschäftigen wir uns nach einigen wichtigen Vorbereitungen mit der Umsetzung des EVA-Prinzips. Wie bereits unter Abschnitt 2 beschrieben bauen wir das Programm so auf, dass wir mit der Ausgabe beginnen, dann die Verarbeitung erstellen und als letzten Schritt die Eingabe realisieren. Um nun mit der Programmierung starten zu können, wechseln Sie auf den Reiter MainActivity.java des oberen Registers. 15

17 5.3 Programmierung der Ausgabe Um den Einstieg zu machen, beginnen wir damit, die Beschriftung des Ausgabefeldes bei der Ausführung der APP auf dem Smartphone zu verändern. Dazu müssen Sie den folgenden Text unter der folgenden Codezeilen eintragen: protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Neuer Eintrag: TextView ausgabe = (TextView) findviewbyid(r.id.ausgabe); ausgabe.settext("1234"); Falls bei Ihnen im Quellcode rote Markierungen wie im nachstehenden Bild zu sehen ist. Bewegen Sie den Cursor über den rot eingefärbten Text, wie oben zusehen ist, so dass ein blaues Dialogfeld erscheint. Folgen Sie der Anweisung Alt + Eingabe gleichzeitig zu drücken. Dadurch werden fehlende Einträge automatisch ergänzt und Sie können mit einem erneuten Test fortfahren. 16

18 5.4 Erstellen der Verarbeitung/s-Funktion Nachdem Ihr zweiter Test erfolgreich war, beginnen Sie nun mit der Programmierung der Verarbeitung, unter Nutzung des Buttons (Verarbeitungs-Button). Ergänzen Sie nun folgende Codezeilen an der angezeigten Stelle. public void umrechnen (View v) { } Hier sollten Sie nun auch wieder eine rot markierte Stelle im Text finden. Legen Sie den Cursor darauf und folgen Sie erneut der Anweisung, Alt + Eingabe gleichzeitig zu betätigen. Schneiden Sie nun den markierten Code aus und fügen Sie diesen an der neuen Stelle ein. Testen Sie nun die Funktion des Buttons. 17

19 Nun fügen Sie noch den nachstehenden Code, wie oben zu sehen ist, hinzu. double dollar; double euro; EditText eingabe = (EditText) findviewbyid(r.id.eingabe); dollar=double.parsedouble(eingabe.gettext().tostring()); euro= dollar / 1.20; TextView ausgabe = (TextView) findviewbyid(r.id.ausgabe); ausgabe.settext(double.tostring(euro)); Sofern Sie wie beschrieben, dem Workshop gefolgt sind, können Sie nun erneut Ihre "fertige" APP testen. 6. Resümee Wir hoffen, Sie hatten Spaß bei der Umsetzung sowie Durchführung des zweiten Workshops und konnten einen Einblick davon bekommen, was eigentlich hinter EVA in der Datenverarbeitung und Programmierung steckt. In einem weiteren Workshop werden wir uns mit IKT (Informations- und Kommunikationstechnik) beschäftigen und dazu eine MorseAPP schreiben. 18