Logic flows from a code perspective

Flowlang is an intuitive visual language based around component blocks and node connections. While this may seem distinct from traditional programming, many of Flowlang's functionalities map to code.
UI components
UI components in Flowlang have visual characteristics and often map to HTML elements.
For example, you may format a standard HTML button similar to this:
<button type="button" onclick="alert('Submitted!')"> Submit </button>
In Uiflow, that same HTML button exists as the Button component. To incorporate the component into your app, simply drag-and-drop the Button component into your project and connect the onClick node to the component you want to invoke.
With conventional programming, you change aspects like fonts, labels, and formats with a list of attributes or CSS. In Uiflow, you open the Styles tab to configure the component's visual settings.
Application logic
Application logic in Flowlang includes components that often map to common functions.
The following sections demonstrate how major areas of programming logic translate to Flowlang:
​Math​
​Data​
​Loops​
​Sequence​
Math
Math components in Uiflow are similar to arithmetic operators in JavaScript. A simple addition calculation may look like this in JavaScript:
var num1 = 10;
var num2 = 30;
var sum = num1 + num2
In Uiflow, you perform the same operation with the Add component. The Add component's input nodes take in the numbers to add, and the result outputs the sum. You then connect the inputs to other components (e.g. Text Input components) which provide the values.
You can then connect the output node to another component that uses the result (e.g. a Text component that displays the value).
Loops
Uiflow's looping components simplify the logic of iterating over collections. For example, a for loop in JavaScript may look similar to this:
for (let i = 0, len = list.length, text = ""; i < len; i++) {
  text += list[i] + "<br>";
}
To implement similar logic in Uiflow:
1.Drag-and-drop a For Each component into your application.
2.Connect it to a collection (e.g. Array component).
3.Connect the item output node to a Constructor that instantiates an object for each element in the array.
This example constructs a new Text instance for each item in the connected array.
Data
Object definitions in Uiflow are similar to their programming counterparts. In JavaScript, an object may look similar to this:
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
}
To define an object in Uiflow:
1.Drag-and-drop the Object component into the application.
2.Add JSON data.
3.Define fields and values in JSON format.
Note: Objects can also dynamically get fields and values from databases via API requests.
Sequence
In JavaScript, functions are invoked in the order specified in code. In this example, the phrase First action logs before Second action because of the order in which they are written:
console.log("First action")
console.log("Second action")
In Uiflow, you can invoke multiple calls in order using the Sequence component. In this example, a Button component's onClick event uses a Sequence component to write two strings to the console. The Sequence component first invokes a Console component to log First action via call 1 before invoking call 2 to log Second action.
Last modified 6d ago