Vytváření zobrazení HTML pomocí šablon Razor
Ve světě vývoje mobilních aplikací termín "hybridní aplikace" obvykle odkazuje na aplikaci, která prezentuje některé (nebo všechny) jeho obrazovky jako stránky HTML uvnitř hostovaného ovládacího prvku webového prohlížeče.
Existuje několik vývojových prostředí, která umožňují sestavit mobilní aplikaci zcela v HTML a JavaScriptu, ale tyto aplikace můžou mít problémy s výkonem při pokusu o komplexní zpracování nebo efekty uživatelského rozhraní a jsou také omezené v funkcích platformy, ke kterým mají přístup.
Xamarin nabízí to nejlepší z obou světů, zejména při použití modulu šablon HTML Razor. Díky Xamarinu máte možnost vytvářet víceplatformní šablonovaná zobrazení HTML, která používají JavaScript a CSS, ale také úplný přístup k rozhraním API základní platformy a rychlému zpracování pomocí jazyka C#.
Tento dokument vysvětluje, jak pomocí modulu šablon Razor vytvářet zobrazení HTML+JavaScript+CSS, která se dají použít na různých mobilních platformách pomocí Xamarinu.
Programové používání webových zobrazení
Než se o Razoru dozvíte, jak pomocí webových zobrazení zobrazit obsah HTML přímo – konkrétně obsah HTML vygenerovaný v aplikaci.
Xamarin poskytuje úplný přístup k základním rozhraním API platformy v iOSu i Androidu, takže je snadné vytvářet a zobrazovat HTML pomocí jazyka C#. Základní syntaxe pro každou platformu je znázorněna níže.
iOS
Zobrazení HTML v ovládacím prvku UIWebView v Xamarin.iOS také trvá jen několik řádků kódu:
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);
Další podrobnosti o použití ovládacího prvku UIWebView najdete v návodech k uživatelskému rozhraní UIWebView .
Android
Zobrazení HTML v ovládacím prvku WebView pomocí Xamarin.Android se provádí jen v několika řádcích kódu:
// 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);
Další podrobnosti o použití ovládacího prvku WebView najdete v návodech na Android WebView .
Určení základního adresáře
Na obou platformách je parametr, který určuje základní adresář pro stránku HTML. Toto je umístění v systému souborů zařízení, které slouží k překladu relativních odkazů na prostředky, jako jsou obrázky a soubory CSS. Například značky jako
<link rel="stylesheet" href="style.css" />
<img src="monkey.jpg" />
<script type="text/javascript" src="jscript.js">
projděte si tyto soubory: style.css, monkey.jpg a jscript.js. Nastavení základního adresáře říká webovému zobrazení, kde se tyto soubory nacházejí, aby je bylo možné načíst na stránku.
iOS
Výstup šablony se vykreslí v iOSu s následujícím kódem jazyka C#:
webView.LoadHtmlString (page, NSBundle.MainBundle.BundleUrl);
Základní adresář je určen tak, aby NSBundle.MainBundle.BundleUrl odkazoval na adresář, ve kterém je aplikace nainstalovaná. Všechny soubory ve složce Resources se zkopírují do tohoto umístění, jako je například soubor style.css zobrazený tady:
Akce sestavení pro všechny soubory statického obsahu by měla být BundleResource:
Android
Android také vyžaduje předání základního adresáře jako parametru při zobrazení řetězců HTML ve webovém zobrazení.
webView.LoadDataWithBaseURL("file:///android_asset/", page, "text/html", "UTF-8", null);
Speciální řetězec file:///android_asset/ odkazuje na složku Assets pro Android ve vaší aplikaci, která obsahuje soubor style.css .
Akce sestavení pro všechny soubory statického obsahu by měla být AndroidAsset.
Volání jazyka C# z HTML a JavaScriptu
Když je stránka HTML načtena do webového zobrazení, zpracovává odkazy a formuláře stejně, jako kdyby byla stránka načtena ze serveru. To znamená, že pokud uživatel klikne na odkaz nebo odešle formulář, webové zobrazení se pokusí přejít na zadaný cíl.
Pokud je odkaz na externí server (například google.com), webové zobrazení se pokusí načíst externí web (za předpokladu, že existuje připojení k internetu).
<a href="http://google.com/">Google</a>
Pokud je odkaz relativní, pokusí se webové zobrazení načíst tento obsah ze základního adresáře. Pro to, aby to fungovalo, není samozřejmě potřeba žádné síťové připojení, protože obsah je uložený v aplikaci na zařízení.
<a href="somepage.html">Local content</a>
Akce formuláře se řídí stejným pravidlem.
<form method="get" action="http://google.com/"></form>
<form method="get" action="somepage.html"></form>
Nebudete hostovat webový server v klientovi; Můžete však použít stejné techniky komunikace serveru používané v dnešních responzivních vzorech návrhu pro volání služeb přes HTTP GET a zpracovávat odpovědi asynchronně generováním JavaScriptu (nebo voláním JavaScriptu již hostovaného ve webovém zobrazení). To vám umožní snadno předat data z HTML zpět do kódu jazyka C# pro zpracování a pak zobrazit výsledky zpět na stránce HTML.
IOS i Android poskytují mechanismus pro kód aplikace k zachycení těchto navigačních událostí, aby kód aplikace mohl reagovat (v případě potřeby). Tato funkce je zásadní pro vytváření hybridních aplikací, protože umožňuje nativní kód interagovat s webovým zobrazením.
iOS
Událost ShouldStartLoad ve webovém zobrazení v iOSu lze přepsat, aby kód aplikace zpracovával navigační požadavek (například kliknutí na odkaz). Parametry metody poskytují všechny informace.
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 pak přiřaďte obslužnou rutinu události:
webView.ShouldStartLoad += HandleShouldStartLoad;
Android
V Androidu jednoduše podtřídu WebViewClient a pak implementujte kód pro reakci na požadavek navigace.
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 pak nastavte klienta ve webovém zobrazení:
webView.SetWebViewClient (new HybridWebViewClient ());
Volání JavaScriptu z jazyka C#
Kromě toho, že webové zobrazení řeknete, aby načetl novou stránku HTML, může kód jazyka C# také spustit JavaScript na aktuálně zobrazené stránce. Celé bloky kódu Jazyka JavaScript je možné vytvářet pomocí řetězců jazyka C# a provádět je, nebo můžete vytvářet volání metod javascriptu, která už jsou na stránce k dispozici prostřednictvím script značek.
Android
Vytvořte javascriptový kód, který se má spustit, a pak ho přidejte předponu "javascript:" a řiďte webovému zobrazení načtení tohoto řetězce:
var js = "alert('test');";
webView.LoadUrl ("javascript:" + js);
iOS
Webová zobrazení pro iOS poskytují metodu speciálně pro volání JavaScriptu:
var js = "alert('test');";
webView.EvaluateJavascript (js);
Shrnutí
Tato část představila funkce ovládacích prvků webového zobrazení v Androidu i iOSu, které nám umožňují vytvářet hybridní aplikace pomocí Xamarinu, včetně:
- Schopnost načíst kód HTML z řetězců generovaných v kódu,
- Možnost odkazovat na místní soubory (CSS, JavaScript, Obrázky nebo jiné soubory HTML),
- Schopnost zachycovat navigační požadavky v kódu jazyka C#,
- Možnost volat JavaScript z kódu jazyka C#.
V další části se seznámíte s Razorem, což usnadňuje vytvoření HTML pro použití v hybridních aplikacích.
Co je syntaxe Razor?
Razor je modul šablon, který byl zaveden s ASP.NET MVC, původně spuštěn na serveru a generování HTML, který se bude obsluhovat do webových prohlížečů.
Modul šablon Razor rozšiřuje standardní syntaxi HTML pomocí jazyka C#, abyste mohli snadno vyjádřit rozložení a začlenit šablony stylů CSS a JavaScript. Šablona může odkazovat na třídu modelu, která může být libovolný vlastní typ a jejíž vlastnosti lze získat přístup přímo ze šablony. Jednou z hlavních výhod je možnost snadno kombinovat syntaxi HTML a C#.
Šablony Razor nejsou omezeny na použití na straně serveru, dají se také zahrnout do aplikací Xamarin. Použití šablon Razor spolu s možností pracovat s webovými zobrazeními prostřednictvím kódu programu umožňuje vytváření sofistikovaných hybridních aplikací napříč platformami pomocí Xamarinu.
Základy šablon Razor
Soubory šablon Razor mají příponu souboru .cshtml . Dají se přidat do projektu Xamarin z oddílu Šablonování textu v dialogovém okně Nový soubor :
Níže je uvedena jednoduchá šablona Razor ( RazorView.cshtml).
@model string
<html>
<body>
<h1>@Model</h1>
</body>
</html>
Všimněte si následujících rozdílů od běžného souboru HTML:
- Symbol
@má v šablonách Razor speciální význam – označuje, že následující výraz je jazyk C#, který se má vyhodnotit. @modeldirektiva direktiva se vždy zobrazí jako první řádek souboru šablony Razor.- Za
@modeldirektivou by měl následovat typ. V tomto příkladu se šabloně předává jednoduchý řetězec, ale může to být jakákoli vlastní třída. - Při
@Modelodkazování v rámci šablony poskytuje odkaz na objekt předaný šabloně při jeho vygenerování (v tomto příkladu se jedná o řetězec). - Integrované vývojové prostředí automaticky vygeneruje částečnou třídu pro šablony (soubory s příponou .cshtml ). Tento kód můžete zobrazit, ale neměl by být upravován.
Částečná třída má název RazorView tak, aby odpovídal názvu souboru šablony .cshtml. Tento název se používá k odkazu na šablonu v kódu jazyka C#. @usingPříkazy můžou být také zahrnuty v horní části šablony Razor, aby zahrnovaly další obory názvů.
Konečný výstup HTML se pak dá vygenerovat s následujícím kódem jazyka C#. Všimněte si, že model určujeme jako řetězec "Hello World", který bude začleněn do výstupu vykreslené šablony.
var template = new RazorView () { Model = "Hello World" };
var page = template.GenerateString ();
Tady je výstup zobrazený ve webovém zobrazení simulátoru iOS a emulátoru Androidu:
Další syntaxe Razor
V této části představíme základní syntaxi Razor, která vám pomůže začít ji používat. Příklady v této části naplní následující třídu daty a zobrazí je pomocí Razoru:
public class Monkey {
public string Name { get; set; }
public DateTime Birthday { get; set; }
public List<string> FavoriteFoods { get; set; }
}
Všechny příklady používají následující kód inicializace dat.
var animal = new Monkey {
Name = "Rupert",
Birthday=new DateTime(2011, 04, 01),
FavoriteFoods = new List<string>
{"Bananas", "Banana Split", "Banana Smoothie"}
};
Zobrazení vlastností modelu
Pokud je model třídou s vlastnostmi, jsou snadno odkazovány v šabloně Razor, jak je znázorněno v této ukázkové šabloně:
@model Monkey
<html>
<body>
<h1>@Model.Name</h1>
<p>Birthday: @(Model.Birthday.ToString("d MMMM yyyy"))</p>
</body>
</html>
To se dá vykreslit do řetězce pomocí následujícího kódu:
var template = new RazorView () { Model = animal };
var page = template.GenerateString ();
Konečný výstup se zde zobrazí ve webovém zobrazení na simulátoru iOSu a emulátoru Androidu:
Příkazy jazyka C#
Složitější jazyk C# je možné zahrnout do šablony, například aktualizace vlastnosti Model a výpočet stáří v tomto příkladu:
@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>
Komplexní jednořádkové výrazy jazyka C# (například formátování věku) můžete psát tak, že kód @()obklopíte .
Více příkazů jazyka C# lze zapsat jejich okolím @{}.
Příkazy If-else
Větve kódu se dají vyjádřit tak @if , jak je znázorněno v tomto příkladu šablony.
@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>
Smyčky
Lze také přidat konstruktory smyček foreach . Předponu @ lze použít v proměnné smyčky ( @food v tomto případě) k vykreslení v 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>
Výstup výše uvedené šablony se zobrazí v simulátoru iOS a emulátoru Androidu:
Tato část popisuje základy použití šablon Razor k vykreslení jednoduchých zobrazení jen pro čtení. V další části se dozvíte, jak pomocí Razoru vytvářet ucelenější aplikace, které můžou přijímat uživatelský vstup a interoperaci mezi JavaScriptem v zobrazení HTML a jazykem C#.
Použití šablon Razor s Xamarinem
Tato část vysvětluje, jak používat sestavení vlastní hybridní aplikace pomocí šablon řešení v Visual Studio pro Mac. V okně Soubor > nové > řešení jsou k dispozici tři šablony:
- Aplikace Android WebView pro > Android >
- Aplikace WebView pro > iOS >
- projekt ASP.NET MVC
Okno Nové řešení vypadá takto pro projekty i Telefon a Android – popis řešení na pravé straně zvýrazňuje podporu modulu šablon Razor.
Všimněte si, že šablonu .cshtml Razor můžete snadno přidat do jakéhokoli existujícího projektu Xamarin, není nutné tyto šablony řešení používat. Projekty iOS nevyžadují, aby scénáře používaly Razor ani jeden; jednoduše přidejte ovládací prvek UIWebView do libovolného zobrazení programově a šablony Razor můžete vykreslit celý v kódu jazyka C#.
Výchozí obsah řešení šablon pro projekty i Telefon a Android jsou uvedené níže:
Šablony poskytují připravenou aplikační infrastrukturu k načtení šablony Razor s objektem datového modelu, zpracování uživatelského vstupu a zpětné komunikaci s uživatelem prostřednictvím JavaScriptu.
Důležité části řešení jsou:
- Statický obsah, jako je soubor style.css .
- Soubory šablon Razor .cshtml, jako je RazorView.cshtml .
- Třídy modelů odkazované v šablonách Razor, jako je ExampleModel.cs .
- Třída specifická pro platformu, která vytvoří webové zobrazení a vykreslí šablonu, například v
MainActivityAndroidu a v iOSuiPhoneHybridViewController.
Následující část vysvětluje, jak projekty fungují.
Statický obsah
Statický obsah zahrnuje šablony stylů CSS, obrázky, soubory JavaScriptu nebo jiný obsah, na který lze odkazovat ze souboru HTML, který se zobrazuje ve webovém zobrazení.
Projekty šablon obsahují minimální šablonu stylů, která ukazuje, jak do hybridní aplikace zahrnout statický obsah. Šablona stylů CSS se odkazuje takto:
<link rel="stylesheet" href="style.css" />
Můžete přidat libovolnou šablonu stylů a soubory JavaScriptu, které potřebujete, včetně architektur, jako je JQuery.
Šablony Razor cshtml
Šablona obsahuje soubor Razor .cshtml , který obsahuje předem napsaný kód, který pomáhá komunikovat data mezi HTML/JavaScriptem a jazykem C#. Díky tomu budete moct vytvářet sofistikované hybridní aplikace, které nejen zobrazují data jen pro čtení z modelu, ale také přijímají uživatelský vstup v HTML a předávají je zpět kódu jazyka C# pro zpracování nebo ukládání.
Vykreslení šablony
Voláním šablony GenerateString se vykreslí kód HTML připravený k zobrazení ve webovém zobrazení. Pokud šablona používá model, měla by být před vykreslením zadána. Tento diagram znázorňuje, jak vykreslování funguje – ne že statické prostředky jsou vyřešeny webovým zobrazením za běhu pomocí zadaného základního adresáře k vyhledání zadaných souborů.
Volání kódu jazyka C# ze šablony
Komunikace z vykresleného webového zobrazení volající zpět do jazyka C# se provádí nastavením adresy URL pro webové zobrazení a následným zachycením požadavku v jazyce C# pro zpracování nativního požadavku bez opětovného načtení webového zobrazení.
Příklad je vidět v tom, jak se zpracovává tlačítko RazorView. Tlačítko má následující kód HTML:
<input type="button" name="UpdateLabel" value="Click" onclick="InvokeCSharpWithFormValues(this)" />
Funkce InvokeCSharpWithFormValues JavaScriptu čte všechny hodnoty z formuláře HTML a nastaví location.href pro webové zobrazení:
location.href = "hybrid:" + elm.name + "?" + qs;
Tento pokus o navigaci ve webovém zobrazení na adresu URL s vlastním schématem (např. hybrid:)
hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click
Když nativní webové zobrazení zpracuje tuto žádost o navigaci, máme možnost ji zachytit. V iOSu se to provádí zpracováním události HandleShouldStartLoad uiWebView. V Androidu jednoduše podtřídíme WebViewClient použitý ve formuláři a přepíšeme ShouldOverrideUrlLoading.
Vnitřní vlastnosti těchto dvou průsečíků navigace jsou v podstatě stejné.
Nejprve zkontrolujte adresu URL, kterou se webové zobrazení pokouší načíst, a pokud nezačíná vlastním schématem (hybrid:), povolte navigaci normálním fungováním.
U vlastního schématu adres URL je vše v adrese URL mezi schématem a "?" je název metody, který se má zpracovat (v tomto případě "UpdateLabel"). Vše v řetězci dotazu bude považováno za parametry volání metody:
var resources = url.Substring(scheme.Length).Split('?');
var method = resources [0];
var parameters = System.Web.HttpUtility.ParseQueryString(resources[1]);
UpdateLabel v této ukázce provede minimální množství manipulace s řetězci u parametru textového pole (před textem "C# říká" na řetězec) a potom volá zpět do webového zobrazení.
Po zpracování adresy URL metoda přeruší navigaci tak, aby se webové zobrazení nepokoušal dokončit navigaci na vlastní adresu URL.
Manipulace se šablonou z jazyka C#
Komunikace s vykresleným webovým zobrazením HTML z jazyka C# se provádí voláním JavaScriptu ve webovém zobrazení. V iOSu se to provádí voláním EvaluateJavascript uiWebView:
webView.EvaluateJavascript (js);
V Androidu lze JavaScript vyvolat ve webovém zobrazení načtením JavaScriptu jako adresy URL pomocí schématu "javascript:" adresy URL:
webView.LoadUrl ("javascript:" + js);
Vytvoření skutečně hybridní aplikace
Tyto šablony nepoužívají nativní ovládací prvky na každé platformě – celá obrazovka je vyplněna jedním webovým zobrazením.
HTML může být skvělé pro vytváření prototypů a zobrazení typů věcí, které web nejlépe hodí, například formátovaný text a responzivní rozložení. Ne všechny úlohy jsou ale vhodné pro HTML a JavaScript – posouvání dlouhých seznamů dat například funguje lépe pomocí nativních ovládacích prvků uživatelského rozhraní (například UITableView v iOSu nebo ListView v Androidu).
Webová zobrazení v šabloně se dají snadno rozšířit o ovládací prvky specifické pro platformu – jednoduše upravte MainStoryboard.storyboard pomocí Xcode na Macu nebo Resources/layout/Main.axml v Androidu.
Ukázka RazorTodo
Úložiště RazorTodo obsahuje dvě samostatná řešení, která ukazují rozdíly mezi zcela řízenou aplikací HTML a aplikací, která kombinuje HTML s nativními ovládacími prvky:
- RazorTodo – zcela aplikace řízená HTML pomocí šablon Razor.
- RazorNativeTodo – používá nativní ovládací prvky zobrazení seznamu pro iOS a Android, ale zobrazuje obrazovku pro úpravy s HTML a Razor.
Tyto aplikace Xamarin běží na iOSu i Androidu a využívají knihovny přenosných tříd (PCLS) ke sdílení společného kódu, jako je databáze a třídy modelů. Šablony Razor .cshtml lze také zahrnout do PCL, aby se snadno sdílely napříč platformami.
Obě ukázkové aplikace zahrnují rozhraní Twitter Sharing a rozhraní API pro převod textu na řeč z nativní platformy, což demonstruje, že hybridní aplikace s Xamarinem mají stále přístup ke všem základním funkcím ze zobrazení řízených šablonami HTML Razor.
Aplikace RazorTodo používá šablony RAzor HTML pro seznam a úpravy zobrazení. To znamená, že aplikaci můžeme sestavit téměř úplně ve sdílené knihovně přenosných tříd (včetně šablon Razor Database a .cshtml ). Následující snímky obrazovky ukazují aplikace pro iOS a Android.
Aplikace RazorNativeTodo používá šablonu HTML Razor pro zobrazení pro úpravy, ale implementuje nativní seznam posouvání na každé platformě. To poskytuje řadu výhod, mezi které patří:
- Výkon – nativní ovládací prvky posouvání používají virtualizaci k zajištění rychlého a hladkého posouvání i s velmi dlouhými seznamy dat.
- Nativní prostředí – prvky uživatelského rozhraní specifické pro platformu jsou snadno povolené, například podpora indexu rychlého posouvání v iOSu a Androidu.
Klíčovou výhodou vytváření hybridních aplikací pomocí Xamarinu je, že můžete začít s zcela uživatelským rozhraním řízeným HTML (jako první ukázka) a pak v případě potřeby přidat funkce specifické pro platformu (jak ukazuje druhá ukázka). Níže jsou uvedeny obrazovky nativního seznamu a obrazovky pro úpravy HTML Razor v iOSu i Androidu.
Shrnutí
Tento článek vysvětluje funkce ovládacích prvků webového zobrazení, které jsou k dispozici v systémech iOS a Android, které usnadňují vytváření hybridních aplikací.
Pak probral modul šablon Razor a syntaxi, které lze použít ke snadnému generování HTML v aplikacích Xamarin pomocí .cshtml soubory šablony Razor. Popisuje také šablony Visual Studio pro Mac řešení, které umožňují rychle začít vytvářet hybridní aplikace pomocí Xamarinu.
Nakonec představil ukázky RazorTodo, které ukazují, jak kombinovat webová zobrazení s nativními uživatelskými rozhraními a rozhraními API.