Sestavování zobrazení HTML pomocí šablon Razor

Ve světě pro vývoj mobilních aplikací pojem "hybridní aplikace" obvykle odkazuje na aplikaci, která prezentuje některé (nebo všechny) obrazovky jako stránky HTML v hostovaném ovládacím prvku webového prohlížeče.

K dispozici je několik vývojových prostředí, která vám umožní vytvořit si mobilní aplikaci zcela v HTML a JavaScriptu, ale tyto aplikace můžou při pokusu o provedení složitých účinků zpracování nebo uživatelského rozhraní způsobovat problémy s výkonem a jsou taky omezené na funkce platformy, ke kterým mají přístup.

Xamarin nabízí nejlepší z obou světů, zejména při použití modulu šablonování HTML Razor. Pomocí Xamarin máte flexibilitu při vytváření zobrazení HTML v šablonách pro různé platformy, která používají JavaScript a CSS, ale mají také úplný přístup k základním rozhraním API platformy a rychlému zpracování pomocí jazyka C#.

Tento dokument vysvětluje, jak použít modul šablonování Razor k vytváření zobrazení HTML + JavaScript + CSS, které lze použít napříč mobilními platformami pomocí Xamarin.

Používání webových zobrazení prostřednictvím kódu programu

Než se dozvíte o Razor, Tato část popisuje, jak používat webová zobrazení k přímému zobrazení obsahu HTML – konkrétně obsahu HTML, který se generuje v rámci aplikace.

Xamarin poskytuje úplný přístup k základním rozhraním API platformy pro iOS i Android, takže je snadné vytvořit a zobrazit HTML pomocí C#. Základní syntaxe jednotlivých platforem je uvedena níže.

iOS

Zobrazení kódu HTML v ovládacím prvku UIWebView v Xamarin. iOS také bere pouze pár řá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ší informace o použití ovládacího prvku UIWebView najdete v tématu věnovaném receptům UIWebView pro iOS .

Android

Zobrazení kódu HTML v ovládacím prvku WebView pomocí Xamarin. Android je provedeno pouze 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žívání ovládacího prvku WebView najdete v tématu věnovaném receptům v Androidu WebView .

Zadání 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é se používá 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">

odkazy na tyto soubory: style. CSS, monkey.jpg a jscript.js. Základní nastavení adresáře oznamuje webovému zobrazení, kde jsou umístěny tyto soubory, aby bylo možné je načíst do stránky.

iOS

Výstup šablony se vykresluje v iOS s následujícím kódem C#:

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

Je určen základní adresář NSBundle.MainBundle.BundleUrl , který odkazuje na adresář, ve kterém je aplikace nainstalována. Všechny soubory ve složce Resources se zkopírují do tohoto umístění, jako je například soubor style. CSS , který je zde zobrazen:

řešení iPhoneHybrid

Akce sestavení pro všechny soubory se statickým obsahem by měla být BundleResource:

akce sestavení projektu pro iOS: BundleResource

Android

Android také vyžaduje, aby byl jako parametr předán základní adresář, když jsou řetězce HTML zobrazeny 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 prostředků v Androidu v aplikaci, která je zde obsažena obsahující soubor style. CSS .

Řešení AndroidHybrid

Akce sestavení pro všechny soubory se statickým obsahem by měla být AndroidAsset.

Akce sestavení projektu pro Android: AndroidAsset

Volání jazyka C# z HTML a JavaScriptu

Pokud je stránka HTML načtena do webového zobrazení, je považována za odkazy a formuláře, 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 je k dispozici připojení k Internetu).

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

Pokud je odkaz relativní, webové zobrazení se pokusí načíst tento obsah ze základního adresáře. Aby to fungovalo, zjevně se nevyžaduje žá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 dodržují stejné pravidlo.

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

Nebudete hostovat webový server na straně klienta. Můžete však použít stejné techniky komunikace serveru, které jsou používány v dnešním reakce na vzory návrhu pro volání služeb přes HTTP GET, a asynchronní zpracování odpovědí vygenerováním JavaScriptu (nebo volání JavaScriptu, který je již hostován ve webovém zobrazení). Díky tomu můžete snadno předávat data z HTML zpátky do kódu jazyka C# ke zpracování a potom zobrazit výsledky zpátky 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 (Pokud je to potřeba). Tato funkce je zásadní pro vytváření hybridních aplikací, protože umožňuje nativnímu kódu interakci s webovým zobrazením.

