다음을 통해 공유

하이브리드 헬로 월드 - 어떻게 작동하나요?

  • 아티클

중요

이 프로젝트는 실험적 릴리스입니다. 실험적 모바일 Blazor 바인딩을 사용해 보고 에서 https://github.com/xamarin/MobileBlazorBindings피드백을 제공해 주시기 바랍니다.

참고

이 페이지는 첫 번째 하이브리드 앱 빌드 연습의 연속입니다. 계속하기 전에 이 연습을 완료하는 것이 좋습니다.

팁

간단한 예제를 보려면 먼저 첫 번째 앱 빌드 연습과 Blazor의 몇 가지 기본 기능을 보여 주는 후속 헬로 월드 연습으로 시작합니다.

이전 연습에서 만든 초기 프로젝트를 살펴보고 하이브리드 앱에 실험적 모바일 Blazor 바인딩을 사용하는 방법에 대해 자세히 알아보겠습니다.

살펴볼 기본 프로젝트는 파일이 포함된 공유 프로젝트입니다.razor. 플랫폼별 프로젝트에는 실험적 모바일 Blazor 바인딩과 관련된 최소한의 코드만 포함됩니다.

다음은 공유 프로젝트의 주목할 만한 파일 및 폴더입니다.

루트 폴더

  • _Imports.razor - 이 폴더의 다른 .razor 모든 파일과 해당 하위 폴더에 적용되는 일반적인 지시문을 포함합니다. 하위 폴더에는 추가 지시문이 있는 자체 _Imports.razor 파일이 있을 수 있습니다. 이 파일에서 가장 일반적인 지시문 형식은 @using C# using 문과 정확히 동일한 파일로 .razor 네임스페이스를 가져오는 데 사용되는 지시문입니다.
  • App.cs- 기본 클래스에서 Xamarin.Forms.Application 파생되는 클래스로 표현되는 애플리케이션의 기본 UI 진입점을 포함합니다. 이 클래스의 생성자는 호스트를 인스턴스화하고, 호스트에 서비스를 추가한 다음, 호스트를 사용하여 기본 애플리케이션 페이지에 라는 Main Blazor 구성 요소를 추가합니다.
  • CounterState.cs - 카운터 값을 추적하고 관련 API를 제공하는 서비스를 포함합니다. 이 서비스는 앱의 네이티브 및 HTML 부분에서 모두 사용됩니다.
  • Main.razor- 앱의 기본 Blazor UI 구성 요소를 포함합니다. 여기에는 일부 네이티브 UI와 BlazorWebView 앱의 HTML 부분을 호스트하는 구성 요소가 포함되어 있습니다.

WebUI 및 wwwroot 폴더

이러한 폴더에는 앱의 웹 파트가 포함되어 있으므로 이를 하이브리드 앱으로 만듭니다. 여기에 있는 파일 및 폴더는 Blazor 웹앱을 찾은 항목과 밀접하게 일치합니다.

  • WebUI/_Imports.razor - 앱의 웹 파트에 대한 일반적인 지시문을 포함합니다.
  • WebUI/App.razor- 앱의 웹 파트에 대한 기본 진입점을 포함합니다.
  • WebUI/Pages 폴더 - Blazor 웹 구문을 사용하여 작성한 탐색 가능한 페이지를 포함합니다. 여기에 있는 파일은 .razor 모두 HTML을 렌더링하고 앱의 나머지 부분과 앱 상태를 공유합니다.
  • WebUI/Shared folder - Blazor 웹 구문을 사용하여 작성한 공유 재사용 가능한 UI 구성 요소를 포함합니다. 여기에 있는 파일은 .razor 모두 HTML을 렌더링하며 앱의 다른 페이지에서 사용됩니다. 이 폴더에는 앱의 MainLayout 웹 파트의 전체 모양을 정의하는 구성 요소도 포함되어 있습니다.
  • wwwroot 폴더 - 앱의 웹 파트에서 사용되는 정적 웹 자산을 포함합니다. 일반적으로 CSS 파일 및 이미지입니다.

흥미로운 파일을 살펴보겠습니다.

