Aracılığıyla paylaş

Razor Şablonlarını kullanarak HTML görünümleri oluşturma

Mobil geliştirme dünyasında "karma uygulama" terimi genellikle ekranlarının bazılarını (veya tümünü) barındırılan bir web görüntüleyici denetiminde HTML sayfaları olarak sunan bir uygulamayı ifade eder.

Mobil uygulamanızı tamamen HTML ve JavaScript'te oluşturmanıza olanak sağlayan bazı geliştirme ortamları vardır, ancak bu uygulamalar karmaşık işleme veya UI efektlerini gerçekleştirmeye çalışırken performans sorunlarıyla karşılaşabilir ve erişebilecekleri platform özelliklerinde de sınırlıdır.

Xamarin, özellikle Razor HTML şablon oluşturma altyapısını kullanırken her iki dünyanın da en iyilerini sunar. Xamarin ile JavaScript ve CSS kullanan platformlar arası şablonlu HTML görünümleri oluşturma esnekliğine sahip olursunuz, aynı zamanda C# kullanarak temel platform API'lerine ve hızlı işlemeye tam erişime sahip olursunuz.

Bu belgede, Xamarin kullanılarak mobil platformlarda kullanılabilecek HTML+JavaScript+CSS görünümleri oluşturmak için Razor şablon oluşturma altyapısının nasıl kullanılacağı açıklanmaktadır.

Web Görünümlerini Program Aracılığıyla Kullanma

Razor hakkında bilgi edinmeden önce bu bölüm, web görünümlerini kullanarak HTML içeriğini doğrudan (özellikle bir uygulama içinde oluşturulan HTML içeriği) görüntülemeyi kapsar.

Xamarin, hem iOS hem de Android'de temel alınan platform API'lerine tam erişim sağlar, bu nedenle C# kullanarak HTML oluşturmak ve görüntülemek kolaydır. Her platform için temel söz dizimi aşağıda gösterilmiştir.

iOS

Xamarin.iOS'ta UIWebView denetiminde HTML görüntülemek de yalnızca birkaç kod satırı alır:

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);

UIWebView denetimini kullanma hakkında daha fazla ayrıntı için iOS UIWebView tariflerine bakın.

Android

Xamarin.Android kullanarak WebView denetiminde HTML görüntüleme işlemi yalnızca birkaç kod satırıyla gerçekleştirilir:

// 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);

WebView denetimini kullanma hakkında daha fazla ayrıntı için Android WebView tariflerine bakın.

Temel Dizini Belirtme

Her iki platformda da HTML sayfasının temel dizinini belirten bir parametre vardır. Bu, cihazın dosya sistemindeki görüntüler ve CSS dosyaları gibi kaynaklara göreli başvuruları çözümlemek için kullanılan konumdur. Örneğin, gibi etiketler

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

şu dosyalara bakın: style.css, monkey.jpg ve jscript.js. Temel dizin ayarı, bu dosyaların sayfaya yüklenebilmesi için web görünümüne bu dosyaların nerede bulunduğunu bildirir.

iOS

Şablon çıkışı iOS'ta aşağıdaki C# koduyla işlenir:

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

Temel dizin, uygulamanın yüklü olduğu dizine başvuran şekilde NSBundle.MainBundle.BundleUrl belirtilir. Kaynaklar klasöründeki tüm dosyalar, burada gösterilen style.css dosyası gibi bu konuma kopyalanır:

iPhoneHybrid solution

Tüm statik içerik dosyaları için Derleme Eylemi BundleResource olmalıdır:

iOS project build action: BundleResource

Android

Android, html dizeleri bir web görünümünde görüntülendiğinde parametre olarak bir temel dizinin geçirilmesini de gerektirir.

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

Özel dize file:///android_asset/, burada style.css dosyasını içeren uygulamanızdaki Android Varlıkları klasörüne başvurur.

AndroidHybrid solution

