Skip to main content

CollectionView Overview

CollectionView​

CollectionView renders rows of items efficiently. Rows can be horizontal lists, grids, or fully custom Hosanna views.

Quick Start​

Tip: Edit Markers in Snippets

Inside getViews() place your editable code between // --- edit below --- and // --- edit above ---. Then run npm run generate-hosanna-runner.

⚙️ Key Concepts​

Rows & Cells
  • Rows: HorizontalRow, ListRow, GridRow, or CustomViewRow.
  • Cells: Typically DynamicCell that displays a fragment defined in style JSON.
  • Fragments: Server-style JSON that defines views and per-state styles.

Row Settings (Style JSON)​

Rows are configured by style keys like rows.regular:

"rows": {
  "regular": {
    "focusSettings": { "indicatorImageUri": "images/input-focusrect.9.png", "indicatorAppearance": "onTop" },
    "headerSettings": { "height": 51, "labelOffset": [255, 0], "fontKey": "~theme.fonts.heading-24" },
    "contentOffset": [255, 0],
    "cellSize": [384, 216],
    "height": 317,
    "spacing": 15,
    "screenPosition": [0, 150],
    "cellSettingsKey": "cells.regular"
  }
}

Cell Fragments (Normal vs Focused)​

"cells": {
  "regular": {
    "$supportsDataMap": true,
    "views": {
      "base": [{ "id": "poster", "subType": "Poster", "width": 384, "height": 216, "uri": "${data.imageSet.$RES$}" }],
      "normal": { "poster": { "loadingBitmapUri": "~cells.backgroundPlaceholderUri" } },
      "focused": { "poster": { "scale": [1.05, 1.05] } }
    }
  }
}

API Surface​

  • CollectionView: dataSource, onItemSelected(event), onItemFocus(event), onRowFocus(event).
  • DataSource: appendRows, removeRow, appendItemsToRow, removeItemsFromRow, updateItem, ChangeRowHidden.
  • Row Types: HorizontalRow, ListRow, GridRow, CustomViewRow.
  • Focus: Floating/fixed focus, focus indicators, focused scale.
  • Performance: Virtualized rows and cells, fragment pooling, node reuse.

Learn More​

  • CollectionView API: API
  • Row & Cell Settings: See ewtn/assets/meta/style.config.json under rows.* and cells.*.
  • Fragments: hosanna-ui/docs/ui/view-fragments.md.