Freigeben über

Erstellen von HTML-Ansichten mithilfe von Razor-Vorlagen

  • Artikel

In der mobilen Entwicklungswelt bezieht sich der Begriff "Hybrid-App" in der Regel auf eine Anwendung, die einige (oder alle) ihrer Bildschirme als HTML-Seiten innerhalb eines gehosteten Web Viewer-Steuerelements darstellt.

Es gibt einige Entwicklungsumgebungen, mit denen Sie Ihre mobile App vollständig in HTML und JavaScript erstellen können, aber diese Apps können unter Leistungsproblemen leiden, wenn sie versuchen, komplexe Verarbeitungs- oder UI-Effekte zu erzielen, und sind auch in den Plattformfeatures eingeschränkt, auf die sie zugreifen können.

Xamarin bietet das Beste aus beiden Welten, insbesondere bei Verwendung der Razor HTML-Vorlagen-Engine. Mit Xamarin haben Sie die Flexibilität, plattformübergreifende VORLAGEN-HTML-Ansichten zu erstellen, die JavaScript und CSS verwenden, aber auch vollständigen Zugriff auf die zugrunde liegenden Plattform-APIs und schnelle Verarbeitung mit C# haben.

In diesem Dokument wird erläutert, wie Sie die Razor-Vorlagen-Engine verwenden, um HTML+JavaScript+CSS-Ansichten zu erstellen, die mit Xamarin auf mobilen Plattformen verwendet werden können.

Programmgesteuertes Verwenden von Webansichten

Bevor wir über Razor erfahren, wird in diesem Abschnitt erläutert, wie Sie Webansichten verwenden, um HTML-Inhalte direkt anzuzeigen – insbesondere HTML-Inhalte, die in einer App generiert werden.

Xamarin bietet vollständigen Zugriff auf die zugrunde liegenden Plattform-APIs unter iOS und Android, sodass html mit C# einfach erstellt und angezeigt werden kann. Die grundlegende Syntax für jede Plattform ist unten dargestellt.

iOS

Das Anzeigen von HTML in einem UIWebView-Steuerelement in Xamarin.iOS benötigt auch nur wenige Codezeilen:

var webView = new UIWebView (View.Bounds);
View.AddSubview(webView);
string contentDirectoryPath = Path.Combine (NSBundle.MainBundle.BundlePath, "Content/");
var html = "<html><h1>Hello</h1><p>World</p></html>";
webView.LoadHtmlString(html, NSBundle.MainBundle.BundleUrl);

Weitere Informationen zur Verwendung des UIWebView-Steuerelements finden Sie in den iOS UIWebView-Rezepten .

Android

Das Anzeigen von HTML in einem WebView-Steuerelement mit Xamarin.Android erfolgt in nur wenigen Codezeilen:

// webView is declared in an AXML layout file
var webView = FindViewById<WebView> (Resource.Id.webView);

// enable JavaScript execution in your html view so you can provide "alerts" and other js
webView.SetWebChromeClient(new WebChromeClient());

var html = "<html><h1>Hello</h1><p>World</p></html>";
webView.LoadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", null);

Weitere Informationen zur Verwendung des WebView-Steuerelements finden Sie in den Android WebView-Rezepten .

Angeben des Basisverzeichnisses

Auf beiden Plattformen gibt es einen Parameter, der das Basisverzeichnis für die HTML-Seite angibt. Dies ist der Speicherort im Dateisystem des Geräts, der verwendet wird, um relative Verweise auf Ressourcen wie Bilder und CSS-Dateien aufzulösen. Tags wie z. B.

<link rel="stylesheet" href="style.css" />
<img src="monkey.jpg" />
<script type="text/javascript" src="jscript.js">

Verweisen Sie auf die folgenden Dateien: style.css, monkey.jpg und jscript.js. Die Basisverzeichniseinstellung teilt der Webansicht mit, wo sich diese Dateien befinden, damit sie in die Seite geladen werden können.

iOS

Die Vorlagenausgabe wird in iOS mit dem folgenden C#-Code gerendert:

webView.LoadHtmlString (page, NSBundle.MainBundle.BundleUrl);