Tüm statik içerik dosyaları için Derleme Eylemi AndroidAsset olmalıdır.

Android project build action: AndroidAsset

HTML ve JavaScript'ten C# çağırma

Bir html sayfası bir web görünümüne yüklendiğinde, bağlantılar ve formlar sayfa bir sunucudan yüklendiğinde olduğu gibi davranır. Bu, kullanıcı bir bağlantıya tıklarsa veya form gönderirse web görünümünün belirtilen hedefe gitmeyi deneyeceği anlamına gelir.

Bağlantı bir dış sunucuya (google.com gibi) ise, web görünümü dış web sitesini yüklemeyi dener (İnternet bağlantısı olduğu varsayılarak).

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

Bağlantı göreliyse, web görünümü bu içeriği temel dizinden yüklemeyi dener. İçerik cihazdaki uygulamada depolandığından, bunun çalışması için ağ bağlantısı gerekmez.

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

Form eylemleri aynı kuralı izler.

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

İstemcide bir web sunucusu barındırmayacaksınız; ancak, HTTP GET üzerinden hizmetleri çağırmak ve JavaScript yayarak (veya web görünümünde zaten barındırılan JavaScript'i çağırarak) yanıtları zaman uyumsuz olarak işlemek için günümüzün duyarlı tasarım desenlerinde kullanılan sunucu iletişim tekniklerini kullanabilirsiniz. Bu, HTML'den verileri kolayca işlenmek üzere C# koduna geçirmenizi ve ardından sonuçları HTML sayfasında yeniden görüntülemenizi sağlar.

Hem iOS hem de Android, uygulama kodunun yanıt verebilmesi için (gerekirse) bu gezinti olaylarını kesmeye yönelik bir uygulama kodu mekanizması sağlar. Bu özellik, yerel kodun web görünümüyle etkileşim kurmasına olanak sağladığından karma uygulamalar oluşturma açısından çok önemlidir.

iOS

iOS'ta web görünümündeki ShouldStartLoad olayı, uygulama kodunun gezinti isteğini (bağlantı tıklaması gibi) işlemesine izin vermek için geçersiz kılınabilir. Yöntem parametreleri tüm bilgileri sağlar

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

ve ardından olay işleyicisini atayın:

webView.ShouldStartLoad += HandleShouldStartLoad;

Android

Android'de WebViewClient alt sınıfına gidin ve gezinti isteğine yanıt vermek için kod uygulayın.

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
    }
}

ve ardından istemciyi web görünümünde ayarlayın:

webView.SetWebViewClient (new HybridWebViewClient ());

C'den JavaScript çağırma#

C# kodu, web görünümüne yeni bir HTML sayfası yüklemesini söylemenin yanı sıra o anda görüntülenen sayfada JavaScript de çalıştırabilir. Tüm JavaScript kod blokları C# dizeleri kullanılarak oluşturulabilir ve yürütülebilir ya da etiketler aracılığıyla script sayfada zaten mevcut olan JavaScript'e yöntem çağrıları oluşturabilirsiniz.

Android

Yürütülecek JavaScript kodunu oluşturun ve ardından "javascript:" ön eki ekleyin ve web görünümüne bu dizeyi yüklemesini verin:

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

iOS

iOS web görünümleri, JavaScript'i çağırmak için özel olarak bir yöntem sağlar:

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

Özet

Bu bölümde, hem Android hem de iOS'ta Xamarin ile karma uygulamalar oluşturmamıza olanak sağlayan web görünümü denetimlerinin özellikleri sunulmuştur, örneğin:

  • Kodda oluşturulan dizelerden HTML yükleme özelliği,
  • Yerel dosyalara (CSS, JavaScript, Görüntüler veya diğer HTML dosyaları) başvurma özelliği,
  • C# kodunda gezinti isteklerine müdahale etme özelliği,
  • C# kodundan JavaScript çağırabilme özelliği.

Sonraki bölümde Razor tanıtılmaktadır ve bu da karma uygulamalarda kullanılacak HTML'yi oluşturmayı kolaylaştırır.

