© Zühlke 2013 Oliver Brack Workshop 6 (ws6C) native Entwicklung für mobile Geräte MonoTouch (iOS) 18. März 2013 Folie 1

© Zühlke 2013 Unser Plan (1/2) (Romano) Einführung, «Mega CRM», Aufsetzen (Romano) Einführung in Windows Phone 8 Entwicklung (Romano) Umsetzung «Mega CRM» mit Windows Phone (Oliver) Einführung in Mono-Entwicklung (Oliver) Umsetzung «Mega CRM» mit MonoTouch (Oliver) Umsetzung «Mega CRM» mit MonoDroid Kein Workshop (Ostern) (Michael) Einführung in iOS Entwicklung (Michael) Umsetzung «Mega CRM» mit iOS (Michael) Umsetzung «Mega CRM» mit iOS Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 2

© Zühlke 2013 Unser Plan (2/2) (Philipp) Einführung in Android (Philipp) Umsetzung «Mega CRM» mit Android Kein Workshop (Projektwoche) (Philipp) Umsetzung «Mega CRM» mit Android (Matthias) Einführung in PhoneGap (Matthias) Umsetzung «Mega CRM» mit PhoneGap (alle) Präsentation Eurer Arbeit Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 3

© Zühlke 2013 Übersetzungen – In Musterlösung vorhanden App Store – Thema bei nativer iOS-Entwicklung (Michael Mühlebach) UI rudimentär – Verfeinerung im nativen Workshop – Selbständiges Finish für Präsentation Nicht alle CRUD-Operationen – Zeitbudget – Musterlösung als Beispiel – Selbständiges Finish für Präsentation Zweiter Workshop Einschränkungen Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 4

© Zühlke 2013 «Mega CRM» auf iOS mit Mono Service konsumieren – ServerAccess (Business Layer, shared Code) – ServiceStack Navigation in iOS Kundenliste anzeigen – Tabellen in iOS – Hintergrund-Tasks (TPL) Kunde anzeigen – MonoTouch.Dialog Kunde bearbeiten Kunde löschen Kunde hinzufügen Kunde suchen (filtern) Zweiter Workshop Ziele Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 5

© Zühlke 2013 Zweiter Workshop Agenda Einführung (5’) Repetition/Rückblick (5’) «Mega CRM» (30’) – Service prüfen – ServerAccess mit ServiceStack – Tabellen in iOS Pause (5’) «Mega CRM» (40’) – Hintergrund-Tasks – MonoTouch.Dialog – Kunde anzeigen – Kunde bearbeiten Retrospektive und Ausblick (5’) – War Form gut? Beibehalten? Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 6

© Zühlke 2013 Karten-App (iOS und Android) – max: selber fertig stellen – min: Musterlösungen verstehen – MonoTouch.FHNW.Map.zip MonoTouch.FHNW.Map.zip – MonoDroid.FHNW.Map.zip MonoDroid.FHNW.Map.zip Installationen und Konfigurationen – Android-Emulator Repetition/Rückblick 18. März 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver BrackFolie 7

© Zühlke – Gruppen 1-8 – Vorsicht bei gegenseitigen Änderungen der Kundendaten! RESTful API mit JSON: –[{"Id":1,"Title":"Mrs","FirstName":"Lilliane","MiddleName ":"Catrina","LastName":"Wyss","Company":"Volkswagen","Web Page":" (1418) ","FaxNumber":"+21 (4004) ","MobileNumber":"+91 (6007) ","Street":"Lake Street ","State":"","PostalCode":"42481","Country":"Western Sahara","Department":"NPP","Office":"225","Profession":"w elder","ManagersName":"Leopoldo Keller","AssistantName":"Agnes Weber","Nickname":"The Unpredictable","Birthday":"/Date( )/"}] Service Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 8

