Particle1Particle2Particle3Particle4Particle5
HWdTech / Блог /

Sciter

в действии

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

March 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 добавим следующий код:

1function Checkbox(props) {
2 const label = props.label;
3 const checked = !!props.checked;
4 const name = props.nameInput;
5 return
6 <div .checkbox>
7 <input|checkbox name={name} .custom-checkbox checked={checked} />
8 <label for={name}>{label}</label>
9 </div>
10}

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

1
2.checkbox {
3 position: relative;
4}
5
6.custom-checkbox {
7 position: absolute;
8 z-index: -1;
9 opacity: 0;
10}
11
12.custom-checkbox + label {
13 display: inline-block;
14 align-items: center;
15 user-select: none;
16}
17
18.custom-checkbox + label::before {
19 content: "";
20 display: inline-block;
21 width: 16dip;
22 height: 16dip;
23 border: 1dip solid #adb5bd;
24 border-radius: 5dip;
25 margin-right: 10dip;
26 background-repeat: no-repeat;
27 background-position: center center;
28 background-size: 50% 50%;
29 cursor: pointer;
30}
31
32.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
33 border-color: #b3d7ff;
34}
35
36.custom-checkbox:checked + label::before {
37 border-color: #00bb82;
38 background-color: #00bb82;
39 background-image: url(stock:checkmark);
40 fill: #fff;
41}

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

1<html>
2 <head>
3 <title>Hello</title>
4 <style src="main.css" />
5 <script src="main.tis" />
6 </head>
7 <body>
8 </body>
9</html>

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

1include "checkbox.tis";
2
3function self.ready() {
4 $(body).append(<Checkbox label="Test checkbox" nameInput="label-2" />);
5}

Сначала мы импортируем компонент чекбокса, затем добавляем его в конец 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 рядом с остальными нашими файликами и в него помещаем следующий код:

1class CheckboxClass : Element
2{
3 function attached() {
4 const label = this.attributes["label"];
5 const name = this.attributes["nameInput"];
6 const checked = !!this.attributes["checked"];
7 this.content(<div .checkbox>
8 <input|checkbox name={name} .custom-checkbox checked={checked} />
9 <label for={name}>{label}</label>
10 </div>);
11 }
12}

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

1checkboxClass {
2 prototype: CheckboxClass url(checkboxClass.tis);
3 display: block;
4 margin-bottom: 20dip;
5}

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

1<html>
2 <head>
3 <title>Hello</title>
4 <style src="main.css" />
5 <script src="main.tis" />
6 </head>
7 <body>
8 <checkboxClass nameInput="label-3" label="Checkbox by class" />
9 </body>
10</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 (переменные указываются в фигурных скобках):

1function Checkbox(props) {
2 const label = props.label;
3 const checked = !!props.checked;
4 const name = props.nameInput;
5 debug log(label:{label})
6 return
7 <div .checkbox>
8 <input|checkbox name={name} .custom-checkbox checked={checked} />
9 <label for={name}>{label}</label>
10 </div>
11}
консоль скитер

Обновим приложение в wsciter, и в консоли инспектора увидим следующий лог:

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


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

Читайте также

Наши статьи!

Подписка

Раз в месяц мы делаем рассылку с анонсом новых кейсов и статей, опубликованных на сайте.

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

Гарантируем - никакого спама. Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой в отношении обработки персональных данных.