Razor nedir?

Razor, başlangıçta sunucuda çalıştırılacak ve web tarayıcılarına sunulacak HTML oluşturmak için ASP.NET MVC ile tanıtılan bir şablon oluşturma altyapısıdır.

Razor şablon oluşturma altyapısı, düzeni ifade edebilmeniz ve CSS stil sayfalarını ve JavaScript'i kolayca ekleyebilmeniz için standart HTML söz dizimini C# ile genişletir. Şablon, herhangi bir özel tür olabilecek ve özelliklerine doğrudan şablondan erişilebilen bir Model sınıfına başvurabilir. Başlıca avantajlarından biri, HTML ve C# söz dizimini kolayca karıştırma özelliğidir.

Razor şablonları sunucu tarafı kullanımıyla sınırlı değildir, Xamarin uygulamalarına da eklenebilir. Razor şablonlarının yanı sıra web görünümleriyle program aracılığıyla çalışma olanağının kullanılması, gelişmiş platformlar arası karma uygulamaların Xamarin ile derlenmesini sağlar.

Razor Şablonu temel bilgileri

Razor şablon dosyalarının . cshtml dosya uzantısı vardır. Bunlar, Yeni Dosya iletişim kutusundaki Metin Şablonu bölümünden bir Xamarin projesine eklenebilir:

New File - Razor Template

Aşağıda basit bir Razor şablonu ( RazorView.cshtml) gösterilmektedir.

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

Normal bir HTML dosyasından aşağıdaki farklara dikkat edin:

  • Simgenin @ Razor şablonlarında özel bir anlamı vardır; aşağıdaki ifadenin değerlendirilecek C# olduğunu gösterir.
  • @model yönergesi her zaman Razor şablon dosyasının ilk satırı olarak görünür.
  • yönergesini @model bir Tür takip etmelidir. Bu örnekte şablona basit bir dize geçiriliyor, ancak bu herhangi bir özel sınıf olabilir.
  • Şablon boyunca başvurulduğunda @Model , şablon oluşturulduğunda şablona geçirilen nesneye bir başvuru sağlar (bu örnekte bir dize olacaktır).
  • IDE, şablonlar (.cshtml uzantısına sahip dosyalar) için otomatik olarak kısmi sınıf oluşturur. Bu kodu görüntüleyebilirsiniz, ancak düzenlenmemelidir. RazorView.cshtml Kısmi sınıf, .cshtml şablon dosya adıyla eşleşecek şekilde RazorView olarak adlandırılır. C# kodundaki şablona başvurmak için kullanılan bu addır.
  • @using deyimleri, ek ad alanlarını eklemek için Razor şablonunun en üstüne de eklenebilir.

Son HTML çıkışı daha sonra aşağıdaki C# koduyla oluşturulabilir. Modeli, işlenen şablon çıkışına dahil edilecek bir "Merhaba Dünya" dizesi olarak belirttiğimizi unutmayın.

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

iOS Simülatörü ve Android Öykünücüsü'nde web görünümünde gösterilen çıkış aşağıdadır:

Hello World

Diğer Razor Söz Dizimi

Bu bölümde, kullanmaya başlamanıza yardımcı olacak bazı temel Razor söz dizimlerini tanıtacağız. Bu bölümdeki örnekler aşağıdaki sınıfı verilerle doldurur ve Razor kullanarak görüntüler:

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

Tüm örneklerde aşağıdaki veri başlatma kodu kullanılır

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

Model Özelliklerini Görüntüleme

Model özellikleri olan bir sınıf olduğunda, razor şablonunda bu örnek şablonda gösterildiği gibi bunlara kolayca başvurulur:

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

Bu, aşağıdaki kod kullanılarak bir dizeye işlenebilir:

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

Son çıkış burada iOS Simülatörü ve Android Öykünücüsü'ndeki bir web görünümünde gösterilir:

