© Zühlke 2013
Romano Roth
Workshop 6 (ws6C) native Entwicklung für mobile GeräteLektion 5-6: Mega CRM
25. Februar 2013Folie 1 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Unser Plan
18.2 (Romano) Einführung, «Mega CRM», Aufsetzen
25.2 (Romano) Einführung in Windows Phone 8 Entwicklung
04.3 (Romano) Umsetzung «Mega CRM» mit Windows Phone 8
11.3 (Oliver) Einführung in Mono Entwicklung
18.3 (Oliver) Umsetzung «Mega CRM» mit MonoTouch
25.3 (Oliver) Umsetzung «Mega CRM» mit MonoDroid
01.4 Kein Workshop (Ostern)
08.4 (Michael) Einführung in iOS Entwicklung
15.4 (Michael) Umsetzung «Mega CRM» mit iOS
22.4 (Michael) Umsetzung «Mega CRM» mit iOS25. Februar 2013 Folie 2 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Lektion 5-6
• Seid Ihr bereit für Mono?
• Seiten Navigation
• ApplicationBar
• Mega CRM mit Windows Phone 8– Add– Edit– Delete
• Ausblick (5’)
• Retrospective (5’)– Was war gut?– Was kann verbessert werden?
25. Februar 2013 Folie 3 von 10
© Zühlke 2013
Seid Ihr bereit für Mono?11.03.13 – 25.03.13
Allgemein
• Apple Rechner mit OS X 10.7.5– Xcode 4.6 (über App Store)– Xamarin for Mac (http://xamarin.com/download)
• PC mit Windows 7 (optional, empfohlen)– Visual Studio 2010 (wenn Entwicklung in VS statt
Xamarin Studio gewünscht, empfohlen)– Xamarin for Windows (http://xamarin.com/download)
• Xamarin Account– Begin a 30-day-Trial: http://
docs.xamarin.com/guides/cross-platform/getting_started/beginning_a_xamarin_trial (nötig, um App im Emulator laufen zu lassen)
• Hardware (optional)– iOS-Gerät (iPhone, iPod Touch)– Android-Gerät
Folie 4 von 10
© Zühlke 2013
Seid Ihr bereit für Mono?11.03.13 – 25.03.13
Erster Workshop (11.03.13)
• Google APIs für Android 4.0 (API14)– http://docs.xamarin.com/guides/android/platform
_features/maps_and_location/part_2_-_maps_api Kapitel «Google APIs Add-On»
• Google Maps API Key– Für gewünschte Android-Entwicklungsplattform
(Windows oder OS X):http://docs.xamarin.com/guides/android/platform_features/maps_and_location/obtaining_a_google_maps_api_key
Folie 5 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Navigation
• Frame– Toplevel– System Tray– ApplicationBar– Beinhaltet eine Page
• Page– Hat einen Titel und Content
Area
25. Februar 2013 Folie 6 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Page Navigation
• XAML Apps auf WP8 benutzen ein Seiten-Basiertes Navigation Model (Gleich wie auf dem Web)– URI– Stateless
• Erste Seite
• Zweite Seite
• Hardware Button macht das gleiche wie NavigationService.GoBack();
25. Februar 2013 Folie 7 von 10
private void ButtonBase_OnClick(object sender, RoutedEventArgs e){ NavigationService.Navigate(new Uri("/Secondpage.xaml", UriKind.Relative));}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e) { NavigationService.GoBack(); }
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Demo
25. Februar 2013 Folie 8 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Daten zwischen Pages
• Via Query Strings
• Erste Seite
• Zweite Seite
25. Februar 2013 Folie 9 von 10
private void ButtonBase_OnClick(object sender, RoutedEventArgs e) { var id = _textBox.Text; NavigationService.Navigate(new Uri("/SecondPage.xaml?id=" + id, UriKind.Relative)); }
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); var id = string.Empty; if (NavigationContext.QueryString.TryGetValue("id", out id)) { _textBox.Text = id; } }
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Demo
25. Februar 2013 Folie 10 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Aufgabe
• Wenn ein Kunde in der Liste selektiert wird, soll der Kunde auf einer neuen Seite im Detail angezeigt werden.
• Lösungs Ansatz:– MainPage:
– Liste SelectionChanged – Neue Seite erstellen CustomerDetailPage
– OnNavigatedTo
• Link zu Sourcen– WP8
– Start: MEGA_CRM_2013_03_04_WP8_start.zip– Lösung:
MEGA_CRM_2013_03_04_WP8_middle.zip– WP7
– Start: MEGA_CRM_2013_03_04_WP7_start.zip– Lösung:
MEGA_CRM_2013_03_04_WP7_middle.zip25. Februar 2013 Folie 11 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
ApplicationBar
Region um Buttons darzustellen
• Bis zu 4 Buttons
• Menu Items (swipe up)
• Icons (weiss auf transparentem Hintergrund)
• Kann im XAML oder Code definiert werden.
25. Februar 2013 Folie 12 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Demo: ApplicationBar
25. Februar 2013 Folie 13 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Aufgabe
• Neuer Kunde hinzufügen, Kunde editieren, Kunde löschen.
• Lösungs Ansatz:– MainPage:
– ApplicationBar App.CustomerUiService.NewCustomer();
– CustomerDetailPage– ApplicationBar
App.CustomerUiService.SaveSelectedCustomer();, App.CustomerUiService.DeleteSelectedCustomer();
• Link zu Sourcen– WP8
– Start: MEGA_CRM_2013_03_04_WP8_middle.zip– Lösung: MEGA_CRM_2013_03_04_WP8_end.zip
– WP7– Start: MEGA_CRM_2013_03_04_WP7_middle.zip– Lösung: MEGA_CRM_2013_03_04_WP7_end.zip
25. Februar 2013 Folie 14 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Lösung
25. Februar 2013 Folie 15 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Ausblick: Weiterentwicklung
– Suche– Verbesserte Darstellung der Daten
– Pivot– LongListSelector – Windows Phone Toolkit
– DateTime Picker– Transitions Effects
– Orientation– Tiles & Lock Screen – Gruppieren– Auf mehrere Sprachen übersetzen– Photo hinzufügen– Email versenden– Zu Kontakten hinzufügen– Karte darstellen– Sprache Kommandos & Vorlesen– Push Notifications– …
25. Februar 2013 Folie 16 von 10
© Zühlke 2013Workshop 6 (ws6C) native Entwicklung für mobile Geräte | Romano Roth
Retrospective
• Was war gut?
• Was kann verbessert werden?
25. Februar 2013 Folie 17 von 10