Xamarin.Forms: Tutorial zu Webdiensten
Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:
- Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App
- Das Tutorial zu StackLayout
- Tutorial zu Label.
- Das Tutorial zu Button.
- Das Tutorial zu CollectionView
In diesem Tutorial lernen Sie Folgendes:
- Verwenden des NuGet-Paket-Managers, um „Newtonsoft.Json“ zu einem Xamarin.Forms-Projekt hinzuzufügen
- Erstellen der Webdienstklassen
- Nutzen der Webdienstklassen
Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie .NET-Repositorydaten aus der GitHub-Web-API abrufen. Die abgerufenen Daten werden in einer CollectionView
-Klasse angezeigt. Die folgenden Screenshots zeigen die finale Anwendung:
Hinzufügen von „Newtonsoft.Json“
Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.
Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen WebServiceTutorial.
Wichtig
Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe WebServiceTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.
Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebServiceTutorial und anschließend auf NuGet-Pakete verwalten...:
Klicken Sie im NuGet-Paket-Manager auf die Registerkarte Durchsuchen, suchen Sie nach dem NuGet-Paket Newtonsoft.Json, wählen Sie es aus, und klicken Sie auf die Schaltfläche Installieren, um es dem Projekt hinzuzufügen:
Mit diesem Paket kann die JSON-Deserialisierung in der Anwendung verwendet werden.
Erstellen Sie die Projektmappe, um sich zu vergewissern, dass keine Fehler vorliegen.
Erstellen von Webdienstklassen
REST-Anforderungen erfolgen über HTTP mit den gleichen HTTP-Verben, mit denen Webbrowser Seiten abrufen und Daten an Server senden. In dieser Übung erstellen Sie eine Klasse, die das GET-Verb verwendet, um .NET-Repositorydaten aus der GitHub-Web-API abzurufen.
Fügen Sie im Projektmappen-Explorer dem Projekt WebServiceTutorial eine neue Klasse mit dem Namen
Constants
hinzu. Entfernen Sie dann in Constants.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:namespace WebServiceTutorial { public static class Constants { public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos"; } }
In diesem Code wird nur eine Konstante definiert: der Endpunkt, an den die Webanforderungen gesendet werden.
Fügen Sie im Projektmappen-Explorer dem Projekt WebServicesTutorial eine neue Klasse mit dem Namen
Repository
hinzu. Entfernen Sie dann in Repository.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden Code:using System; using Newtonsoft.Json; namespace WebServiceTutorial { public class Repository { [JsonProperty("name")] public string Name { get; set; } [JsonProperty("description")] public string Description { get; set; } [JsonProperty("html_url")] public Uri GitHubHomeUrl { get; set; } [JsonProperty("homepage")] public Uri Homepage { get; set; } [JsonProperty("watchers")] public int Watchers { get; set; } } }
In diesem Code wird eine
Repository
-Klasse definiert, die verwendet wird, um die aus dem Webdienst abgerufenen JSON-Daten zu modellieren. Jede Eigenschaft verfügt über einJsonProperty
-Attribut, das einen JSON-Feldnamen enthält. Beim Deserialisieren der JSON-Daten in Modellobjekte verwendet „Newtonsoft.Json“ diese Zuordnung von JSON-Feldnamen und CLR-Eigenschaften.Hinweis
Die obige Klassendefinition wurde vereinfacht und modelliert die aus dem Webdienst abgerufenen JSON-Daten nicht vollständig.
Fügen Sie im Projektmappen-Explorer dem Projekt WebServiceTutorial eine neue Klasse mit dem Namen
RestService
hinzu. Entfernen Sie dann in RestService.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Diagnostics; using System.Net.Http; using System.Net.Http.Headers; using System.Threading.Tasks; using Xamarin.Forms; namespace WebServiceTutorial { public class RestService { HttpClient _client; public RestService() { _client = new HttpClient(); if (Device.RuntimePlatform == Device.UWP) { _client.DefaultRequestHeaders.Add("User-Agent", ".NET Foundation Repository Reporter"); _client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/vnd.github.v3+json")); } } public async Task<List<Repository>> GetRepositoriesAsync(string uri) { List<Repository> repositories = null; try { HttpResponseMessage response = await _client.GetAsync(uri); if (response.IsSuccessStatusCode) { string content = await response.Content.ReadAsStringAsync(); repositories = JsonConvert.DeserializeObject<List<Repository>>(content); } } catch (Exception ex) { Debug.WriteLine("\tERROR {0}", ex.Message); } return repositories; } } }
In diesem Code wird nur eine Methode (
GetRepositoriesAsync
) definiert, die .NET-Repositorydaten aus der GitHub-Web-API abruft. Diese Methode verwendet die MethodeHttpClient.GetAsync
, um eine GET-Anforderung an die Web-API zu senden, die vom Argumenturi
angegeben wird. Die Web-API sendet eine Antwort, die in einemHttpResponseMessage
-Objekt gespeichert wird. Die Antwort enthält einen HTTP-Statuscode, der angibt, ob die HTTP-Anforderung erfolgreich war oder fehlgeschlagen ist. Wenn die Anforderung erfolgreich war, antwortet die Web-API mit dem HTTP-Statuscode 200 (OK) und einer JSON-Antwort, die in der EigenschaftHttpResponseMessage.Content
enthalten ist. Diese JSON-Daten werden mithilfe der MethodeHttpContent.ReadAsStringAsync
in einstring
-Element gelesen und anschließend mithilfe der MethodeJsonConvert.DeserializeObject
in einList<Repository>
-Objekt deserialisiert. Diese Methode verwendet für die Deserialisierung die Zuordnungen zwischen JSON-Feldnamen und CLR-Eigenschaften, die in derRepository
-Klasse definiert sind.Hinweis
Bei UWP ist es erforderlich, das
HttpClient
-Objekt im Konstruktor zu konfigurieren, um allen Anforderungen einen Benutzer-Agent-Header hinzuzufügen und um GitHub-JSON-Antworten zu akzeptieren.Erstellen Sie die Projektmappe, um sich zu vergewissern, dass keine Fehler vorliegen.
Nutzen von Webdienstklassen
In dieser Übung erstellen Sie eine Benutzeroberfläche, um die RestService
-Klasse zu verwenden, die .NET-Repositorydaten aus der GitHub-Web-API abruft. Die abgerufenen Daten werden von einer CollectionView
-Klasse angezeigt.
Doppelklicken Sie im Projektmappen-Explorer im Projekt WebServiceTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WebServiceTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Button Text="Get Repository Data" Clicked="OnButtonClicked" /> <CollectionView x:Name="collectionView"> <CollectionView.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Name}" FontSize="Medium" /> <Label Text="{Binding Description}" TextColor="Silver" FontSize="Small" /> <Label Text="{Binding GitHubHomeUrl}" TextColor="Gray" FontSize="Caption" /> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </StackLayout> </ContentPage>
In diesem Code wird die Benutzeroberfläche für die Seite deklarativ definiert, die aus einer
Button
- und einerCollectionView
-Klasse besteht. DasButton
-Objekt legt seinClicked
-Ereignis auf einen Ereignishandler namensOnButtonClicked
fest, der im nächsten Schritt erstellt wird. DieCollectionView
-Klasse legt dieCollectionView.ItemTemplate
-Eigenschaft auf eineDataTemplate
-Klasse fest, die die Darstellung der einzelnen Elemente in derCollectionView
-Klasse bestimmt. Die untergeordnete Klasse vonDataTemplate
ist eineStackLayout
-Klasse, die dreiLabel
-Objekte enthält. DieLabel
-Objekte binden ihreText
-Eigenschaften an dieName
-,Description
- undGitHubHomeUrl
-Eigenschaften der einzelnenRepository
-Objekte. Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.Außerdem hat die
CollectionView
-Klasse einen Namen, der mit demx:Name
-Attribut festgelegt wird. Dadurch kann die CodeBehind-Datei mithilfe des zugewiesenen Namens auf das Objekt zugreifen.Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt WebServiceTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
using System; using System.Collections.Generic; using Xamarin.Forms; namespace WebServiceTutorial { public partial class MainPage : ContentPage { RestService _restService; public MainPage() { InitializeComponent(); _restService = new RestService(); } async void OnButtonClicked(object sender, EventArgs e) { List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint); collectionView.ItemsSource = repositories; } } }
Die
OnButtonClicked
-Methode, die ausgeführt wird, wenn auf die Schaltfläche (Button
) getippt wird, ruft dieRestService.GetRepositoriesAsync
-Methode auf, um .NET-Repositorydaten aus der GitHub-Web-API abzurufen. DieGetRepositoriesAsync
-Methode erfordert einstring
-Argument, das den URI der aufgerufenen Web-API darstellt. Dieser wird vomConstants.GitHubReposEndpoint
-Feld zurückgegeben.Nachdem die angeforderten Daten abgerufen wurden, wird die
CollectionView.ItemsSource
-Eigenschaft auf die abgerufenen Daten festgelegt.Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten: Tippen Sie auf die Schaltfläche (
Button
), um .NET-Repositorydaten von GitHub abzurufen:Beenden Sie die Anwendung in Visual Studio.
Weitere Informationen zum Verwenden von REST-basierten Webdiensten in Xamarin.Forms finden Sie unter Verwenden eines RESTful-Webdiensts (Leitfaden).
Herzlichen Glückwunsch!
Glückwunsch, Sie haben das Tutorial erfolgreich abgeschlossen und Folgendes gelernt:
- Verwenden des NuGet-Paket-Managers, um „Newtonsoft.Json“ zu einem Xamarin.Forms-Projekt hinzuzufügen
- Erstellen der Webdienstklassen
- Nutzen der Webdienstklassen
Nächste Schritte
In dieser Tutorialreihe wurden die Grundlagen der Erstellung von mobilen Anwendungen mit Xamarin.Forms behandelt. Wenn Sie mehr über die Entwicklung mit Xamarin.Forms erfahren möchten, informieren Sie sich über folgende Funktionen:
- Es gibt vier Hauptsteuerelementgruppen, mit denen die Benutzeroberfläche einer Xamarin.Forms-Anwendung erstellt wird. Weitere Informationen finden Sie unter Steuerelementreferenz.
- Bei der Datenbindung werden die Eigenschaften von zwei Objekten verknüpft. Dadurch werden Änderungen an einer Eigenschaft automatisch in der anderen widergespiegelt. Weitere Informationen finden Sie unter Datenbindung.
- Xamarin.Forms stellt abhängig vom verwendeten Seitentyp eine Reihe unterschiedlicher Seitennavigationsfunktionen bereit. Weitere Informationen finden Sie unter Navigation.
- Stile können repetitives Markup reduzieren und erleichtern Änderungen an der Darstellung von Anwendungen. Weitere Informationen finden Sie unter Formatieren von Xamarin.Forms-Apps.
- XAML-Markuperweiterungen erweitern die Leistungsfähigkeit und Flexibilität von XAML, indem Elementattribute auch aus anderen Quellen als literalen Textzeichenfolgen festgelegt werden. Weitere Informationen finden Sie unter XAML Markup Extensions (XAML-Markuperweiterung).
- Datenvorlagen bieten die Möglichkeit, die Darstellung von Daten für unterstützte Ansichten zu definieren. Weitere Informationen finden Sie unter Datenvorlagen.
- Die einzelnen Seiten, Layouts und Ansichten werden auf jeder Plattform auf unterschiedliche Weise über eine
Renderer
-Klasse gerendert. Diese erstellt ein natives Steuerelement, ordnet dieses auf dem Bildschirm an und fügt das im freigegebenen Code angegebene Verhalten hinzu. Entwickler können ihre eigenen benutzerdefiniertenRenderer
-Klassen implementieren, um die Darstellung und/oder das Verhalten eines Steuerelements anzupassen. Weitere Informationen finden Sie unter Custom Renderers (Benutzerdefinierte Renderer). - Zudem können durch Effekte native Steuerelemente auf den einzelnen Plattformen angepasst werden. Effekte werden in plattformspezifischen Projekten erstellt, indem Unterklassen für die
PlatformEffect
-Klasse erstellt werden. Sie werden verarbeitet, indem sie an das entsprechende Xamarin.Forms-Steuerelement angefügt werden. Weitere Informationen finden Sie unter Effekte. - Freigegebener Code kann über die
DependencyService
-Klasse auf eine native Funktion zugreifen. Weitere Informationen finden Sie unter Accessing Native Features with DependencyService (Zugreifen auf native Funktionen über DependencyService).
Alternativ finden Sie weitere Informationen zu Xamarin.Forms im Buch Creating Mobile Apps with Xamarin.Forms (Erstellen von mobilen Apps mit Xamarin.Forms) von Charles Petzold. Das Buch ist als PDF und in zahlreichen anderen E-Book-Formaten erhältlich.
Verwandte Links
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.