Kompilowanie widoków HTML przy użyciu szablonów Razor
W świecie tworzenia aplikacji mobilnych termin "aplikacja hybrydowa" zazwyczaj odnosi się do aplikacji, która przedstawia niektóre (lub wszystkie) ekrany jako strony HTML wewnątrz hostowanej kontrolki przeglądarki internetowej.
Istnieją pewne środowiska programistyczne, które umożliwiają tworzenie aplikacji mobilnej w całości w językach HTML i JavaScript, jednak te aplikacje mogą cierpieć na problemy z wydajnością podczas próby wykonania złożonych efektów przetwarzania lub interfejsu użytkownika, a także są ograniczone w funkcjach platformy, do których mogą uzyskiwać dostęp.
Platforma Xamarin oferuje najlepsze z obu światów, zwłaszcza w przypadku korzystania z aparatu tworzenia szablonów HTML Razor. Dzięki platformie Xamarin masz elastyczność tworzenia międzyplatformowych widoków HTML, które używają języków JavaScript i CSS, ale także mają pełny dostęp do podstawowych interfejsów API platformy i szybkiego przetwarzania przy użyciu języka C#.
W tym dokumencie wyjaśniono, jak używać aparatu tworzenia szablonów Razor do tworzenia widoków HTML+JavaScript+CSS, które mogą być używane na różnych platformach mobilnych przy użyciu platformy Xamarin.
Programowe używanie widoków internetowych
Przed zapoznaniem się z tą sekcją omówiono sposób bezpośredniego wyświetlania zawartości HTML przy użyciu widoków internetowych — w szczególności zawartości HTML generowanej w aplikacji.
Platforma Xamarin zapewnia pełny dostęp do podstawowych interfejsów API platformy w systemach iOS i Android, dzięki czemu można łatwo tworzyć i wyświetlać kod HTML przy użyciu języka C#. Poniżej przedstawiono podstawową składnię dla każdej platformy.
iOS
Wyświetlanie kodu HTML w kontrolce UIWebView na platformie Xamarin.iOS wymaga również kilku wierszy kodu:
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);
Aby uzyskać więcej informacji na temat używania kontrolki UIWebView dla systemu iOS, zobacz przepisy interfejsu użytkownikaWebView.
Android
Wyświetlanie kodu HTML w kontrolce WebView przy użyciu platformy Xamarin.Android odbywa się w kilku wierszach kodu:
// 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);
Aby uzyskać więcej informacji na temat używania kontrolki WebView dla systemu Android, zobacz przepisy dotyczące elementu WebView dla systemu Android.
Określanie katalogu podstawowego
Na obu platformach istnieje parametr określający katalog podstawowy dla strony HTML. Jest to lokalizacja w systemie plików urządzenia, który służy do rozpoznawania względnych odwołań do zasobów, takich jak obrazy i pliki CSS. Na przykład tagi takie jak
<link rel="stylesheet" href="style.css" />
<img src="monkey.jpg" />
<script type="text/javascript" src="jscript.js">
zapoznaj się z następującymi plikami: style.css, monkey.jpg i jscript.js. Ustawienie katalogu podstawowego informuje widok internetowy, w którym znajdują się te pliki, aby można je było załadować do strony.
iOS
Dane wyjściowe szablonu są renderowane w systemie iOS przy użyciu następującego kodu języka C#:
webView.LoadHtmlString (page, NSBundle.MainBundle.BundleUrl);
Katalog podstawowy jest określony jako NSBundle.MainBundle.BundleUrl , który odnosi się do katalogu, w którym zainstalowano aplikację. Wszystkie pliki w folderze Resources są kopiowane do tej lokalizacji, takie jak plik style.css pokazany tutaj:
Akcja kompilacji dla wszystkich plików zawartości statycznej powinna mieć wartość BundleResource:
Android
System Android wymaga również przekazania podstawowego katalogu jako parametru, gdy ciągi HTML są wyświetlane w widoku internetowym.
webView.LoadDataWithBaseURL("file:///android_asset/", page, "text/html", "UTF-8", null);
Specjalny ciąg file:///android_asset/ odnosi się do folderu Assets systemu Android w aplikacji, pokazanego tutaj zawierającego plik style.css .
Akcja kompilacji dla wszystkich plików zawartości statycznej powinna mieć wartość AndroidAsset.
Wywoływanie języka C# z języków HTML i JavaScript
Gdy strona HTML zostanie załadowana do widoku internetowego, traktuje łącza i formularze tak, jakby strona została załadowana z serwera. Oznacza to, że jeśli użytkownik kliknie link lub prześle formularz, widok internetowy podejmie próbę przejścia do określonego obiektu docelowego.
Jeśli link jest połączony z serwerem zewnętrznym (takim jak google.com), widok internetowy podejmie próbę załadowania zewnętrznej witryny internetowej (przy założeniu, że istnieje połączenie internetowe).
<a href="http://google.com/">Google</a>
Jeśli link jest względny, widok internetowy podejmie próbę załadowania tej zawartości z katalogu podstawowego. Oczywiście żadne połączenie sieciowe nie jest wymagane, aby to działało, ponieważ zawartość jest przechowywana w aplikacji na urządzeniu.
<a href="somepage.html">Local content</a>
Akcje formularza są zgodne z tą samą regułą.
<form method="get" action="http://google.com/"></form>
<form method="get" action="somepage.html"></form>
Nie będziesz hostować serwera internetowego na kliencie; Można jednak użyć tych samych technik komunikacji serwera stosowanych w dzisiejszych dynamicznych wzorcach projektowych do wywoływania usług za pośrednictwem protokołu HTTP GET i obsługiwać odpowiedzi asynchronicznie przez emitowanie kodu JavaScript (lub wywoływanie języka JavaScript już hostowanego w widoku internetowym). Dzięki temu można łatwo przekazywać dane z kodu HTML z powrotem do kodu C# do przetwarzania, a następnie wyświetlać wyniki z powrotem na stronie HTML.
Zarówno systemy iOS, jak i Android zapewniają mechanizm przechwytywania tych zdarzeń nawigacji, dzięki czemu kod aplikacji może odpowiedzieć (jeśli jest to wymagane). Ta funkcja ma kluczowe znaczenie dla tworzenia aplikacji hybrydowych, ponieważ umożliwia natywną interakcję kodu z widokiem internetowym.
iOS
Zdarzenie ShouldStartLoad w widoku internetowym w systemie iOS można zastąpić, aby umożliwić kodowi aplikacji obsługę żądania nawigacji (na przykład kliknięciu linku). Parametry metody zawierają wszystkie informacje
bool HandleShouldStartLoad (UIWebView webView, NSUrlRequest request, UIWebViewNavigationType navigationType) {
// return true if handled in code
// return false to let the web view follow the link
}
a następnie przypisz procedurę obsługi zdarzeń:
webView.ShouldStartLoad += HandleShouldStartLoad;
Android
W systemie Android po prostu podklasa WebViewClient, a następnie zaimplementuj kod, aby odpowiedzieć na żądanie nawigacji.
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
}
}
a następnie ustaw klienta w widoku internetowym:
webView.SetWebViewClient (new HybridWebViewClient ());
Wywoływanie języka JavaScript z języka C#
Oprócz poinformowania widoku internetowego o załadowaniu nowej strony HTML kod języka C# może również uruchamiać kod JavaScript na aktualnie wyświetlanej stronie. Całe bloki kodu JavaScript można utworzyć przy użyciu ciągów języka C# i wykonać. Można też utworzyć wywołania metod dla języka JavaScript już dostępne na stronie za pośrednictwem script tagów.
Android
Utwórz kod JavaScript do wykonania, a następnie dodaj go prefiksem "javascript:" i poinstruuj widok internetowy, aby załadował ten ciąg:
var js = "alert('test');";
webView.LoadUrl ("javascript:" + js);
iOS
Widoki internetowe systemu iOS udostępniają metodę, która umożliwia wywołanie języka JavaScript:
var js = "alert('test');";
webView.EvaluateJavascript (js);
Podsumowanie
W tej sekcji przedstawiono funkcje kontrolek widoku internetowego w systemach Android i iOS, które umożliwiają tworzenie aplikacji hybrydowych za pomocą platformy Xamarin, w tym:
- Możliwość ładowania kodu HTML z ciągów wygenerowanych w kodzie
- Możliwość odwołwania się do plików lokalnych (CSS, JavaScript, Images lub innych plików HTML),
- Możliwość przechwytywania żądań nawigacji w kodzie C#,
- Możliwość wywoływania języka JavaScript z kodu C#.
W następnej sekcji przedstawiono składnię Razor, która ułatwia tworzenie kodu HTML do użycia w aplikacjach hybrydowych.
Co to jest składnia Razor?
Razor to aparat tworzenia szablonów wprowadzony w ASP.NET MVC, pierwotnie uruchamiany na serwerze i generujący kod HTML, który ma być obsługiwany w przeglądarkach internetowych.
Aparat tworzenia szablonów Razor rozszerza standardową składnię HTML za pomocą języka C#, dzięki czemu można łatwo wyrazić układ i dołączyć arkusze stylów CSS i język JavaScript. Szablon może odwoływać się do klasy Model, która może być dowolnym typem niestandardowym i którego właściwości mogą być dostępne bezpośrednio z szablonu. Jedną z jego głównych zalet jest łatwe mieszanie składni HTML i C#.
Szablony Razor nie są ograniczone do użycia po stronie serwera, można je również uwzględnić w aplikacjach platformy Xamarin. Korzystanie z szablonów Razor wraz z możliwością pracy z widokami internetowymi programowo umożliwia tworzenie zaawansowanych aplikacji hybrydowych międzyplatformowych za pomocą platformy Xamarin.
Podstawy szablonu Razor
Pliki szablonów Razor mają rozszerzenie pliku cshtml . Można je dodać do projektu platformy Xamarin z sekcji Tworzenie szablonów tekstowych w oknie dialogowym Nowy plik :
Poniżej przedstawiono prosty szablon Razor ( RazorView.cshtml).
@model string
<html>
<body>
<h1>@Model</h1>
</body>
</html>
Zwróć uwagę na następujące różnice w porównaniu z zwykłym plikiem HTML:
- Symbol
@ma specjalne znaczenie w szablonach Razor — wskazuje, że następujące wyrażenie ma być oceniane w języku C#. @modeldyrektywa zawsze jest wyświetlana jako pierwszy wiersz pliku szablonu Razor.- Po
@modeldyrektywie należy zastosować typ. W tym przykładzie do szablonu jest przekazywany prosty ciąg, ale może to być dowolna klasa niestandardowa. - W
@Modelprzypadku przywołowania w całym szablonie zawiera odwołanie do obiektu przekazanego do szablonu podczas jego generowania (w tym przykładzie będzie to ciąg). - Środowisko IDE automatycznie wygeneruje klasę częściową dla szablonów (pliki z rozszerzeniem cshtml ). Ten kod można wyświetlić, ale nie powinien być edytowany.
Klasa częściowa nosi nazwę RazorView, aby dopasować nazwę pliku szablonu cshtml. Jest to nazwa używana do odwoływania się do szablonu w kodzie języka C#. @usinginstrukcje można również uwzględnić w górnej części szablonu Razor, aby uwzględnić dodatkowe przestrzenie nazw.
Ostateczne dane wyjściowe HTML można następnie wygenerować przy użyciu następującego kodu w języku C#. Należy pamiętać, że określamy model jako ciąg "Hello World", który zostanie włączony do danych wyjściowych renderowanego szablonu.
var template = new RazorView () { Model = "Hello World" };
var page = template.GenerateString ();
Oto dane wyjściowe wyświetlane w widoku internetowym w symulatorze systemu iOS i emulatorze systemu Android:
Więcej składni Razor
W tej sekcji przedstawimy podstawową składnię Razor, aby ułatwić rozpoczęcie korzystania z niej. Przykłady w tej sekcji wypełniają następującą klasę danymi i wyświetlają je przy użyciu środowiska Razor:
public class Monkey {
public string Name { get; set; }
public DateTime Birthday { get; set; }
public List<string> FavoriteFoods { get; set; }
}
Wszystkie przykłady używają następującego kodu inicjowania danych
var animal = new Monkey {
Name = "Rupert",
Birthday=new DateTime(2011, 04, 01),
FavoriteFoods = new List<string>
{"Bananas", "Banana Split", "Banana Smoothie"}
};
Wyświetlanie właściwości modelu
Gdy model jest klasą z właściwościami, można łatwo odwoływać się do nich w szablonie Razor, jak pokazano w tym przykładowym szablonie:
@model Monkey
<html>
<body>
<h1>@Model.Name</h1>
<p>Birthday: @(Model.Birthday.ToString("d MMMM yyyy"))</p>
</body>
</html>
Można to renderować w ciągu przy użyciu następującego kodu:
var template = new RazorView () { Model = animal };
var page = template.GenerateString ();
Ostateczne dane wyjściowe są wyświetlane w widoku internetowym w symulatorze systemu iOS i emulatorze systemu Android:
Instrukcje języka C#
Bardziej złożone środowisko C# można uwzględnić w szablonie, na przykład aktualizacje właściwości Modelu i obliczenie wieku w tym przykładzie:
@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>
Możesz napisać złożone wyrażenia języka C# jednowierszowe (na przykład formatowanie wieku), otaczając kod przy użyciu polecenia @().
Wiele instrukcji języka C# można napisać, otaczając je elementem @{}.
Instrukcje if-else
Gałęzie kodu można wyrazić przy użyciu @if , jak pokazano w tym przykładzie szablonu.
@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>
Pętle
Można również dodać konstrukcje pętli, takie jak foreach . Prefiks @ może być używany w zmiennej pętli ( @food w tym przypadku) do renderowania go w kodzie HTML.
@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>
Dane wyjściowe powyższego szablonu są wyświetlane w symulatorze systemu iOS i emulatorze systemu Android:
W tej sekcji omówiono podstawy używania szablonów Razor do renderowania prostych widoków tylko do odczytu. W następnej sekcji wyjaśniono, jak tworzyć bardziej kompletne aplikacje przy użyciu języka Razor, które mogą akceptować dane wejściowe użytkownika i współdziałać między językiem JavaScript w widoku HTML i języku C#.
Używanie szablonów Razor z platformą Xamarin
W tej sekcji wyjaśniono, jak używać własnej aplikacji hybrydowej przy użyciu szablonów rozwiązań w Visual Studio dla komputerów Mac. W oknie Plik > nowe > rozwiązanie są dostępne trzy szablony:
- Aplikacja WebView dla systemu Android dla systemu > Android >
- Aplikacja WebView aplikacji systemu > iOS >
- ASP.NET projekt MVC
Okno Nowe rozwiązanie wygląda następująco dla projektów i Telefon i Android — opis rozwiązania po prawej stronie wyróżnia obsługę aparatu tworzenia szablonów Razor.
Należy pamiętać, że można łatwo dodać szablon Razor cshtml do dowolnego istniejącego projektu platformy Xamarin, nie trzeba używać tych szablonów rozwiązań. Projekty systemu iOS nie wymagają scenorysu do korzystania z platformy Razor; wystarczy dodać kontrolkę UIWebView do dowolnego widoku programowo i można renderować szablony Razor całe w kodzie języka C#.
Poniżej przedstawiono domyślną zawartość rozwiązania szablonu dla projektów i Telefon i Android:
Szablony zapewniają gotową do użycia infrastrukturę aplikacji w celu załadowania szablonu Razor z obiektem modelu danych, przetwarzania danych wejściowych użytkowników i przekazywania ich użytkownikowi za pomocą języka JavaScript.
Ważne elementy rozwiązania to:
- Zawartość statyczna , taka jak plik style.css .
- Pliki szablonów Razor .cshtml, takie jak RazorView.cshtml .
- Klasy modeli, do których odwołuje się szablony Razor, takie jak ExampleModel.cs .
- Klasa specyficzna dla platformy, która tworzy widok internetowy i renderuje szablon, taki jak
MainActivityw systemie Android iiPhoneHybridViewControllerw systemie iOS.
W poniższej sekcji opisano sposób działania projektów.
Zawartość statyczna
Zawartość statyczna zawiera arkusze stylów CSS, obrazy, pliki JavaScript lub inną zawartość, z których można się połączyć lub odwoływać się do pliku HTML wyświetlanego w widoku internetowym.
Projekty szablonów zawierają minimalny arkusz stylów, aby zademonstrować sposób dołączania zawartości statycznej do aplikacji hybrydowej. Arkusz stylów CSS jest przywołyyny w szablonie w następujący sposób:
<link rel="stylesheet" href="style.css" />
Możesz dodać dowolny potrzebny arkusz stylów i pliki JavaScript, w tym struktury, takie jak JQuery.
Szablony razor cshtml
Szablon zawiera plik cshtml Razor, który zawiera wstępnie napisany kod, aby ułatwić komunikację danych między kodami HTML/JavaScript i C#. Umożliwi to tworzenie zaawansowanych aplikacji hybrydowych, które nie tylko wyświetlają dane tylko do odczytu z modelu, ale także akceptują dane wejściowe użytkownika w kodzie HTML i przekazują je z powrotem do kodu C# do przetwarzania lub przechowywania.
Renderowanie szablonu
GenerateString Wywołanie elementu w szablonie renderuje kod HTML gotowy do wyświetlania w widoku internetowym. Jeśli szablon używa modelu, należy go podać przed renderowaniem. Na tym diagramie pokazano, jak działa renderowanie — nie jest to, że zasoby statyczne są rozpoznawane przez widok internetowy w czasie wykonywania przy użyciu dostarczonego katalogu podstawowego w celu znalezienia określonych plików.
Wywoływanie kodu C# z szablonu
Komunikacja z renderowanego widoku internetowego wywołującego do języka C# jest wykonywana przez ustawienie adresu URL widoku internetowego, a następnie przechwycenie żądania w języku C# w celu obsługi żądania natywnego bez ponownego załadowania widoku internetowego.
Przykład można zobaczyć w sposobie obsługi przycisku RazorView. Przycisk ma następujący kod HTML:
<input type="button" name="UpdateLabel" value="Click" onclick="InvokeCSharpWithFormValues(this)" />
InvokeCSharpWithFormValues Funkcja JavaScript odczytuje wszystkie wartości z formularza HTML i ustawia location.href dla widoku internetowego:
location.href = "hybrid:" + elm.name + "?" + qs;
Spowoduje to próbę nawigowania do widoku internetowego pod adresem URL ze schematem niestandardowym (np. hybrid:)
hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click
Gdy natywny widok internetowy przetwarza to żądanie nawigacji, możemy go przechwycić. W systemie iOS odbywa się to przez obsługę zdarzenia HandleShouldStartLoad interfejsu użytkownikaWebView. W systemie Android po prostu podklasujemy element WebViewClient używany w formularzu i zastępujemy element ShouldOverrideUrlLoading.
Elementy wewnętrzne tych dwóch przechwytników nawigacji są zasadniczo takie same.
Najpierw sprawdź adres URL, który próbuje załadować widok internetowy, a jeśli nie zaczyna się od schematu niestandardowego (hybrid:), zezwól na normalne działanie nawigacji.
W przypadku niestandardowego schematu adresów URL wszystko w adresie URL między schematem a "?" to nazwa metody, która ma być obsługiwana (w tym przypadku "UpdateLabel"). Wszystkie elementy w ciągu zapytania będą traktowane jako parametry wywołania metody:
var resources = url.Substring(scheme.Length).Split('?');
var method = resources [0];
var parameters = System.Web.HttpUtility.ParseQueryString(resources[1]);
UpdateLabel w tym przykładzie wykonuje minimalną ilość manipulacji ciągami w parametrze pola tekstowego (poprzedzając ciąg "C# mówi"), a następnie wywołuje z powrotem do widoku internetowego.
Po obsłudze adresu URL metoda przerywa nawigację, aby widok internetowy nie próbował przejść do niestandardowego adresu URL.
Manipulowanie szablonem z poziomu języka C#
Komunikacja z renderowanego widoku internetowego HTML z języka C# odbywa się przez wywołanie języka JavaScript w widoku internetowym. W systemie iOS odbywa się to przez wywołanie EvaluateJavascript elementu UIWebView:
webView.EvaluateJavascript (js);
W systemie Android kod JavaScript można wywołać w widoku internetowym, ładując kod JavaScript jako adres URL przy użyciu schematu adresów "javascript:" URL:
webView.LoadUrl ("javascript:" + js);
Tworzenie aplikacji naprawdę hybrydowej
Te szablony nie korzystają z natywnych kontrolek na każdej platformie — cały ekran jest wypełniony jednym widokiem internetowym.
Kod HTML może być doskonały do tworzenia prototypów, a wyświetlanie rodzajów rzeczy, w których internet jest najlepszy, na przykład w przypadku tekstu sformatowanego i układu dynamicznego. Jednak nie wszystkie zadania są odpowiednie dla języków HTML i JavaScript — przewijanie długich list danych, na przykład zapewnia lepszą wydajność przy użyciu natywnych kontrolek interfejsu użytkownika (takich jak UITableView w systemie iOS lub ListView w systemie Android).
Widoki internetowe w szablonie można łatwo rozszerzyć za pomocą kontrolek specyficznych dla platformy — wystarczy edytować scenorys MainStoryboard.storyboard przy użyciu programu Xcode na komputerze Mac lub resources/layout/Main.axml w systemie Android.
Przykład RazorTodo
Repozytorium RazorTodo zawiera dwa oddzielne rozwiązania pokazujące różnice między całkowicie opartą na kodzie HTML aplikacją a aplikacją łączącą kod HTML z natywnymi kontrolkami:
- RazorTodo — całkowicie oparta na kodzie HTML aplikacja korzystająca z szablonów Razor.
- RazorNativeTodo — używa natywnych kontrolek widoku listy dla systemów iOS i Android, ale wyświetla ekran edycji przy użyciu języków HTML i Razor.
Te aplikacje platformy Xamarin działają zarówno w systemach iOS, jak i Android, korzystając z bibliotek klas przenośnych (PCLS) do współużytkowania wspólnego kodu, takiego jak baza danych i klasy modelu. Szablony razor .cshtml można również dołączyć do biblioteki PCL, dzięki czemu można je łatwo udostępniać na różnych platformach.
Obie przykładowe aplikacje obejmują udostępnianie w usłudze Twitter i interfejsy API zamiany tekstu na mowę z natywnej platformy, co pokazuje, że aplikacje hybrydowe z platformą Xamarin nadal mają dostęp do wszystkich podstawowych funkcji z widoków opartych na szablonach HTML Razor.
Aplikacja RazorTodo używa szablonów Razor HTML dla listy i edytowania widoków. Oznacza to, że możemy utworzyć aplikację prawie całkowicie w udostępnionej przenośnej bibliotece klas (w tym w bazie danych i szablonach Razor cshtml ). Na poniższych zrzutach ekranu przedstawiono aplikacje dla systemów iOS i Android.
Aplikacja RazorNativeTodo używa szablonu Razor HTML dla widoku edycji, ale implementuje natywną listę przewijania na każdej platformie. Zapewnia to szereg korzyści, w tym:
- Wydajność — natywne kontrolki przewijania używają wirtualizacji, aby zapewnić szybkie, płynne przewijanie nawet przy bardzo długich listach danych.
- Środowisko natywne — elementy interfejsu użytkownika specyficzne dla platformy są łatwo włączone, takie jak obsługa szybkiego przewijania indeksów w systemach iOS i Android.
Kluczową zaletą tworzenia aplikacji hybrydowych za pomocą platformy Xamarin jest to, że można zacząć od całkowicie opartego na języku HTML interfejsu użytkownika (na przykład pierwszego przykładu), a następnie dodać funkcje specyficzne dla platformy, jeśli jest to wymagane (jak pokazano w drugim przykładzie). Poniżej przedstawiono ekrany listy natywnej i ekrany edycji Razor w systemach iOS i Android.
Podsumowanie
W tym artykule wyjaśniono funkcje kontrolek widoku internetowego dostępnych w systemach iOS i Android, które ułatwiają tworzenie aplikacji hybrydowych.
Następnie omówił aparat tworzenia szablonów Razor i składnię, która może służyć do łatwego generowania kodu HTML w aplikacjach platformy Xamarin przy użyciu polecenia .pliki szablonów Cshtml Razor. Opisano również szablony rozwiązań Visual Studio dla komputerów Mac, które umożliwiają szybkie rozpoczęcie tworzenia aplikacji hybrydowych za pomocą platformy Xamarin.
Na koniec wprowadzono przykłady RazorTodo, które pokazują, jak połączyć widoki internetowe z natywnymi interfejsami użytkownika i interfejsami API.