Blazor — это мощный инструмент, который помогает создавать удобные и красивые интерфейсы на языке C#. Изначально он задумывался для разработки веб-сайтов, однако мы с вами его будем использовать для того, чтобы строить интерфейсы для наших скриптов! Показывать панели настроек, рисовать оверлеи, показывать всплывающие сообщения. Все это можно делать с использованием специального API, который вам доступен.
¶ Примеры из этого цикла
Все примеры можно скачать по этой ссылке
Я рекомендую скачать именно как пак, а не пытаться импортировать в текущую версию.
¶ Создаем наш первый оверлей
Все очень просто:
-
Создаем новую ауру
-
Добавляем в нее
C# Overlay v3
-
Готово
По сути в этот момент у вас уже есть первый вполне рабочий интерактивный пользовательский интерфейс.
Если нажать на кнопку Click Me, то вы увидите, что счетчик в программе начнет обновляться!
¶ Почему вообще Blazor?
Blazor отлично подходит для создания интерфейсов, потому что позволяет совмещать гибкость, удобство и производительность C# с невероятными возможностями, которые предоставляют HTML/CSS и JavaScript в области отрисовки интерфейсов. За последние два десятка лет наверное ни один технологический стек не получал столько инвестиций от крупнейших компаний мира, разумеется это не прошло незамеченным и теперь у нас на руках есть инструмент, который позволяет отрисовать абсолютно все, что только вы можете себе представить. Загляните на тот же https://codepen.io/ - там можно найти много интересных примеров того, что можно собрать из этой "великолепной тройки".
Ну а теперь, когда мы разобрались с тем, что же так хорош HTML/CSS/JS, надо понять какую роль в этом всем играет C#/Blazor.
Если очень вкратце, то Blazor позволяет нам генерировать HTML и связывать мир веб-программирования с миром C#. Наше приложение делится на две части: Razor и C# backend. Razor отвечает за отрисовку данных, а C# - за их подготовку.
И вот на стыке этих двух технологий и находится EyeAuras, а, следовательно, и ваши скрипты. Теперь давайте чуть подробнее о том, с чем вам непоредственно нужно будер работать.
¶ HTML
Без него никуда, это язык разметки веб-страниц, на котором построен Интернет. Он контролирует то, где расположены элементы веб-страницы, такие как текст, кнопки, таблицы и т.п. Именно с помощью HTML вы задаете "макет" страницы, который дальше будете стилизовать с помощью...
¶ CSS
CascadingStyleSheets - они контролируют как именно будут выглядеть ваши кнопки, текст и все остальное. Именно с их помощью кнопка становится из зеленой - красной, прозрачной или непрозрачной, они контролируют анимации и еще много-много деталей.
¶ Razor
Razor, если упростить, это язык разметки от Microsoft, который позволяет совмещать в одном тексте и HTML, и CSS, и C#
Давайте создадим наш первый компонент и разберем что есть что. Это будут текст и кнопка, которая при нажатии будет увеличивать счетчик.
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount() => currentCount++;
}
В одном этом кусочке кода одновременно и HTML, и C# - живут вместе и дополняют друг друга. C# определяет что происходит когда мы нажимаем на кнопку, а HTML/CSS - как все это выглядит.