Bagikan melalui

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 pertama Anda . Kami sarankan Anda menyelesaikan panduan tersebut sebelum melanjutkan.

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

Proyek utama yang perlu dilihat adalah proyek bersama yang berisi .razor file. Proyek Android dan iOS tidak berisi kode apa pun khusus untuk Experimental Mobile Blazor Bindings.

Ini adalah file dalam proyek bersama:

  • _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 arahan tambahan. Jenis direktif yang paling umum dalam file ini adalah @using direktif, yang digunakan untuk mengimpor namespace ke dalam .razor file, persis sama dengan pernyataan C using #.
  • App.cs - Berisi titik masuk antarmuka pengguna utama aplikasi, yang diwakili oleh kelas yang berasal dari Xamarin.Forms.Application kelas dasar. Konstruktor kelas ini membuat instans Host Generik, menambahkan layanan ke host (proyek default tidak memilikinya), lalu menggunakan host untuk menambahkan komponen Blazor bernama HelloWorld ke elemen aplikasi (this).
  • Counter.razor - Berisi Komponen Blazor bernama Counter.
  • HelloWorld.razor - Berisi Komponen Blazor bernama HelloWorld.

Mari kita pelajari dua Komponen Blazor untuk melihat cara kerjanya.

Komponen Blazor Penghitung

Komponen ini berisi dua bagian:

  1. Markup yang mendefinisikan elemen UI dan properti terkait dan penanganan aktivitasnya:

    <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">

    <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">

        <Button Text="Increment" OnClick="IncrementCount" />

        <Label Text="@("The button was clicked " + count + " times")"
            FontAttributes="FontAttributes.Bold"
            VerticalTextAlignment="TextAlignment.Center" />

    </StackLayout>

</Frame>

    Tag seperti HTML mewakili komponen UI yang cocok dengan komponen Xamarin.Forms serta properti dan peristiwanya. Beberapa properti memiliki nilai komputasi, seperti Label properti komponen Text , yang nilainya diatur ke nilai yang dihitung oleh kode C#, yang ditandai dengan @( ... ) blok ekspresi.

    Saat penanganan aktivitas dijalankan, seperti Button peristiwa komponen OnClick , komponen secara otomatis merender ulang, yang memungkinkan UI untuk memperbarui tanpa logika tambahan. Skenario yang lebih canggih dapat mengontrol komponen mana yang dirender ulang dan kapan.

  2. Kode yang mengimplementasikan penanganan aktivitas atau fungsionalitas komponen lainnya, dibungkus dalam @code { ... } blok:

    int count;

void IncrementCount()
{
    count++;
}

    Kode ini menaikkan count bidang , yang juga digunakan sebagai nilai komputasi Label properti komponen Text . Setelah penanganan IncrementCount() aktivitas dijalankan, nilai count baru akan digunakan saat UI dirender ulang.

Komponen HelloWorld Blazor

Komponen HelloWorld hanya berisi markup:

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Perhatikan bahwa komponen dirujuk Counter dalam komponen ini dengan merujuknya sebagai tag <Counter />.

Setiap Komponen Blazor dikompilasi ke dalam kelas dengan nama yang sama dengan file. Namespace adalah namespace akar proyek, ditambah nama folder, jika ada, dipisahkan oleh titik (.). Jenis dapat dirujuk oleh kode C# lain melalui nama jenisnya (tidak umum), atau dalam .razor file dengan menggunakannya sebagai tag.