¶ Из чего состоит оверлей
Когда вы добавляете новый оверлей, EyeAuras автоматически создает несколько файлов. Каждый из них важен для работы программы.
¶ Script.csx
Это точка входа. Этот скрипт запускается каждый раз, когда программа создает новый оверлей (не при его показе или скрытии).
В файле может не быть ничего, кроме примера по умолчанию, но при желании здесь удобно инициализировать данные, читать информацию и выполнять общую подготовку. То же самое можно делать и в коде окна/компонента, но иногда полезно иметь единую точку входа.
Log.Debug("This script is entry point for Overlay");
¶ UserOverlay.cs
public partial class UserOverlay : BlazorReactiveComponent {
private int count = 0;
private void IncrementCount()
{
count++;
}
}
Это файл code-behind. Большинство Razor-компонентов состоят из двух частей — *.razor и *.cs. В части Razor обычно находится разметка Razor/HTML/CSS, а в файле *.cs — методы, поля и свойства, доступные из разметки.
Примечание: вы можете писать C# прямо внутри
*.razorи не использовать*.cs, но из-за технических ограничений EyeAuras сейчас показывает IntelliSense только в*.cs-файлах, поэтому рекомендуется использовать оба файла.
Разберем код по частям:
public partial class UserOverlay : BlazorReactiveComponent
Это объявление класса. Чтобы EyeAuras смог его найти, класс должен быть public. Поскольку у него есть вторая часть (*.razor), он должен быть partial, то есть класс разделен между несколькими файлами. Наконец, : BlazorReactiveComponent задает базовый класс — к нему мы еще вернемся.
private int count = 0;
Здесь мы объявляем поле, в котором хранится количество нажатий кнопки.
Примечание: значение этого поля сохраняется на протяжении всей жизни оверлея. Если аура выгружается или оверлей уничтожается, значение сбрасывается.
private void IncrementCount()
{
count++;
}
Этот метод просто увеличивает счетчик, чтобы мы могли отслеживать клики.
¶ UserOverlay.razor
@inherits BlazorReactiveComponent
<h3 class="text-center">Interactive Counter</h3>
<div class="text-center mt-4">
<button @onclick="IncrementCount" class="btn btn-primary btn-lg">
Click Me
</button>
</div>
<p class="text-center mt-3" style="font-size: 1.5rem;">
You clicked <strong>@count</strong> times!
</p>
Это вторая часть компонента, которая описывает, как он должен отображаться. Посмотрим, что здесь есть:
@inherits BlazorReactiveComponent
Эта строка говорит Blazor использовать BlazorReactiveComponent (предоставляемый EyeAuras) в качестве базового класса. Это необязательно, но настоятельно рекомендуется, если вам нужен доступ к дополнительным возможностям.
<h3 class="text-center">Interactive Counter</h3>
Просто заголовок по центру.
<div class="text-center mt-4">
<button @onclick="IncrementCount" class="btn btn-primary btn-lg">
Click Me
</button>
</div>
Самое интересное здесь — @onclick="IncrementCount", это привязка обработчика клика. Каждый клик увеличивает count на 1.
<p class="text-center mt-3" style="font-size: 1.5rem;">
You clicked <strong>@count</strong> times!
</p>
И финальная часть: отображение текущего значения count — той самой переменной, которую мы увеличиваем при нажатии кнопки.
В итоге получается простая форма с кнопкой и обновляющимся значением. Буквально за 20 строк мы создали рабочую и вполне симпатичную мини-программу. Поэкспериментируйте с цветами, добавьте другие значения и используйте этот оверлей как тестовую площадку. Продолжение следует!