Showcase app: complete catalog

The Showcase app is a demo app for the RSG 2.0 SDK. It demonstrates SDK components, dialogs, lists, grids, animations, and more through interactive examples organized in a hierarchical panel-based menu.

Architecture

The app uses a panel-based navigation system that does not have a URL router. String IDs and Solid context drive navigation:

• ShowcaseApp: The root component that wraps providers (ScreenRegistryProvider, FullscreenVideoProvider, DialogProvider)
• MenuScene: Renders the MainMenu inside a PanelSet
• MainScene: Registers all scene and dialog factories and renders the active scene or dialog based on ID
• SceneDialogMenu: Handles scene and dialog navigation: setScreen(id) for fullscreen scenes, setDialog(id) for modal overlays

Each showcase has an info panel (left sidebar describing the component) and a scene or dialog (interactive demo area).

Top-level menu

The following table lists each top-level menu item.

1. Dialogs

Demonstrates the standard dialog system (StandardDialog and its variants) for building modal overlays with composable content areas.

1.1 Simple dialog

Scene ID: simple-dialog
Files: dialog-showcases/simple-dialog.tsx, simple-dialog-panel.tsx

Demonstrates a basic StandardDialog composed from StdDlgTitleArea, StdDlgContentArea, and StdDlgButtonArea. Shows an "Exit Application" confirmation with OK/Cancel buttons and dialog lifecycle management via DialogContext.

1.2 Terms & conditions

Scene ID: terms-conditions-dialog
Files: dialog-showcases/terms-conditions-dialog.tsx, terms-conditions-panel.tsx

Demonstrates StandardMessageDialog, a convenience wrapper for dialogs with structured text content. Shows title, message blocks with numbered bullets, bottom message, and Accept/Decline buttons.

1.3 Search

Scene ID: search-dialog
Files: dialog-showcases/search-dialog.tsx, search-panel.tsx

Demonstrates StandardKeyboardDialog with keyboardDomain="generic". Shows live text input through onText, preset text population, Search/Cancel buttons, and passing typed text back through close parameters.

1.4 Parental controls PIN

Scene ID: pin-pad-dialog
Files: dialog-showcases/pin-pad-dialog.tsx, pin-pad-panel.tsx

Demonstrates StandardPinPadDialog for numeric PIN entry. Shows onPin callback behavior, Submit/Cancel flow, and returning the entered PIN through close parameters. Covers DynamicPinPad and voice input considerations.

1.5 Loading content

Scene ID: loading-dialog
Files: dialog-showcases/loading-dialog.tsx, loading-panel.tsx

Demonstrates StandardProgressDialog with an indeterminate spinner and no buttons. Shows rotating status messages, timer-based auto-dismiss, and cleanup via onCleanup.

1.6 App settings

Scene ID: app-settings-dialog
Files: dialog-showcases/app-settings/app-settings-dialog.tsx, app-settings-panel.tsx, checkbox-dialog.tsx, radio-button-dialog.tsx

Demonstrates a hub-style StandardDialog with nested child dialog navigation. Features:

• Auto Save checkbox action card
• Drill-down to a checkbox subdialog (three StdDlgActionCardItem checkboxes with Apply/Cancel)
• Drill-down to a radio button subdialog (StdDlgItemGroup with Low/Medium/High radiobutton cards)
• Two-way data flow between parent and child dialogs via pendingChild / openChildDialog

1.7 Feature overview / about

Scene ID: feature-overview-dialog
Files: dialog-showcases/feature-overview-dialog.tsx, feature-overview-panel.tsx

Demonstrates a large custom StandardDialog with rich content: side promotional poster, multi-style text, graphic items, lettered bullet lists, titled icons, version line, and RSGPalette customization.

1.8 Items showcase (submenu)

A sub-menu grouping dialog content item demos:

1.8.1 Custom item

Scene ID: custom-item-dialog
Files: dialog-showcases/custom-item-dialog.tsx, custom-item-panel.tsx

Demonstrates StdDlgCustomItem, fully custom content inside a dialog. Shows a "Manage Downloads" table layout with LayoutGroup and Label columns (Title/Size/Status).

1.8.2 Progress item