Das Basisverzeichnis wird als NSBundle.MainBundle.BundleUrl angegeben, das auf das Verzeichnis verweist, in dem die Anwendung installiert ist. Alle Dateien im Ordner Resources werden an diesen Speicherort kopiert, z. B. die hier gezeigte Datei style.css :

iPhoneHybrid-Lösung

Die Buildaktion für alle statischen Inhaltsdateien sollte BundleResource sein:

iOS-Projektbuildaktion: BundleResource

Android

Android erfordert auch, dass ein Basisverzeichnis als Parameter übergeben wird, wenn HTML-Zeichenfolgen in einer Webansicht angezeigt werden.

webView.LoadDataWithBaseURL("file:///android_asset/", page, "text/html", "UTF-8", null);

Die spezielle Zeichenfolge file:///android_asset/ bezieht sich auf den Ordner Android Assets in Ihrer App, der hier mit der Datei "style.css " angezeigt wird.

AndroidHybrid-Lösung

Die Buildaktion für alle statischen Inhaltsdateien sollte AndroidAsset sein.

Android-Projektbuildaktion: AndroidAsset

Aufrufen von C# aus HTML und JavaScript

Wenn eine HTML-Seite in eine Webansicht geladen wird, behandelt sie die Links und Formulare wie beim Laden der Seite von einem Server. Dies bedeutet, dass die Webansicht versucht, zu dem angegebenen Ziel zu navigieren, wenn der Benutzer auf einen Link klickt oder ein Formular sendet.

Wenn der Link zu einem externen Server (z. B. google.com) ist, versucht die Webansicht, die externe Website zu laden (vorausgesetzt, es besteht eine Internetverbindung).

<a href="http://google.com/">Google</a>

Wenn der Link relativ ist, versucht die Webansicht, diesen Inhalt aus dem Basisverzeichnis zu laden. Natürlich ist keine Netzwerkverbindung erforderlich, damit dies funktioniert, da der Inhalt in der App auf dem Gerät gespeichert wird.

<a href="somepage.html">Local content</a>

Formularaktionen folgen der gleichen Regel.

<form method="get" action="http://google.com/"></form>
<form method="get" action="somepage.html"></form>

Sie werden keinen Webserver auf dem Client hosten. Sie können jedoch dieselben Serverkommunikationstechniken verwenden, die in den heutigen reaktionsfähigen Entwurfsmustern verwendet werden, um Dienste über HTTP GET aufzurufen und Antworten asynchron zu behandeln, indem Sie JavaScript ausgeben (oder JavaScript aufrufen, das bereits in der Webansicht gehostet wurde). Auf diese Weise können Sie Daten aus dem HTML-Code zur Verarbeitung einfach wieder an C#-Code übergeben und dann die Ergebnisse wieder auf der HTML-Seite anzeigen.

Sowohl iOS als auch Android bieten einen Mechanismus für Anwendungscode, um diese Navigationsereignisse abzufangen, sodass App-Code (bei Bedarf) reagieren kann. Dieses Feature ist für die Erstellung von Hybrid-Apps von entscheidender Bedeutung, da nativer Code mit der Webansicht interagieren kann.

iOS

Das ShouldStartLoad-Ereignis in der Webansicht in iOS kann überschrieben werden, damit Anwendungscode eine Navigationsanforderung verarbeiten kann (z. B. ein Linkklick). Die Methodenparameter liefern alle Informationen.

bool HandleShouldStartLoad (UIWebView webView, NSUrlRequest request, UIWebViewNavigationType navigationType) {
    // return true if handled in code
    // return false to let the web view follow the link
}

und weisen Sie dann den Ereignishandler zu:

webView.ShouldStartLoad += HandleShouldStartLoad;

Android

Unter Android unterklassieren Sie einfach WebViewClient, und implementieren Sie dann Code, um auf die Navigationsanforderung zu reagieren.

class HybridWebViewClient : WebViewClient {
    public override bool ShouldOverrideUrlLoading (WebView webView, IWebResourceRequest request) {
        // return true if handled in code
        // return false to let the web view follow the link
    }
}

und legen Sie dann den Client in der Webansicht fest:

webView.SetWebViewClient (new HybridWebViewClient ());

Aufrufen von JavaScript aus C#

