Aracılığıyla paylaş

Hibrit Merhaba Dünya - nasıl çalışır?

  • Makale

Önemli

Bu proje deneysel bir sürümdür. Deneysel Mobil Blazor Bağlamalarını denemenizi ve adresinden https://github.com/xamarin/MobileBlazorBindingsgeri bildirim sağladığınızı umuyoruz.

Not

Bu sayfa, İlk karma uygulamanızı derleme adım adım kılavuzunun devamıdır. Devam etmeden önce bu kılavuzu tamamlamanızı öneririz.

İpucu

Daha basit bir örnek için, İlk uygulamanızı derleme kılavuzu ve Blazor'ın bazı daha temel özelliklerini gösteren sonraki Merhaba Dünya kılavuzuyla başlayın.

Karma uygulamalar için Experimental Mobile Blazor Bağlamaları'nı kullanma hakkında daha fazla bilgi edinmek için önceki kılavuzda oluşturulan ilk projeye göz atalım.

Bakılır ana proje, dosyaları içeren .razor paylaşılan projedir. Platforma özgü projeler yalnızca Experimental Mobile Blazor Bağlamalarına özgü en az sayıda kod içerir.

Paylaşılan projedeki önemli dosya ve klasörler şunlardır:

Kök klasör

  • _Imports.razor - Bu klasördeki ve alt klasörlerindeki diğer .razor tüm dosyalara uygulanan ortak yönergeleri içerir. Alt klasörlerin ek yönergeleri olan kendi _Imports.razor dosyaları olabilir. Bu dosyadaki @using en yaygın yönerge türü, bir ad alanını dosyalara .razor aktarmak için kullanılan ve C# using deyimiyle tam olarak aynı olan yönergedir.
  • App.cs - Temel sınıftan türetilen Xamarin.Forms.Application bir sınıf tarafından temsil edilen uygulamanın ana ui giriş noktasını içerir. Bu sınıfın oluşturucu bir konağın örneğini oluşturur, konağa hizmetler ekler ve ardından ana uygulama sayfasına adlı Main bir Blazor bileşeni eklemek için konağı kullanır.
  • CounterState.cs - Sayaç değerini izleyen ve ilgili API'leri sunan bir hizmet içerir. Bu hizmet, uygulamanın hem yerel hem de HTML bölümlerinde kullanılır.
  • Main.razor - Uygulamanın ana Blazor UI bileşenini içerir. Bazı yerel kullanıcı arabirimini ve ayrıca uygulamanın HTML bölümünü barındıran bir BlazorWebView bileşeni içerir.

WebUI ve wwwroot klasörleri

Bu klasörler uygulamanın web bölümünü içerir ve bu da bunu karma bir uygulama yapar. Buradaki dosya ve klasörler, Blazor web uygulamasının bulunduğu dosya ve klasörlerle yakından eşleşmektedir.

  • WebUI/_Imports.razor - Uygulamanın web bölümü için ortak yönergeleri içerir.
  • WebUI/App.razor - Uygulamanın web bölümü için ana giriş noktasını içerir.
  • WebUI/Pages folder - Blazor web söz dizimi kullanılarak yazılan gezinilebilir sayfaları içerir. .razor Buradaki dosyaların tümü HTML oluşturur ve uygulamanın geri kalanıyla uygulama durumunu paylaşır.
  • WebUI/Shared folder - Blazor web söz dizimi kullanılarak yazılan paylaşılan yeniden kullanılabilir UI bileşenlerini içerir. Buradaki .razor dosyaların tümü HTML oluşturur ve uygulamadaki diğer sayfalarda kullanılır. Bu klasör, uygulamanın web bölümünün genel şeklini tanımlayan bileşeni de içerir MainLayout .
  • wwwroot folder - Uygulamanın web bölümünde kullanılan statik web varlıklarını içerir. Bu genellikle CSS dosyaları ve görüntüleridir.

Şimdi ilginç dosyalara göz atalım.

App.cs giriş noktası

Uygulamanın kullanıcı arabiriminin giriş noktası bu sayfadadır. Uygulama için hizmetleri ayarlar ve ardından öğesine bir Mobile Blazor Bağlamaları bileşeni ekleyerek kullanıcı arabirimini MainPage başlatır.

İki hizmet kümesi kaydedilir:

  1. services.AddBlazorHybrid() Yerel kullanıcı arabiriminde Blazor Web bileşenlerini barındırmak için Mobile Blazor Bağlamaları için gereken hizmetleri ekler.
  2. services.AddSingleton<CounterState>() kod dosyaları, Blazor bileşenleri ve diğer hizmetler dahil olmak üzere uygulamanın herhangi bir yerinden kullanılabilecek uygulamaya özgü bir hizmet ekler. Bu tekil bir hizmettir, yani en fazla bir örneği oluşturularak durumun paylaşılması sağlanır.