Scene ID: progress-item-dialog
Files: dialog-showcases/progress-item/progress-item-dialog.tsx, progress-item-panel.tsx

Demonstrates StdDlgProgressItem, an indeterminate progress spinner embedded in a dialog content area. Shows cycling status messages, optional Close button, and auto-dismiss behavior. Contrasts with the standalone StandardProgressDialog.

1.8.3 Determinate progress item

Scene ID: determinate-progress-item-dialog
Files: dialog-showcases/progress-item/determinate-progress-item-dialog.tsx, determinate-progress-item-panel.tsx

Demonstrates StdDlgDeterminateProgressItem, a progress bar with a percentage (from 0% to 100%). Shows a "Downloading update" flow with timer-driven progress, auto-close at 100%, and Cancel button for early termination.

1.8.4 Keyboard item

Scene ID: keyboard-item-dialog
Files: dialog-showcases/keyboard-item/keyboard-item-dialog.tsx, keyboard-item-panel.tsx

Demonstrates StdDlgKeyboardItem, an inline full keyboard within dialog content. Shows text input field combined with a "Save as default" checkbox, form state management, and Submit/Cancel flow.

1.8.5 Keyboard item PinPad

Scene ID: keyboard-item-pinpad-dialog
Files: dialog-showcases/keyboard-item/keyboard-item-pinpad-dialog.tsx, keyboard-item-pinpad-panel.tsx

Demonstrates StdDlgKeyboardItem in PinPad layout mode, a numeric pad embedded in dialog content. Shows digit entry with a "Trust this device" checkbox. Contrasts with StandardPinPadDialog.

2. Label

Demonstrates text rendering components with various styling, alignment, and overflow options.

2.1 Label

Files: label-showcases/label-showcase-panel.tsx

Demonstrates the Label component with default and wrapped text, bold/large/colored styling, single- and multi-line text ellipsis, and horizontal/vertical alignment within bounded areas.

2.2 MultiStyleLabel

Files: label-showcases/multi-style-label-panel.tsx

Demonstrates MultiStyleLabel with custom drawingStyles: inline style tags for mixed formatting, status lines, and wrapped multiline markup content.

2.3 ScrollingLabel

Files: label-showcases/scrolling-label-panel.tsx

Demonstrates ScrollingLabel, text that scrolls horizontally when it overflows. Shows short text (no scroll), default scroll speed, fast/slow speeds, limited repeatCount with ellipsis fallback, and custom colors.

2.4 SimpleLabel

Files: label-showcases/simple-label-panel.tsx

Demonstrates SimpleLabel basics: system font compared with custom Doto font, color customization, and horizOrigin / vertOrigin alignment with hairline visual guides.

3. Lists and grids

Demonstrates list and grid layout components for content browsing, selection, and navigation.

3.1 LabelList showcase

Scene ID: label-list-scene
Files: list-and-grid-showcase/label-list/label-list-scene-showcase.tsx, label-list-info-panel.tsx

Demonstrates a static LabelList with genre text items. Shows focus animation, item highlighting, OK press feedback (opens message dialog), and property chooser for focus animation style, item size, and colors.

3.2 Dynamic LabelList showcase

Scene ID: dynamic-label-list-scene
Files: list-and-grid-showcase/label-list/dynamic-label-list-scene-showcase.tsx, dynamic-label-list-info-panel.tsx

Demonstrates LabelList with a mutable ContentNode list. Shows dynamic item addition (Right key) and removal (Left key), OK action, and property customization. Demonstrates reactive list manipulation.

3.3 CheckList showcase

Scene ID: checklist-scene
Files: list-and-grid-showcase/checklist/checklist-scene-showcase.tsx, checklist-info-panel.tsx

Demonstrates CheckList, a list with checkbox items. Shows toggle behavior on OK press, focused/checked state labels, and Options for checkOnSelect, textHorizAlign, and drawFocusFeedback properties.

3.4 RadioButtonList showcase

Scene ID: radio-button-list-scene
Files: list-and-grid-showcase/radio-button-list/radio-button-list-scene-showcase.tsx, radio-button-list-info-panel.tsx

