Viewport Architecture
The App Viewport Architecture defines the structural logic that organizes yuuvis® client applications into global, navigational, and functional areas. It establishes a unified and scalable layout system across all applications — from simple list views to complex workspace environments.
At this stage, the concepts primarily address large desktop environments, where full pane compositions, persistent bars, and multi-column layouts can be applied consistently.
Elements
Section titled “Elements”The viewport is divided into bars and panes. Bars provide persistent horizontal framing, while panes divide the main content area vertically. Within panes, content can be further structured into sections and optionally into columns.
-
Bars
Persistent horizontal areas for global navigation or app-level actions. Examples: App Header, Sidebar Nav, In-App Navigation Bar -
Panes
Vertical content areas that represent functional or semantic units. Examples: Navigation Pane, Master Pane, Detail Pane, Context Pane -
Sections
Semantic subdivisions within a pane, grouping content into logical blocks. Examples: Form Sections, Filter Areas, Tabs -
Columns (optional)
Optional column-based layout within a pane for structured alignment. Examples: Two-column forms, split detail views
Core Layout Types
Section titled “Core Layout Types”The following are the core layout types used across yuuvis® client applications. They provide a structural foundation that can be extended or specialized to address specific use cases or semantic requirements.
Custom layout types may be defined when a view introduces a unique interaction pattern, such as a Search Layout, Dashboard Layout, or Wizard Layout, built upon one of these base models.
- Definition
- Two-pane layout where the master controls the detail. Ideal for linear browse–inspect workflows.
- Composition
- [Master] | [Detail]
- Usage
- Used when a user selects an element in a list or hierarchy and inspects or edits its detailed content in the adjacent pane.
- Definition
- Three-pane layout with a tertiary Context Pane (bound, sticky, or independent). Primary interaction occurs in the Master or Detail Pane; the Context provides additional insights or tools.
- Composition
- [Master] | [Detail] | [Context]
- Usage
- Recommended for complex data views where contextual information (e.g., relations, metadata, previews) supplements the main content.
- Definition
- Functional layout with two independent areas — a Focus Pane and a Supporting Pane. There is no content control or dependency between them.
- Composition
- [Focus] | [Supporting]
- Usage
- Used in dashboards, document editing or viewing canvases, and configuration views where two areas coexist functionally.
- Definition
- Optional, temporary overlay for navigation, tools, assistants, or secondary workflows. Always subordinate to the main workspace.
- Composition
- Overlay or detached pane above the main layout
- Usage
- Used for quick-access panels, navigation overlays, task assistants, or ephemeral tools that support but do not disrupt the main workspace.
Master–Detail Principle
Section titled “Master–Detail Principle”The Master–Detail Principle defines a content relationship: The Master Pane (e.g., list, result set, tree) determines what is displayed in the Detail Pane (e.g., object view, meta data).
Additionally, the Master can influence the Context Pane, but does not have to. The Context Pane may also display independent content or functional areas that are relevant across the entire view, regardless of the current selection.
Primary and Secondary Detail Panes
Section titled “Primary and Secondary Detail Panes”To reflect different depths of interaction, Detail Panes are distinguished by their functional weight:
-
Primary Detail Pane
The main workspace where the user spends the most time (e.g., document editing, inspection, data entry). Visual weighting: occupies more space and features a clearer focus hierarchy (typography, color, density). -
Secondary Detail Pane
A supplementary, compact area supporting the primary content (e.g., logs, previews, secondary metadata). Visual weighting: reduced prominence, visually subordinate.
Context Pane Principle
Section titled “Context Pane Principle”The Context Pane is always a tertiary (supporting) area — never the primary workspace. It provides contextual or auxiliary information and can operate in different binding modes:
- Bound to Master
Displays contextual data related to the current master selection (e.g., relations, metadata, preview). - Sticky / loosely coupled
Initially set by the master selection, but remains stable across selection changes (e.g., compare, pinned context). - Independent / global
Displays global or cross-view content and tools not tied to master selection (e.g., history, filters, assistants).
Focus–Supporting Principle
Section titled “Focus–Supporting Principle”The Focus–Supporting Principle describes a functional but non-hierarchical relationship between areas. Unlike Master–Detail, there is no content dependency or control between the panes — they coexist functionally and complement each other.
-
Focus Pane
The main working area of the view. It carries the user’s primary attention (e.g., dashboards, editors). Visual weighting: dominant, structured, and designed as the main interaction area. -
Supporting Pane
A secondary area providing context, tools, filters, or complementary controls. Visual weighting: narrower, visually secondary, and functionally and contextually supportive.
This layout type is used when the panes are independent, but together create a complete functional environment.
Decision Guide
Section titled “Decision Guide”Choose the layout and visual weighting according to interaction focus and content dependency.
| Scenario | Recommended Layout |
|---|---|
| Simple browse–inspect flow | Master–Detail |
| Context information or global tools required | Master–Detail–Context |
| Two independent functional areas | Focus–Supporting Pane |
| Temporary overlays or assistants | Floating Pane Extension |
Visual Overview
Section titled “Visual Overview”Two-pane layout for large desktop.
Two-pane layout for large desktop.
Three-pane layout for large desktop.
Three-pane layout for large desktop.
Three-pane layout for large desktop.
Two-pane layout for large desktop.
Floating pane is a modal dialog.
Floating pane is a popover