Core Components and Native Components

Hosanna components are BaseView subclasses with generated state and factory contracts. A component can be a primitive, a control, a layout group, or an application-defined composition of other views.

Shared Building Blocks

Area	Current examples	Use
Primitives	Label, Image, Rectangle, Shape, VideoPlayer, WebView	Display content through the active renderer
Groups	Group, HGroup, VGroup, GridGroup, Spacer, Mask	Compose and lay out child structs
Controls	Button, CheckBox, ComboBox, TextInput, ScrollView, ScrollContainer, TabSelector	Focusable and interactive behavior
App components	Generated factories such as LoadingSpinner(...)	Reusable product-specific state and presentation

This is not a one-to-one wrapper around HTML elements or Android widgets. A Hosanna control can be composite and can select different implementation paths by runtime. For example, TextInput uses a TV keyboard dialog on lean-back targets, a DOM input on touch Web, and the native system input path on native phone/tablet targets.

Renderers and Native Boundaries

• Roku uses SceneGraph-compatible nodes and generated BrightScript.
• Web and Samsung TV use the browser renderer.
• iOS/tvOS and Android/Android TV use their native Hosanna targets.

The shared view contract keeps state, layout, and events consistent, but it does not imply that every control maps to one specific host widget. Do not use an assumed platform analogue as API documentation.

When shared APIs do not cover a platform service, add a narrow typed adapter in the owning native target and register it during platform initialization. On Roku, typed SceneGraph interfaces and carefully isolated hs_native_roku snippets are also available. See Using Native Libraries.

Example

@view('SimpleLayout')
export class SimpleLayoutView extends BaseView<SimpleLayoutState> {
  protected getViews(): ViewStruct<ViewState>[] {
    return [
      VGroup([
        Label({ text: 'Welcome to Hosanna UI!' }),
        HGroup([
          Button({ text: 'OK' }).isInitialFocus(),
          Button({ text: 'Cancel' }),
        ]).itemSpacing(20),
        Image({
          imageUri: 'pkg:/assets/images/logo.png',
          width: 200,
          height: 100,
        }),
        Rectangle({ width: 400, height: 2, color: '#cccccc' }),
      ]).itemSpacing(30)
    ];
  }
}

The example omits imports and the generated-file preamble for brevity. A real view must export its generated factory/struct and use the generated state type, as shown in Hosanna Fundamentals.

For a data-driven catalog, use the collection surfaces documented in the Collections section rather than building an unbounded tree with groups or a ScrollView.