Demonstrates RadioButtonList, single-selection radio list. Shows focused + selected state labels, code panel with live property values, and property chooser for visual customization.

3.5 Dynamic MarkupList showcase

Scene ID: dynamic-markup-list-scene
Files: list-and-grid-showcase/markup-list/dynamic-markup-list-scene-showcase.tsx, dynamic-markup-list-info-panel.tsx

Demonstrates MarkupList with compiled custom item components. Shows dynamic row add/remove, poster thumbnail rendering, and Options for focus style, visible rows, and tint colors.

3.6 PosterGrid showcase

Scene ID: poster-grid-scene
Files: list-and-grid-showcase/poster-grid/poster-grid-scene-showcase.tsx, poster-grid-info-panel.tsx

Demonstrates PosterGrid, a 2D grid of poster images with title/subtitle captions. Shows caption bitmap support, base size tuning, caption line count, display mode, and spacing configuration.

3.7 MarkupGrid showcase

Scene ID: markup-grid-scene
Files: list-and-grid-showcase/markup-grid/markup-grid-scene-showcase.tsx, markup-grid-info-panel.tsx

Demonstrates MarkupGrid, a 2D grid with compiled custom item components. Shows Picsum poster content, focus zoom effect, and Options for column count, item size, and focus behavior.

3.8 RowList showcase

Scene ID: row-list-scene
Files: list-and-grid-showcase/row-list/row-list-scene-showcase.tsx, row-list-info-panel.tsx

Demonstrates RowList, vertically stacked rows with horizontally scrollable items. Shows compiled row items, zoom on focus, full-width top-half layout, row/item identification on OK press, and Options for row focus styles and labels.

3.9 TimeGrid showcase

Scene ID: time-grid-scene
Files: list-and-grid-showcase/time-grid/time-grid-scene-showcase.tsx, time-grid-info-panel.tsx

Demonstrates TimeGrid, an electronic program guide (EPG) style grid with channel logos and time-slotted program schedule from JSON data. Features a muted preview Video component with playlist looping. OK on a program opens fullscreen video via FullscreenVideoContext.

3.10 ZoomRowList showcase

Scene ID: zoom-row-list-scene
Files: list-and-grid-showcase/zoom-row-list/zoom-row-list-scene-showcase.tsx, zoom-row-list-info-panel.tsx

Demonstrates ZoomRowList, a RowList variant where the focused row zooms in. Shows a wide layout with many genre rows, zoom dimensions, row counters, and title labels.

4. Keyboards

This section groups standalone keyboard examples so you can add more keyboard variants without expanding the top-level menu.

4.1 DynamicCustomKeyboard

Scene ID: custom-keyboard-scene
Files: keyboard-showcase/custom-keyboard/custom-keyboard-scene-showcase.tsx, custom-keyboard-info-panel.tsx

Demonstrates CustomKeyboard (DynamicCustomKeyboard) with a WiFi-style KDF, built-in text edit bar, caps lock and the abc123/symbols/accents registers via scene-level mode handling, and onText feedback.

4.2 National CustomKeyboard

Scene ID: russian-keyboard-scene
Files: keyboard-showcase/russian-keyboard/russian-keyboard-scene-showcase.tsx, russian-keyboard-info-panel.tsx

Demonstrates CustomKeyboard with a local app KDF (RussianCustomKDF.keyboard.json): English and Russian layouts (engLower / engCaps, rusLower / rusCaps), caps lock, and language toggle via scene-level mode and onKeySelectedValue.

4.3 DynamicKeyGrid

Scene ID: dynamic-key-grid-scene
Files: keyboard-showcase/dynamic-key-grid/dynamic-key-grid-scene-showcase.tsx, dynamic-key-grid-info-panel.tsx

Standalone DynamicKeyGrid using the phone-pad KDF; the scene accumulates digits via onKeySelected.

4.4 DynamicKeyboard

Scene ID: dynamic-keyboard-scene
Files: keyboard-showcase/dynamic-keyboard/dynamic-keyboard-scene-showcase.tsx, dynamic-keyboard-info-panel.tsx

Fullscreen DynamicKeyboard with fixed OS layout, generic voice domain, and onText label.

4.5 DynamicMiniKeyboard

