Ich programmier mir eine App

Transkript

1 Ich programmier mir eine App Erste Schritte Auf diesem Blatt wir eine App mit einer Maschine verglichen. Die Programmierung entspricht dann der Herstellung dieser Maschine in einer Werkstatt. In der linken Spalte wird diese Hilfsvorstellung erklärt; rechts stehen die entsprechenden Fachbegriffe. Screenshots zeigen, wie das bei der Arbeit tatsächlich aussieht. Die Maschine Jede Maschine besteht aus zwei Teilen: 1. Die Innereien ; sie stellen die Funktion zur Verfügung. 2. Das Gehäuse ; über das Gehäuse kann man die Maschine benutzen und bedienen Die App Auch die App besteht aus zwei Teilen: 1. Der Teil, der die Funktion zur Verfügung stellt, ist der QuellCode. Das ist ein Text, der in einer für das iphone verständlichen Programmiersprache geschrieben wird. Mit diesem Text wird die Funktion der App genau beschrieben. Weil Computer doof sind (das iphone ist ein Computer!) muss man sehr sorgfältig sein. Schon der kleinste Fehler führt dazu, dass die App nicht funktioniert. 2. Dem Gehäuse der Maschine entspricht die Grafik, die man bei der Benutzung der App sieht. Ein anderer Name ist Benutzeroberfläche. Damit meint man die Buttons, Texte, Grafiken, Videos und letztlich auch Tonein- und Ausgabe. Der Fachbegriff ist GUI: GraficalUserInterface, also grafische Benutzerschnittstelle. MCS-Juniorakademie; Weitmarer Str. 115 a; Bochum; Tel. (0234) ; -332 Fax - 7; info@mcs-juniorakademie.de;

2 Die Werkstatt / Abteilung Innereien Die Werkstatt hat zwei Abteilungen. In der ersten Abteilung werden die Innereien gebaut, also der Code geschrieben. Diese Abteilung heißt: Xcode. Eine kurze Erklärung des Hauptfensters findest du auf der rechten Seite. Xcode Hier wird nur gezeigt, wie die Werkstatt aussieht. Was ihr hier machen sollt, wird später erklärt. Hier sind die.h und.m Dateien. In dieser.xib-datei ist eure GUI drin. Wenn ihr auf diese Datei doppelt klickt, geht der InterfaceBuilder auf. Hier kannst du klicken um deine App zu starten. Hier kannst du die Dateien bearbeiten..h und.m Dateien: werden gleich genauer erklärt wenn es um die Materialien geht

3 Die Werkstatt / Abteilung Gehäuse Die Abteilung in der das Gehäuse, also die GUI, programmiert wird heißt: InterfaceBuilder. InterfaceBuilder Den Teil der Materialien, die für die grafische Oberfläche (GUI) wichtig sind, findest du im InterfaceBuilder. Hier siehst du ihn mit kurzen Erklärungen: 1. Fenster: Bibliothek 2. Fenster: Vorschau 3. Fenster: Überblick 4. Fenster: Einstellungen In diesem Fenster findest du die Standardelemente wie Knöpfe, Textfelder und vieles mehr. Du kannst sie anklicken und in das Fenster rechts daneben ziehen, um deine App zu bauen. Dies ist ein Übersichtsfenster in dem man sehen kann wie die Elemente ineinandergesteckt sind. Dies ist das Vorschaufenster für deine App. Hier kannst du die Bausteine deiner App hineinziehen, positionieren und größer oder kleiner machen. In diesem Fenster findest du allerlei Einstellungsmöglichkeiten zu dem angewählten Element. Hier kannst du z.b. ganz einfach den Text auf dem Knopf anpassen. (Title = click mich)

4 Das Materiallager Für den Bau einer App sind in der Werkstatt viele vorbereitete Materialien vorhanden. Auch in einer Autowerkstatt muss man ja nicht jede Schraube selber herstellen. Durch Kombinieren dieser Materialien erstellst du deine App. Wenn du willst, kannst aber auch eigene Materialien bauen oder ändern. Aufgabenliste 1 Für euch gibt es in der Gehäusewerkstatt einiges zu tun. Die (Standard-) Bibliotheken Alle diese Materialien, die schon vorhanden sind, findet man in den Standardbibliotheken. Materialien haben Eigenschaften (Attribute bzw. Variablen) und können bestimmte Dinge tun (Methoden). Bsp.: Ein Knopf hat z.b. die Eigenschaften: - Beschriftung - Breite und Höhe (Attribute) und kann: - gedrückt werden (Methode) Materialien werden immer in zwei Dateien beschrieben. Eine mit der Endung.h und die andere mit der Endung.m. In der.h -Datei steht formal was das Material kann und welche Eigenschaften es hat. Dies ist aber nur eine Art Liste und hier steht noch nichts genau Ausformuliertes. Die.m -Datei enthält die Implementierung (bedeutet Umsetzung ) des Materials. Hier steht, anders wie in der.h -Datei, nun ausformuliert, was genau in den Methoden passiert. Design der GUI (Grafischen Benutzerschnittstelle) 1. Clickt doppelt im Xcode bei Ressources auf eure.xib-datei. Dadurch geht der InterfaceBuilder auf. 2. Findet im Bibliothek -Fenster den Round Rect Button. 3. Zieht ihn in das Vorschau -Fenster und positioniert ihn so wie ihr möchtet. 4. Clickt euren neu erstellten Button an, so dass er markiert ist, und clickt im Einstellungen -Fenster auf 5. Tragt nun bei Title für den Button eine Beschriftung ein. 6. Findet im Bibliothek -Fenster nun das Label und zieht es auch ins Vorschau -Fenster. 7. Markiert auch dies, klickt im Einstellungen -Fenster wieder auf und löscht diesmal dessen Text -Eintrag. 8. Nachdem ihr fertig seid, clickt in der Programmleiste auf File Save,um eure Arbeit abzuspeichern.

