Skip to content
Documentation

Quick Start

Here we will follow the steps to create the very first application development. This will be from the start of application development to deploying and checking the operation of the application.

Step1. Application Creation

  • When you first sign in, the "Applications List" will be displayed. If the Applications list does not appear, select "Applications" from the left side menu.
  • Next, click on "Add App" in the upper right corner of the screen.
  • Select "Blank App".
  • Here, select "DESKTOP" for the application type, enter any "ID" and "Label" and click "ADD APP".

Step2. UI Creation

  • The UI editor will automatically open when an empty application is created in Step 1. At this point, the UI has not yet been saved.
  • Place any components you like in the UI editor. Here we will place three "Number Input" components from the "Input" category in the desired locations to perform the calculation of the action in Step 3. Once placed, right-click on each component and select "Properties". Since the system automatically determines the initial value for "ID", change it to an easy-to-understand "ID". In this case, change it as follows
ComponentID
Number Fieldnumber_field_1
Number Fieldnumber_field_2
Number Fieldnumber_field_answer
  • Similarly, in the UI editor, place a "push button" from the [Button] category anywhere you like. This button will trigger an action. In the case of a button, the event is a click, so the behavior when the button is clicked is described in Step 3.
  • Finally, save the UI. Click the "Save" button in the upper right corner to open the "Save UI" dialog box, and enter any "ID" and "Label" to save the file. Enter the desired "ID" and "Label" and save.

Step3. Action Creation

  • When the “push button” placed in Step 2. is clicked, the values entered in "number_field_1" and "number_field_2" are added and displayed in "number_field_answer". In this case, the [push button] is the component that generates the event, and the processing at that time is described as an action. To write an action, right-click on the component in question and select "Action" from the context menu. To do so, first right-click on the "push button" and select "Action".
  • Switches to the Action Editor display. Actions are written in JavaScript in the editor area labeled "ACTION BOARD". Type it like this:
$ui.number_field_answer.value = $ui.number_field_1.value + $ui.number_field_2.value
  • Click the "Save" button in the upper right corner. The action is saved.
  • Click the "Close (x)" button on the right to return from the Action Editor to the UI Editor.

Step4. Deploy

  • Step3. has completed the application development, so deploy the application to the execution environment. Deployment is done from the "Deploy" icon in the upper right corner of the UI editor. Click on the "Deploy" icon.
  • There are two types of deployments, but here we will select "Release Deploy".
  • A new tab will automatically open in your browser. The application execution screen appears on this tab. If you see this screen, the application is running normally. Enter any number you like in "number_field_1" and "number_field_2" and click [push button]. If "number_field_answer" shows the result of the addition, it is successful.
  • This concludes the instructions for creating your first application.