Scene ID: dynamic-mini-keyboard-scene
Files: keyboard-showcase/dynamic-mini-keyboard/dynamic-mini-keyboard-scene-showcase.tsx, dynamic-mini-keyboard-info-panel.tsx

Search-style DynamicMiniKeyboard with voice entry and live text display.

4.6 DynamicPinPad

Scene ID: dynamic-pinpad-scene
Files: keyboard-showcase/dynamic-pinpad/dynamic-pinpad-scene-showcase.tsx, dynamic-pinpad-info-panel.tsx

DynamicPinPad PIN entry with secureMode and four-digit maxTextLength.

5. BusySpinner

Scene ID: busy-spinner-scene
Files: busy-spinner-showcase/busy-spinner-scene-showcase.tsx, busy-spinner-showcase.tsx

Demonstrates the BusySpinner component, a rotating bitmap used for loading indicators. Shows:

• Theme-default spinner and replay theme URI
• Custom WebP image as spinner
• Start/stop control via OK toggle
• Counter-clockwise spin direction
• Fast and slow spinInterval values
• Status label reflecting spinner state

6. Group

Demonstrates container and grouping components for layout composition.

6.1 Group

Files: showcases/group-showcase.tsx

Demonstrates basic Group component: group bounds visualization, nested group hierarchies, animated parent movement inside clippingRect, and animated opacity inheritance with colored child bars.

6.2 LayoutGroup

Files: showcases/layout-group-showcase.tsx

Demonstrates LayoutGroup for automatic child positioning: horizontal/vertical layoutDirection, horizAlignment and vertAlignment options, uniform or variable itemSpacings, and nested grid-like LayoutGroup compositions.

6.3 MaskGroup

Files: showcases/mask-group/mask-group-showcase.tsx

Demonstrates MaskGroup with a gradient mask bitmap. Shows auto-scrolling MultiStyleLabel documentation text using BoundingTracker, Animation, and Vector2DFieldInterpolator for continuous scroll.

7. Rectangle

Scene ID: rectangle-scene
Files: rectangle-showcase/rectangle-scene-showcase.tsx, rectangle-showcase.tsx

Demonstrates the Rectangle component, a basic drawing primitive. Shows:

• Solid colors and alpha transparency
• Nested rectangle compositions
• Animated width changes
• Overlapping rectangles with transparency blending
• Opacity step gradients
• Faux gradient strips using thin rects
• Varied sizes

8. ScrollableText

Scene ID: scrollable-text-scene
Files: scrollable-text-showcase/scrollable-text-scene-showcase.tsx, scrollable-text-info-panel.tsx

Demonstrates the ScrollableText component for displaying long-form text with vertical scrolling. Shows:

• Basic scrollable text blocks
• Font and color customization
• Line spacing adjustment
• Center and right text alignment (horizAlign)
• Custom scrollbar appearance via 9-patch bitmaps
• Up/Down navigation for scrolling

9. Poster

Scene ID: poster-scene
Files: poster-showcase/poster-scene-showcase.tsx, poster-showcase.tsx

Demonstrates the Poster component for image display. Shows:

• Local images and remote Picsum images
• Scale modes: noScale, scaleToFit, scaleToFill, scaleToZoom, limitSize
• Load-time scaling behavior
• Loading and fallback URI support
• Opacity and blending options

10. Font

Scene ID: font-scene
Files: font/font-scene-showcase.tsx, font-showcase.tsx

Demonstrates custom Font usage with TTF files loaded from pkg:/. Shows:

• Cookie, Doto, and Orbitron fonts at various sizes (from 18 to 48 points)
• Large text with ScrollingLabel to handle overflow
• Full alphabet row rendering per font
• Side-by-side comparison of the system font and a custom font

11. Animation

Scene ID: animation-scene
Files: animation-showcase/animation-scene-showcase.tsx, animation-info-panel.tsx

Demonstrates the Animation system through five sub-showcases:

11.1 Vector2D mover

Files: animation-showcase/vector2d-mover-showcase.tsx

A poster following a multi-segment rectangular path using Vector2DFieldInterpolator with chunked keys.

11.2 Opacity cross-fade

Files: animation-showcase/opacity-showcase.tsx

