Bagikan melalui

UI Web Bersama

  • 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.

Sekarang setelah Anda membangun aplikasi hibrid Pengikatan Blazor Seluler yang menggabungkan UI web (HTML dengan CSS), panduan ini akan menunjukkan kepada Anda cara berbagi UI web dengan Blazor Web App sehingga Anda dapat menyediakan UI aplikasi yang sama di web.

Di Blazor ini dilakukan dengan menempatkan UI bersama dalam proyek Razor Class Library, atau RCL untuk singkatnya. Ini memungkinkan pengemasan UI web dan kode sebagai entitas yang dapat digunakan kembali yang dapat direferensikan oleh beberapa proyek dalam solusi atau dibagikan lebih luas dengan mendistribusikannya sebagai paket NuGet. Paket RCL dapat dirujuk oleh aplikasi Pengikatan Blazor Seluler dan aplikasi Web Blazor sehingga mereka berbagi UI yang sama persis.

Dalam panduan ini Anda akan membuat UI Email Display yang dapat digunakan kembali di RCL dan menggunakannya di aplikasi hibrid Pengikatan Blazor Seluler dan di aplikasi Web Blazor.

Catatan

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

Menambahkan Razor Class Library (RCL)

Untuk menambahkan RCL ke aplikasi Anda:

  1. Klik kanan pada node Solusi di Penjelajah Solusi dan pilih Tambahkan / Proyek Baru.
  2. Temukan jenis proyek Pustaka Kelas Razor dan klik Berikutnya.
  3. Masukkan nama untuk proyek, seperti EmailDisplayUI dan klik Buat.
  4. Dalam dialog berikutnya pastikan bahwa pengaturan berikut dipilih: .NET Core 3.1, Tanpa Autentikasi, dan tidak ada dukungan untuk halaman dan tampilan, lalu klik Buat.

Proyek baru berisi file Razor sendiri di mana Anda akan menulis UI web dan wwwroot folder untuk berisi aset statis yang merupakan bagian dari komponen ini.

Menambahkan UI web bersama ke RCL

  1. Klik kanan pada proyek RCL dan pilih Tambahkan / Kelas

  2. Masukkan nama EmailData.cs dan klik Tambahkan

  3. Menambahkan file bernama Email.cs ke RCL

  4. Ganti kontennya dengan kode C# berikut:

    namespace EmailDisplayUI
{
    public class EmailData
    {
        public string From { get; set; }
        public string To { get; set; }
        public string Subject { get; set; }
        public bool IsImportant { get; set; }
        public string Body { get; set; }
    }
}

  5. Mengganti nama Component1.razor menjadi DisplayEmail.razor

  6. Ganti kontennya dengan markup Razor berikut:

    <div class="emailDisplay">
    <div class="emailHeader">
        <div>
            <label>From:</label> @Email.From
        </div>
        <div>
            <label>To:</label> @Email.To
        </div>
        <div>
            <label>Priority:</label> @(Email.IsImportant ? "High" : "Normal")
        </div>
        <div>
            <label>Subject:</label> @Email.Subject
        </div>
    </div>
    <div class="emailBody">
        @Email.Body
    </div>
</div>

@code
{
    [Parameter] public EmailData Email { get; set; }
}

  7. Ubah isi menjadi wwwroot/styles.css berikut ini:

    label {
    font-weight: bold;
    font-style: italic;
}

.emailDisplay {
    background-image: url('background.png');
}

.emailHeader {
    border: 2px solid #808080;
    padding: 1em;
    margin: 1em 0;
}

.emailBody {
    border: 1px solid #808080;
    padding: 1em;
    margin: 1em 0;
}

Mereferensikan RCL

Untuk menggunakan RCL, Anda perlu mereferensikannya dari proyek UI utama sehingga UI dapat dirujuk darinya. Anda juga perlu mereferensikannya dari proyek khusus platform sehingga aset statis akan terdeteksi dan disertakan dalam aplikasi tersebut.

