HWDTECH BLOG
Sciter в действии
Здесь мы рассмотрим некоторые примеры использования движка при разработке интерфейсов для десктопных приложений.
17-02-2021
sciter, UI, desktop
Время чтения: 7 минут
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-у (в который вложен чекбокс) и ничего работать не будет.
Чтобы увидеть, что у нас получилось, давайте запустим usciter.js. В левом верхнем углу находится кнопочка, которая позволит открыть наш htm файл.


Открываем файл и видим чекбокс.

Есть еще один способ собрать проект – использовать SciterQuark. Давайте попробуем это сделать.
Так как Quark требует ImageMagic, то нужно его скачать отсюда: https://imagemagick.org/script/download.php и установить.

Теперь нужно немного изменить структуру папок. В папке, где лежат main.htm, main.tis и другие файлы, созданные ранее, необходимо создать еще две папки: src и bin. Далее перемещаем все наши ранее созданные файлы в папку src.

И еще один подготовительный шаг: добавим какое-нибудь svg-изображение, которое послужит иконкой, туда же, в папку src.
Теперь открываем quark.bat и заполняем все поля примерно вот так:
И наконец, нажимаем кнопку 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.

Запускаем наше приложение в usciter.exe в 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. Более подробно о нем можно узнать на официальном сайте, а также на форуме данного проекта.
Спасибо за внимание!
Раз в месяц мы делаем рассылку с анонсом новых кейсов и статей, опубликованных на сайте.
Подпишитесь на обновления.
Гарантируем - никакого спама. Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой в отношении обработки персональных данных.