Razor Şablonlarını kullanarak HTML görünümleri oluşturma
Mobil geliştirme dünyasında "karma uygulama" terimi genellikle ekranlarının bir bölümü (veya hepsini) barındırılan web görüntüleyicisi denetiminde HTML sayfaları olarak sunan bir uygulamayı ifade eder.
Mobil uygulamalarınızı tamamen HTML ve JavaScript ile derlemenize izin vermenizi sağlar ancak bu uygulamalar, karmaşık işleme veya kullanıcı arabirimi etkilerini gerçekleştirmeye çalışırken performans sorunlarıyla karşı karşınıza olabilir ve erişilen platform özellikleri de sınırlıdır.
Xamarin, özellikle Razor HTML templating 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 olur, ancak aynı zamanda C# kullanarak temel platform API'lerine ve hızlı işlemeye tam erişiminiz vardır.
Bu belgede, Xamarin kullanarak mobil platformlar arasında kullanılmaktadır HTML+JavaScript+CSS görünümleri oluşturmak için Razor templating altyapısının nasıl kullanımı açıklanacak.
Web Görünümlerini Program Aracılığıyla Kullanma
Razor hakkında bilgi edinmeden önce bu bölümde, html içeriğini doğrudan (özellikle bir uygulama içinde oluşturulan HTML içeriği) görüntülemek için web görünümlerini nasıl kullanabileceğiniz açıklandı.
Xamarin, hem iOS hem de Android'de temel alınan platform API'lerine tam erişim sağladığından, 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 BIR 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 denetimi kullanma hakkında daha fazla bilgi için bkz. iOS UIWebView tarifleri.
Android
Xamarin.Android kullanarak bir WebView denetiminde HTML görüntüleme yalnızca birkaç kod satırıyla işler:
// 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 denetimi kullanma hakkında daha fazla bilgi için bkz. Android WebView tarifleri.
Temel Dizini Belirtme
Her iki platformda da HTML sayfası için temel dizini belirten bir parametre vardır. Bu, cihazın dosya sisteminde görüntüler ve CSS dosyaları gibi kaynaklara yapılan göreli başvuruları çözümlemek için kullanılan konumtur. Ö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ı, web görünümüne bu dosyaların nerede olduğunu söyler, böylece sayfaya yüklenebilirler.
iOS
Şablon çıktısı iOS'ta aşağıdaki C# koduyla işlenir:
webView.LoadHtmlString (page, NSBundle.MainBundle.BundleUrl);
Temel dizin, NSBundle.MainBundle.BundleUrl uygulamanın yüklü olduğu dizine başvuran olarak belirtilir. Resources klasöründeki tüm dosyalar, burada gösterilen style.css dosyası gibi bu konuma kopyalanır:
Tüm statik içerik dosyaları için Derleme Eylemi BundleResource olmalıdır:
Android
Android ayrıca html dizeleri bir web görünümünde görüntülendiğinde bir temel dizinin parametre olarak geçirilsini gerektirir.
webView.LoadDataWithBaseURL("file:///android_asset/", page, "text/html", "UTF-8", null);
Uygulamanın özel file:///android_asset/,burada style.css dosyasını içeren Android Assets klasörüne başvurur.
Tüm statik içerik dosyaları için Derleme Eylemi AndroidAsset olmalıdır.
HTML ve JavaScript'den 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ının bir bağlantıya tıklaması veya form göndermesi, web görünümünün belirtilen hedefe gitmek için denemesi anlamına gelir.
Bağlantı bir dış sunucuya (google.com gibi) ise, web görünümü dış web sitesini (bir İnternet bağlantısı olduğu varsayıldı) yükleme girişiminde bulunabilir.
<a href="http://google.com/">Google</a>
Bağlantı göreli ise web görünümü bu içeriği temel dizinden yükleme girişiminde bulunur. İçerik cihazda uygulamada depolandığı için bunun çalışması için ağ bağlantısına gerek olmadığı açıktır.
<a href="somepage.html">Local content</a>
Form eylemleri aynı kuralı takip eder.
<form method="get" action="http://google.com/"></form>
<form method="get" action="somepage.html"></form>
İstemcide bir web sunucusu barındırmazsınız; Ancak, http GET üzerinden hizmetleri aramak 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 yanıt veren tasarım desenlerini kullanan sunucu iletişim tekniklerini kullanabilirsiniz. Bu sayede verileri işleme için HTML'den C# koduna kolayca geri aktarabilir ve sonuçları HTML sayfasında tekrar görüntüleyebilirsiniz.
Hem iOS hem de Android, uygulama kodunun (gerekirse) yanıt verebiliyor olması için uygulama kodunun bu gezinti olaylarını kesmesini sağlayan bir mekanizma sağlar. Bu özellik, yerel kodun web görünümüyle etkileşim kurması için karma uygulamalar inşa etmek için kritik öneme sahiptir.
iOS
iOS'ta web görünümündeki ShouldStartLoad olayı, uygulama kodunun bir gezinti isteğini işlemesine izin vermek için geçersiz kılınabilir (bağlantı tıklaması gibi). 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 attay:
webView.ShouldStartLoad += HandleShouldStartLoad;
Android
Android'de webviewclient alt sınıfına girin ve ardından gezinti isteğine yanıt vermek için kod girin.
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 web görünümünde istemciyi 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 şu anda görüntülenen sayfada JavaScript'i de çalıştırabilir. JavaScript kod bloklarının tamamı C# dizeleri kullanılarak oluşturulabilir ve yürütülabilir veya etiketler aracılığıyla sayfada mevcut olan JavaScript'e yönelik yöntem çağrıları da script hazır edebilirsiniz.
Android
Yürütülecek JavaScript kodunu oluşturun ve ardından ön ek olarak "javascript:" yazın ve web görünümüne şu dizeyi yüklemesini talimat edin:
var js = "alert('test');";
webView.LoadUrl ("javascript:" + js);
iOS
iOS web görünümleri, JavaScript'i çağırmaya özel 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ızı mümkün kan web görünümü denetimlerinin özellikleri tanıtıldı:
- Kodda oluşturulan dizelerden HTML yükleme özelliği,
- Yerel dosyalara (CSS, JavaScript, Görüntüler veya diğer HTML dosyaları) başvurabilme özelliği,
- C# kodunda gezinti isteklerini kesme özelliği,
- C# kodundan JavaScript çağırma özelliği.
Sonraki bölümde, karma uygulamalarda kullanmak üzere HTML oluşturmanızı kolaylaştıran Razor tanıt sunulacaktır.
Razor nedir?
Razor, başlangıçta sunucuda çalıştırmak ve web tarayıcılarına hizmet etmek için HTML oluşturmak için ASP.NET MVC ile sunulan bir templating altyapısıdır.
Razor templating altyapısı, düzeni ifade etmek ve CSS stil sayfaları ile JavaScript'i kolayca dahil etmek için standart HTML söz dizimini C# ile genişletebilir. Şablon herhangi bir özel tür olabilir ve özelliklerine doğrudan şablondan erişilebilen bir Model sınıfına başvurur. Temel avantajlarından biri, HTML ve C# söz dizimlerini kolayca karıştırabilme özelliğidir.
Razor şablonları sunucu tarafı kullanımıyla sınırlı değildir, Xamarin uygulamalarına da dahil olabilir. Razor şablonlarını web görünümleri ile program aracılığıyla çalışma özelliğiyle birlikte kullanmak, Xamarin ile gelişmiş platformlar arası karma uygulamaların da oluşturması için olanak sağlar.
Razor Şablonu Temelleri
Razor şablon dosyaları .cshtml dosya uzantısına sahip. Bunlar, Yeni Dosya iletişim kutusundaki Metin Templating bölümünden bir Xamarin projesine eklenebilir:
Basit bir Razor şablonu ( RazorView.cshtml) aşağıda gösterilmiştir.
@model string
<html>
<body>
<h1>@Model</h1>
</body>
</html>
Normal bir HTML dosyasından aşağıdaki farklara dikkat edin:
- Sembolün
@Razor şablonlarında özel anlamı vardır; aşağıdaki ifadenin değerlendirilecek C# olduğunu gösterir. @modelyönergesi her zaman bir Razor şablon dosyasının ilk satırı olarak görünür.- yönergesi
@modelbir Tür tarafından takip edilecektir. Bu örnekte şablona basit bir dize geçirildi, ancak bu herhangi bir özel sınıf olabilir. - Şablon genelinde başvurulsa, üretilen (bu örnekte bir dize olacak) şablona geçirilen nesneye
@Modelbir başvuru sağlar. - IDE, şablonlar (.cshtml uzantısına sahip dosyalar) için otomatik olarak kısmi sınıf oluşturur. Bu kodu görüntüleyemezsiniz ancak düzenlenemez.
Kısmi sınıf, .cshtml şablon dosyası adıyla eşleşmesi için RazorView olarak adlandırılmıştır. Bu ad, C# kodundaki şablona başvurmak için kullanılır. @usingdeyimleri, ek ad alanları eklemek için razor şablonunun en üstüne de dahil olabilir.
Daha sonra son HTML çıktısı aşağıdaki C# koduyla oluşturulabilir. Model'i, işlenmiş şablon çıkışına dahil Merhaba Dünya dize "Merhaba Dünya" olarak belirtiriz.
var template = new RazorView () { Model = "Hello World" };
var page = template.GenerateString ();
iOS Simulator ve Android uygulamaları üzerinde bir web görünümünde gösterilen çıktı Emulator:
Diğer Razor Söz Dizimi
Bu bölümde, kullanmaya başlamanıza yardımcı olacak Razor söz dizimi bazı temel bilgileri tanıtacak. Bu bölümdeki örnekler, aşağıdaki sınıfı verilerle doldurmakta ve Razor kullanarak görüntülemektedir:
public class Monkey {
public string Name { get; set; }
public DateTime Birthday { get; set; }
public List<string> FavoriteFoods { get; set; }
}
Tüm örnekler aşağıdaki veri başlatma kodunu kullanı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 özelliklerine sahip bir sınıf olduğunda, bu örnek şablonda gösterildiği gibi Razor şablonunda kolayca başvurulabilir:
@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ş olabilir:
var template = new RazorView () { Model = animal };
var page = template.GenerateString ();
Son çıkış, iOS Simulator ve Android uygulamaları üzerinde bir web görünümünde Emulator:
C# deyimleri
Şablona model özelliği güncelleştirmeleri ve bu örnekteki Yaş hesaplaması gibi daha karmaşık C#'ler dahil olabilir:
@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 çevrelerken karmaşık tek satırlı C# ifadeleri (yaşı biçimlendirme gibi) @() yazabilirsiniz.
Birden çok C# deyimi, bunları ile çevrelerken yaz @{} olabilir.
If-else deyimleri
Kod dalları, bu şablon @if örneğinde gösterildiği gibi ile ifade olabilir.
@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 döngü foreach yapıları da eklenebilir. Ön @ ek, html biçiminde işlemek için döngü değişkende (bu @food durumda) 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 Simulator ve Android Emulator:
Bu bölümde, basit salt okunur görünümleri işlemek için Razor şablonlarını kullanmanın temelleri ele almaktadı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şturma işlemi açıklanmıştır.
Xamarin ile Razor Şablonlarını Kullanma
Bu bölümde, uygulama içinde çözüm şablonlarını kullanarak kendi hibrit uygulamalarınızı derlemeyi Mac için Visual Studio. Dosya Yeni > Çözüm... penceresinden üç şablon kullanılabilir:
- Android Uygulaması > Android WebView Uygulaması
- iOS Uygulaması > WebView Uygulaması
- ASP.NET MVC Project
Yeni Çözüm penceresi, IPhone ve Android projeleri için aşağıdaki gibi görünür. Sağ tarafta çözüm açıklaması, Razor templating altyapısı desteğini vurgular.
Mevcut herhangi bir Xamarin projesine kolayca .cshtml Razor şablonu ekleyebiliyorsanız, bu çözüm şablonlarını kullanmak gerekli değildir. iOS projelerinde Razor kullanmak için Bir Storyboard da gerekli değildir; program aracılığıyla herhangi bir görünüme UIWebView denetimi eklemeniz ve Razor şablonlarının tamamını C# kodunda işlemeniz gerekir.
IPhone ve Android projeleri için varsayılan şablon çözümü içeriği aşağıda gösterilmiştir:
Şablonlar, veri modeli nesnesiyle bir Razor şablonu yüklemek, kullanıcı girişini işlemek ve JavaScript aracılığıyla kullanıcıyla yeniden iletişim kurmak için kullanıma hazır uygulama altyapısı sağlar.
Çözümün önemli bölümleri:
- style.css dosyası gibi statik içerik.
- RazorView.cshtml gibi Razor .cshtml şablon dosyaları.
- ExampleModel.cs gibi Razor şablonlarında başvurulan model sınıfları.
- Web görünümünü oluşturan ve şablonu oluşturan platforma özgü sınıf, örneğin Android'de ve
MainActivityiPhoneHybridViewControlleriOS'ta .
Aşağıdaki bölümde projelerin nasıl işlen olduğu açık almaktadı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ğlanarak veya başvurulan diğer içerikleri içerir.
Şablon projeleri, karma uygulamanıza statik içeriğin nasıl dahil olduğunu göstermek için minimum stil sayfası içerir. ŞABLONda CSS stil sayfası şu şekilde başvurur:
<link rel="stylesheet" href="style.css" />
JQuery gibi çerçeveler de dahil olmak üzere ihtiyacınız olan stil sayfası ve JavaScript dosyalarını ekleme.
Razor cshtml Şablonları
Şablon, HTML/JavaScript ile C# arasında veri iletişim kurmaya yardımcı olmak için önceden yazılmış kodu olan bir Razor .cshtml dosyası içerir. Bu, yalnızca Model'den salt okunur verileri görüntülemenin yanı sıra HTML'de kullanıcı girişini kabul eden ve işleme veya depolama için C# koduna geri aktaran gelişmiş karma uygulamalar oluşturmana olanak sağlar.
Şablonu işleme
Şablonda GenerateString çağrısı, HTML'yi bir web görünümünde görüntülenmeye hazır hale sağlar. Şablon bir model kullanıyorsa, işlemeden önce sağlanmalıdır. Bu diyagramda işlemenin nasıl çalıştığını gösterir. Statik kaynaklar, belirtilen dosyaları bulmak için sağlanan temel dizin kullanılarak çalışma zamanında web görünümü tarafından çözümlenir.
Şablondan C# kodunu çağırma
C# diline geri çağıran işlenmiş bir web görünümünden gelen iletişim, web görünümünün URL'si ayar tarafından yapılır ve ardından web görünümü yeniden yüklemeden yerel isteği işlemek için C# içinde istek araya getirilir.
RazorView'un düğmesinin nasıl işlen bir örnek olduğu görülebilir. Düğme aşağıdaki HTML'ye sahip:
<input type="button" name="UpdateLabel" value="Click" onclick="InvokeCSharpWithFormValues(this)" />
InvokeCSharpWithFormValuesJavaScript işlevi HTML Formundaki tüm değerleri okur ve web görünümü location.href için olarak ayarlar:
location.href = "hybrid:" + elm.name + "?" + qs;
Bu, web görünümünde özel bir şemaya sahip bir URL'ye (örn. hybrid:)
hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click
Yerel web görünümü bu gezinti isteğini işleyene kadar kesme fırsatımız olur. iOS'ta bu işlem UIWebView'un HandleShouldStartLoad olayı iş tarafından yapılır. Android'de, formda kullanılan WebViewClient'ın alt sınıflarını oluşturmamız ve ShouldOverrideUrlLoading'i geçersiz kılmamız gerekir.
Bu iki gezinti yolunun içleri temelde aynıdır.
İlk olarak web görünümünün yüklenmeye çalışan URL'sini kontrol edin ve özel düzen () ile başlamazsa gezintinin normal şekilde hybrid: gerçekleşmesini sağlar.
Özel URL düzeni için URL'de şema ile "?" arasındaki her şey , iş yapılacak yöntem adıdır (bu durumda "UpdateLabel"). Sorgu dizesinde yer alan her şey, yöntem çağrısına parametre olarak kabul edilir:
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 sayıda dize işlemesi yapar (dizeye "C# ifadesini" ekleme) ve ardından web görünümüne geri çağrı yapar.
URL'yi işlemenin ardından yöntemi, web görünümünün özel URL'ye gezinmeyi bitirmeye çalışmaması için gezintiyi iptal eder.
C'den şablonun manipülesi #
C# ile işlenen bir HTML web görünümü arasındaki iletişim, web görünümünde JavaScript çağrılarak yapılır. iOS'ta bu, EvaluateJavascript UIWebView üzerinde çağrılarak yapılır:
webView.EvaluateJavascript (js);
Android'de JavaScript, URL şeması kullanılarak URL olarak yükleniyorsa JavaScript web görünümünde "javascript:" çağrılabilir:
webView.LoadUrl ("javascript:" + js);
Uygulamayı gerçekten karma hale yapma
Bu şablonlar her platformda yerel denetimleri kullanmaz; ekranın tamamı tek bir web görünümüyle doldurulur.
HTML, zengin metin ve hızlı yanıt veren düzen gibi web'in en iyi olduğu türlerde içerikler görüntülemek için harika olabilir. Ancak tüm görevler HTML ve JavaScript'e uygun değildir; örneğin, uzun veri listelerinde kaydırmak, yerel kullanıcı arabirimi denetimlerini (iOS'ta UITableView veya Android'de ListView gibi) kullanarak daha iyi performans gösterir.
Şablonda web görünümleri platforma özgü denetimlerle kolayca geliştirilebiliyor. Tek yapmanız gereken Mac üzerinde Xcode kullanarak MainStoryboard.storyboard dosyasını düzenlemek veya Android'de Resources/layout/Main.axml'yi düzenlemektir.
RazorTodo Örneği
RazorTodo deposu, tamamen HTML odaklı 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ı kullanan tamamen HTML odaklı uygulama.
- RazorNativeTodo - iOS ve Android için yerel liste görünümü denetimlerini kullanır, ancak düzenleme ekranı HTML ve Razor ile görüntülenir.
Bu Xamarin uygulamaları, veritabanı ve model sınıfları gibi ortak kodu paylaşmak için Taşınabilir Sınıf Kitaplıkları (PCL) kullanarak hem iOS hem de Android üzerinde çalıştır. Razor .cshtml şablonları, platformlar arasında kolayca paylaşılacak şekilde PCL'ye de dahil edilebilir.
Her iki örnek uygulama da yerel platformdaki Twitter paylaşımı ve metin-konuşma API'lerini içerir ve Xamarin'e sahip karma uygulamaların HTML Razor şablon odaklı görünümlerden temel alınan tüm işlevlere erişmeye devam eder.
RazorTodo uygulaması, liste ve düzenleme görünümleri için HTML Razor şablonları kullanır. Bu, uygulamayı neredeyse tamamen paylaşılan bir Taşınabilir Sınıf Kitaplığında (veritabanı ve .cshtml Razor şablonları dahil) oluşturabiliriz. Aşağıdaki ekran görüntüleri iOS ve Android uygulamalarını gösterir.
RazorNativeTodo uygulaması, düzenleme görünümü için bir HTML Razor şablonu kullanır, ancak her platformda yerel bir kaydırma listesi kullanır. 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şturmak için önemli bir avantaj, tamamen HTML odaklı bir kullanıcı arabirimiyle (ilk örnekte olduğu gibi) başlayabilir ve ardından gerektiğinde platforma özgü işlevsellik eklemenizdir (ikinci örnekte de olduğu gibi). Hem iOS hem de Android'de yerel liste ekranları ve HTML Razor düzenleme ekranları aşağıda gösterilmiştir.
Özet
Bu makalede, iOS ve Android'de bulunan ve karma uygulamalar üreten web görünümü denetimlerinin özellikleri açıklanmıştır.
Daha sonra Razor templating altyapısını ve kullanarak Xamarin uygulamalarına kolayca HTML oluşturmak için kullanılmaktadır söz dizimi ele alınmıştır. cshtml Razor şablon dosyaları. Ayrıca, Xamarin Mac için Visual Studio karma uygulamalar oluşturma konusunda hızlı bir şekilde başlamayı olanaklı klik çözüm şablonlarını da anlatmıştık.
Son olarak, web görünümlerini yerel kullanıcı arabirimleri ve API'lerle birleştirmeyi gösteren RazorTodo örnekleri tanıtıldı.