Overview

The App Builder is a core component of the Heisenware platform. It is a visual development environment used to build, test, and deploy applications. Accessed directly from the App Manager, it provides a focused environment for developing one application at a time.

Main interfaces

The App Builder is organized into four distinct spatial zones to manage the application lifecycle and development workflow.

• Global Toolbar (top): Manages application-wide configurations, editor modes, and the deployment pipeline. This is where you access theme editing, the PDF template editor, and handle the app lifecycle (testing, versioning, and deployment).

• Explorer (left): Allows you to explore available functions for backend logic, pages for frontend structure, and files needed as resources during the app development process.

• Backend Builder (center): An infinite drawing area where you create the business logic of your entire application by wiring up selected functions into automated flows.

• Frontend Builder (right): A page-specific design canvas for composing user interfaces for all screen sizes. This is where you build user interfaces (UI) using text, images, and interactive widgets.

How it works

Heisenware uses a highly integrated development process. Rather than working in isolated stages, you build logic, design interfaces, and configure data connections simultaneously within a single environment.

Build backend

Using the Backend Builder you create event-driven sequences by dragging selected functions from the Explorer onto the canvas.

• Functions: The atomic building blocks of an app. These include standard utility blocks, industrial drivers, and custom code adapters (Node.js, Python, or C++).

• Global scope: Logic in the Flow Builder is persistent. It runs independently of the active UI page, making it the central hub for continuous data processing or system monitoring.

• Agents: Secure bridges for isolated networks. You configure Native or Docker Agents to tunnel data from local systems directly into your application logic.

Build frontend

The Frontend Builder is a canvas on which you design your UI per page and across different screen sizes in a way you are used from popular presentation tools (such as Google Slides or Powerpoint). You will use the Explorer to switch to the page you want to edit.

• Widgets: Functional components like gauges, charts, and input fields. You drag these onto the canvas to compose the interface.

• Theme editing: A global editor accessed via the top bar. It defines the styles and colors that ensure visual consistency across all pages and widgets.

• Page hierarchy: A management tool in the left panel used to create, nest, and organize the application structure.

Unified data binding

The core strength of the App Builder is the ability to connect virtually any element to any other via data binding. This creates a bidirectional flow between the app's interface and the logic.

• Connect anything to everything: You can link a button to a function trigger, bind an input field to a function's input parameters, or use a function's output to visualize data, toggle a button's state, or update a gauge's value.

• Property and event binding: Beyond just data values, you can bind to widget properties like scale, visibility, or color, allowing the backend logic to drive the UI's appearance dynamically.

• Reactive synchronization: The system eliminates manual glue code. The interface and logic remain in sync in real time as data flows through the application.