Neben dem Ansagen einer Webansicht, eine neue HTML-Seite zu laden, kann C#-Code auch JavaScript auf der aktuell angezeigten Seite ausführen. Ganze JavaScript-Codeblöcke können mit C#-Zeichenfolgen erstellt und ausgeführt werden, oder Sie können Methodenaufrufe für JavaScript erstellen, die bereits auf der Seite über script Tags verfügbar sind.

Android

Erstellen Sie den auszuführenden JavaScript-Code, präfixieren Sie ihn dann mit "javascript:", und weisen Sie die Webansicht an, diese Zeichenfolge zu laden:

var js = "alert('test');";
webView.LoadUrl ("javascript:" + js);

iOS

iOS-Webansichten bieten eine Methode speziell zum Aufrufen von JavaScript:

var js = "alert('test');";
webView.EvaluateJavascript (js);

Zusammenfassung

In diesem Abschnitt wurden die Features der Webansichtssteuerelemente für Android und iOS vorgestellt, mit denen wir Hybridanwendungen mit Xamarin erstellen können, einschließlich:

  • Die Möglichkeit, HTML aus in Code generierten Zeichenfolgen zu laden,
  • Die Möglichkeit, auf lokale Dateien (CSS, JavaScript, Bilder oder andere HTML-Dateien) zu verweisen,
  • Die Möglichkeit, Navigationsanforderungen in C#-Code abzufangen,
  • Die Möglichkeit, JavaScript aus C#-Code aufzurufen.

Im nächsten Abschnitt wird Razor vorgestellt, was das Erstellen des HTML-Codes für die Verwendung in Hybrid-Apps vereinfacht.

Was ist Razor?

Razor ist eine Vorlagen-Engine, die mit ASP.NET MVC eingeführt wurde, die ursprünglich auf dem Server ausgeführt und HTML generiert, um für Webbrowser bereitgestellt zu werden.

Die Razor-Vorlagengine erweitert die HTML-Standardsyntax mit C#, sodass Sie das Layout einfach ausdrücken und CSS-Stylesheets und JavaScript integrieren können. Die Vorlage kann auf eine Model-Klasse verweisen, bei der es sich um einen beliebigen benutzerdefinierten Typ handeln kann und auf deren Eigenschaften direkt von der Vorlage aus zugegriffen werden kann. Einer der Standard Vorteile ist die Möglichkeit, HTML- und C#-Syntax einfach zu kombinieren.

Razor-Vorlagen sind nicht auf die serverseitige Verwendung beschränkt, sie können auch in Xamarin-Apps enthalten sein. Die Verwendung von Razor-Vorlagen zusammen mit der Möglichkeit, programmgesteuert mit Webansichten zu arbeiten, ermöglicht die Erstellung anspruchsvoller plattformübergreifender Hybridanwendungen mit Xamarin.

Razor-Vorlagengrundlagen

Razor-Vorlagendateien haben eine CSHTML-Dateierweiterung . Sie können einem Xamarin-Projekt im Abschnitt Textvorlagen im Dialogfeld Neue Datei hinzugefügt werden:

Neue Datei – Razor-Vorlage

Eine einfache Razor-Vorlage ( RazorView.cshtml) ist unten dargestellt.

@model string
<html>
    <body>
    <h1>@Model</h1>
    </body>
</html>

Beachten Sie die folgenden Unterschiede zu einer regulären HTML-Datei:

  • Das @ Symbol hat in Razor-Vorlagen eine besondere Bedeutung – es gibt an, dass der folgende Ausdruck C# ist, der ausgewertet werden soll.
  • @model -Anweisung wird immer als erste Zeile einer Razor-Vorlagendatei angezeigt.
  • Auf die @model Direktive sollte ein Typ folgen. In diesem Beispiel wird eine einfache Zeichenfolge an die Vorlage übergeben, dies kann jedoch eine beliebige benutzerdefinierte Klasse sein.
  • Wenn @Model in der gesamten Vorlage auf verwiesen wird, stellt es einen Verweis auf das Objekt bereit, das an die Vorlage übergeben wird, wenn es generiert wird (in diesem Beispiel handelt es sich um eine Zeichenfolge).
  • Die IDE generiert automatisch eine partielle Klasse für Vorlagen (Dateien mit der Erweiterung CSHTML ). Sie können diesen Code anzeigen, sollte aber nicht bearbeitet werden. RazorView.cshtml Die partielle Klasse heißt RazorView, um dem Dateinamen der CSHTML-Vorlage zu entsprechen. Dieser Name wird verwendet, um auf die Vorlage in C#-Code zu verweisen.
  • @using -Anweisungen können auch oben in eine Razor-Vorlage eingefügt werden, um zusätzliche Namespaces einzuschließen.

