Auto-Generated Views

← Views
STRVCT

How the view layer connects to model nodes, resolves view classes, synchronizes state, and provides navigation without hand-authored UI code.

Overview

In STRVCT, every domain node (SvNode) automatically receives a visual presentation: the framework discovers the matching view class, instantiates views lazily on demand, wires up observation notifications, and keeps views synchronized as model slots mutate.

Domain Model (SvNode) Declared Slots Slot metadata & annotations Ordered Subnodes Child subnode graph Slot Setter Mutation Posts didChangeSlot note View Resolution Engine nodeViewClassName Explicit override check Name Convention Lookup Walks ClassName + "View" SvSyncScheduler Pass Coalesces view.syncFromNode() Generated Miller Column UI SvStackView / SvNavView Master-detail layout column SvTilesView & SvTile Scrollable tile selection list SvFieldTile Controls Type-appropriate field editors

`SvDomView` Single-Inheritance Layering

Rather than subclassing raw HTML elements directly, STRVCT wraps DOM elements in a single-inheritance hierarchy where each layer adds one capability:

View Class LayerAdded Capability
SvElementDomViewWraps DOM element; manages creation, type, and class attributes.
SvVisibleDomViewVisibility toggling (setIsVisible(bool)).
SvResponderDomViewResponder chain for keyboard and mouse event routing.
SvListenerDomViewDOM event listener registration and removal.
SvControlDomViewTarget/action pattern connecting views to event handlers.
SvSelectableDomViewSelection state with styled visual feedback.
SvEditableDomViewContent editability and edit mode toggling.
SvGesturableDomViewGesture recognizers (tap, double-tap, pan, long-press, pinch).
SvFlexDomViewFlexbox layout properties (direction, wrap, grow, shrink, alignment).
SvStyledDomViewState-based styling (unselected, selected, active, disabled) with theme support.
SvSubviewsDomViewParent/child subview hierarchy management.
SvCssDomViewApplies CSS variables from dictionaries to element styles.
SvDomViewAggregates all layers above into the complete DOM view wrapper.
SvNodeViewBinds model SvNode to DOM presentation; handles observation & sync.

`SvNodeView` Bridge Methods

SvNodeView is the primary class for application views:

  • setNode(aNode): Assigns a model node and registers change observations via SvNotificationCenter.
  • syncFromNode(): Diffs visible subnodes against active subviews, instantiating, reusing, or purging views as needed.
  • subviewProtoForSubnode(aSubnode): Resolves which view class to instantiate for a child subnode.
  • syncCssFromNode(): Applies CSS variables defined on the model node to the DOM element.

View Resolution Lookup Algorithm

When a node becomes visible, the framework discovers its view class using naming conventions:

  1. Explicit Override: Check for an explicit nodeViewClassName override on the node.
  2. Inheritance Walk: Walk the node's class hierarchy from most-derived to base (SvNode).
  3. Convention Lookup: For each class ancestor, check for ClassName + "View" in global scope.
  4. Fallback: If no match is found down to the root, fall back to default SvNodeView.

Example: For Character extending SvStorableNode, resolution checks CharacterView $\rightarrow$ SvStorableNodeView $\rightarrow$ SvNodeView.

SvStackView

SvStackView is the recursive building block of navigation, splitting into two areas:

  • SvNavView (Master): A column containing a header, scrollable SvTilesView, and footer.
  • otherView (Detail): Content area for the selected tile—typically a child SvStackView.

Selecting a tile creates a new child SvStackView in the detail area. Orientation is set per node ("right" for horizontal master-left/detail-right, "down" for vertical master-top/detail-below).

SvBrowserView

Top-level application container managing nested SvStackView columns to arbitrary depth. Includes a breadcrumb header that auto-compacts on narrow viewports:

  • navigateToNode(aNode): Navigates directly to a target node in the graph.
  • selectNodePathArray(pathArray): Programmatically sets the full navigation path.

Tile Classes & Field Tiles

Tiles are individual items rendered inside SvTilesView columns:

Tile ClassPurpose & Visual Presentation
SvTileBase tile class. Handles selection, long-press reorder, slide-to-delete, and style state cascades.
SvTitledTileDefault tile. Displays title, subtitle, and note from SvSummaryNode.
SvHeaderTileNon-selectable section header tile.
SvBreadCrumbsTileCompact breadcrumb trail tile.

Field Tiles (SvFieldTile):

Field tiles render key-value property slots as editable controls:

Field Tile ClassProperty Control Type
SvStringFieldTileSingle-line text input
SvTextAreaFieldTileMulti-line text area editor
SvBooleanFieldTileCheckbox toggle control
SvPasswordFieldTileMasked password text input
SvActionFieldTileButton triggering a node method
SvPointerFieldTileObject reference with navigation arrow
SvImageWellFieldTileImage preview well with drag-and-drop support
SvVideoWellFieldTileVideo player well with drag-and-drop support