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-у (в который вложен чекбокс) и ничего работать не будет.

Чтобы увидеть, что у нас получилось, давайте запустим 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.

Запускаем наше приложение теперь уже в 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. Более подробно о нем можно узнать на официальном сайте, а также на форуме данного проекта.

Наши статьи!

Sciter
в действии

Вариант 1.

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

Вариант 2.

Наши статьи!

Подросток взломал 4-ступенчатый шифр Агентства кибершпионажа

“Проектирование и конструирование компиляторов”

IT-Таро:новогодние предсказания на 2022 год

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

Наши проекты

Блог

О нас

Sciterв действии

Вариант 1.

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

Вариант 2.

Наши статьи!

Подросток взломал 4-ступенчатый шифр Агентства кибершпионажа

“Проектирование и конструирование компиляторов”

IT-Таро:новогодние предсказания на 2022 год

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

Наши проекты

Блог

О нас

Sciter
в действии