App.cs 진입점

앱 UI의 진입점은 이 페이지에 있습니다. 앱에 대한 서비스를 설정한 다음, 모바일 Blazor Bindings 구성 요소를 요소에 연결하여 UI를 MainPage 초기화합니다.

두 가지 서비스 집합이 등록됩니다.

  1. services.AddBlazorHybrid() 는 기본 UI에서 Blazor 웹 구성 요소를 호스트하기 위해 Mobile Blazor 바인딩에 필요한 서비스를 추가합니다.
  2. services.AddSingleton<CounterState>() 는 코드 파일, Blazor 구성 요소 및 기타 서비스를 포함하여 애플리케이션의 어디에서나 사용할 수 있는 앱별 서비스를 추가합니다. 이 서비스는 싱글톤 서비스로, 최대 하나의 instance 생성되므로 상태를 공유할 수 있습니다.

종속성 주입 항목에서 서비스 및 DI에 대해 자세히 알아봅니다.

Main.razor 네이티브 UI 페이지

앱의 기본 네이티브 UI 페이지입니다. 여기에는 및 <Button>와 같은 <Label> 여러 네이티브 UI 구성 요소가 포함되어 있습니다. Blazor 웹 콘텐츠를 호스트하는 구성 요소도 포함되어 <BlazorWebView> 있습니다.

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

몇 가지 다른 흥미로운 사항:

  • 태그는 <FirstBlazorHybridApp.WebUI.App /> 앱의 네이티브 부분이 앱의 웹 파트를 참조하는 방법입니다.
  • @inject 지시문은 서비스를 참조 CounterState 하는 데 사용됩니다.
  • 및 메서드는 OnInitialized 서비스가 카운터가 변경되었음을 표시할 때마다 CounterState 이 UI 페이지가 새로 고쳐지도록 이벤트 처리기를 연결/분리 StateChanged 하기 위해 구현 Dispose 됩니다.

CounterState.cs 서비스

이 클래스는 에 App.cs등록된 서비스를 정의합니다. 여기에는 카운터의 상태를 추적하고 보고하는 데 사용되는 상태, API 및 이벤트가 포함됩니다. 앱의 다양한 UI 구성 요소는 이 서비스를 사용하여 UI를 표시하고 새로 고칠 시기를 알고 있습니다.

종속성 주입 항목에서 서비스 및 DI에 대해 자세히 알아봅니다.

WebUI/App.razor 웹 진입점

이 파일은 애플리케이션의 웹 파트에 대한 기본 Blazor 진입점입니다. 라우터와 같은 표준 Blazor 기능을 사용합니다. 이 구성 요소는 현재 경로에 따라 표시할 Blazor 웹 페이지를 결정합니다(또는 찾을 수 없는 경우 오류를 표시).

WebUI/Shared/MainLayout.razor 웹 레이아웃

대부분의 Blazor 웹앱에 공통적으로 이 구성 요소는 앱의 웹 파트의 전체 레이아웃을 정의합니다. 여기서는 앱의 웹 파트에서 사용되는 탐색, 머리글 및 바닥글과 같은 일반적인 요소를 포함할 수 있습니다.

WebUI/Pages/Index.razor 웹 페이지

웹 콘텐츠의 탐색 가능한 페이지를 포함합니다. 페이지는 Index 일반적으로 탐색 전에 로드되는 기본 페이지입니다.

wwwroot 정적 웹 자산 폴더

이 폴더에는 앱의 웹 파트에 사용되는 정적 웹 자산이 포함되어 있습니다. 즉, 이러한 파일은 웹 브라우저 구성 요소에서 있는 그대로 제공됩니다. 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 바인딩에서 자동으로 처리됩니다. 이 폴더의 파일은 앱 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 웹 UI의 컨테이너 페이지인 파일이 포함되어 있으며 CSS 파일에 대한 참조가 포함됩니다.

각 플랫폼의 파일 위치는 다음과 같습니다.

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

기타 파일

애플리케이션의 모든 파일을 탐색하여 콘텐츠와 상호 작용하는 방법을 알아보는 것이 좋습니다.