5 Die Arbeitsanweisung Damit der Computer (iphone und ipad sind Computer!) weiß, was er in der App machen soll, muss man ihm eine Arbeitsanweisung schreiben. Durch IBOutlet wird dieses Label gleich im Interfacebuilder angezeigt. Dadurch können wir gleich den Quellcode mit der Oberfläche verbinden. Wie das geht wird gleich beschrieben. UILabel heißt dieses Standard-Material. *meintext : den * braucht man bei komplexen Materialien (bei Objekten) wie diesem Label. Der Name meintext ist frei wählbar. Der Quellcode Bisher haben wir nur dem Computer beigebracht wie unsere Oberfläche aussieht. Damit nun Leben ins Spiel kommt, müssen wir den im InterfaceBuilder erstellten Elementen einen Namen geben und sagen was mit ihnen passieren soll. Dies geschieht im Xcode durch das Editieren von zwei Dateien. Du findest sie im Classes -Ordner. Es sind die unteren beiden Dateien. Hier siehst du den Code für das HelloWorld Beispiel mit Erklärungen: Code der.h-datei #import ScreencastViewController : UIViewController { IBOutlet UILabel (nonatomic, retain) IBOutlet UILabel *meintext; Code der.m-datei #import meintext; - (IBAction) clickmich{ meintext.text World"; Hier ist der Verbindungspunkt zwischen beiden Dateien. Wir geben an welche.h-datei zu dieser.m-datei gehört und dass wir hier nun die Implementierung beschreiben. Damit wir das in der.h angegebene UILabel hier benutzen können, müssen wir es synthetisieren. Diese Zeile besagt, dass unser Material eine Methode Namens clickmich haben soll und dass diese Methode auf eine IBAction reagiert. IB steht für InterfaceBuilder und bewirkt, dass wir die Methode gleich im InterfaceBuilder sehen und verlinken können. clickmich ist der frei gewählte Name der Methode. - (IBAction) Diese Zeile hat was mit Speichermanagement zu tun und wird nicht weiter erklärt. Kopiere einfach die erste Zeile und ergänz vorne (nonatomic, retain) - (void)didreceivememorywarning { [super didreceivememorywarning]; - (void)viewdidunload { - (void)dealloc { if (meintext!= nil){[meintext release]; [super Hier steht nun endlich genau was in unserer clickmich-methode passieren soll. Hier wird der Text des UILabel auf Hello World gesetzt. Wie zu Hause! Wenn man etwas benutzt hat, muss man am Ende auch wieder aufräumen. Diese Zeile sorgt dafür, dass am Ende der Speicherplatz der Variable wieder freigegeben wird.

6 Ordnung schaffen! Arbeitsanweisung 2 Was ist was? Damit nun der Computer weiß welche Grafikelemente zu welchem Material in der Arbeitsanweisung gehören, müsst ihr ihm auf die Sprünge helfen und eine Verbindung schaffen! Verlinken der Elemente 1. Öffnet wie eben (wenn er nicht noch auf ist) den InterfaceBuilder. 2. Clickt (zur Sicherheit, dass eure Änderungen im Code auf im InterfaceBuilder angezeigt werden) auf File Read Class Files. 3. Navigiert in euren Projekt-Ordner in den Unterordner Classes und wählt eure geänderte.h-datei. 4. Clickt im Überblick -Fenster auf File's Owner und danach im Einstellungen -Fenster auf 5. Zieht nun eine Verbindung zwischen eurer meintext -Variable und dem UILabel im Vorschau -Fenster. 6. Das gleiche macht ihr mit der clickmich -Methode und dem Button. Diesmal werdet ihr noch beim Loslassen über dem Button gefragt, wann genau die Methode aufgerufen werden soll. Wählt hier Touch Up Inside. Wenn ihr fertig seid, müsste euer Einstellungen -Fenster so aussehen wie im Screenshot bei Punkt 5. meintext müsste mit dem Label verbunden sein und clickmich mit dem Rounded Rect Button, reagierend auf Touch Up Inside. 7. Speichern nicht vergessen! Clickt in der Programmleiste auf File Save,um eure Arbeit zu sichern.

7 Auf die Plätze, fertig? Los! Nun können wir ausprobieren, ob auch alles so funktioniert, wie wir uns das gedacht haben. Die App bauen - Build and run! 1. Stellt sicher, dass ihr links oben im Xcode folgende Einstellungen angewählt habt: Damit sagt ihr, dass euer Programm im Simulator gestartet werden soll und es der iphone Simulator sein soll. 2. Clickt auf,um das Programm zu bauen und zu starten. Wenn die Schritte in der rechten Spalte nachvollzogen sind, ist das erste Programm schon fertig. Es ist traditionell Hello World!, das Programm was jeder als erstes schreibt, egal welche Programmiersprache er lernt.