iOS

Událost ShouldStartLoad ve webovém zobrazení v iOS může být přepsána, aby mohl kód aplikace zpracovat požadavek na navigaci (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 potom přiřaďte obslužnou rutinu události:

webView.ShouldStartLoad += HandleShouldStartLoad;

Android

V Androidu jednoduše WebViewClient podtříd a potom implementujte kód pro reakci na žádost o navigaci.

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 na webové zobrazení:

webView.SetWebViewClient (new HybridWebViewClient ());

Volání jazyka JavaScript z jazyka C #

Kromě oznámení webového zobrazení pro načtení nové stránky HTML může kód jazyka C# také spustit JavaScript v rámci aktuálně zobrazené stránky. Celé bloky kódu JavaScriptu lze vytvořit pomocí řetězců jazyka C# a jejich provedení nebo můžete vytvořit volání metody do JavaScriptu, které jsou již k dispozici na stránce prostřednictvím script značek.

Android

Vytvořte kód JavaScriptu, který se má spustit, a pak ho zajistěte pomocí JavaScriptu: a sdělte webovému zobrazení, aby tento řetězec načetl:

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

iOS

webové zobrazení pro iOS poskytují metodu specificky pro volání JavaScriptu:

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

Souhrn

V této části se zavedly funkce ovládacích prvků webového zobrazení pro Android i iOS, které nám umožňují sestavovat hybridní aplikace pomocí Xamarin, včetně těchto:

  • Možnost načíst 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 zachytit žádosti o navigaci v kódu jazyka C#,
  • Možnost volat JavaScript z kódu jazyka C#.

V další části se seznámíte se syntaxí Razor, která usnadňuje vytvoření HTML pro použití v hybridních aplikacích.

Co je syntaxe Razor?

Razor je modul šablonování, který byl představený s ASP.NET MVC, původně pro spuštění na serveru a generování kódu HTML, který bude obsluhován webovým prohlížečům.

Modul šablonování Razor rozšiřuje standardní syntaxi HTML v jazyce C#, takže můžete snadno vyjádřit rozložení a přidat šablony stylů CSS a JavaScript. Šablona může odkazovat na třídu modelu, což může být libovolný vlastní typ a k jejichž vlastnostem 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 omezené na použití na straně serveru, můžou se taky zahrnout do aplikací pro Xamarin. Použití šablon Razor společně s možností pracovat s webovými zobrazeními prostřednictvím kódu programu umožňuje vytvářet sofistikované hybridní aplikace pro různé platformy, které budou sestaveny pomocí Xamarin.

Základy šablon Razor

Soubory šablon Razor mají příponu souboru . cshtml . Můžete je přidat do projektu Xamarin z části text šablonování v dialogovém okně nový soubor :

Nový soubor – šablona Razor

V níže uvedeném příkladu 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ů z obyčejného souboru HTML:

  • @Symbol má v šablonách Razor zvláštní význam – indikuje, že následující výraz je C# k vyhodnocení.
  • @model Direktiva se vždycky zobrazuje jako první řádek souboru šablony Razor.
  • @modelZa direktivou musí následovat typ. V tomto příkladu je do šablony předán jednoduchý řetězec, ale může se jednat o libovolnou vlastní třídu.
  • Když @Model je odkazováno v rámci šablony, poskytuje odkaz na objekt předaný do šablony, když je generován (v tomto příkladu se jedná o řetězec).
  • Rozhraní IDE automaticky vytvoří částečnou třídu pro šablony (soubory s příponou . cshtml ). Tento kód můžete zobrazit, ale neměli byste ho upravovat. RazorView. cshtml , částečná třída je pojmenována RazorView, aby odpovídala názvu souboru šablony. cshtml. Je to název, který se používá k odkazování na šablonu v kódu jazyka C#.
  • @using příkazy mohou být také zahrnuty v horní části šablony Razor, aby zahrnovaly další obory názvů.

Konečný výstup HTML lze následně vygenerovat pomocí následujícího kódu jazyka C#. Všimněte si, že zadáte model, který bude být řetězec "Hello World", který bude začleněn do vykresleného výstupu šablony.

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

Zde je výstup zobrazený ve webovém zobrazení simulátoru iOS a Android Emulator:

Hello World

Další syntaxe Razor

V této části budeme zavádět základní syntaxe Razor, které vám pomůžou začít s jejich používáním. Příklady v této části naplní následující třídu daty a zobrazí je pomocí syntaxe Razor:

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řída s vlastnostmi, snadno se na ně odkazuje v šabloně Razor, jak je znázorněno v této příkladové šabloně:

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

To lze 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 zobrazí ve webovém zobrazení simulátoru iOSu a Androidu Emulator:

Rupert

Příkazy jazyka C#

Do šablony lze zahrnout složitější jazyk C#, například aktualizace vlastností Model a výpočet age 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í jednosoučkové výrazy jazyka C# (například formátování věku) můžete psát tak, že kód obklopíte @() znakem .

Více příkazů jazyka C# lze zapsat tak, že je obklopíte pomocí @{} .

Příkazy If-else

Větve kódu lze vyjádřit pomocí , @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

Je také možné přidat konstruktory foreach smyčky, jako je . Předponu @ lze použít u proměnné smyčky (v tomto případě) k @food 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í spuštěný v simulátoru iOSu a Androidu Emulator:

Šmídové

Tato část popisuje základy používání šablon Razor k vykreslení jednoduchých zobrazení jen pro čtení. Následující část vysvětluje, jak pomocí Syntaxe Razor vytvářet úplnější aplikace, které přijímají uživatelský vstup a vzájemně spolupracovat mezi JavaScriptem v zobrazení HTML a C#.

Použití šablon Razor s Xamarinem

Tato část vysvětluje, jak vytvořit vlastní hybridní aplikaci pomocí šablon řešení v Visual Studio pro Mac. V okně Souborové nové > řešení... jsou k dispozici tři šablony:

  • Aplikace pro Android Android > WebView
  • Aplikace WebView pro iOS >
  • ASP.NET MVC Project

Okno Nové řešení vypadá pro projekty iPhone a Androidu– popis řešení na pravé straně zvýrazní podporu modulu šablon Razor.

Vytváření iPhone a řešení pro Android

Všimněte si, že šablonu .cshtml Razor můžete snadno přidat do jakéhokoli existujícího projektu Xamarin. Tyto šablony řešení není nutné používat. Projekty pro iOS nevyžadují, aby Storyboard mohl používat Razor. jednoduše přidejte ovládací prvek UIWebView do jakéhokoli zobrazení prostřednictvím kódu programu a můžete vykreslit celé šablony Razor v kódu C#.

Výchozí obsah řešení šablony pro projekty iPhone a Android jsou uvedené níže:

iPhone a šablony pro Android

Šablony poskytují připravenou infrastrukturu aplikací pro načtení šablony Razor s objektem datového modelu, zpracování uživatelského vstupu a komunikaci zpět s uživatelem prostřednictvím JavaScriptu.

Důležité části řešení jsou:

  • Statický obsah, například soubor style.css.
  • Soubory šablon Razor .cshtml, jako je RazorView.cshtml.
  • Modelové třídy, na které se odkazuje v šablonách Razor, jako je exampleModel.cs .
  • Třída specifická pro platformu, která vytvoří webové zobrazení a vykreslí šablonu, například v Androidu a MainActivityiPhoneHybridViewController v iOSu.

Následující část vysvětluje, jak projekty fungují.

Statický obsah

Statický obsah zahrnuje šablony stylů CSS, obrázky, soubory JavaScriptu nebo jiný obsah, který lze propojit nebo na který odkazuje soubor HTML zobrazený ve webovém zobrazení.

Projekty šablon obsahují minimální šablonu stylů, která ukazuje, jak do hybridní aplikace zahrnout statický obsah. Šablona stylů CSS se v šabloně odkazuje tímto kódem:

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

Můžete přidat jakékoli soubory stylů a javascriptové soubory, 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#. To vám umožní vytvářet sofistikované hybridní aplikace, které nezobrazí jen data jen pro čtení z modelu, ale také přijímají vstup uživatele v HTML a předá je zpět do kódu jazyka C# pro zpracování nebo uložení.

Vykreslení šablony

Volání metody GenerateString v šabloně 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 funguje vykreslování – ne že webové zobrazení za běhu překládá statické prostředky pomocí zadaného základního adresáře k vyhledání zadaných souborů.

Vývojový diagram Razor

Volání kódu jazyka C# ze šablony

Komunikace z vykreslených webových zobrazení volajících zpět do jazyka C# se provádí nastavením adresy URL webového zobrazení a potom 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 si můžete zobrazit 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 Jazyka JavaScript přečte všechny hodnoty z formuláře HTML a nastaví InvokeCSharpWithFormValueslocation.href pro webové zobrazení:

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

Tím se ve webovém zobrazení pokusíte přejít na adresu URL s vlastním schématem (např. hybrid:)

hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click

Když nativní webové zobrazení zpracuje tento požadavek na navigaci, máme příležitost ho zachytit. V iOSu se to provádí zpracováním události HandleShouldStartLoad uiWebView. V Androidu jednoduše vytvoříme podtřídu webviewClient použitého ve formuláři a přepíšeme ShouldOverrideUrlLoading.

Vnitřní prvky těchto dvou zachytávačů navigace jsou v podstatě stejné.

Nejprve zkontrolujte adresu URL, kterou se webové zobrazení pokouší načíst, a pokud nezačíná vlastním schématem ( ), povolte normální chování hybrid: navigace.

U vlastního schématu adresy 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šechno v řetězci dotazu se bude považovat 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 provádí minimální množství manipulace s řetězci u parametru textového pole (před řetězec se předá text "C# says" ) a pak volá zpět do webového zobrazení.

Po zpracování adresy URL metoda přeruší navigaci, aby se webové zobrazení nepokusí dokončit přechod na vlastní adresu URL.

Manipulace se šablonou z C #

Komunikace s vykreslenou 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 v UIWebView:

webView.EvaluateJavascript (js);

V Androidu je možné JavaScript vyvolat ve webovém zobrazení načtením JavaScriptu jako adresy URL pomocí "javascript:" schématu adresy URL:

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

Skutečně hybridní aplikace

Tyto šablony nevyu3/4í nativní ovládací prvky na každé platformě – celá obrazovka je vyplněná jediným webovým zobrazením.

HTML může být skvělé pro vytváření prototypů a zobrazení druhů věcí, ve kterém je web nejlepší, například formátovaný text a responzivní rozložení. Některé úlohy ale nejsou vhodné pro HTML a JavaScript – procházení dlouhých seznamů dat například lépe využívá nativní ovládací prvky uživatelského rozhraní (například UITableView v iOSu nebo ListView v Androidu).

Webová zobrazení v šabloně je možné snadno rozšířit o ovládací prvky specifické pro platformu – stačí upravit 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 aplikací řízenou 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 pomocí HTML a Razor.

Tyto aplikace Xamarin běží v iOSu i Androidu s využitím přenosných knihoven tříd (PCL) ke sdílení společného kódu, jako jsou databázové a modelové třídy. Šablony Razor .cshtml je také možné zahrnout do PCL, aby je bylo možné snadno sdílet napříč platformami.

Obě ukázkové aplikace zahrnují sdílení na Twitteru 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í HTML Razor řízených šablonou.

Aplikace RazorTodo používá pro zobrazení seznamu a úprav šablony HTML Razor. To znamená, že aplikaci můžeme téměř zcela sestavit ve sdílené přenosné knihovně tříd (včetně databáze a šablon .cshtml Razor). Následující snímky obrazovky ukazují aplikace pro iOS a Android.

RazorTodo

Aplikace RazorNativeTodo používá pro zobrazení pro úpravy šablonu HTML Razor, ale na každé platformě implementuje nativní seznam posouvání. 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 u velmi dlouhých seznamů dat.
  • Nativní prostředí – prvky uživatelského rozhraní specifické pro platformu jsou snadno povolené, například podpora rychlého posouvání indexu v iOSu a Androidu.

Klíčovou výhodou vytváření hybridních aplikací pomocí Xamarinu je, že můžete začít s plně uživatelským rozhraním řízeným HTML (jako první ukázka) a v případě potřeby přidat funkce specifické pro platformu (jak ukazuje druhá ukázka). Níže jsou uvedené nativní obrazovky se seznamem a obrazovky html pro úpravy Razor v iOSu i Androidu.

RazorNativeTodo

Souhrn

Tento článek vysvětluje funkce ovládacích prvků webového zobrazení dostupných v iOSu a Androidu, které usnadňují vytváření hybridních aplikací.

Potom probral modul šablon Razor a syntaxi, kterou je možné použít ke snadnému generování KÓDU HTML v aplikacích Xamarin pomocí . cshtml Soubory šablon Razor. Také popisuje šablony Visual Studio pro Mac řešení, které vám umožní rychle začít s vytvářením hybridních aplikací 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.