© Zühlke 2013 Startprojekt mit ServerAccess – 10_MonoTouch.CustomerManager.zip 10_MonoTouch.CustomerManager.zip ServiceStack übernimmt Verbindungsaufbau und JSON- Serialisierung: –var restClient = new JsonServiceClient(" var customers = restClient.Get >("/customer"); – Customer-Klasse aus Service-Projekt (C#) Service-Zugriff analysieren: – Ausgabe auf Kommandozeile: Console.WriteLine() – Debugging mit Breakpoint ServiceStack Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 9

© Zühlke 2013 NavigationController als Startview – ViewController mit Kundenliste – ViewController mit Kundendetails – Back-Button als Navigationselement UINavigationController erstellen und als Startview zuweisen UIViewController für Kundenliste erstellen und in NavigationController «pushen» Navigation in iOS Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 10

© Zühlke 2013 Tabelle als universelles Gestaltungselement in iOS – Einstellungen – Apps (z.B. Facebook) – Zellen: Vorgegebene Layouts oder frei konfigurierbar Daten in Tabelle abfüllen – Eigene TableViewSource – Ableitung von UITableViewSource – Überschreiben der gewünschten Methoden –RowsInSection() –GetCell() Kundenliste als Tabelle anzeigen – UITableView in Xcode hinzufügen (inkl. Outlet) – Eigene TableViewSource-Klasse erstellen – Kunde (Name/Vorname) mit vorgegebenem Layout ( UITableViewCellStyle.Default ) – Kundendaten entgegen nehmen und TableViewSouce instanziieren Tabellen in iOS (1/2) Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 11 Tabellenzelle

© Zühlke 2013 Überschriften anzeigen – Anfangsbuchstaben der Nachnamen –TitleForHeader() Fusszeile anzeigen – Anzahl Kunden –TitleForFooter() Index für Schnellzugriff – Anfangsbuchstaben der Nachnamen –SectionIndexTitles() Zeile selektieren – Kundendetails anzeigen (neue View) –RowSelected() Zwischenlösung – 20_MonoTouch.CustomerManager.zip 20_MonoTouch.CustomerManager.zip Tabellen in iOS (2/2) 18. März 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver BrackFolie 12

© Zühlke 2013 Kundendaten im Hintergrund laden – UI nicht blockieren – Benutzer kann lokal weiterarbeiten Task Parallel Library (TPL) Methode im Hintergrund ausführen –Task.Factory.StartNew(DoSomethingOnBackgroundThread); UI aktualisieren (aus dem Hintergrund) –InvokeOnMainThread(delegate { DoSomethingOnUiThread(); }); Hintergrund-Tasks mit TPL Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 13

© Zühlke 2013 MonoTouch.Dialog – Fester Bestandteil von Xamarin 2.0 – Open Source: – UI aufgrund von Daten erstellen (lassen) – Automatisches Data Binding Kunde anzeigen – Klasse «Customer» könnte benutzt werden – Besser: UiCustomer erstellen – Copy-Konstruktor mit Customer als Argument Kunde bearbeiten – Weitere Klasse UiEditCustomer erstellen – Attribute zur Steuerung der Eingabe-Möglichkeiten: [Entry(AutocapitalizationType = UITextAutocapitalizationType.Words) public string Street { get; set; } MonoTouch.Dialog Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 14

© Zühlke 2013 Kunde löschen Kunde hinzufügen Kunde suchen (filtern) Mehrsprachigkeit Progress-Overlay während Serverzugriff Kundenadresse auf Karte visualisieren – Wegbeschreibung ab aktuellem Standort (GPS) Kundenfoto mit Kamera aufnehmen Kennzahlen des Kunden visualisieren – evtl. Chart Library einsetzen Kunde als Kontakt hinzufügen Ausbaumöglichkeiten 18. März 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver BrackFolie 15

© Zühlke 2013 War gewählte Form gut? Vorzeigen am Beamer Alle arbeiten synchron mit Bilaterale technische Lösung, wenn nötig Beibehalten oder Modusänderung? … Retrospektive Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 16

© Zühlke 2013 Seid Ihr bereit für Mono? Dritter Workshop ( ) «Mega CRM» für iOS – max: selber fertig stellen – min: Musterlösung verstehen – 99_MonoTouch.CustomerManager.zip 99_MonoTouch.CustomerManager.zip Android-Emulator einrichten und testen – Beispiel-App (Template) muss laufen! Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 17

© Zühlke 2013 Links Präsentationen Source Code \\Fsemu18.edu.ds.fhnw.ch\e_18_data11$\E1862_U nterrichte_I\E1862_6iCa\ws6C\ \\Fsemu18.edu.ds.fhnw.ch\e_18_data11$\E1862_U nterrichte_I\E1862_6iCa\ws6C\ Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Oliver Brack18. März 2013Folie 18