Rupert

C# deyimleri

Bu örnekte model özelliği güncelleştirmeleri ve Yaş hesaplaması gibi daha karmaşık C# şablona eklenebilir:

@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>

Kodu ile @()çevreleyerek karmaşık tek satırlı C# ifadeleri (yaşı biçimlendirme gibi) yazabilirsiniz.

Birden çok C# deyimi, ile @{}çevrelenerek yazılabilir.

If-else deyimleri

Kod dalları, bu şablon örneğinde gösterildiği gibi ile @if ifade edilebilir.

@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>

Döngüler

gibi foreach döngü yapıları da eklenebilir. Ön ek, @ döngü değişkeninde ( @food bu örnekte) HTML olarak işlemek için kullanılabilir.

@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>

Yukarıdaki şablonun çıktısı iOS Simülatörü ve Android Öykünücüsü üzerinde çalışıyor olarak gösterilir:

Rupert X Monkey

Bu bölümde, basit salt okunur görünümleri işlemek için Razor şablonlarını kullanmanın temelleri ele alınmıştır. Sonraki bölümde, Kullanıcı girişini kabul eden ve HTML görünümünde JavaScript ile C# arasında birlikte çalışabilen Razor kullanarak daha eksiksiz uygulamalar oluşturmayı açıklar.

Xamarin ile Razor Şablonlarını Kullanma

Bu bölümde, Mac için Visual Studio çözüm şablonlarını kullanarak kendi karma uygulamanızı derlemeyi nasıl kullanacağınız açıklanmaktadır. Yeni Çözüm Dosyala>... penceresinde üç şablon vardır:>

  • Android > Uygulaması > Android WebView Uygulaması
  • iOS > Uygulaması > WebView Uygulaması
  • ASP.NET MVC Projesi

Yeni Çözüm penceresi i Telefon ve Android projeleri için şöyle görünür. Sağ taraftaki çözüm açıklaması Razor şablon oluşturma altyapısı desteğini vurgular.

Creating iPhone and Android solutions

Mevcut Xamarin projelerine kolayca .cshtml Razor şablonu ekleyebileceğinizi unutmayın; bu çözüm şablonlarını kullanmak gerekli değildir. iOS projelerinin Razor kullanması için görsel taslak gerekmez; herhangi bir görünüme program aracılığıyla uiWebView denetimi eklemeniz yeterlidir ve Razor şablonlarını C# kodunda tamamen işleyebilirsiniz.

i Telefon ve Android projeleri için varsayılan şablon çözümü içeriği aşağıda gösterilmiştir:

iPhone and Android templates

Şablonlar, veri modeli nesnesine sahip bir Razor şablonu yüklemek, kullanıcı girişini işlemek ve JavaScript aracılığıyla kullanıcıyla geri iletişim kurmak için kullanıma hazır uygulama altyapısını size verir.

Çözümün önemli bölümleri şunlardır:

  • style.css dosyası gibi statik içerik.
  • RazorView.cshtml gibi Razor .cshtml şablon dosyaları.
  • ExampleModel.cs gibi Razor şablonlarında başvuruda bulunan model sınıfları.
  • Web görünümünü oluşturan ve Android ve iOS üzerinde gibi MainActivity şablonu işleyen platforma iPhoneHybridViewController özgü sınıf.

Aşağıdaki bölümde projelerin nasıl çalıştığı açıklanmaktadır.

Statik İçerik

Statik içerik CSS stil sayfalarını, görüntüleri, JavaScript dosyalarını veya web görünümünde görüntülenen bir HTML dosyasından bağlanabilen veya bunlara başvurulabilen diğer içeriği içerir.

Şablon projeleri, karma uygulamanıza statik içerik eklemeyi gösteren en düşük stil sayfasını içerir. CSS stil sayfasına şablonda şu şekilde başvurulur:

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

JQuery gibi çerçeveler de dahil olmak üzere ihtiyacınız olan stil sayfasını ve JavaScript dosyalarını ekleyebilirsiniz.

