Верстка экрана

Экран в Chatium верстается с помощью JSX

// Пример кода экрана

app.screen('/', function(ctx,req) {
  return (
    <screen title='Первый экран'>
      <text>Текст в экране</text>
    </screen>
  )
})

Функция должна выдать объект с корневым тегом <screen>, внутри которого расположены блоки.

Блоки

Блоки верстаются с помощью тегов, аналогичных html-тегам, но выбираемых из набора app-ui. Список встроенных тегов значительно меньше, чем в HTML (таких тегов всего 19), зато все они умеют отображаться в мобильном приложении в качестве нативных компонент.

audio, box, button, footer, header, horizontal-scroll, horizontal-scroll-indicator, iap-product, icon, image, list-item, parallax, search-input, smart-icon, sticky, text, text-input, video, video-poster.

Многие теги могут быть выражены через jsx-блоки с определенными стилями.

К примеру, в Chatium нет тега <i>, но можно выразить его через текстовый тег со стилем:

<text style={{fontStyle: 'italic'}}>
  текст курсивом
</text>

Также как и в HTML - некоторые блоки могут содержать в себе другие блоки, а некоторые являются атомарными

// section - это блок в который можно вложить другие блоки
<section>
  // а вот внутрь картинки уже ничего не вложишь
  <image src={{url: "https://chatium.com/s/static/img/chatium.png"}}/>
</section>

В JSX блоки могут быть объединены в компоненты с указанными стилями и функционалом, такие теги начинаются с большой буквы и могут иметь собственные параметры

// Использование заранее подготовленного компонента прямой речи
<Quote author="В.И. Ленин">
  Равнодушие есть молчаливая поддержка того, кто силён, того, кто господствует
</Quote>

Действия

Взаимодействуя с экраном, пользователь может вызывать события, которые связаны с блоками. Для событий можно назначить действия, которые будут вызваны когда оно произойдет

Самым частоиспользуемым событием является клик по блоку, это событие называется onClick

<box onClick={ДЕЙСТВИЕ}>Нажать</box>

Действие может быть объектом или массивом объектов. В модуле @app/ui есть методы, которые готовят эти объекты. Как пример можно привести действия: apiCall, attachMedia, goBack, navigate, showToast, showContextMenu, showTextDialog, refresh, полный список действий можно увидеть тут

// Клик на кнопке покажет сообщение "Привет Мир"
<button onClick={showToast('Привет Мир')}>Нажать</button>

Объекты действий могут быть подготовлены другими объектами, к примеру - ссылка на урл внутри аккаунт может быть подготовленна объектом ctx.account

// Клик приведет к переходу на google
<text class="link" onClick={navigate('https://google.ru')}>
  Перейти в Google
</text>

// Клик приведет к переходу на страницу в рамках аккаунта
<text class="link" onClick={ctx.account.navigate('/about')}>
  На страницу "О компании"
</text>

// Клик приведет к действию, описанному в том-же файле*
<button class="primary" onClick={ctx.router.apiCall('/do')}>
  Записаться
</button>