ハイブリッド Hello World - どのように動作しますか?

  • [アーティクル]

重要

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

注意

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

ヒント

より簡単な例については、最初のアプリのビルドに関するチュートリアルと、Blazor のいくつかのより基本的な機能を示す後続のHello Worldチュートリアルから始めます。

前のチュートリアルで作成した最初のプロジェクトを見て、ハイブリッド アプリに Experimental Mobile Blazor Bindings を使用する方法の詳細を理解しましょう。

確認するメイン プロジェクトは、ファイルを含む.razor共有プロジェクトです。 プラットフォーム固有のプロジェクトには、Experimental Mobile Blazor Bindings に固有の最小限のコードのみが含まれています。

共有プロジェクトの注目すべきファイルとフォルダーは次のとおりです。

ルート フォルダー

  • _Imports.razor - このフォルダーとそのサブフォルダー内の他 .razor のすべてのファイルに適用される共通ディレクティブが含まれます。 サブフォルダーには、追加のディレクティブを含む独自 _Imports.razor のファイルを含めることができます。 このファイルで最も一般的なディレクティブの種類は@using、 ディレクティブです。これは、C# using ステートメントとまったく同じように、名前空間をファイルに.razorインポートするために使用されます。
  • App.cs- 基本クラスから派生したクラスで表される、アプリケーションのメイン UI エントリ ポイントがXamarin.Forms.Application含まれます。 このクラスのコンストラクターは、ホストをインスタンス化し、ホストにサービスを追加した後、ホストを使用して、 という名前Mainの Blazor コンポーネントを メイン アプリケーション ページに追加します。
  • CounterState.cs - カウンター値を追跡し、関連する API を提供するサービスが含まれます。 このサービスは、アプリのネイティブ部分と HTML 部分の両方で使用されます。
  • Main.razor- アプリのメイン Blazor UI コンポーネントが含まれます。 これには、ネイティブ UI と、アプリの HTML 部分を BlazorWebView ホストするコンポーネントが含まれています。

WebUI フォルダーと wwwroot フォルダー

これらのフォルダーにはアプリの Web パーツが含まれており、これがハイブリッド アプリになります。 ここでのファイルとフォルダーは、Blazor Web アプリが見つかった内容とよく一致します。

  • WebUI/_Imports.razor - アプリの Web パーツの共通ディレクティブが含まれています。
  • WebUI/App.razor- アプリの Web パーツのメインエントリ ポイントが含まれます。
  • WebUI/Pages folder - Blazor Web 構文を使用して作成されたナビゲーション可能なページが含まれます。 ここでのファイルはすべて .razor HTML をレンダリングし、アプリの状態をアプリの残りの部分と共有します。
  • WebUI/Shared folder - Blazor Web 構文を使用して作成された共有の再利用可能な UI コンポーネントが含まれます。 ここでのファイルはすべて .razor HTML をレンダリングし、アプリ内の他のページで使用されます。 このフォルダーには、アプリの MainLayout Web パーツの全体的な形状を定義するコンポーネントも含まれています。
  • wwwroot folder - アプリの Web パーツで使用される静的 Web 資産が含まれます。 これは通常、CSS ファイルとイメージです。

興味深いファイルを見てみましょう。

App.cs エントリ ポイント

アプリの UI のエントリ ポイントはこのページにあります。 アプリのサービスを設定し、Mobile Blazor Bindings コンポーネントを 要素にアタッチして UI を MainPage 初期化します。

次の 2 つのサービス セットが登録されます。

  1. services.AddBlazorHybrid() は、ネイティブ UI で Blazor Web コンポーネントをホストするために Mobile Blazor Bindings に必要なサービスを追加します。
  2. services.AddSingleton<CounterState>() は、コード ファイル、Blazor コンポーネント、その他のサービスなど、アプリケーション内のどこからでも使用できるアプリ固有のサービスを追加します。 これはシングルトン サービスです。つまり、最大で 1 つのインスタンスが作成されるため、状態を共有できます。

サービスと DI の詳細については、 依存関係の挿入に関するトピックを参照してください。

Main.razor ネイティブ UI ページ

これは、アプリのメインネイティブ UI ページです。 これには、 や <Button>など<Label>、いくつかのネイティブ UI コンポーネントが含まれています。 また、Blazor Web コンテンツを <BlazorWebView> ホストするコンポーネントも含まれています。

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

その他の興味深い点:

  • タグは <FirstBlazorHybridApp.WebUI.App /> 、アプリのネイティブ部分がアプリの Web パーツを参照する方法です。
  • ディレクティブは @inject 、サービスを参照するために使用されます CounterState 。
  • OnInitializedメソッドと Dispose メソッドは、カウンターが変更されたことをサービスが示すたびにCounterStateこの UI ページが更新されるように、イベント ハンドラーをアタッチまたはデタッチStateChangedするために実装されます。

CounterState.cs サービス

このクラスは、 に登録されているサービスを App.cs定義します。 これには、カウンターの状態を追跡および報告するために使用される状態、API、およびイベントが含まれています。 アプリ内のさまざまな UI コンポーネントは、このサービスを使用して UI を表示し、更新するタイミングを把握します。

サービスと DI の詳細については、 依存関係の挿入に関するトピックを参照してください。

WebUI/App.razor Web エントリ ポイント

このファイルは、アプリケーションの Web パーツのメイン Blazor エントリ ポイントです。 ルーターなどの標準の Blazor 機能を使用 します。 このコンポーネントは、現在のルートに基づいて表示する Blazor Web ページを決定します (見つからない場合はエラーが表示されます)。

WebUI/Shared/MainLayout.razor Web レイアウト

ほとんどの Blazor Web アプリに共通するこのコンポーネントは、アプリの Web パーツの全体的なレイアウトを定義します。 ここでは、アプリの Web パーツで使用されるナビゲーション、ヘッダー、フッターなどの一般的な要素を含めることができます。

WebUI/Pages/Index.razor Web ページ

Web コンテンツのナビゲーション可能なページが含まれます。 ページは Index 通常、ナビゲーションの前に読み込まれる既定のページです

wwwroot 静的 Web アセット フォルダー

このフォルダーには、アプリの Web パーツで使用される静的 Web 資産が含まれています。 つまり、これらのファイルは Web ブラウザー コンポーネントによってそのまま提供されます。 これらは、Blazor 静的ファイル パス パターン () を _content/<PROJECT_NAME>/path/to/the/file.css使用して参照されます。 たとえば、このプロジェクトでは、 にある wwwroot/css/bootstrap/bootstrap.min.css CSS ファイルが として _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css参照されます。

これらのファイルはアプリケーションに埋め込まれるので、Mobile Blazor Bindings によって自動的に処理されます。 このフォルダー内のファイルは、アプリWebUI/Pages/FetchData.razorのファイルに示されているように、 サービスをIFileProvider使用して を呼び出FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt")すことによって、コードから読み取ることができます。

このプロジェクトには、一般的な UI シナリオのスタイルを提供するブートストラップ CSS ライブラリが含まれています。

index.html Android/iOS/macOS/Windows プロジェクトのファイル

各プラットフォーム固有のプロジェクトには index.html 、Blazor Web UI のコンテナー ページであるファイルが含まれており、CSS ファイルへの参照が含まれています。

各プラットフォーム上のファイルの場所は次のとおりです。

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

その他のファイル

アプリケーション内のすべてのファイルを調べて、その内容とやり取り方法を学習することをお勧めします。