.NET 2 Seite 1 | 25

.NET 2 Praktikum Xamarin

1. Ziele des Praktikums: Installation des Xamarin Frameworks

Android SDK Manager einrichten

Emulatoren mit Android-Device-Manager erstellen

Erstellen einer Android-Xamarin Anwendung mit mehreren Fenstern

Anwendung mit Android Debug Brigde (adb) auf Handy deployen

2. Vorbedingungen Befolgen Sie die Anweisungen Schritt für Schritt und exakt, da Abweichungen schnell dazu führen, dass Feh-ler auftreten.

Dieses Praktikum sollte auf einem Windows-Betriebssystem ausgeführt werden. Es wird das Visual Studio 2017, sowie der .NET Standard 2.0 verwendet. Zusätzlich sollte ein Android-Handy und ein USB-Kabel zur Verfügung stehen, um die Anwendung auf das Handy zu deployen.

Sie benötigen in Visual Studio (hier 2017) die entsprechenden Komponenten um Xamarin-Anwendungen zu erstellen. Falls diese noch nicht installiert sind, können Sie diese im Menu über "Tools -> Get Tools and Fea-tures…" auswählen:

.NET 2 Seite 2 | 25

Dies startet den "Visual Studio Installer". Wählen Sie "Mobile-Entwicklung mit .NET" aus und aktualisieren Sie Ihre Entwicklungsumgebung.

3. Xamarin.Forms Projekt erstellen Erstellen Sie in Visual Studio ein neues Projekt, in welchem wir Xamarin.Forms verwenden. Achten Sie da-rauf, dass der Pfadname nicht zu lange wird!

Jetzt muss ausgewählt werden, auf welchen Plattformen wir das Projekt einsetzen wollen – wir wählen And-roid aus (für iOS wir ein zusätzlicher Rechner mit macOS benötigt, für UWP muss das korrespondierende .NET Core NuGet Package in Visual Studio installiert sein).

Mittels der Code Sharing Strategie wird festgehalten, ob

wir den auf allen Plattformen verfügbaren .NET Standard (hier in der Version 2.0) als gemeinsames Projekt verwenden möchten (maximale Kompatibilität über verschiedene Plattformen),

.NET 2 Seite 3 | 25

