Bagikan melalui

Hybrid Halo Dunia - bagaimana cara kerjanya?

  • Artikel

Penting

Proyek ini adalah rilis eksperimental. Kami harap Anda mencoba Experimental Mobile Blazor Bindings dan memberikan umpan balik di https://github.com/xamarin/MobileBlazorBindings.

Catatan

Halaman ini adalah kelanjutan dari panduan Membangun aplikasi hibrid pertama Anda . Kami sarankan Anda menyelesaikan panduan tersebut sebelum melanjutkan.

Tip

Untuk contoh yang lebih sederhana, mulailah dengan panduan Bangun aplikasi pertama Anda dan panduan Halo Dunia berikutnya yang menunjukkan beberapa fitur Blazor yang lebih mendasar.

Mari kita lihat proyek awal yang dibuat di panduan sebelumnya untuk memahami lebih lanjut tentang cara menggunakan Experimental Mobile Blazor Bindings untuk aplikasi hibrid.

Proyek utama yang perlu dilihat adalah proyek bersama yang berisi .razor file. Proyek khusus platform hanya berisi kode minimal khusus untuk Experimental Mobile Blazor Bindings.

Ini adalah file dan folder penting dalam proyek bersama:

Folder akar

  • _Imports.razor - Berisi arahan umum yang diterapkan ke semua file lain .razor dalam folder ini dan sub-foldernya. Sub-folder dapat memiliki file mereka sendiri _Imports.razor dengan direktif tambahan. Jenis direktif yang paling umum dalam file ini adalah @using direktif, yang digunakan untuk mengimpor namespace ke dalam .razor file, sama persis dengan pernyataan C using #.
  • App.cs - Berisi titik masuk UI utama aplikasi, yang diwakili oleh kelas yang berasal dari Xamarin.Forms.Application kelas dasar. Konstruktor kelas ini membuat instans host, menambahkan layanan ke host, lalu menggunakan host untuk menambahkan komponen Blazor bernama Main ke halaman aplikasi utama.
  • CounterState.cs - Berisi layanan yang melacak nilai penghitung dan menawarkan API terkait. Layanan ini digunakan di bagian asli dan HTML aplikasi.
  • Main.razor - Berisi komponen UI Blazor utama aplikasi. Ini berisi beberapa UI asli dan juga komponen yang menghosting BlazorWebView bagian HTML aplikasi.

Folder WebUI dan wwwroot

Folder ini berisi bagian web aplikasi, yang menjadikannya aplikasi hibrid. File dan folder di sini sangat cocok dengan apa yang ditemukan aplikasi web Blazor.

  • WebUI/_Imports.razor - Berisi arahan umum untuk bagian web aplikasi.
  • WebUI/App.razor - Berisi titik masuk utama untuk bagian web aplikasi.
  • WebUI/Pages folder - Berisi halaman yang dapat dinavigasi yang ditulis menggunakan sintaks web Blazor. Semua .razor file di sini merender HTML dan berbagi status aplikasi dengan aplikasi lainnya.
  • WebUI/Shared folder - Berisi komponen UI bersama yang dapat digunakan kembali yang ditulis menggunakan sintaks web Blazor. File .razor di sini semuanya merender HTML dan digunakan di halaman lain di aplikasi. Folder ini juga berisi MainLayout komponen yang menentukan bentuk keseluruhan bagian web aplikasi.
  • wwwroot folder - Berisi aset web statis yang digunakan di bagian web aplikasi. Ini biasanya file dan gambar CSS.

Mari kita menyelami file yang menarik.

App.cs titik masuk

Titik masuk untuk UI aplikasi ada di halaman ini. Ini menyiapkan layanan untuk aplikasi dan kemudian menginisialisasi UI dengan melampirkan komponen Pengikatan Blazor Seluler ke MainPage elemen .

