Create UI

There are several ways to create a UI using TryITjs. The simplest method is to create a string in Javascript with some HTML markup. The string is rendered in the output screen using the builtin TryITJs function $$.HTML(someHtmlString).

How to render some HTML

More elaborate example

In this example we will create a header with today's date and an image below it. The code for it is very simple as shown next.

Semantic-UI example

In this example we will create 3 button group, the first button is red, the second green, and the lat one the default color. After the button group we will plce an SVG image of a camera.

Notes: the way the execution of the script works is, first the entire sceipt block is executed, all output is collected in a staging buffer. Once the execution of the script block has completed all the staged output is rendered in the output window.

Using React JSX

It's easier to use inline JSX to render some UI. The code below will render some buttons in the output area.

UI using React

This section will demonstrate we can use React and JSX to create some UI.

• Ceate a function to create a div in JSX
  1. Display the current time
  2. Show an image

Notes: In a code block (the code block below) if you declare a variables let aVar the variable is local to the block, it is not visible to any other block. On the other hand if the variable is declared as var aVar1 then this variable and its content is available to subsequent code block. In other words var declares a global variable, while let or const declares a local variable.

A simple running clock

Using React to render a simple clock that updates the time. As explained earlier the rendering of the HTML is performed after the script has completely executed. This presents a challange since the script the HTML dom before the output has been rendered. To get around the problem we have another builtin function $$.lastly(aFunction). This delays the execution of the function until the output has been rendered.

Improved React Clock

This is an example of an improved React implementation, using the new hooks API