Screen Layout

The screen in Chatium is laid out using JSX.

// Example of screen code

app.screen('/', function(ctx, req) {
  return (
    <screen title='First Screen'>
      <text>Text on the screen</text>
    </screen>
  )
})

The function should return an object with a root tag <screen>, inside which blocks are located.

Blocks

Blocks are laid out using tags similar to HTML tags, but selected from the app-ui set. The list of built-in tags is significantly smaller than in HTML (there are only 19 such tags), but all of them can be displayed in the mobile application as native components.

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.

Many tags can be expressed through JSX blocks with specific styles.

For example, there is no <i> tag in Chatium, but it can be expressed through a text tag with a style:

<text style={{fontStyle: 'italic'}}>
  italic text
</text>

Just like in HTML, some blocks can contain other blocks, while others are atomic.

// section is a block that can contain other blocks
<section>
  // but you can't nest anything inside an image
  <image src={{url: "https://chatium.com/s/static/img/chatium.png"}}/>
</section>

In JSX, blocks can be combined into components with specified styles and functionality; such tags start with a capital letter and can have their own parameters.

// Using a pre-prepared direct speech component
<Quote author="V.I. Lenin">
  Indifference is silent support for the strong, for the one who dominates.
</Quote>

Actions

By interacting with the screen, the user can trigger events related to the blocks. Actions can be assigned to events that will be called when they occur.

The most commonly used event is clicking on a block, which is called onClick.

<box onClick={ACTION}>Click Me</box>

An action can be an object or an array of objects. In the @app/ui module, there are methods that prepare these objects. For example, actions include: apiCall, attachMedia, goBack, navigate, showToast, showContextMenu, showTextDialog, refresh; a complete list of actions can be seen here. <!-- TODO add links -->

// Clicking the button will show the message "Hello World"
<button onClick={showToast('Hello World')}>Click Me</button>

Action objects can be prepared by other objects; for example, a link to a URL within an account can be prepared by the ctx.account object.

// Clicking will navigate to Google
<text class="link" onClick={navigate('https://google.ru')}>
  Go to Google
</text>

// Clicking will navigate to a page within the account
<text class="link" onClick={ctx.account.navigate('/about')}>
  Go to "About Us" page
</text>

// Clicking will trigger an action described in the same file*
<button class="primary" onClick={ctx.router.apiCall('/do')}>
  Sign Up
</button>