Dua set layanan terdaftar:

  1. services.AddBlazorHybrid() menambahkan layanan yang diperlukan oleh Pengikatan Blazor Seluler untuk menghosting komponen Web Blazor di UI asli.
  2. services.AddSingleton<CounterState>() menambahkan layanan khusus aplikasi yang dapat digunakan dari mana saja dalam aplikasi, termasuk file kode, komponen Blazor, dan layanan lainnya. Ini adalah layanan singleton, yang berarti bahwa paling banyak satu instans akan dibuat, sehingga memungkinkan status dibagikan.

Pelajari selengkapnya tentang layanan dan DI dalam topik injeksi dependensi.

Main.razor halaman antarmuka pengguna asli

Ini adalah halaman UI asli utama aplikasi. Ini berisi beberapa komponen UI asli, seperti <Label> dan <Button>. Ini juga berisi komponen yang menghosting <BlazorWebView> konten web Blazor:

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

Beberapa hal menarik lainnya:

  • Tag <FirstBlazorHybridApp.WebUI.App /> adalah bagaimana bagian asli aplikasi mereferensikan bagian web aplikasi.
  • Direktif @inject digunakan untuk mereferensikan CounterState layanan.
  • Metode OnInitialized dan Dispose diimplementasikan untuk melampirkan/melepaskan StateChanged penanganan aktivitas sehingga halaman UI ini di-refresh setiap kali CounterState layanan menunjukkan bahwa penghitung telah berubah.

Layanan CounterState.cs

Kelas ini mendefinisikan layanan yang terdaftar di App.cs. Ini berisi status, API, dan peristiwa yang digunakan untuk melacak dan melaporkan status penghitung. Berbagai komponen UI dalam aplikasi menggunakan layanan ini untuk menampilkan UI mereka dan mengetahui kapan harus merefreshnya,

Pelajari selengkapnya tentang layanan dan DI dalam topik injeksi dependensi.

WebUI/App.razor titik entri web

File ini adalah titik masuk Blazor utama untuk bagian web aplikasi. Ini menggunakan fitur Blazor standar, seperti Router. Komponen ini menentukan halaman web Blazor mana yang akan ditampilkan berdasarkan rute saat ini (atau menunjukkan kesalahan jika tidak ada yang ditemukan).

WebUI/Shared/MainLayout.razor tata letak web

Umum untuk sebagian besar aplikasi web Blazor, komponen ini menentukan tata letak keseluruhan bagian web aplikasi. Di sini Anda dapat menyertakan elemen umum seperti navigasi, header, dan footer yang digunakan di bagian web aplikasi.

WebUI/Pages/Index.razor halaman web

Berisi halaman isi web yang dapat dinavigasi. Halaman Index biasanya merupakan halaman default yang dimuat sebelum navigasi apa pun

wwwroot folder aset web statis

Folder ini berisi aset web statis yang digunakan di bagian web aplikasi. Artinya, file-file ini dilayani apa adanya oleh komponen browser web. Mereka dirujuk menggunakan pola jalur file statis Blazor, yaitu _content/<PROJECT_NAME>/path/to/the/file.css. Misalnya, dalam proyek ini file CSS yang terletak di akan dirujuk wwwroot/css/bootstrap/bootstrap.min.css sebagai _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

File-file ini disematkan dalam aplikasi dan ditangani oleh Pengikatan Blazor Seluler secara otomatis. File dalam folder ini dapat dibaca dari kode dengan menggunakan IFileProvider layanan dan panggilan FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), seperti yang terlihat dalam file aplikasi WebUI/Pages/FetchData.razor .

Proyek ini berisi pustaka Bootstrap CSS untuk menyediakan gaya untuk skenario UI umum.

index.html file di proyek Android/iOS/macOS/Windows

Setiap proyek khusus platform berisi index.html file yang merupakan halaman kontainer untuk UI web Blazor, dan menyertakan referensi ke file CSS.

Lokasi file di setiap platform adalah sebagai berikut:

  • Android: wwwroot/index.html
  • iOS: Resources/wwwroot/index.html
  • macOS: Resources/wwwroot/index.html
  • Windows: wwwroot/index.html

File lain

Kami mendorong Anda untuk menjelajahi semua file dalam aplikasi untuk mempelajari kontennya dan cara mereka berinteraksi.