Foblex Flow
Introduction
Getting Started
Containers
Flow Canvas
Node
Node Drag Handle
Connectors
Output Input Outlet
Connection
Connection Create Connection Connection Marker
Extends
Drag and Drop Zoom Background Line Alignment Minimap
Layouts & Behaviors
Dagre Tree ELKJS Tree
Pro Examples
Visual Programming Flow DB Management Flow Call Center Flow Scheme Editor
Foblex Flow
v12.6.4

Visual Programming

Example

This example demonstrates how to use the Foblex Flow to create a visual programming interface.

i
s
s
c
e
d
h
Input Assign Cycle Switch Cycle Cycle Switch Switch Switch Database Database Database Function Function Function
i
s
c
s
d
d
d
h
h
h
e
c
h

Possibilities

  • Add nodes from the palette to the canvas using the fExternalItem directive.
  • Connect nodes using f-connection-for-create component.
  • Reassign connections.
  • Move nodes.
  • Move canvas.
  • Zoom with the mouse wheel, double click and buttons using fZoom directive.
  • Set the background using the f-background component.
  • Line alignment using f-line-alignment component.
  • Select multiple items using the f-selection component with the mouse and by holding down the Shift key.
  • Minimap using the f-minimap component.

Source Code

The source code for this example can be found in our GitHub repository.