Glossary

A user-defined component, e.g. Dashboard.xmlui, may define scripting logic in Dashboard.xmlui.xs. The code in that file operates within the component's variable scoping. Generic scripting logic that does not interact with component variables can alternatively be defined in a <script> tag in the app's index.html.

The XMLUI engine provides a suite of built-in components. You will typically augment these with user-defined components. Both are represented in markup using XML tags for component names and attributes for properties.

A component may optionally define an id attribute used by other components to access its properties (e.g. data) and method (e.g. setValue).

Special variables automatically provided by XMLUI within specific scopes, prefixed with $. Key examples include $item (current item in iterations), $data (a form's data object), $props (properties passed to user-defined components), and $value (current field value in a FormItem).

This mechanism fetches data from backend API endpoints and makes it available to components. In most cases, you only need to provide a URL, and the framework handles the rest, ensuring the data is readily accessible.

An expression is snippet of code in an attribute value, wrapped in curly braces ({ and }), that's evaluated by the XMLUI engine in order to check a condition, access and transform data, set a variable, or trigger an action.

An event handler in XMLUI responds to user or system events. You can change the component's default behavior by declaring an event handler.

These include functions for notification (toast()), navigation (navigate()), API operations (Actions.callApi()), theme management (setTheme()).

XML tags that provide alternative syntax for declaring variables, properties, and event handlers. The <variable> tag declares variables as markup, <property> sets component properties using nested markup, and <event> declares event handlers as markup.

XMLUI uses an XML-inspired syntax to define the layout, structure, and behavior of applications. Minor differences from XML include dotted attribute names (like var.count) and multiline attribute (when code spans multiple lines).

A built-in component may provide methods for query its state and taking actions.

A built-in component may have properties that govern its appearance and/or behavior, or functionality. A user-defined component can receive arbitrary properties in its $props context variable.

A component property, declared with the <property> helper tag, whose value is a component definition.

XMLUI enables automatic, reactive connections between data sources and UI components. A DataSource component, you can fetch data from REST endpoints and make it available to other components. When components reference each other through variables, changing data flows through the system just as spreadsheet cells update when their dependencies change.

External assets, such as an icon, image, or fonts, typically referenced via an URL.

A flexible width allocation system used in components like Table. Values like *, 2*, and 3* define proportional column widths. For example, a column with width="3*" will take three times as much space as a column with width="*", while fixed-width columns (like 100px) take their exact specified space first.

A coherent set of application-wide and component-specific style settings that define the appearance of an app.

A single setting within a theme definition. Changing the value of a theme variable causes all components that use it to automatically refresh their UI.

Like variables in conventional programming languages, XMLUI variables store application state. They are reactive, and automatically update when their dependencies change. Variable names follow the rules for JavaScript identifier: start with a letter or underscore, then letters, numbers, or underscores.