Particle1Particle2Particle3Particle4Particle5
HWdTech / Блог /

Sciter

в действии

Здесь мы рассмотрим некоторые примеры использования движка при разработке интерфейсов для десктопных приложений.

29 Марта 2021
#desktop #sciter #ux_ui

Reading time: 7 min

Sciter - это движок, позволяющий делать современные интерфейсы с небольшим вложением сил и времени, благодаря использованию широко известных веб-технологий, таких как HTML, CSS и скриптов (TIScript), очень похожих на Javascript.
Примеры реализации "Hello, World" есть на сайте самого проекта, поэтому сделаем что-нибудь чуточку посложнее. Давайте добавим кастомный компонент чекбокса, который будет принимать в себя лейбл и состояние (checked / not checked). Рассмотрим пару вариантов как это можно сделать.

Вариант 1.

Для начала нам понадобятся файлы main.htm, main.css, main.tis и checkbox.tis. Создадим их в любой удобной папке и откроем их в любимом редакторе.
Теперь в файле checkbox.tis добавим следующий код:

function Checkbox(props) {

const label = props.label;

const checked = !!props.checked;

const name = props.nameInput;

return

<div .checkbox>

<input|checkbox name={name} .custom-checkbox checked={checked} />

<label for={name}>{label}</label>

</div>

}

В файл main.css добавим немного стилей для нашего чекбокса:

.checkbox {

position: relative;

}

.custom-checkbox {

position: absolute;

z-index: -1;

opacity: 0;

}

.custom-checkbox + label {

display: inline-block;

align-items: center;

user-select: none;

}

.custom-checkbox + label::before {

content: "";

display: inline-block;

width: 16dip;

height: 16dip;

border: 1dip solid #adb5bd;

border-radius: 5dip;

margin-right: 10dip;

background-repeat: no-repeat;

background-position: center center;

background-size: 50% 50%;

cursor: pointer;

}

.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {

border-color: #b3d7ff;

}

.custom-checkbox:checked + label::before {

border-color: #00bb82;

background-color: #00bb82;

background-image: url(stock:checkmark);

fill: #fff;

}

Теперь сделаем базовую разметку в файле main.htm и подключим туда наши стили и скрипт, который напишем в следующем шаге.

<html>

<head>

<title>Hello</title>

<style src="main.css" />

<script src="main.tis" />

</head>

<body>

</body>

</html>


А вот и скрипт (main.tis):

include "checkbox.tis";

function self.ready() {

$(body).append(<Checkbox label="Test checkbox" nameInput="label-2" />);

}

Сначала мы импортируем компонент чекбокса, затем добавляем его в конец body. Следует быть внимательным с названием передаваемых атрибутов, так как, если назвать nameInput просто name, то он применится к создаваемому div-у (в который вложен чекбокс) и ничего работать не будет.
Result
Чтобы увидеть, что у нас получилось, давайте запустим usciter.js. В левом верхнем углу находится кнопочка, которая позволит открыть наш htm файл. Открываем файл и видим чекбокс.

Есть еще один способ собрать проект – использовать SciterQuark. Давайте попробуем это сделать.

Так как Quark требует ImageMagic, то нужно его скачать отсюда: https://imagemagick.org/script/download.php и установить. Теперь нужно немного изменить структуру папок. В папке, где лежат main.htm, main.tis и другие файлы, созданные ранее, необходимо создать еще две папки: src и bin. Далее перемещаем все наши ранее созданные файлы в папку src. И еще один подготовительный шаг: добавим какое-нибудь svg-изображение, которое послужит иконкой, туда же, в папку src.Теперь открываем quark.bat и заполняем все поля примерно вот так:
Checkbox
И наконец, нажимаем кнопку Assemble. Теперь в папке bin будет находится наш проект. Далее мы находим файл .exe (он будет вложен в пару папок). Запускаем и видим тот же результат, что и при запуске usciter. Более подробнее о Sciter Quark можно почитать вот здесь: https://quark.sciter.com/.

Вариант 2.

Теперь можно разобраться, как добавить такой же чекбокс другим способом. Создаем файл checkboxClass.tis рядом с остальными нашими файликами и в него помещаем следующий код:

class CheckboxClass : Element

{

function attached() {

const label = this.attributes["label"];

const name = this.attributes["nameInput"];

const checked = !!this.attributes["checked"];

this.content(<div .checkbox>

<input|checkbox name={name} .custom-checkbox checked={checked} />

<label for={name}>{label}</label>

</div>);

}

}

А в файле css определим элемент, который будет экземпляром ранее созданного класса:

checkboxClass {

prototype: CheckboxClass url(checkboxClass.tis);

display: block;

margin-bottom: 20dip;

}

Осталось только добавить элемент чекбокса в main.htm файл:

<html>

<head>

<title>Hello</title>

<style src="main.css" />

<script src="main.tis" />

</head>

<body>

<checkboxClass nameInput="label-3" label="Checkbox by class" />

</body>

</html>

Теперь запустим usciter.exe и обнаружим два одинаковых на вид чекбокса.
два одинаковых на вид чекбокса

А как насчет отладки? Sciter предоставляет такую возможность. В поставляемом SDK есть инспектор, который можно использовать для просмотра DOM, стилей, а также использовать точки останова для скриптов.


Рассмотрим как это работает для Windows.
Запускаем наше приложение теперь уже в wsciter.exe (он находится в папке bin.win/x64), потому что в usciter по какой-то причине не работают точки останова, но DOM и стили там посмотреть можно. Параллельно запускаем файл inspector.exe (из папки bin.win/x32). В окне инспектора написано сочетание клавиш, которое нужно нажать в окне wsciter.exe (для windows: CTRL+SHIFT+I). Нажимаем и видим следующую картину.
окно инспектора
Вверху можно увидеть вкладки Sources и DOM. Во вкладке DOM находится разметка (конкретно наша, без учета разметки usciter, располагается в первом фрейме, его можно раскрыть и увидеть два наших чекбокса). При выделении конкретного элемента справа будут отображены стили, которые к нему применяются (как в браузере).
Во вкладке Sources можно увидеть все наши файлы со скриптами, картинками, стилями, разметкой и т.д. Давайте раскроем вкладку со скриптами, выберем наш скрипт main.tis и поставим туда точку останова (щелкнув дважды рядом с нужной строкой).
все файлы со скриптами
Теперь обновим наше приложение в wsciter либо кнопкой слева в интерфейсе wsciter, либо нажав F5. Во вкладке справа (в инспекторе) будут значения переменных.

Инспектор также позволяет выводить значения в консоль, это делается с помощью функции debug log(). Добавим вывод, например, в файл checkbox.tis (переменные указываются в фигурных скобках):

function Checkbox(props) {

const label = props.label;

const checked = !!props.checked;

const name = props.nameInput;

debug log(label:{label})

return

<div .checkbox>

<input|checkbox name={name} .custom-checkbox checked={checked} />

<label for={name}>{label}</label>

</div>

}

консоль скитер
Обновим приложение в wsciter, и в консоли инспектора увидим следующий лог:
Этот инспектор, конечно, несколько урезанный по сравнению с браузерным, но тем не менее достаточно полезный для отладки.

Здесь рассмотрены далеко не все возможности Sciter. Более подробно о нем можно узнать на официальном сайте, а также на форуме данного проекта.
Читайте также

Наши статьи!

Спросите нас

Мы ответим в течение суток

* - обязательное поле

Нажимая на эту кнопку, вы соглашаетесь с обработкой ваших персональных данных и принимаете нашу политику обработки конфиденциальных данных