Di masing-masing proyek FirstBlazorHybridApp, FirstBlazorHybridApp.Android, FirstBlazorHybridApp.iOS, FirstBlazorHybridApp.macOS, dan FirstBlazorHybridApp.Windows melakukan hal berikut:

  1. Klik kanan pada proyek dan pilih Tambahkan / Referensi Proyek atau Tambahkan / Referensi
  2. Pilih EmailDisplayUI dan klik OK

Sekarang Anda siap untuk menggunakan antarmuka pengguna Email Display dalam proyek Anda:

  1. Dalam proyek FirstBlazorHybridApp buka WebUI/_Imports_.razor file dan tambahkan baris ini ke akhir file: @using EmailDisplayUI

  2. Dalam proyek FirstBlazorHybridApp buka WebUI/Pages/Index.razor file

  3. Tambahkan konten berikut ke bagian bawah file:

    <DisplayEmail Email="email" />

@code
{
    EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
}

  4. Tambahkan referensi ke CSS dari setiap proyek khusus platform dengan menambahkan baris <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> ke bagian <head> :

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

Menjalankan aplikasi untuk menguji UI

Anda sekarang siap untuk menguji UI baru! Klik kanan salah satu proyek Android, iOS, macOS, atau Windows, pilih Tetapkan sebagai Proyek Startup, dan jalankan aplikasi. Anda akan melihat beban UI asli dengan UI web di bawahnya, dan UI web akan menampilkan UI tampilan email yang Anda buat.

Pada Simulator iOS akan terlihat seperti ini:

[ ! [Email menampilkan UI yang berjalan di Simulator iOS[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Menambahkan proyek Blazor Web

Sekarang Anda siap untuk menggunakan kembali UI yang Anda buat di aplikasi web!

  1. Klik kanan pada node solusi di Penjelajah Solusi dan pilih Tambahkan / Proyek Baru

  2. Pilih templat Aplikasi Blazor dan klik Berikutnya

  3. Masukkan nama, seperti FirstBlazorWebApp dan klik Buat

  4. Pilih opsi Aplikasi Blazor Server, .NET Core 3.1, Tanpa Autentikasi, Ya untuk HTTPS, dan Tidak untuk Docker, dan klik Buat.

  5. Klik kanan pada proyek FirstBlazorWebApp dan pilih Tambahkan / Referensi Proyek

  6. EmailDisplayUI Pilih proyek dan klik OK

  7. Pages/_Host.cshtml Buka file dan tambahkan baris <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> ke bagian <head>

  8. _Imports.razor Buka file dan tambahkan baris ini ke akhir file:@using EmailDisplayUI

  9. Pages/Index.razor Buka file dan tambahkan konten berikut ke bagian bawah file:

    <DisplayEmail Email="email" />

@code
{
    EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
}

  10. Untuk menjalankan proyek, klik kanan proyek, pilih Atur sebagai Proyek Startup, dan jalankan. Ini akan memulai aplikasi web ASP.NET Core dan membuka browser web default Anda ke aplikasi.

Ini akan terlihat seperti ini di browser web Anda:

[ ! [Email menampilkan UI yang berjalan di browser web[(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

Sumber Daya Tambahan:

Untuk mempelajari selengkapnya tentang Pustaka Kelas Razor, lihat sumber daya berikut:

Ringkasan

Dalam panduan ini Anda membuat aplikasi Blazor Hybrid yang menggunakan Razor Class Library (RCL) untuk sebagian UI-nya (tampilan email). Anda kemudian menggunakan RCL yang sama untuk menghosting UI dalam aplikasi web ASP.NET Core.

Panduan ini menunjukkan contoh UI baca-saja, tetapi teknik yang sama dapat digunakan untuk membuat UI yang sangat kompleks dengan logika aplikasi yang sangat kompleks untuk memenuhi persyaratan aplikasi apa pun. Anda dapat menggunakan pola seperti injeksi dependensi (DI) untuk membuat layanan khusus platform.