Razor cshtml Şablonları

Şablon, HTML/JavaScript ile C# arasında veri iletişimine yardımcı olmak için önceden yazılmış kod içeren bir Razor .cshtml dosyası içerir. Bu, yalnızca Modelden salt okunur verileri görüntülemeyen, aynı zamanda HTML'de kullanıcı girişini kabul eden ve işleme veya depolama için C# koduna geri geçiren gelişmiş karma uygulamalar oluşturmanıza olanak tanır.

Şablonu işleme

bir şablonda çağrısı GenerateString , HTML'yi web görünümünde görüntülenmeye hazır hale getirir. Şablon bir model kullanıyorsa işleme öncesinde sağlanmalıdır. Bu diyagramda, belirtilen dosyaları bulmak için sağlanan temel dizin kullanılarak statik kaynakların çalışma zamanında web görünümü tarafından çözümlenmesinden değil, işlemenin nasıl çalıştığı gösterilmektedir.

Razor flowchart

Şablondan C# kodunu çağırma

İşlenmiş bir web görünümünden C# öğesine geri çağrı yapan iletişim, web görünümünün URL'sini ayarlayarak ve ardından yerel isteği web görünümünü yeniden yüklemeden işlemek için C# dilinde isteği keserek gerçekleştirilir.

RazorView düğmesinin nasıl işlendiğinde bir örnek görülebilir. Düğme aşağıdaki HTML'ye sahiptir:

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

InvokeCSharpWithFormValues JavaScript işlevi HTML Formundaki tüm değerleri okur ve web görünümü için öğesini location.href ayarlar:

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

Bu, web görünümünde özel düzen içeren bir URL'ye (örn. hybrid:) gitmeyi dener

hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click

Yerel web görünümü bu gezinti isteğini işlediğinde, bu isteği kesme fırsatımız olur. iOS'ta bu, UIWebView'un HandleShouldStartLoad olayı işlenerek yapılır. Android'de, formda kullanılan WebViewClient'ı alt sınıfa alıp ShouldOverrideUrlLoading'i geçersiz kılacağız.

Bu iki gezinti kesme noktasının içleri temelde aynıdır.

İlk olarak, web görünümünün yüklemeye çalıştığı URL'yi denetleyin ve özel düzen ()hybrid: ile başlamazsa gezintinin normal şekilde gerçekleşmesine izin verin.

Özel URL düzeni için, düzen ile "?" arasındaki URL'deki her şey işlenecek yöntem adıdır (bu örnekte"UpdateLabel"). Sorgu dizesindeki her şey, yöntem çağrısının parametreleri olarak değerlendirilir:

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

UpdateLabel bu örnekte metin kutusu parametresinde çok az miktarda dize işlemesi yapar (dizeye "C# diyor" ifadesinin eklenmesi) ve ardından web görünümüne geri çağrı yapar.

URL'yi işledikten sonra, web görünümünün özel URL'ye gezinmeyi bitirmeye çalışmaması için yöntemi gezintiyi durdurur.

Şablonu C'den düzenleme#

C# tarafından işlenen HTML web görünümüyle iletişim, web görünümünde JavaScript çağrılarak yapılır. iOS'ta bu, UIWebView'da çağrı EvaluateJavascript yapılarak yapılır:

webView.EvaluateJavascript (js);

Android'de JavaScript, URL şeması kullanılarak "javascript:" JavaScript'i URL olarak yükleyerek web görünümünde çağrılabilir:

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

Bir uygulamayı gerçekten karma hale getirme

Bu şablonlar her platformda yerel denetimleri kullanmaz; ekranın tamamı tek bir web görünümüyle doldurulur.

HTML, prototip oluşturma ve zengin metin ve duyarlı düzen gibi web'in en iyi olduğu öğelerin türlerini görüntülemek için harika olabilir. Ancak tüm görevler HTML ve JavaScript için uygun değildir; örneğin, uzun veri listelerinde gezinmek, yerel UI denetimlerini (iOS'ta UITableView veya Android'de ListView gibi) kullanarak daha iyi performans gösterir.