oder ob wir mittels Shared Projekt mehrere Anwendungs-Projekte mit unterschiedlicher Zielplatt-form erstellen und den gemeinsamen Code im Shared Project ablegen (ein Shared Project wird nicht selbstständig kompiliert, es existiert lediglich als Gruppierung von Quellcodedateien, die in andere Projekte eingebunden werden können). Zusätzlich kann mittel Compiler Direktiven im Shared Project Einfluss genommen werden, welche Statements ausgeführt werden (z.B. #if __ANDROID__).

Visual Studio erzeugt nun 2 Projekte, das braucht etwas Geduld, dauert etwas. Warten Sie bis Visual Studio wieder auf ihre Eingaben reagiert:

.NET 2 Seite 4 | 25

Nach einer guten Minute sollte sich Visual Studio wie im Bild unten präsentieren. Im Bild unten ist die Refe-renz des Android-Projektes XamarinFormsProjekt.Android auf das .NET Standard-Projekt XamarinFormsPro-jekt ersichtlich. In den plattformspezifischen Projekten haben Sie vollen Zugriff auf die APIs der jeweiligen Umgebung (z.B. Android, iOS) und können dort den plattformspezifischen Code erstellen.

Betrachten Sie kurz die Properties der Projekte.

.NET 2 Seite 5 | 25

Visual Studio enthält einen Android SDK Manager1, mit dem Sie Android SDK-Tools, Plattformen und andere Komponenten herunterladen können, die Sie für die Entwicklung von Xamarin.Android-Anwendungen benö-tigen (es ersetzt den stand-alone SDK Manager von Google, der veraltet ist.). Stellen Sie sicher, dass das ge-setzte Android SDK des Projektes in Visual Studio verfügbar ist. Falls es fehlt – installieren… (im Beispiel wird Android 8.1 (API level 27) verwendet).

1 Bei Problemen wie man den Android SDK Manager zum Herunterladen und Installieren von Android SDK Tools und Komponenten verwendet, sowie zu den Android-Emulatoren finden Sie hier: https://docs.microsoft.com/en-us/xama-rin/android/get-started/installation/

.NET 2 Seite 6 | 25

.NET 2 Seite 7 | 25

Stellen Sie sicher, dass ein Android-Emulator verfügbar ist. Dann sollten Sie Hyper-V und Windows-Hypervi-sion-Plattform und aktivieren.

Installieren Sie jetzt den/die gewünschten Emulatoren:

.NET 2 Seite 8 | 25

Fügen Sie ein neues Device mittels "+ Neu" hinzu.

Im nachfolgenden Dialog erstellen Sie ein neues Device. Achten Sie auf die korrekte Android-Version (pas-send zu den installierten Plattformen):

.NET 2 Seite 9 | 25

Klicken Sie erstellen. Das Erstellen dauert je nachdem etwas länger. Warten Sie unbedingt bis im rechten Teil des Fensters der Start-Button aktiv ist!

Starten Sie den Emulator, klicken Sie auf Start. Haben Sie wieder Geduld (zwei drei Minuten), das Aufstarten dauert wieder etwas. Unterbrechen Sie den Vorgang auf keinen Fall – warten Sie bis im "Android Device Ma-nager" der Beenden-Button aktiv ist (Emulation NICHT stoppen). Die Emulation sollte jetzt etwas wie folgt aussehen:

.NET 2 Seite 10 | 25

Wir lassen die Emulation laufen – wir werden diese in einem Moment einsetzten. Kehren Sie ins Visual Stu-dio zurück. Sie sollten Ihre Android-Devices jetzt in der Auswahlliste haben, wählen Sie das Device aus. Lei-der entsprechen sich die Namen des Android-Device-Managers und im Visual-Studio nicht. Den Visual-Stu-dio-Namen können Sie im Fenster der Emulation entnehmen.

Jetzt starten wir unser leeres Projekt "Debug -> Start Without Debugging". Wieder ist Geduld gefragt. Nach einer gefühlten Ewigkeit sehen wir unsere Anwendung in der Emulation. Die Anwendung beinhaltet nach dem Aufsetzten nur eine Welcome-Message:

Jetzt ist es Zeit, unsere Anwendung mit etwas Code zu erweitern. Wir möchten, dass nach dem Drücken des Buttons im Button angezeigt wird, wie oft der Button gedrückt wurde.

.NET 2 Seite 11 | 25

Lassen Sie den Emulator links liegen (laufen lassen) und wechseln Sie in die MainPage.xaml im Visual-Studio. Ergänzen Sie den Text wie folgt (nutzen Sie die von IntelliSense vorgeschlagenen Optionen):

Falls Sie den Click-Event mittels IntelliSense erstellt haben, wird der Code-Behind in MainPage.xaml.cs automatisch erstellt, ansonsten müssen Sie den Event jetzt händisch ergänzen:

.NET 2 Seite 12 | 25

Ergänzen Sie nun den Button_Clicked-Event wie folgt:

Starten Sie die Solution mit "Debug - > Start Without Debugging". Sie sollten jetzt den Button sehen und nach ein paar Mal klicken den ergänzten Text im Button:

.NET 2 Seite 13 | 25

4. Einfache Anwendung zum Speichern von Text Ändern Sie die MainPage.xaml wie folgt (siehe auch https://docs.microsoft.com/de-de/xamarin/get-

started/quickstarts/single-page?pivots=win-vs2017):

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinFormsProjekt" x:Class="XamarinFormsProjekt.MainPage"> <StackLayout> <Label Text="Notes" HorizontalOptions="Center" FontAttributes="Bold" /> <Editor x:Name="editor" Placeholder="Enter your note" HeightRequest="100" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Text="Save" Clicked="OnSaveButtonClicked" /> <Button Grid.Column="1" Text="Delete" Clicked="OnDeleteButtonClicked"/> </Grid> </StackLayout> </ContentPage>

.NET 2 Seite 14 | 25

Erweitern Sie MainPage.xaml.cs wie folgt

using System; using System.IO; using Xamarin.Forms; namespace XamarinFormsProjekt { public partial class MainPage : ContentPage { string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt"); public MainPage() { InitializeComponent(); if (File.Exists(_fileName)) { editor.Text = File.ReadAllText(_fileName); } } void OnSaveButtonClicked(object sender, EventArgs e) { File.WriteAllText(_fileName, editor.Text); } void OnDeleteButtonClicked(object sender, EventArgs e) { if (File.Exists(_fileName)) { File.Delete(_fileName); } editor.Text = string.Empty; } } }

.NET 2 Seite 15 | 25

Speichern Sie die Änderungen und starten Sie die Anwendung wieder. Wir haben jetzt eine Mini-Anwendung

mit der man einen Text in einem lokalen File speichern kann.

.NET 2 Seite 16 | 25

5. Mehrere Seiten anlegen Wir werden im Folgenden zwei Neue Xaml-Seiten anlegen, eine zum Anzeigen aller Notizen (NotesPage) und

eine Seite zum Erfassen einer Notiz (NoteEntryPage). Die alte Seite MainPage wird im Verlauf der Änderun-

gen gelöscht. Zusätzlich wird ein Modell (Klasse) erstellt, in welcher die Notizen als Objekte angelegt werden.

a. Modell erstellen Erzeugen Sie im Projekt XamarinFormsProjekt einen neuen Ordner (Add -> NewFolder) namens Models.

Fügen Sie dem Ordner Models eine neue Klasse namens Note hinzu (Add -> NewItem).

Erweitern Sie die neu erstellte Klasse Note mit den folgenden drei Properties:

public string Filename { get; set; } public string Text { get; set; } public DateTime Date { get; set; }

Mittels Objekten der Klasse Note werden wir die Daten jeder Notiz speichern.

.NET 2 Seite 17 | 25

b. Eingabeseite Notizen erstellen Erzeugen Sie im Projekt XamarinFormsProjekt ein neues Item (Content Page) mittels Rechtsklick (Add -> New Item):

Dadurch wird eine neue Seite namens NoteEntryPage zum Root-Ordner des Projekts hinzugefügt. Diese Seite

ist die zweite Seite in der Anwendung:

Ersetzten Sie das gesamte Tag <ContentPage.Content> mit folgendem Inhalt:

<StackLayout Margin="20"> <Editor Placeholder="Enter your note" Text="{Binding Text}" HeightRequest="100" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Text="Save" Clicked="OnSaveButtonClicked" /> <Button Grid.Column="1" Text="Delete" Clicked="OnDeleteButtonClicked"/> </Grid> </StackLayout>

.NET 2 Seite 18 | 25

Das ergibt:

Beachten Sie, dass der Editor Data-Binding verwendet, um sich an die Texteigenschaft des Note-Modells zu binden (das ist ziemlich böse versteckt…).

Ergänzen Sie NoteEntryPage.xaml.cs wie folgt:

using System; using System.IO; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XamarinFormsProjekt.Models; namespace XamarinFormsProjekt { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class NoteEntryPage : ContentPage { public NoteEntryPage () { InitializeComponent (); } async void OnSaveButtonClicked(object sender, EventArgs e) { var note = (Note)BindingContext; if (string.IsNullOrWhiteSpace(note.Filename)) { // Save var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt"); File.WriteAllText(filename, note.Text); } else { // Update File.WriteAllText(note.Filename, note.Text); } await Navigation.PopAsync(); } async void OnDeleteButtonClicked(object sender, EventArgs e) { var note = (Note)BindingContext; if (File.Exists(note.Filename)) { File.Delete(note.Filename); } await Navigation.PopAsync(); } } }

.NET 2 Seite 19 | 25

Dieser Code speichert eine Note-Instanz, die eine einzelne Notiz repräsentiert, im BindingContext der Seite. Wenn der Save-Button gedrückt wird, wird der OnSaveButtonClicked-Event-Handler ausgeführt, der entwe-der den Inhalt des Editors in einer neuen Datei mit einem zufällig generierten Dateinamen oder in einer be-stehenden Datei speichert. In beiden Fällen wird die Datei im lokalen Anwendungsdatenordner der Anwen-dung gespeichert. Dann navigiert die Methode zurück zur vorherigen Seite. Wenn der Delete-Button ge-drückt wird, wird der OnDeleteButtonClicked-Event-Handler ausgeführt, der die Datei löscht, sofern sie existiert, und zur vorherigen Seite zurückkehrt.

c. Übersichtsseite Notizen erstellen Erzeugen Sie im Projekt XamarinFormsProjekt ein neues Item (Content Page) mittels Rechtsklick (Add -> New Item):

Dadurch wird eine neue Seite namens NotesPage zum Root-Ordner des Projekts hinzugefügt. Diese Seite wird die Hauptseite der Anwendung sein.

Ersetzten Sie das gesamte Tag <ContentPage.Content> mit folgendem Inhalt:

<ContentPage.ToolbarItems> <ToolbarItem Text="+" Clicked="OnNoteAddedClicked" /> </ContentPage.ToolbarItems> <ListView x:Name="listView" Margin="20" ItemSelected="OnListViewItemSelected"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Text}" Detail="{Binding Date}" /> </DataTemplate> </ListView.ItemTemplate> </ListView>

.NET 2 Seite 20 | 25

Das ergibt:

.NET 2 Seite 21 | 25

Ergänzen Sie NotesPage.xaml.cs wie folgt:

using System; using System.Collections.Generic; using System.IO; using System.Linq; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XamarinFormsProjekt.Models; namespace XamarinFormsProjekt { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class NotesPage : ContentPage { public NotesPage () { InitializeComponent (); } protected override void OnAppearing() { base.OnAppearing(); var notes = new List<Note>(); var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt"); foreach (var filename in files) { notes.Add(new Note { Filename = filename, Text = File.ReadAllText(filename), Date = File.GetCreationTime(filename) }); } listView.ItemsSource = notes .OrderBy(d => d.Date) .ToList(); } async void OnNoteAddedClicked(object sender, EventArgs e) { await Navigation.PushAsync(new NoteEntryPage { BindingContext = new Note() }); } async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e) { if (e.SelectedItem != null) { await Navigation.PushAsync(new NoteEntryPage { BindingContext = e.SelectedItem as Note }); } } } }

Dieser Code definiert die Funktionalität der NotesPage. Wenn die Seite angezeigt wird, wird die OnAppea-ring-Methode ausgeführt, die die ListView mit allen Notizen füllt, die aus dem lokalen Anwendungsdatenord-ner abgerufen wurden. Wenn das ToolbarItem gedrückt wird, wird der OnNoteAddedClicked-Eventhandler ausgeführt. Diese Methode navigiert zur NoteEntryPage und setzt den BindingContext der NoteEntryPage auf eine neue Note-Instanz. Wenn ein Element in der Listenansicht ausgewählt ist, wird der OnListViewItem-Selected-Eventhandler ausgeführt. Diese Methode navigiert zur NoteEntryPage und setzt den Binding-Context der NoteEntryPage auf die ausgewählte Note-Instanz.

.NET 2 Seite 22 | 25

d. Pfadinformationen und Startseite festlegen Ergänzen Sie App.xaml.cs wie folgt:

using System; using System.IO; using Xamarin.Forms; using Xamarin.Forms.Xaml; [assembly: XamlCompilation(XamlCompilationOptions.Compile)] namespace XamarinFormsProjekt { public partial class App : Application { public static string FolderPath { get; private set; } public App() { InitializeComponent(); FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData)); MainPage = new NavigationPage(new NotesPage()); } } }

Dieser Code fügt eine Namensraumdeklaration für den System.IO-Namensraum und eine Deklaration für eine statische FolderPath-Eigenschaft vom Typ string hinzu. Die Eigenschaft FolderPath wird verwendet, um den Pfad auf dem Gerät zu speichern, auf dem die Notizendaten gespeichert werden. Darüber hinaus initiali-siert der Code die FolderPath-Eigenschaft im App-Konstruktor und die MainPage-Eigenschaft als Navigation-Page.

.NET 2 Seite 23 | 25

e. Applikation erzeugen und starten Klicken Sie im Projektmappen-Explorer im Notes-Projekt mit der rechten Maustaste auf MainPage.xaml und wählen Sie Löschen. Drücken Sie in dem erscheinenden Dialog die OK-Taste, um die Datei von Ihrer Fest-platte zu entfernen. Dadurch wird eine Seite entfernt, die nicht mehr verwendet wird.

"Builden" und starten Sie die Anwendung. Drücken Sie auf der NotesPage die Taste +, um zur NoteEntryPage zu navigieren und eine Notiz einzugeben. Nach dem Speichern der Notiz navigiert die Anwendung zurück zur NotesPage. Geben Sie eine Anzahl von Noten unterschiedlicher Länge ein, um das Anwendungsverhalten zu beobachten.

6. Anwendung auf Android-Handy test In den folgenden Schritten wird die erstellte Anwendung auf das Handy übertragen und sie dort zu testen.

a. Handy in Entwicklermodus bringen Gehen Sie zu den Settings/Einstellungen, dann zu System, dann zu "About phone"/"Über das Telefon". Dort

klicken Sie 7 Mal (ja, sieben Mal) auf die Build-Nummer. Sie sollten jetzt die Meldung erhalten, dass Sie nun

Entwickler sind (so einfach wird man Entwickler ;-) ). Jetzt ist der Punkt "Developer Options"/"Entwickleropti-

onen" im System-Menu aktiviert.

Als nächstes müssen Sie in den Developer Options den Punkt "USB-Debugging zulassen"/"USB-Debugging

zulassen" aktivieren. Bestätigen Sie die Meldung mit "ok".

.NET 2 Seite 24 | 25

Verbinden Sie das Handy mittels USB-Kabel mit dem PC (allfällig fehlende USB-Driver installieren).

b. Android Debug Bridge (adb) Mit der Android Debug Bridge (kurz adb) kann die Anwendung auf das Handy übertrage werden. Starten Sie

zunächst die adb-Console:

Geben Sie den Befehl: "adb devices" ein. Sie sollten etwa folgende Antwort erhalten (ein Handy ist im Bei-spiel angeschlossen (geben Sie auch "adb" alleine ein, dann sehe Sie die verfügbaren Optionen):

Wird kein Gerät angezeigt, dann starten Sie die adb neu und bestätigen Sie eine allfällige Frage auf Ihrem Handy mit OK:

Sie sollten Ihr Handy jetzt auch in der Auswahlliste im Visual Studio sehen:

.NET 2 Seite 25 | 25

Starten Sie jetzt die erstellte Anwendung "Start Without Debugging". Im Debugging Output sollte folgende Meldung erscheinen:

Und auf dem Handy müssten Sie Ihre Anwendung sehen. Die Anwendung ist damit auf dem Handy installiert. Sie können die Anwendung nun auch direkt auf dem Handy starten (ohne Verbindung zu Visual Studio). Sie sollten auf dem Handy ein Icon zu Xamarin finden. Trennen Sie das Handy vom PC und starten Sie die An-wendung.