Blazor .NET - это довольно новая, активно развивающаяся технология от Microsoft для создания многофункциональных веб-приложений. Эта технология основана на веб-сборке и Mono. Blazor позволяет писать клиентский код на языке C # и создавать макет с помощью синтаксиса бритвы. Таким образом, код C #, который обычно используется при разработке серверной части, можно легко повторно использовать в реализации интерфейсной части. Что, если Blazor .NET и C # можно использовать для создания подключаемого модуля для существующего собственного веб-приложения JavaScript или приложения Electron? Данная статья посвящена созданию плагина визуализации схемы Open API на языке C # для веб-редактора диаграмм Draw.io, реализованного на JavaScript.

Draw.io - мощный онлайн-инструмент для создания диаграмм. Доступен как веб-приложение, так и рабочий стол. Draw.io - зрелый проект. Он реализован на чистом JavaScript. Кроме того, его пользовательский интерфейс реализован с использованием стандартного JavaScript document API. Механизм визуализации диаграмм - это библиотека с открытым исходным кодом mxGraph, разработанная той же командой, что и основное приложение.

Draw.io может использовать скрипт плагина. Пример плагина схемы SQL можно найти на github. В листинге кода ниже описывается общедоступный интерфейс, необходимый для реализации надстройки сборки.

Для настройки плагина в приложении draw.io необходимо выполнить следующие шаги:

  1. Перейдите в главное меню Дополнительно - ›Плагины
  2. Настройте URL-адрес файла javascript в открывшейся диалоговой форме.
  3. Перезапустите электронное приложение или перезагрузите веб-сайт draw.io, чтобы изменения вступили в силу.

Draw.io создает диаграммы в специальном формате XML. Пример ниже показывает, как это выглядит.

Внутри находится корневой XML-элемент с коллекцией mxcell. Каждый элемент XML mxcell описывает визуальный элемент на диаграмме. Есть два типа элементов. Это зависит от значений специальных атрибутов:

  • edge = ”1 - соединитель, линия, стрелка и т. д.
  • vertex = ”1 - вершина, эллипс, прямоугольник и т. д.

Draw.io предоставляет API, который позволяет отображать диаграмму из содержимого XML.

Это краткое описание приложения draw.io и его основных функций. Перейдем к описанию примера задачи плагина.

Пример задачи надстройки C #

Основная цель этой статьи - показать, как можно интегрировать любую существующую библиотеку .NET с Draw.io. Так, например, возьмем из NuGet библиотеку NSwag.Core. Эта библиотека позволяет работать со спецификацией Open API - Swagger. Затем давайте реализуем плагин с использованием NSwag.Core, который позволит создать XML-диаграмму draw.io из файла JSON схемы swagger.

Создание проекта .NET Blazor

Прежде всего, нам нужно создать проект. Тип рендеринга на стороне клиента .NET Blazor. NET 3.0 содержит этот тип проекта, но теперь он доступен только из командной строки:

dotnet new blazorwasm –n NewPluginProject

Новый проект содержит несколько демонстрационных компонентов Blazor. Нам нужен только один корневой компонент приложения для подключаемого модуля. Этот компонент будет интегрировать контексты выполнения .NET и JavaScript. Лучше создать код за файлом «App.razor.cs», а затем перенести логику из макета бритвы в класс C # для основного подключаемого компонента App. Все остальные неиспользуемые демонстрационные компоненты теперь можно удалить из проекта. После подготовки проекта обозреватель решений будет выглядеть, как показано ниже:

В следующей части статьи мы не будем подробно рассказывать о Blazor .NET, мы сосредоточимся на интеграции между приложением JavaScript и подключаемым модулем C #. Если вы хотите узнать больше о технологии Blazor .NET, обратитесь к официальному руководству. Кроме того, приведенные ниже листинги кода содержат только основную часть исходного кода с описанием.

Создайте сценарий запуска плагина и загрузите компонент Blazor.

Невозможно создать плагин draw.io без каких-либо строк кода JavaScript. Прежде всего, нам нужно реализовать интерфейс draw.io для установки подключаемого модуля и загрузки скрипта веб-сборки Blazor .NET. Итак, давайте добавим новый файл OpenApiDocumentSchemaPlugin.js в каталог проекта «wwwroot \ js». Новый файл будет содержать следующую логику на JavaScript:

  • определить базовый URL для загрузки скриптов других плагинов
  • добавить новый элемент меню в draw.io
  • создать dom-элемент внутри тела документа draw.io для загрузки плагина с компонентом веб-сборки Blazor .NET
  • скрипт загрузки для веб-сборки Blazor .NET

