Skip to main content

Primitives Overview

info

Hosanna UI provides a set of primitives to build interactive and visually appealing applications. Below is a list of primitives with descriptions, examples, and API references.

Visual Primitives​

Image (see dedicated page)​

  • Description: Represents an image view.
  • Usage: Used for displaying images in the UI.

API Reference: Image API

Example​

Label (see dedicated page)​

  • Description: Represents a text label.
  • Usage: Used for displaying text.

API Reference: Label API

Rectangle (see dedicated page)​

  • Description: Represents a rectangular shape.
  • Usage: Used for creating rectangular UI elements.

API Reference: Rectangle API

Example​

Interaction Primitives​

NativeKeyboard (see dedicated page)​

  • Description: Represents a native keyboard view.
  • Usage: Used for text input.

API Reference: NativeKeyboard API

Example​

NativeKeyboard()
  .placeholderText('Enter text...')
  .onTextChange(event => {
    console.log('Text changed:', event.text);
  })

NativeMiniKeyboard (see dedicated page)​

  • Description: Represents a mini keyboard view.
  • Usage: Used for compact text input.

API Reference: NativeMiniKeyboard API

Example​

NativeMiniKeyboard({ id: 'mini', placeholderText: 'Hello, World!' })
  .onTextChange((event) => {
    console.info(event.text);
  })

Utility Primitives​

VideoPlayer (see dedicated page)​

  • Description: Represents a video player.
  • Usage: Used for playing video content.

API Reference: VideoPlayer API

Example​

VideoPlayer({
  id: 'videoPlayer',
  videoPlayerState: this.videoPlayerState,
  content: this.createVideoContentNode(),
  mute: true
})

Skeleton​

  • Description: Represents a skeleton loader component.
  • Usage: Used to show loading states and placeholders while content is being fetched.
  • Features:
    • Supports both circular and rectangular shapes
    • Customizable dimensions and colors
    • Smooth animation transitions

Hosanna now provides a unified way to show skeleton loaders for any view. Every Hosanna view has an isSkeleton field. When isSkeleton is set to true, the view will not call getViews; instead, it will call getSkeletonViews, which should return an array of skeleton view definitions.

Example: Defining Skeleton Views​

protected override getSkeletonViews(): ViewStruct<ViewState>[] {
  return [
    SkeletonRectangle({ id: 'skeleton-logo', translation: [255, 99], width: 699, height: 224 }),
    SkeletonRectangle({ id: 'skeleton-iconStrip', translation: [255, 359], width: 300, height: 30 }),
    SkeletonRectangle({ id: 'skeleton-text', translation: [255, 422], width: 801, height: 130 }),
    SkeletonRectangle({ id: 'skeleton-continueButton', translation: [255, 590], width: 259, height: 63 }),
    SkeletonRectangle({ id: 'skeleton-detailsButton', translation: [530, 590], width: 191, height: 63 }),
    SkeletonRectangle({ id: 'skeleton-headingLabel', translation: [255, 782], width: 150, height: 30 }),
    SkeletonRectangle({ id: 'skeleton-tile1', translation: [255, 833], width: 384, height: 216 }),
    SkeletonRectangle({ id: 'skeleton-tile2', translation: [654, 833], width: 384, height: 216 }),
    SkeletonRectangle({ id: 'skeleton-tile3', translation: [1053, 833], width: 384, height: 216 }),
    SkeletonRectangle({ id: 'skeleton-tile4', translation: [1454, 833], width: 384, height: 216 }),
  ];
}

Toggling Skeleton Mode​

Typically, you toggle skeleton mode in response to loading data. For example:

protected override loadData(): void {
  this.isSkeleton = true;
  this.contentService.getContentCategoryList()
    .then((pageData) => {
      console.info('finished loading data');
      this.pageData = pageData;
      this.dataState = ViewDataState.Loaded;
      this.isSkeleton = false;
    });
}
  • When isSkeleton is true, the skeleton views are rendered.
  • When isSkeleton is false, your normal views are rendered.

API Reference: