Содержание
Как обычно, начнем знакомство с новым фреймворком с изучения шаблонного приложения в Visual Studio.
Первое приложение Blazor Hybrid
Откроем Visual Studio и выберем в списке «Blazor Hybrid»:
В .NET 9 в этом разделе содержится два шаблона для создания приложений Blazor Hybrid, а именно:
- Приложение .NET MAUI Blazor — это, если можно так выразиться, «чистое» кроссплатформенное приложение Blazor.
- .NET MAUI Blazor and Web App — проект, сочетающий в себе как кроссплатформенное приложение Blazor Hybrid, так и веб-приложение, которое будет работать в браузере.
Итак, выберем первый шаблон приложения Blazor Hybrid и нажмем кнопку «Далее». На втором шаге мастер настройки проекта попросит ввести имя нового проекта и его расположение:
Снова нажимаем «Далее». На третьем шаге нас попросят выбрать версию .NET, а также указать необходимо ли создавать примеры страниц в приложении. Выберем следующие настройки:
После этого жмем кнопку «Создать» и в обозревателе решений появится наш первый проект Blazor Hybrid:
Рассмотрим из каких элементов состоит наш проект
Структура проекта
Папка Platforms содержит подкаталоги для каждой отдельной платформы. Папки для каждой платформы содержат ресурсы для конкретной платформы и код, который запускает приложение. Например, раскроем папку Platforms/Android:
Во время сборки используется только тот код и только те ресурсы, которые предназначены для конкретной платформы. Например, при сборке для Android файлы в папке Platform\Android будут использоваться для построения приложения, а файлы в других папках платформ не будут использоваться.
Папка Resources содержит файлы ресурсов приложения: иконки приложения, шрифты, картинки и т.д.
Папка Components содержит компоненты Razor на которых, собственно, строится визуальный интерфейс приложения. В этой папке также содержатся подкаталоги Layout и Pages. В папке Layout содержатся компоненты для построения макета приложения, а в папке Pages так называемые маршрутизируемые компоненты или, иначе говоря, страницы приложения:
Папка wwwroot — папка Web Root для приложения, содержащего общедоступные статические ресурсы приложения, включая css-файлы, js-скрипты, а также веб-страницу index.html — корневую страницу приложения Blazor, реализованную в виде обычной HTML-страницы.
по умолчанию, визуальный интерфейс приложения строится с использованием CSS-фреймворка Bootstrap, поэтому, в папке wwwroot также находятся файлы этого фреймворка.
Файл App.xaml определяет ресурсы, общие для всего приложения, а файл App.xaml.cs содержит код C#, с которого начинается выполнение приложения
Файл MainPage.xaml содержит компонент BlazorWebView в котором отображаются компоненты Razor, а в файле MainPage.xaml.cs содержится логику страницы MainPage на языке C#
Файл MauiProgram.cs: содержит класс MauiProgram, который определяет стартовый класс приложения (класс App) и ряд общих для приложения настроек. В этом файле настраиваются шрифты приложения, подключаются сервисы и т.д.
С большинством из элементов этой структуры мы разберемся подробно в отдельных частях этого руководства, а пока перейдем к следующему шагу — попробуем запустить наше приложение в различных операционных системах.
Запуск приложения в Windows 10/11
В Windows 10/11 приложения Blazor Hybrid, обычно, запускаются без проблем, однако, если при первом запуске появится ошибка, говорящая о том, что необходимо настроить компьютер, то для её устранения будет достаточно включить режим разработчик. В Windows 10 наше первое приложение будет выглядеть следующим образом:
В приложении три страницы — Home (показана на рисунке), Counter — демонстрирует работу компонента-счётчика и Weather — демонстрирует загрузку прогноза погоды и его отображение в виде таблицы.
Запуск приложения в Android
Для запуска приложения в Android мы можем использовать два варианта:
- использовать эмулятор Android (для этого придется загрузить на свой компьютер необходимые компоненты и настроить симулятор)
- воспользоваться любым физическим устройством на базе Android (планшетом или телефоном)
Рассмотрим оба варианта запуска.
Запуск приложения в эмуляторе Android
Для запуска приложения в эмуляторе Android необходимо выбрать соответствующий профиль запуска:
При запуске приложения запустится Android Device Manager, в котором нам необходимо настроить новое устройство:
Нажимаем кнопку «Создать» и принимаем лицензионное соглашение:
После этого начнется скачивание файлов и настройка виртуального устройства Android:
После настройки эмулятора он появился в списке запуска проекта в Visual Studio:
и запустится с нашим проектом Blazor Hybrid
При необходимости мы можем настроить другие эмуляторы, чтобы протестировать наше приложение на устройствах с другими размерами экранов, настройками и т.д.
Запуск приложения на физическом устройстве
Для запуска нашего приложения на физическом Android-устройстве необходимо включить на устройстве режим разработчика, подключить устройство к компьютеру через дата-кабель и выбрать в списке «Локальные устройства Android» свое устройство:
после чего запустить отладку приложения в Visual Studio. При запуске приложения на устройстве может появиться сообщение с подтверждением установки нового приложения из неустановленного источника — необходимо подтвердить установку и через некоторое время мы увидим наше приложение:
Таким образом, мы можем запускать наше приложение в различных операционных системах, на различных устройствах.
Итого
В этой части мы создали наше первое приложение Blazor Hybrid и запустили его в ОС Windows и Android. Теперь, немного ознакомившись со структурой приложения мы можем перейти к более детальному изучению Blazor Hybrid.