Bağımlılık ekleme konusunda hizmetler ve DI hakkında daha fazla bilgi edinin.

Main.razor yerel kullanıcı arabirimi sayfası

Bu, uygulamanın ana yerel kullanıcı arabirimi sayfasıdır. ve <Button>gibi <Label> çeşitli yerel kullanıcı arabirimi bileşenleri içerir. Ayrıca Blazor web içeriğini barındıran bir <BlazorWebView> bileşen içerir:

<BlazorWebView VerticalOptions="LayoutOptions.FillAndExpand">
    <FirstBlazorHybridApp.WebUI.App />
</BlazorWebView>

Birkaç ilginç şey daha:

  • Etiket, <FirstBlazorHybridApp.WebUI.App /> uygulamanın yerel bölümünün uygulamanın web bölümüne başvurma şeklidir.
  • yönergesi @inject hizmete başvurmak CounterState için kullanılır.
  • ve Dispose yöntemleri, hizmet sayacın OnInitialized değiştiğini her gösterdiğinde bu kullanıcı arabirimi sayfasının yenilenmesi CounterState için bir StateChanged olay işleyicisi eklemek/ayırmak için uygulanır.

CounterState.cs hizmeti

Bu sınıf, içinde App.cskayıtlı bir hizmet tanımlar. Sayacın durumunu izlemek ve raporlamak için kullanılan durum, API'ler ve olayları içerir. Uygulamadaki çeşitli kullanıcı arabirimi bileşenleri, kullanıcı arabirimini görüntülemek ve ne zaman yenileneceğini bilmek için bu hizmeti kullanır.

Bağımlılık ekleme konusunda hizmetler ve DI hakkında daha fazla bilgi edinin.

WebUI/App.razor web giriş noktası

Bu dosya, uygulamanın web bölümü için ana Blazor giriş noktasıdır. Yönlendirici gibi standart Blazor özelliklerini kullanır. Bu bileşen, geçerli yola göre hangi Blazor web sayfasının görüntüleneceğini belirler (veya bulunamazsa bir hata gösterir).

WebUI/Shared/MainLayout.razor web düzeni

Blazor web uygulamalarının çoğunda ortak olan bu bileşen, uygulamanın web bölümünün genel düzenini tanımlar. Burada, uygulamanın web bölümünde kullanılan gezinti, üst bilgiler ve alt bilgiler gibi yaygın öğeleri ekleyebilirsiniz.

WebUI/Pages/Index.razor web sayfası

Gezinilebilir bir web içeriği sayfası içerir. Sayfa Index genellikle herhangi bir gezintiden önce yüklenen varsayılan sayfadır

wwwroot statik web varlıkları klasörü

Bu klasör, uygulamanın web bölümünde kullanılan statik web varlıklarını içerir. Başka bir ifadeyle, bu dosyalar web tarayıcısı bileşeni tarafından olduğu gibi sunulur. Blazor statik dosya yolu deseni kullanılarak başvurulur _content/<PROJECT_NAME>/path/to/the/file.css. Örneğin, bu projede içinde wwwroot/css/bootstrap/bootstrap.min.css bulunan bir CSS dosyasına olarak _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.cssbaşvurulmalıdır.

Bu dosyalar uygulamaya eklenir ve Mobile Blazor Bağlamaları tarafından otomatik olarak işlenir. Bu klasördeki dosyalar, uygulamanın WebUI/Pages/FetchData.razor dosyasında görüldüğü gibi hizmeti kullanılarak IFileProvider ve çağrılarak FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt")koddan okunabilir.

Bu proje, yaygın kullanıcı arabirimi senaryoları için stiller sağlamak üzere Bootstrap CSS kitaplığını içerir.

index.html Android/iOS/macOS/Windows projelerindeki dosya

Platforma özgü her proje, Blazor web kullanıcı arabiriminin kapsayıcı sayfası olan ve CSS dosyalarına başvurular içeren bir index.html dosya içerir.

Dosyanın her platformdaki konumu aşağıdaki gibidir:

  • Android: wwwroot/index.html
  • Ios: Resources/wwwroot/index.html
  • Macos: Resources/wwwroot/index.html
  • Windows: wwwroot/index.html

Diğer dosyalar

İçeriklerini ve etkileşimlerini öğrenmek için uygulamadaki tüm dosyaları keşfetmenizi öneririz.