Die endgültige HTML-Ausgabe kann dann mit dem folgenden C#-Code generiert werden. Beachten Sie, dass das Modell als Zeichenfolge "Hallo Welt" angegeben wird, die in die gerenderte Vorlagenausgabe integriert wird.

var template = new RazorView () { Model = "Hello World" };
var page = template.GenerateString ();

Hier sehen Sie die Ausgabe, die in einer Webansicht im iOS-Simulator und android-Emulator angezeigt wird:

Hello World

Weitere Razor-Syntax

In diesem Abschnitt stellen wir eine grundlegende Razor-Syntax vor, die Ihnen beim Einstieg in die Verwendung hilft. Die Beispiele in diesem Abschnitt füllen die folgende Klasse mit Daten auf und zeigen sie mithilfe von Razor an:

public class Monkey {
    public string Name { get; set; }
    public DateTime Birthday { get; set; }
    public List<string> FavoriteFoods { get; set; }
}

Alle Beispiele verwenden den folgenden Dateninitialisierungscode

var animal = new Monkey {
    Name = "Rupert",
    Birthday=new DateTime(2011, 04, 01),
    FavoriteFoods = new List<string>
        {"Bananas", "Banana Split", "Banana Smoothie"}
};

Anzeigen von Modelleigenschaften

Wenn es sich bei dem Modell um eine Klasse mit Eigenschaften handelt, kann problemlos in der Razor-Vorlage darauf verwiesen werden, wie in dieser Beispielvorlage gezeigt:

@model Monkey
<html>
    <body>
    <h1>@Model.Name</h1>
    <p>Birthday: @(Model.Birthday.ToString("d MMMM yyyy"))</p>
    </body>
</html>

Dies kann mit dem folgenden Code in eine Zeichenfolge gerendert werden:

var template = new RazorView () { Model = animal };
var page = template.GenerateString ();

Die endgültige Ausgabe wird hier in einer Webansicht im iOS-Simulator und Android-Emulator angezeigt:

Rupert

C#-Anweisungen

Komplexere C# können in die Vorlage einbezogen werden, z. B. die Model-Eigenschaftsupdates und die Altersberechnung in diesem Beispiel:

@model Monkey
<html>
    <body>
    @{
        Model.Name = "Rupert X. Monkey";
        Model.Birthday = new DateTime(2011,3,1);
    }
    <h1>@Model.Name</h1>
    <p>Birthday: @Model.Birthday.ToString("d MMMM yyyy")</p>
    <p>Age: @(Math.Floor(DateTime.Now.Date.Subtract (Model.Birthday.Date).TotalDays/365)) years old</p>
    </body>
</html>

Sie können komplexe einzeilige C#-Ausdrücke schreiben (z. B. das Formatieren des Alters), indem Sie den Code mit @()umgeben.

Mehrere C#-Anweisungen können geschrieben werden, indem sie mit @{}umgibt.

If-else-Anweisungen

Code branches können mit @if ausgedrückt werden, wie in diesem Vorlagenbeispiel gezeigt.

@model Monkey
<html>
    <body>
    <h1>@Model.Name</h1>
    <p>Birthday: @(Model.Birthday.ToString("d MMMM yyyy"))</p>
    <p>Age: @(Math.Floor(DateTime.Now.Date.Subtract (Model.Birthday.Date).TotalDays/365)) years old</p>
    <p>Favorite Foods:</p>
    @if (Model.FavoriteFoods.Count == 0) {
        <p>No favorites</p>
    } else {
        <p>@Model.FavoriteFoods.Count favorites</p>
    }
    </body>
</html>

Schleifen

Schleifenkonstrukte wie foreach können ebenfalls hinzugefügt werden. Das @ Präfix kann für die Schleifenvariable ( @food in diesem Fall) verwendet werden, um es in HTML zu rendern.

