共有 Web UI

[アーティクル]
08/22/2023

重要

このプロジェクトは実験的なリリースです。試験的なモバイル Blazor バインディングを試して、で https://github.com/xamarin/MobileBlazorBindingsフィードバックを提供することを願っています。

Web UI (HTML と CSS) を組み込んだ Mobile Blazor Bindings ハイブリッドアプリを構築したので、このチュートリアルでは、Web 上で同じアプリ UI を提供できるように、Blazor Web アプリと Web UI を共有する方法について説明します。

Blazor では、共有 UI を Razor クラスライブラリプロジェクトに配置するか、略して RCL を配置することで行われます。これにより、Web UI とコードを再利用可能なエンティティとしてパッケージ化できます。このエンティティは、ソリューション内の複数のプロジェクトから参照したり、NuGet パッケージとして配布することでより広く共有したりできます。 RCL パッケージは、Mobile Blazor Bindings アプリと Blazor Web アプリによって参照され、まったく同じ UI を共有できます。

このチュートリアルでは、RCL で再利用可能なEmail表示 UI を作成し、それを Mobile Blazor Binding ハイブリッドアプリと Blazor Web アプリで使用します。

注意

このページは、最初のハイブリッドアプリのビルドに関するチュートリアルの続きです。続行する前に、このチュートリアルを完了することをお勧めします。

Razor クラスライブラリの追加 (RCL)

RCL をアプリに追加するには:

ソリューションエクスプローラーの [ソリューション] ノードを右クリックし、[追加] / [新しいプロジェクト] を選択します。
Razor クラスライブラリプロジェクトの種類を見つけて、[次へ] をクリックします。
などの EmailDisplayUI プロジェクトの名前を入力し、[作成] をクリックします。
次のダイアログで、[認証なし]、[ページとビューのサポートなし] の設定が選択 .NET Core 3.1されていることを確認し、[作成] をクリックします。

新しいプロジェクトには、Web UI を作成する独自の Razor ファイルと、 wwwroot このコンポーネントの一部である静的アセットを含むフォルダーが含まれています。

共有 Web UI を RCL に追加する

RCL プロジェクトを右クリックし、[追加] / [クラス] を選択します。
名前 EmailData.cs を入力し、[追加] をクリックします。
という名前 Email.cs のファイルを RCL に追加する

その内容を次の C# コードに置き換えます。

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; }
    }
}

Component1.razor の名前を DisplayEmail.razor に変更する

その内容を次の Razor マークアップに置き換えます。

<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; }
}

の wwwroot/styles.css 内容を次のように変更します。

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;
}

RCL を参照する

RCL を使用するには、メイン UI プロジェクトからそれを参照して、UI を参照できるようにする必要があります。また、静的資産が検出され、それらのアプリに含まれるように、プラットフォーム固有のプロジェクトから参照する必要があります。

FirstBlazorHybridApp、FirstBlazorHybridApp.Android、FirstBlazorHybridApp.iOS、FirstBlazorHybridApp.macOS、および FirstBlazorHybridApp.Windows の各プロジェクトでは、次の操作を行います。

プロジェクトを右クリックし、[追加] / [プロジェクト参照] または [追加/ 参照] を選択します。
[OK] を選択 EmailDisplayUI してクリックします

これで、プロジェクトでEmail表示 UI を使用する準備ができました。

FirstBlazorHybridApp プロジェクトでファイルを WebUI/_Imports_.razor 開き、ファイルの末尾に次の行を追加します。 @using EmailDisplayUI
FirstBlazorHybridApp プロジェクトでファイルを WebUI/Pages/Index.razor 開きます

ファイルの下部に次の内容を追加します。

<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!" };
}

セクションに行 <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> を追加して、各プラットフォーム固有のプロジェクトから CSS への参照を <head> 追加します。
- Android: wwwroot/index.html
- iOS: Resources/wwwroot/index.html
- macOS: Resources/wwwroot/index.html
- Windows: wwwroot/index.html

アプリを実行して UI をテストする

これで、新しい UI をテストする準備ができました。 Android、iOS、macOS、または Windows のいずれかのプロジェクトを右クリックし、[スタートアッププロジェクトとして設定] を選択してアプリを実行します。 Web UI の下にネイティブ UI の読み込みが表示され、Web UI には作成したメール表示 UI が表示されます。

iOS シミュレーターでは、次のようになります。

[ ![Email iOS シミュレーターで実行されている表示 UI[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Blazor Web プロジェクトを追加する

これで、Web アプリで構築した UI を再利用する準備ができました。

ソリューションエクスプローラーのソリューションノードを右クリックし、[追加] / [新しいプロジェクト] を選択します。
Blazor アプリテンプレートを選択し、[次へ] をクリックします
などの FirstBlazorWebApp 名前を入力し、[作成] をクリックします。
Blazor Server App オプション、、No Auth、 .NET Core 3.1HTTPS の場合は [はい]、Docker の場合は [いいえ] を選択し、[作成] をクリックします。
FirstBlazorWebApp プロジェクトを右クリックし、[追加] / [プロジェクト参照] を選択します。
プロジェクトを EmailDisplayUI 選択し、[OK] をクリックします。
ファイルを Pages/_Host.cshtml 開き、セクションに行 <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> を <head> 追加します
ファイルを _Imports.razor 開き、ファイルの末尾に次の行を追加します。 @using EmailDisplayUI

ファイルを Pages/Index.razor 開き、ファイルの下部に次の内容を追加します。

<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!" };
}

プロジェクトを実行するには、プロジェクトを右クリックし、[スタートアッププロジェクトとして設定] を選択して実行します。これにより、ASP.NET Core Web アプリが起動し、既定の Web ブラウザーでアプリが開きます。

Web ブラウザーでは次のようになります。

[ ![Email Web ブラウザーで実行されている UI の表示 [(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

その他の資料

Razor クラスライブラリの詳細については、次のリソースをチェックします。

まとめ

このチュートリアルでは、UI (電子メール表示) の一部に Razor クラスライブラリ (RCL) を使用する Blazor ハイブリッドアプリを作成しました。その後、同じ RCL を使用して、ASP.NET Core Web アプリケーションで UI をホストしました。

このチュートリアルでは、読み取り専用 UI の例を示しましたが、同じ手法を使用して、任意の複雑なアプリケーションロジックを使用して任意の複雑な UI を作成し、任意のアプリケーション要件を満たすことができます。依存関係の挿入 (DI) などのパターンを使用して、プラットフォーム固有のサービスを作成できます。