ub_layout.js – Dynamic Screen Layout Engine

The Layout Framework Blueprint

The ub_layout JavaScript framework serves as the primary engine layer for building interactive, clean browser layout interfaces mapped straight to the Unibase platform. It eliminates front-end complexity by exposing an objective library of initialization parameters, global constants, and UI container hooks to bind data layout structures directly into visible presentation cells.

Core Objects and Initializers

Every structural class, container object, and programmatic framework driver defined inside the original manual page must be instantiated using the explicit definitions below:

Framework Object Class	Required Arguments Matrix	Functional Mapping Behavior
`ub_layout.Page`	`(configObject)`	The master document wrapper instance. Manages global page layout parameters, document roots, and style themes.
`ub_layout.Container`	`(elementId, layoutOptions)`	Creates a localized layout component zone on the page, mounting directly to an existing DOM target ID.
`ub_layout.FormView`	`(targetSchema, formOptions)`	Binds a database interaction display panel to a specific Data Dictionary model layout block.
`ub_layout.DataGrid`	`(targetTable, gridOptions)`	Instantiates an auto-refreshing tabular record list cell designed to stream large data dumps line-by-line.

Framework Methods and Execution Hooks

To control layout views, trigger dynamic processing, or refresh field states asynchronously, developers must execute these literal API method blocks exactly:

Literal Method API	Parameters & Return Types	Detailed Engine Trait / Execution Path
`.render()`	None Returns: `void`	Compiles structural configurations and injects fully formed HTML elements straight into the targeted viewport layout tree.
`.bindData()`	`(dataSourceUrl, mapArray)` Returns: `boolean`	Connects layout elements to data stream URLs (such as `ubcgi`). Returns `true` if data validation locks successfully.
`.refresh()`	`(forceCleanBool)` Returns: `Promise`	Flushes current component layouts and pulls the latest record states from the server. Set to `true` to clear local form values.
`.validateFields()`	None Returns: `Array (Errors)`	Evaluates current inputs against the database schema rules. Returns an empty array if all input sizes and lengths match perfectly.

Technical Manual Blueprint & Usage Sample

The following structural script example exhibits the exact syntax required to initialize a ub_layout view page, wire containers to an engine target, and trigger layout rendering:

// Initialize the structural master layout page
const currentManualPage = new ub_layout.Page({
    theme: “emerald_graphite”,
    responsive: true
});

// Map a target layout container onto the screen node grid
const ledgerGridContainer = new ub_layout.Container(“sovereign_viewport_root”, {
    padding: 20,
    alignment: “center”
});

// Bind a live DataGrid view model directly to the schema file ledger
const ledgerDataGrid = new ub_layout.DataGrid(“commercial_ledger”, {
    itemsPerPage: 25,
    sortColumn: “transaction_date”
});

// Execute the literal method pipeline sequences exactly
ledgerGridContainer.bindData(“/cgi-bin/ubcgi?JSON_NAME=getLedger”, [“id”, “amount”, “status”]);
ledgerGridContainer.refresh(false);
currentManualPage.render();

Framework Rule: Always call the .bindData() pipeline before evoking the master .render() lifecycle method to ensure interface layout cells map seamlessly during compilation.

Defensible Interface Performance Values

Operating your frontend through the native ub_layout specification provides your enterprise stack with clear, defensible technical assets:

Zero Package Rot	The entire framework uses raw, native browser execution APIs. It operates with zero dependencies on third-party libraries, eliminating supply chain security concerns.
Direct Schema Match	By linking user fields directly to Data Dictionary structures via JavaScript initializers, field length conflicts and data formatting errors are completely blocked.
Lightweight Footprint	The script compiles immediately into highly optimized layouts, bypassing heavy browser Virtual DOM matching engines to deliver desktop-like speeds.