@model Monkey
<html>
    <body>
    <h1>@Model.Name</h1>
    <p>Birthday: @Model.Birthday.ToString("d MMMM yyyy")</p>
    <p>Age: @(Math.Floor(DateTime.Now.Date.Subtract (Model.Birthday.Date).TotalDays/365)) years old</p>
    <p>Favorite Foods:</p>
    @if (Model.FavoriteFoods.Count == 0) {
        <p>No favorites</p>
    } else {
        <ul>
            @foreach (var food in @Model.FavoriteFoods) {
                <li>@food</li>
            }
        </ul>
    }
    </body>
</html>

Die Ausgabe der obigen Vorlage wird im iOS-Simulator und Android-Emulator angezeigt:

Rupert X Monkey

In diesem Abschnitt wurden die Grundlagen der Verwendung von Razor-Vorlagen zum Rendern einfacher schreibgeschützter Ansichten behandelt. Im nächsten Abschnitt wird erläutert, wie Sie mit Razor vollständigere Apps erstellen, die Benutzereingaben akzeptieren und zwischen JavaScript in der HTML-Ansicht und C# zusammenarbeiten können.

Verwenden von Razor-Vorlagen mit Xamarin

In diesem Abschnitt wird erläutert, wie Sie ihre eigene Hybridanwendung mithilfe der Lösungsvorlagen in Visual Studio für Mac erstellen. Im Fenster Neue > Projektmappe > datei stehen drei Vorlagen zur Verfügung:

  • Android > App > Android WebView-Anwendung
  • iOS > App > WebView-Anwendung
  • ASP.NET MVC-Projekt

Das Fenster Neue Projektmappe sieht für iPhone- und Android-Projekte wie folgt aus. Die Lösungsbeschreibung auf der rechten Seite hebt unterstützung für die Razor-Vorlagen-Engine hervor.

Erstellen von iPhone- und Android-Lösungen

Beachten Sie, dass Sie problemlos eine CSHTML-Razor-Vorlagezu jedem vorhandenen Xamarin-Projekt hinzufügen können. Es ist nicht erforderlich, diese Projektmappenvorlagen zu verwenden. Für iOS-Projekte ist auch kein Storyboard erforderlich, um Razor zu verwenden. Fügen Sie einfach einer beliebigen Ansicht programmgesteuert ein UIWebView-Steuerelement hinzu, und Sie können Razor-Vorlagen vollständig in C#-Code rendern.

Die Standardvorlagenmappeninhalte für iPhone- und Android-Projekte sind unten dargestellt:

iPhone- und Android-Vorlagen

Die Vorlagen bieten Eine einsatzbereite Anwendungsinfrastruktur zum Laden einer Razor-Vorlage mit einem Datenmodellobjekt, zum Verarbeiten von Benutzereingaben und zum Kommunizieren mit dem Benutzer über JavaScript.

Die wichtigsten Bestandteile der Lösung sind:

  • Statischer Inhalt, z. B. die Datei style.css .
  • Razor .cshtml-Vorlagendateien wie RazorView.cshtml .
  • Modellklassen, auf die in den Razor-Vorlagen wie ExampleModel.cs verwiesen wird.
  • Die plattformspezifische Klasse, die die Webansicht erstellt und die Vorlage rendert, z. B. die MainActivity unter Android und die unter iPhoneHybridViewController iOS.

Im folgenden Abschnitt wird erläutert, wie die Projekte funktionieren.

Statischer Inhalt

Statischer Inhalt umfasst CSS-Stylesheets, Bilder, JavaScript-Dateien oder andere Inhalte, die mit einer HTML-Datei verknüpft werden können, die in einer Webansicht angezeigt wird.

Die Vorlagenprojekte enthalten ein minimales Stylesheet, um zu veranschaulichen, wie statische Inhalte in Ihre Hybrid-App eingeschlossen werden. Auf das CSS-Stylesheet wird in der Vorlage wie folgt verwiesen:

<link rel="stylesheet" href="style.css" />

Sie können alle benötigten Stylesheet- und JavaScript-Dateien hinzufügen, einschließlich Frameworks wie JQuery.

Razor cshtml-Vorlagen