Two overlapping tinted posters with FloatFieldInterpolator cross-fading opacity in opposite directions on a 4-second loop.

11.3 Ease function curves

Files: animation-showcase/ease-function-showcase.tsx

Four horizontal tracks that show same-duration movement with linear, inCubic, outCubic, and inOutCubic easing. Tinted movers restart in sync when all complete.

11.4 Rainbow color cycle

Files: animation-showcase/rainbow-object-showcase.tsx

A poster with ColorFieldInterpolator cycling blendColor between red and blue (hue cycle).

11.5 Spectrum bars

Files: animation-showcase/spectrum-bars-showcase.tsx

Ten overlapping poster bars with colors animating through complementary hues on a shared timeline.

12. SoundEffect

Files: sound-effect-showcase/sound-effect-showcase.tsx

Demonstrates the SoundEffect component for playing short WAV audio clips triggered by UI events. Shows:

• Imperative playback via SoundEffectRef: each sound is controlled through a ref obtained via the ref prop, calling .play() directly instead of toggling a control signal
• Per-sound ref isolation: each of four WAV sounds gets its own SoundEffectRef so triggering one does not interfere with others
• LabelList navigation triggers: focusing or selecting a list item calls soundRefs[index].play()
• Up to four simultaneous sounds (a Roku platform limit)
• Item selection opens an "item-selected-dialog" confirming playback

Key fields: uri, volume, ref (for SoundEffectRef)

13. Fullscreen video

Scene ID: fullscreen-video-scene
Files: list-and-grid-showcase/time-grid/fullscreen-video-scene.tsx, fullscreen-video-info-panel.tsx, fullscreen-video-context.tsx

Demonstrates the Video component in fullscreen (1920×1080) mode with playlist playback. Shows:

• MP4 video playlist management
• Back button stops and closes via FullscreenVideoContext
• Trick play support
• Key Video fields: control, content, contentIsPlaylist, onState
• Integration with the TimeGrid showcase (OK on a program navigates here)

Shared infrastructure

The following sections describe the shared contexts, components, and helpers that the showcases use.

Property chooser

Files: property-chooser/property-chooser-dialog.tsx, property-chooser-types.ts, property-chooser-utils.ts, property-value-dialog.tsx

A reusable dialog for runtime property editing. Many list and grid showcases open this dialog with the Options remote key so that users can adjust component properties (colors, sizes, focus styles) and see the code update.

Dialog palette

Files: dialog-showcases/dialog-palette.tsx

Shared RSGPalette color definitions (dialogPaletteColors) that all dialog showcases use for theming (background, text, focus, secondary, footprint).

Dialog context

Files: dialog-showcases/dialog-context.tsx

Manages dialog registration, open/close lifecycle, and stacking. Wraps the app to provide setDialog / getDialogElement to any component.

Screen registry context (id-based, app-level)

File: src/components/screen-registry/screen-registry.tsx

Wraps @roku-sdk/navigation's ScreenControllerContext with an id → factory map. Most showcases use this context: setScreen(id), pushScreen(id), resetScreen(id), registerScreen(id, factory), deregisterScreen(id). The provider mounts a ScreenControllerProvider internally so the lower-level controller is also available throughout the tree. The fallback (MenuScene) is rendered when no screen is active.

Screen controller context (factory-based, lower-level)

Package: @roku-sdk/navigation (see packages/navigation/src/screen-controller/screen-controller.tsx)

Stack-based screen switcher whose methods accept factory functions directly (pushScreen(() => <Screen />) and so on). The screen-stack showcase uses this context directly; everything else uses the higher-level ScreenRegistryContext.

Fullscreen video context

Files: list-and-grid-showcase/time-grid/fullscreen-video-context.tsx

Manages fullscreen video scene transitions: opening from TimeGrid and restoring the previous scene on Back.

Info panel

Files: info-panel/info-panel.tsx

A reusable left-sidebar panel that scene showcases use to display component descriptions and usage notes.

Showcase utils

Files: list-and-grid-showcase/showcase-utils.ts

Shared helpers for list and grid scenes: property chooser integration, focus label formatting, code panel text generation, and Options key handling.