Пока все хорошо, теперь мы можем загрузить компонент Blazor .NET в приложение draw.io. Давайте реализуем логику для нового подключаемого модуля схемы схемы чванства.

Архитектура подключаемого модуля: взаимодействие между контекстами JavaScript и C #

Основное поведение плагина будет:

  • открыть и загрузить файл JSON;
  • затем проанализируйте строку JSON в объекте OpenApiDocument (NSwag.Core lib);
  • затем создать XML-диаграмму из OpenApiDocument (собственный код C #);
  • а затем визуализируйте диаграмму в Draw.io.

Следовательно, между кодом C # и JavaScript будет два типа взаимодействия:

  • Часть JavaScript отправит строку JSON для обработки в часть C #
  • Часть C # отправит строку диаграммы XML для рендеринга в часть JavaScript

Blazor .NET поддерживает необходимые функции для взаимодействия с JavaScript (Interop). Но есть следующие нюансы:

  • Код C # может вызывать функцию JavaScript, которая определяется в глобальном контексте. Кроме того, код C # может вызывать функцию из экземпляров классов JavaScript, но эти экземпляры также должны быть определены в глобальном контексте.
  • JavaScript может вызывать статические методы C #. Кроме того, JavaScript может вызывать методы экземпляра C #, но сначала необходимо предоставить ссылку на этот экземпляр в контекст JavaScript.

Эти функции Blazor .NET позволяют реализовать следующие архитектурные взаимодействия между приложением JavaScript и подключаемым модулем .NET Blazor на C #.

Следующие соглашения используются на диаграмме ниже:

  • JS Context - контекст приложения draw.io
  • .NET Context - компонент Blazor веб-сборки контекста (код C #).

Есть два специальных файла кода OpenApiDocumentSchemaDotNetContract.js и OpenApiDocumentSchemaJsContract.js для JavaScript и два специальных файла кода OpenApiDocumentSchemaDotNetContract.cs и OpenApiDocumentSchemaJsContract.cs .

Код на JavaScript реализует следующее поведение:

  • OpenApiDocumentSchemaDotNetContract.js инкапсулирует ссылку на объект в контексте .NET и вызывает методы в контексте компонента .Net Blazor (Proxy )
  • OpenApiDocumentSchemaJsContract.js обрабатывает вызовы из контекста C # (Handler)

Код на C # реализует следующее поведение:

  • OpenApiDocumentSchemaDotNetContract.cs обрабатывает вызовы из контекста JavaScript (Handler).
  • OpenApiDocumentSchemaJsContract.cs с использованием базового объекта JsRuntime и вызывает функции JavaScript (Proxy).

Итак, каждый контекст содержит два типа классов - обработчик и прокси. Это решение принято в соответствии с SRP (Принцип единой ответственности).

Реализация контрактных классов в части JavaScript

Файл OpenApiDocumentSchemaJsContract.js содержит класс OpenApiDocumentSchemaJsContract с методами для работы с пользовательским интерфейсом и визуализации XML-диаграммы. Код ниже показывает краткое описание.

Файл OpenApiDocumentSchemaDotNetContract.js содержит класс OpenApiDocumentSchemaDotNetContract, который перенаправляет все вызовы в контекст C #.

Реализация классов контракта в части подключаемого модуля .NET

OpenApiDocumentSchemaDotNetContract класс содержит методы с атрибутами JSInvokable для обеспечения доступа из контекста JavasScript.

Класс OpenApiDocumentSchemaJsContract является оболочкой для вызова службы IJSRuntime, которая позволяет вызывать контекст JavaScript из кода C #.

Для построения XML-макета диаграммы используется пользовательский интерфейс IDiagramXmlBuilder и его реализация.

OpenApiDocumentSchemaDotNetContract класс содержит основную логику:

  • обрабатывает событие загрузки содержимого файла
  • создает OpenApiDocument с помощью API библиотеки NSwag.Core
  • создает XML-макет диаграммы.

В конце концов, он отправляет XML-макет диаграммы в редактор для визуализации.

Реализация стартовой части компонента Blazor

Точкой запуска части Blazor .NET являются класс App.razor.cs и компонент App razor. Он прописан в файле Startup.cs, а также настроена связь между компонентом App и элементом Html в DOM - OpenApiDocumentSchemaPluginApp.

App.razor.cs переопределяет метод инициализации компонента Blazor. В этом методе инициализируется ссылка в контексте JavaScript на объект в контексте .Net.

Итак, это высокоуровневое описание основных частей плагина. Итак, попробуем запустить проект и протестировать плагин в приложении.

Плагин для тестирования в приложении Draw.io

Исходный код примера проекта можно загрузить с Github. Для работы с кодом лучше использовать Visual Studio 2019. Откройте файл DrawIoDotNetPlugins.sln и выберите OpenApiDocumentSchemaPlugin в качестве запускаемого проекта. После этого запустите проект локально с помощью IIS Express (Ctrl + F5). Компонент подключаемого модуля Blazor .NET будет запущен локально с URL-адресом http: // localhost: 6930 /.

Затем откройте веб-сайт draw.io в новой вкладке браузера и перейдите в меню Дополнительно -› Плагины… . для настройки плагина.

В открывшемся диалоговом окне введите URL-адрес сценария запуска плагина: http: // localhost: 6930 / js / OpenApiDocumentSchemaPlugin.js

Перезагрузите страницу веб-сайта draw.io и подтвердите загрузку подключаемого компонента в начале. Итак, плагин загружен в приложение и готов к тестированию.

Перейдите в меню «Файл -› Открыть из… » и найдите новый элемент« Открыть документ Api ». Репозиторий исходного кода содержит пример файла документа swagger: \ src \ OpenApiDocumentSchemaPlugin \ Sample \ test-swagger.json. Выберите файл json в диалоговом окне открытия файла, и редактор покажет новую диаграмму.

После загрузки диаграммы по умолчанию все блоки будут иметь нулевую позицию. Схема будет выглядеть некрасиво. Используйте функцию «Автоматический макет», чтобы сделать его лучше. Перейдите в меню «Упорядочить -› Макет - ›Горизонтальный поток», и диаграмма будет автоматически преобразована в хороший вид.

Некоторые примечания после интеграции Blazor и JavaScript

  • Требуется настроить файл web.config в проекте компонента Blazor .NET с соответствующими Http-заголовками для правильной загрузки скриптов веб-сайтом draw.io с localhost Веб-сайт. В противном случае проблема CORS возникнет во время загрузки скриптов в браузере.

  • Blazor .NET создает специальный скрипт blazor.webassembly.js во время сборки. Этот скрипт содержит код для загрузки библиотек веб-сборки и моно. Он использует относительный путь к домену веб-сайта, на котором загружается скрипт blazor.webassembly.js. Таким образом, он будет иметь значение пути «draw.io». Но плагин размещен на «локальном» адресе. Следовательно, необходимо переопределить все пути в этом файле на соответствующее значение OpenApiDocumentSchemaPluginLocation + «_framework / *». Эта модификация позволяет загружать компоненты с адреса localhost. Переменная OpenApiDocumentSchemaPluginLocation настраивается в файле OpenApiDocumentSchemaPlugin.js и может быть настроена для любого значения URL-адреса веб-сайта или также может быть сопоставлена ​​с локальным каталогом. Последний вариант полезен при тестировании надстройки в приложении Electron.
  • Blazor .NET создает и публикует проект как пакет, который содержит два каталога с множеством файлов «* .dll», «* .wasm». Размер пакета для этого простого примера проекта плагина составляет 7,42 Мб. Это очень большой размер для простого пакета клиентской библиотеки.

  • Также есть некоторые задержки после первого обращения к плагину в элементе меню. Приложение не будет отвечать примерно 10–20 секунд. Это время первого строительного кода внутри CLR.

Вывод

Blazor .NET - это активно развивающийся фреймворк с мощными функциями. Интеграция компонентов Blazor .NET с приложениями JavaScript позволяет повторно использовать существующий код на языке C #. Это хороший случай для быстрого прототипирования и, возможно, для разработки внутренних инструментов. Но в то же время пакет компонентов Blazor .NET имеет большой размер и требует размещения множества каталогов и файлов. Простая библиотека JavaScript может быть доставлена ​​в виде одного файла «js», который может быть уменьшен или уменьшен. Его можно просто разместить на Github или npm.

В следующей части статьи будет описан процесс интеграции компонента .Net Blazor и приложения на платформе Electron.