Die Vorlage enthält eine Razor CSHTML-Datei , die über vorab geschriebenen Code verfügt, um Daten zwischen HTML/JavaScript und C# zu kommunizieren. Auf diese Weise können Sie anspruchsvolle Hybrid-Apps erstellen, die nicht nur schreibgeschützte Daten aus dem Modell anzeigen, sondern auch Benutzereingaben im HTML-Code akzeptieren und sie zur Verarbeitung oder Speicherung an C#-Code zurückgeben.

Rendern der Vorlage

Durch aufrufen von GenerateString in einer Vorlage wird HTML für die Anzeige in einer Webansicht bereit. Wenn die Vorlage ein Modell verwendet, sollte es vor dem Rendern bereitgestellt werden. Dieses Diagramm veranschaulicht, wie das Rendern funktioniert– nicht, dass die statischen Ressourcen zur Laufzeit von der Webansicht aufgelöst werden, wobei das angegebene Basisverzeichnis verwendet wird, um die angegebenen Dateien zu finden.

Razor-Flussdiagramm

Aufrufen von C#-Code aus der Vorlage

Die Kommunikation aus einer gerenderten Webansicht, die auf C# zurückruft, erfolgt durch Festlegen der URL für die Webansicht und anschließendes Abfangen der Anforderung in C#, um die native Anforderung zu verarbeiten, ohne die Webansicht neu zu laden.

Ein Beispiel ist die Behandlung der RazorView-Schaltfläche. Die Schaltfläche weist den folgenden HTML-Code auf:

<input type="button" name="UpdateLabel" value="Click" onclick="InvokeCSharpWithFormValues(this)" />

Die InvokeCSharpWithFormValues JavaScript-Funktion liest alle Werte aus dem HTML-Formular und legt den location.href für die Webansicht fest:

location.href = "hybrid:" + elm.name + "?" + qs;

Dadurch wird versucht, in der Webansicht zu einer URL mit einem benutzerdefinierten Schema zu navigieren (z. B. hybrid:)

hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click

Wenn die native Webansicht diese Navigationsanforderung verarbeitet, haben wir die Möglichkeit, sie abzufangen. In iOS erfolgt dies durch die Behandlung des HandleShouldStartLoad-Ereignisses von UIWebView. In Android werden die im Formular verwendeten WebViewClient einfach unterklassiert und ShouldOverrideUrlLoading überschrieben.

Die Inneren dieser beiden Navigationsfänger sind im Wesentlichen identisch.

Überprüfen Sie zunächst die URL, die die Webansicht zu laden versucht, und wenn sie nicht mit dem benutzerdefinierten Schema (hybrid:) beginnt, lassen Sie die Navigation normal ablaufen.

Beim benutzerdefinierten URL-Schema alles in der URL zwischen dem Schema und dem "?" ist der zu behandelnde Methodenname (in diesem Fall "UpdateLabel"). Alles in der Abfragezeichenfolge wird als Parameter für den Methodenaufruf behandelt:

var resources = url.Substring(scheme.Length).Split('?');
var method = resources [0];
var parameters = System.Web.HttpUtility.ParseQueryString(resources[1]);

UpdateLabel in diesem Beispiel wird eine minimale Zeichenfolgenbearbeitung für den Textfeldparameter ausgeführt (voraus, dass "C# sagt" für die Zeichenfolge aussteht), und ruft dann die Webansicht zurück.

Nach der Behandlung der URL bricht die -Methode die Navigation ab, sodass die Webansicht nicht versucht, die Navigation zur benutzerdefinierten URL abzuschließen.

Bearbeiten der Vorlage aus C#

Die Kommunikation mit einer gerenderten HTML-Webansicht aus C# erfolgt durch Aufrufen von JavaScript in der Webansicht. Unter iOS erfolgt dies durch Aufrufen EvaluateJavascript der UIWebView:

webView.EvaluateJavascript (js);

Unter Android kann JavaScript in der Webansicht aufgerufen werden, indem Das JavaScript mithilfe des "javascript:" URL-Schemas als URL geladen wird:

webView.LoadUrl ("javascript:" + js);

Eine App wirklich hybrid machen

Diese Vorlagen verwenden nicht native Steuerelemente auf jeder Plattform – der gesamte Bildschirm wird mit einer einzigen Webansicht gefüllt.