Şablondaki web görünümleri platforma özgü denetimlerle kolayca artırılabilir. Mac'te Xcode veya Android'de Resources/layout/Main.axml kullanarak MainStoryboard.storyboard dosyasını düzenlemeniz yeterlidir.

RazorTodo Örneği

RazorTodo deposu, tamamen HTML temelli bir uygulama ile HTML'yi yerel denetimlerle birleştiren bir uygulama arasındaki farkları göstermek için iki ayrı çözüm içerir:

  • RazorTodo - Razor şablonlarını kullanarak tamamen HTML temelli uygulama.
  • RazorNativeTodo - iOS ve Android için yerel liste görünümü denetimlerini kullanır, ancak düzenleme ekranını HTML ve Razor ile görüntüler.

Bu Xamarin uygulamaları, veritabanı ve model sınıfları gibi ortak kodları paylaşmak için Taşınabilir Sınıf Kitaplıklarını (PCL) kullanarak hem iOS hem de Android üzerinde çalışır. Razor .cshtml şablonları, platformlar arasında kolayca paylaşılabilmesi için PCL'ye de eklenebilir.

Her iki örnek uygulama da yerel platformdan Twitter paylaşımı ve metin okuma API'leri içerir ve Xamarin ile karma uygulamaların HTML Razor şablon temelli görünümlerden temel alınan tüm işlevlere hala erişebildiğini gösterir.

RazorTodo uygulaması, liste ve düzenleme görünümleri için HTML Razor şablonlarını kullanır. Bu, uygulamayı neredeyse tamamen paylaşılan bir Taşınabilir Sınıf Kitaplığı'nda (veritabanı ve .cshtml Razor şablonları dahil) oluşturacağımız anlamına gelir. Aşağıdaki ekran görüntüleri iOS ve Android uygulamalarını gösterir.

RazorTodo

RazorNativeTodo uygulaması düzenleme görünümü için bir HTML Razor şablonu kullanır, ancak her platformda yerel bir kaydırma listesi uygular. Bu, aşağıdakiler dahil olmak üzere bir dizi avantaj sağlar:

  • Performans: Yerel kaydırma denetimleri, çok uzun veri listeleriyle bile hızlı ve sorunsuz kaydırma sağlamak için sanallaştırmayı kullanır.
  • Yerel deneyim: iOS ve Android'de hızlı kaydırma dizini desteği gibi platforma özgü kullanıcı arabirimi öğeleri kolayca etkinleştirilir.

Xamarin ile karma uygulamalar oluşturmanın temel avantajlarından biri, tamamen HTML tabanlı bir kullanıcı arabirimiyle (ilk örnek gibi) başlayıp gerektiğinde platforma özgü işlevler eklemenizdir (ikinci örnekte gösterildiği gibi). Hem iOS hem de Android'de yerel liste ekranları ve HTML Razor düzenleme ekranları aşağıda gösterilmiştir.

RazorNativeTodo

Özet

Bu makalede, iOS ve Android'de bulunan ve karma uygulamalar derlemeyi kolaylaştıran web görünümü denetimlerinin özellikleri açıklanmıştır.

Daha sonra Razor şablon oluşturma altyapısını ve kullanarak Xamarin uygulamalarında kolayca HTML oluşturmak için kullanılabilecek söz dizimini ele alır.cshtml Razor şablon dosyaları. Ayrıca, Xamarin ile karma uygulamalar oluşturmaya hızlı bir şekilde başlamanıza olanak sağlayan Mac için Visual Studio çözüm şablonları da açıklanmıştır.

Son olarak web görünümlerini yerel kullanıcı arabirimleri ve API'lerle birleştirmeyi gösteren RazorTodo örneklerini kullanıma sunulmuştur.