Datum: 25.08.09 Schule: Berufsbildende Schule 1, Mainz Klasse: FI07A FACHARBEIT Erstellen einer iphone-applikation zur Anzeige von News, die über das Internet übermittelt werden Verfasserin: Bearbeitungszeit: Fachleiter: J E N N I F E R S M I T H 1 J A H R D R. L E I N H O S H E I N K E
INHALT 1 Einleitung...Seite 3 2 iphone...seite 3 2.1 Steuerung...Seite 3 2.1.1 Beschleunigungssensor...Seite 4 2.1.2 Multi-Touch-Widescreen-Display...Seite 4 2.2 iphone-programmierung...seite 5 3 Die News-Applikation...Seite 5 4 Die TabBar...Seite 6 4.1 AboutTab...Seite 7 4.2 NewsTab...Seite 8 4.2.1 Der NavigationController...Seite 8 4.2.2 Laden und Anzeigen der News...Seite 9 4.2.2.1 UITableViewController...Seite 9 4.2.2.2 DataSource...Seite 10 4.2.2.3 Die News-Klasse...Seite 11 4.2.2.4 NSURLConnection...Seite 11 4.2.2.5 News-Detail...Seite 13 5 Zeit- und Kostenplan...Seite 14 6 Schluss...Seite 15 7 Quellenverzeichnis...Seite 16 8 Zusammenfassung...Seite 17 2
1 Einleitung Dieser Text befasst sich mit der Erstellung einer Applikation für das iphone und richtet sich an Programmierer, die bereits Erfahrung in der Programmiersprache Objective-C sammeln konnten und sich mit dem InterfaceBuilder auskennen. Vorkenntnisse in der Anwendungserstellung für das iphone sind keine Voraussetzung. Zunächst befasst sich der Text mit den generellen Möglichkeiten zur Steuerung des iphone und geht anschließend kurz auf den Interface Builder und die XIB-Datei ein. Der weitere Text erklärt dann schrittweise den Aufbau einer iphone-anwendung zum Anzeigen von News, die von einem Webserver empfangen wurden, und geht näher auf die verwendeten Elemente ein. 2 iphone Das iphone ist ein Mobiltelefon, das mit verschiedenen Multimedia- Anwendungungen ausgerüstet ist und über einen Internetzugang verfügt. Außer einem Ein- und Ausschaltknopf, zwei Tasten für die Lautstärkeregelung und einer Menütaste verfügt es über einen Touchscreen, der auch mehrere Berührungen gleichzeitig interpretieren kann. 2.1 Steuerung Zur Steuerung von Programmen auf dem iphone gibt es verschiedene Möglichkeiten. Neben dem 3,5 -Multi-Touch-Widescreen-Display verfügt es 3
über einen Beschleunigungs-, einen Annäherungs- und einen Umgebungslichtsensor. 2.1.1 Beschleunigungssensor Für Programme ist von den Sensoren eigentlich nur der Beschleunigungssensor von Interesse. Eingesetzt wird, dieser zum Beispiel um Eingaben wieder zu löschen, wenn das iphone kurz geschüttelt wird oder um die Ausrichtung der Anzeige anzupassen, wenn das Gerät gekippt wurde. Den größten Einsatz findet er bei Geschicklichkeitsspielen, um beispielsweise eine Kugel durch ein Labyrinth zu manövrieren. 2.1.2 Multi-Touch-Widescreen-Display Die Hauptsteuerung findet über das Touch-Display statt. Jede Berührung kann abgefragt und entsprechend behandelt werden. Da dies die einzige präzise Steuerungsmöglichkeit ist, sind nahezu alle Steuerelemente darauf angewiesen, diese korrekt interpretieren zu können. Hierzu gibt es einige vorgefertigte Klassen, die vom UIKit-Framework für das iphone zur Verfügung gestellt werden. Einige davon werden im folgenden Text noch ausführlicher behandelt. 4
2.2 iphone-programmierung Für die iphone-programmierung wird zum einen ein Intel-basierter Macintosh benötigt zum anderen ist es erforderlich das iphone-sdk zu installieren welches auf der Seite http://developer.apple.com/iphone/ erhältlich ist. Nach der Installation stehen in der Entwicklungsumgebung Xcode zur Projekterstellung verschiedene Vorlagen für iphone-programme zur Verfügung wie zum Beispiel "Tab Bar Application", "OpenGL ES Application", "Window-based Application" usw.. Die "Window-based Application" bietet lediglich ein Fenster zur Ausgabe sowie einen ApplicationDelegate und eignet sich somit für jede beliebige Anwendung. Erstellt man ein solches Projekt wird die AppDelegate- Klasse angelegt und eine XIB-Datei erstellt, welche sich nur geringfügig von den üblichen NIB-Dateien unterscheidet. Eine XIB-Datei ist eigentlich eine XML-Datei, die eine NIB-Datei repräsentiert und beim Kompilieren in eine schmalere Variante der NIB-Datei konvertiert wird. 3 Die News-Applikation Die News-Applikation soll über eine Tab-Bar, eine Navigation, ein TableView und mehrere Views verfügen. Zunächst wird ein Projekt mit dem Namen NewsReader erstellt, wobei als Vorlage eine Window-based Application ausgewählt wird. Ist das Projekt erstellt öffnet sich der Editor mit einer automatisch erstellten AppDelegate-Klasse NewsReaderAppDelegate. 5
4 Die TabBar Das unterste Steuerelement ist ein TabBar-Controller. Hierzu wird in der Header-Datei des NewsReaderAppDelegate ein UITabBarController mit Namen newsreadertabbarcontroller als IBOutlet deklariert und den Properties hinzugefügt. In der Implementierungsdatei wird dann der ApplicationDidFinishLaunching -Methode das View des deklarierten newsreadertabbarcontroller dem window als Subview hinzugefügt damit dieser bei Programmstart sichtbar ist. Als nächstes öffnet man die MainWindow.XIB-Datei, fügt dieser im InterfaceBuilder einen TabBar- Controller aus der Liste der Steuerelemente hinzu und verbindet das erstellte IBOutlet newsreadertabbarcontroller des NewsReaderAppDelegate mit dem neuen TabBarController-Objekt. Nach Auswählen des ersten TabBarItem wird über den Attributes-Inspector ein Bild aus dem Resources-Ordner gewählt und als Titel News gesetzt, das zweite TabBarItem erhält den Titel About. Abbildung 1 zeigt die Hierarchie und die Klassen innerhalb der TabBar. Abb. 1: Hierarchie des TabBar Controllers. 6
4.1 AboutTab Im AboutTab wird nur ein einziges View angezeigt, das Informationen über das Programm anzeigt. Zunächst wird wie für jedes View ein UIViewController angelegt und unter dem Namen AboutViewController gespeichert. Eine weitere Datei wird unter Verwendung der View XIB -Vorlage aus der User-Interface-Kategorie erstellt und erhält den Namen AboutView. Im Anschluss daran wird die AboutView.XIB im InterfaceBuilder geöffnet und die Höhe des Views auf 411 eingestellt, da die Höhe der TabBar von der Gesamthöhe abgezogen werden muss. Daraufhin werden die Eigenschaften des File s Owner im AttributesInspector angezeigt und die Klasse für diesen auf den AboutViewController gesetzt, da dieser das View verwalten soll. Der nächste Schritt ist dann das Verbinden des IBOutlet view mit dem Viewobjekt des AboutView um sicherzustellen, dass der ViewController das richtige View lädt. Damit nun auch Text in dem AboutView angezeigt wird zieht man einfach ein TextView aus der Liste der Steuerlemente passend in das View der XIB- Datei und ersetzt den Standardtext durch die Informationen über die Anwendung. Die AboutView.XIB-Datei kann daraufhin geschlossen und statt dessen die MainWindow.XIB-Datei erneut geöffnet werden. Damit auch der TabBarController weiß, welche Datei er laden soll wenn das AboutTab zur Anzeige ausgewählt ist, muss die Klasse des zweiten TabBarItems mit dem Titel About auf den AboutViewController eingestellt werden. Damit ist die Erstellung des AboutTab komplett abgeschlossen. Im nächsten Schritt muss das NewsTab angelegt werden. 7
4.2 NewsTab Das NewsTab wird mit einer NavigationBar ausgerüstet, damit zwischen den verschiedenen Hierarchie-Ebenen der Anzeige gewechselt werden kann. Eine UITableView soll die Titel der einzelnen NewsObjekte anzeigen und bei Auswahl einer News dann eine Ebene tiefer gehen und die Details dieser in einem neuen View anzeigen. Abbildung 2 soll diesen Aufbau verständlicher machen. Abb. 2: Hierarchie der Steuerelemente. 4.2.1 Der NavigationController Damit das erste Tab der TabBar eine NavigationBar erhält wird in Xcode eine neue Klasse NewsReaderNavigationController erstellt die von UINavigation- Controller abgeleitet ist. In dem AppDelegate wird diese nun als IBOutlet zu den Klassenvariablen hinzugefügt und als Property deklariert. Da die 8
Implementierungsdatei des AppDelegate diese Klasse kennen muss, wird die Header-Datei des NewsReaderNavigationController importiert. Im InterfaceBuilder wird der Attributes-Inspector des UITabBarControllers geöffnet und die Klasse des News -TabBarItems auf NavigationController gesetzt, da ein Wechsel zwischen verschiedenen Ebenen in der Hierarchie möglich sein soll. Die assoziierte Klasse des automatisch erstellten NavigationController wird dann im Identity-Inspector auf die zuvor in XCode erstellte Klasse NewsReaderNavigationController eingestellt. Das entsprechende IBOutlet des AppDelegate wird abschließend noch mit diesem verbunden. 4.2.2 Laden und anzeigen der News Um aktuelle Daten zu erhalten ist eine Internetverbindung notwendig über die diese empfangen werden können. Die Klasse NSURLConnection des Foundation-Framework ist ein geeignetes Werkzeug um mit geringem Aufwand Daten auf das iphone zu bekommen. Mit einem UITableView- Controller können diese Daten dann effektiv angezeigt und verwaltet werden, außerdem stellt dieser eine Funktion bereit, um auf das Auswählen einer Spalte durch den Benutzer zu reagieren. 4.2.2.1 UITableViewController Damit im NewsTab der TabBar außer der NavigationBar auch ein TableView enthalten ist wird eine Klasse NewsReaderTableViewController erstellt die von UITableViewController abgeleitet ist und das UITableView steuert. Diese wird zum Delegate und zur DataSource des UITableView das sie später enthält und muss deshalb die Protokolle für das UITableViewDelegate und die 9
UITableViewDataSource kennen und außerdem ein IBOutlet zu einem UITableView beinhalten. Des weiteren wird in der viewdidload -Methode der Titel des UITableViewController mit dem Befehl [SELF SETTITLE:@ NEWS ] gesetzt, der dann von der NavigationBar übernommen wird. Im InterfaceBuilder wird die Klasse des ViewControllers, der in dem NewsTab enthalten ist, auf den NewsReaderTableViewController gesetzt. Den Resources des Projekts wird als nächstes eine neue User-Interface-Datei vom Typ View XIB hinzugefügt, welche den Namen NewsReaderTableView erhält. Die Höhe des Views wird im InterfaceBuilder auf 346 gesetzt und ein TableView aus der Liste der Steuerelemente darauf gezogen. Die Klasse des File-Owners wird der NewsReaderTableViewController, da dieser das View verwaltet, und die Outlets newsreadertableview und view werden auf das TableView gesetzt. Zuletzt wird im Attributes-Inspector des NewsReader- TableViewController der MainWindow.XIB noch der NIB-Name für den zu ladenden Inhalt auf die NewsReaderTableView.XIB gesetzt. 4.2.2.2 DataSource Der Inhalt der in der Liste des NewsTab dargestellt werden soll wird aus einem Array geladen. Dieses wird mit dem Namen newsarray als NSMutableArray dem NewsReaderTableViewController und dessen Properties hinzugefügt, da dieser ja DataSource und Delegate des TableView ist. Um die Anzahl der Zellen des TableView der Anzahl der Items des NewsArray anzupassen wird der Wert den die tableview:numberofrowsinsection: - 10
Methode zurück gibt auf [NEWSARRAY COUNT] geändert. In der Methode tableview:cellforrowatindexpath: wird zudem der Zellentext mit dem Befehl [CELL TEXTLABEL].TEXT = [[NEWSARRAY OBJECTATINDEX:INDEXPATH.ROW] TITLE] gefüllt. Durch [CELL TEXTLABEL].NUMBEROFLINES = 0 wird die Anzahl der Zeilen dem Text angepasst, so dass auch mehrzeilige Titel komplett ausgegeben werden. 4.2.2.3 Die News-Klasse Für die News-Objekte wird eine schlichte Klasse News vom Typ NSObjekt abgeleitet und mit den NSString-Variablen title und text versehen, welche beide als Properties zu deklarieren sind. Dann wird eine Initialisierungsmethode initwithdictionary: erstellt, die ein NSDictionary erwartet. Dieses muss ebenfalls die Keys text und title beinhalten und weist deren Werte nach einer kurzen Gültigkeitsprüfung den beiden Klassenvariablen zu. 4.2.2.3 NSURLConnection Da die News möglichst aktuell sein sollten werden diese durch das Internet geladen, wofür die Klasse NSURLConnection des Foundation-Framework verschiedene Funktionen bereithält. Ebenfalls in der viewdidload -Methode des NewsReaderTableViewController wird zuerst ein NSRequest request mittels der Methode initwithurl: initialsiert. Der Server hinter der URL muss dann eine XML-Datei zurückgeben die die nötigen Informationen für die Newsobjekte enthält. Der Request wird über die Methode [NSURLCONNECTION CONNECTIONWITHREQUEST:REQUEST DELEGATE:SELF] gestartet und die Klasse wird um die Methoden des NSURLController connection:didfailwitherror:, 11
connection:didreceivedata: und connection:didfinishloading: erweitert. Erstere schreibt einfach die Fehlermeldung in die Logdatei. Die zweite Methode erhält je nach größe der Daten mehrere einzelne Datenpakete bis dann die letzte Methode aufgerufen wird. Um die Daten zu sammeln wird ein NSMutableData-Objekt angelegt und initialisiert welchem dann in der connection:didreceivedata: -Methode die Datenpakete zugewiesen werden. Beim Aufruf der connection:didfinishloading: -Methode wird das NSMutableData-Objekt dann an ein NSDictionary übergeben und anschließend freigegeben und neu initialisiert damit bei einem weiteren Datentransfer das NSMutableData-Objekt wieder leer ist und die neuen Daten nicht einfach hinten drangehängt werden. Das NSDictionary wird der Initialisierungsmethode der News- Klasse übergeben und das damit erstellte News-Objekt dem newsarray hinzugefügt. Damit die Liste mit den News aktualisiert wird muss abschließend noch der Befehl [NEWSREADERTABLEVIEW RELOADDATA] aufgerufen werden. Abbildung 3 zeigt die Anwendung nach dem Kompilieren und Starten des Projektes. Abb.3: Anwendung nach dem Kompilieren und Starten. 12
4.2.2.4 News-Details Damit beim Berühren einer Spalte auf dem Touchscreen eine Detailansicht der gewählten News erscheint kann die tableview:didselectrowatindexpath: Methode genutzt werden, in der man z. B. ein UIView oder einen UIViewController in die View-Hierarchie übergeben kann. Zur Anzeige der News-Details wird also zunächst ein weiterer UIViewController erstellt, der den Namen NewsDetailViewController erhält sowie eine weiteres XIB-Datei NewsDetail.XIB, die den Resources hinzugefügt wird. Im InterfaceBuilder wird dann die Klasse des File s-owner der NewsDetail.XIB auf den NewsDetailViewController und das view-outlet auf das View der NewsDetail.XIB gesetzt. In das View wird zuletzt noch ein TextView gezogen in dem später der Text der News angezeigt wird. Die NewsReaderTableViewController-Klasse erhält noch eine weitere Variable vom Typ NewsDetailViewController, die zudem eine Property ist. Die entsprechende Header-Datei sowie die Header-Datei des NewsReader- AppDelegate werden in der Implementierungsdatei des NewsReader- TableViewController importiert und in der Methode tableview:didselectrowatindexpath: wird eine Instanz des NewsDetail- ViewController für die Variable newsdetailviewcontroller mit dem Befehl [[NEWSREADERTABLEVIEWCONTROLLER ALLOC] INITWITHNIBNAME: @ NEWSDETAILVIEW BUNDLE:NIL] erstellt. Damit nicht bei jedem Aufruf eine neue Instanz erstellt wird kommt die Initialisierung in eine If-Abfrage, die prüft, ob diese bereits existiert. In einer weiteren Zeile außerhalb der If-Abfrage wird der Titel des NewsDetailViewController auf die title-variable des aufgerufenen Newsobjektes aus dem newsarray gesetzt, damit in der NavBar der Titel der aufgerufen News erscheint. Zuletzt muss nun noch der neue newsdetailviewcontroller dem TabBar-Stack 13
hinzugefügt werden, wofür durch den Befehl NEWSREADERAPPDELEGATE *DELEGATE = [[UIAPPLICATION SHAREDAPPLICATION] DELEGATE] zunächst das Delegate der Applikation auf eine neue Variable vom Typ NewsReader- AppDelegate gespeichert wird und anschließend auf den newsreader- NavigationController des Delegate die pushviewcontroller:animated: - Methode aufgerufen wird, wobei für pushviewcontroller der newsdetailview- Controller und für animated YES übergeben wird. 5 Zeit- und Kostenplan Arbeitskraft TabBar AboutTab NavigationController News vom Server laden Und anzeigen Newsdetails anzeigen Script Serverseite zum Senden der News Zwischen- und Abschlusstests Gesamt Zeit 10 min 10 min 10 min 20 min 10 min 30 min 1 h, 30 min Kosten je angebrochene Stunde: 5 Euro Gesamtkosten: 10 Euro 14
6 Schluss Der Aufbau einer iphone-applikation, die sowohl eine TabBar, eine Navigation, als auch verschiedene Views zur Anzeige verwendet muss eine bestimmte Aufbau-Reihenfolge einhalten. Das alles verwaltende Element ist hier die TabBar, da sie auf alle Inhalte Einfluss nehmen können muss, wenn von einem Bereich zum nächsten gewechselt wird. Das nächste Element, das eine gewisse Möglichkeit zur Verwaltung von Inhalten haben muss ist die Navigation, da diese zwischen den Hierarchie-Ebenen des Inhalts hin- und herwechseln muss. Die letzte Kontroll-Ebene wird dann nur noch von den ViewControllern belegt, die einzig Kontrolle über die Views haben, die sie verwalten. 15
7 Quellenverzeichnis Literaturquellen: [1] Big Nerd Ranch Weblog Cocoa Programming for Mac OS X 3 rd Edition http://weblog.bignerdranch.com/?p=47, 12.08.09, 20:23 [2] iphone Dev Center Apple Developer Connection http://developer.apple.com/iphone/, 20.08.09, 13:43 [3] iphone Reference Library http://developer.apple.com/iphone/library/navigation/index.html, 20.08.09, 13:44 Bildquellen: [Deckblatt] Screenshot des iphone-simulator, Jennifer Smith, 23.08.09 [Abb. 1] Screenshot aus dem InterfaceBuilder, Jennifer Smith, 23.08.09 [Abb. 2] Selbsterstellte Zeichnung, Jennifer Smith, 23.08.09 [Abb. 3] Screenshot des iphone-simulator, Jennifer Smith, 23.08.09 16
8 Zusammenfassung Um eine iphone-applikation zur Anzeige von News, die über das Internet übermittelt werden, zu erstellen sind nur wenige Steuerelemente nötig. Eine TabBar regelt die Steuerung zwischen verschiedenen Bereichen, ähnlich wie Register, eine Navigation erlaubt das Navigieren innerhalb der Hierarchieebenen eines Registers und ein TableView bietet eine Struktur, die eine Auflistung der verschiedenen News erlaubt. Die News selbst werden über die NSURLConnection-Klasse durch eine Verbindung zu einem Server empfangen und die Auswahl eines News-Objektes in der TableView zeigt eine Detailansicht der ausgewählten News, die durch ein einfaches View dargestellt wird, welches von einem ViewController gesteuert wird. 17
Summary The research paper deals with the development of an iphone-application that can request a plist of newsobjects and displays them on the screen of the iphone. While it goes step-by-step through the implementation of all elements, it explains them, the hierarchy that is needed to keep within these elements and tells how they work together. It also describes how to create a tableview that represents parts of objects and how to load a detailed view of them when a user selected an item of the list. As an additional feature it shows how to set up a tabbar to change between two or more sections of an application. 18