HTML kann hervorragend für die Prototyperstellung geeignet sein und die Arten von Dingen anzeigen, für die das Web am besten geeignet ist, z. B. Rich-Text und reaktionsfähiges Layout. Allerdings sind nicht alle Aufgaben für HTML und JavaScript geeignet– das Scrollen durch lange Datenlisten funktioniert beispielsweise besser mit nativen UI-Steuerelementen (z. B. UITableView unter iOS oder ListView unter Android).

Die Webansichten in der Vorlage können problemlos mit plattformspezifischen Steuerelementen erweitert werden. Bearbeiten Sie einfach das MainStoryboard.storyboard mit Xcode auf einem Mac oder die Ressourcen/layout/Main.axml unter Android.

RazorTodo-Beispiel

Das RazorTodo-Repository enthält zwei separate Lösungen, um die Unterschiede zwischen einer vollständig HTML-gesteuerten App und einer App zu zeigen, die HTML mit nativen Steuerelementen kombiniert:

  • RazorTodo : Vollständig HTML-gesteuerte App mit Razor-Vorlagen.
  • RazorNativeTodo : Verwendet native Listenansichtssteuerelemente für iOS und Android, zeigt jedoch den Bearbeitungsbildschirm mit HTML und Razor an.

Diese Xamarin-Apps werden sowohl unter iOS als auch unter Android ausgeführt und verwenden portable Klassenbibliotheken (PCLs), um gemeinsamen Code wie die Datenbank- und Modellklassen gemeinsam zu nutzen. Razor-CSHTML-Vorlagen können auch in die PCL eingebunden werden, sodass sie problemlos plattformübergreifend freigegeben werden können.

Beide Beispiel-Apps enthalten Twitter-Freigabe- und Text-zu-Sprache-APIs von der nativen Plattform, was zeigt, dass Hybridanwendungen mit Xamarin weiterhin Zugriff auf alle zugrunde liegenden Funktionen von VORLAGENgesteuerten HTML-Razor-Ansichten haben.

Die RazorTodo-App verwendet HTML-Razor-Vorlagen für die Listen- und Bearbeitungsansichten. Dies bedeutet, dass wir die App fast vollständig in einer freigegebenen portablen Klassenbibliothek (einschließlich der Datenbank- und CSHTML-Razor-Vorlagen) erstellen können. Die folgenden Screenshots zeigen die iOS- und Android-Apps.

RazorTodo

Die RazorNativeTodo-App verwendet eine HTML-Razor-Vorlage für die Bearbeitungsansicht, implementiert jedoch eine native Scrollliste auf jeder Plattform. Dies bietet eine Reihe von Vorteilen, darunter:

  • Leistung: Die nativen Scrollsteuerelemente verwenden Virtualisierung, um ein schnelles, reibungsloses Scrollen auch bei sehr langen Datenlisten zu gewährleisten.
  • Native Benutzeroberfläche: Plattformspezifische UI-Elemente können problemlos aktiviert werden, z. B. die Unterstützung von Indexen mit schnellem Bildlauf in iOS und Android.

Ein wichtiger Vorteil des Erstellens von Hybrid-Apps mit Xamarin ist, dass Sie mit einer vollständig HTML-gesteuerten Benutzeroberfläche (wie im ersten Beispiel) beginnen und dann bei Bedarf plattformspezifische Funktionen hinzufügen können (wie das zweite Beispiel zeigt). Die nativen Listenbildschirme und HTML-Razor-Bearbeitungsbildschirme unter iOS und Android sind unten dargestellt.

RazorNativeTodo

Zusammenfassung

In diesem Artikel wurden die Features der Unter iOS und Android verfügbaren Webansichtssteuerelemente erläutert, die das Erstellen von Hybridanwendungen erleichtern.

Anschließend wurde die Razor-Vorlagen-Engine und die Syntax erläutert, die zum einfachen Generieren von HTML in Xamarin-Apps mit verwendet werden kann. cshtml Razor-Vorlagendateien. Außerdem wurden die Visual Studio für Mac Lösungsvorlagen beschrieben, mit denen Sie schnell mit der Erstellung von Hybridanwendungen mit Xamarin beginnen können.

Schließlich wurden die RazorTodo-Beispiele vorgestellt, die zeigen, wie Webansichten mit nativen Benutzeroberflächen und APIs kombiniert werden.