API Referenceclass

class Widget

A base class that represents a reusable UI component with encapsulated state.

class Widget extends View;

Description

Widgets are view objects that may include their own state (properties) and event handlers, to render their own view body content.

To be able to use widgets in the view hierarchy, you should also export a builder function that uses the static Widget.builder() method.

For views that require a custom renderer (e.g. a platform-dependent graphic), define a view class that extends Widget, and overrides the Widget.render method altogether.

Note
Widgets are very similar to Activity objects, but they don’t have an active/inactive lifecycle and typically don’t include any application logic (especially not for loading or saving data).

Examples

// Define a widget class to store view state
class CollapsibleWidget extends Widget {
  expanded = false;
  onToggle() {
    this.expanded = !this.expanded;
  }
}

// Export a builder function that uses the class
function Collapsible(title: StringConvertible, ...content: ViewBuilder[]) {
  let width = 300;
  return CollapsibleWidget.builder((v) =>
    UI.Column()
      .width(width, undefined, "100%")
      .with(
        UI.Text(title)
          .icon(v.bind("expanded").then("chevronDown", "chevronNext"))
          .cursor("pointer")
          .onClick("Toggle"),
        UI.ShowWhen(v.bind("expanded"), UI.Column(...content)),
      )
  ).extend({
    expand(set = true) {
      this.initializer.set("expanded", set);
      return this;
    },
    width(w: number) {
      width = w;
      return this;
    },
  });
}

Type members

• interface Widget.Builder static
  A builder interface for widgets created by Widget.builder().

Static members

• Widget.builder() static
  Creates a widget builder for this class.

Instance members

• body() protected
  The encapsulated view object, an attached view.
• findViewContent()
  Searches the view hierarchy for view objects of the provided type.
• requestFocus()
  Requests input focus on the contained view object.
• delegate()
  Delegates incoming events to methods of this object, notably from the attached view body.
• beforeRender() protected
  A method that’s called before the view is rendered, to be overridden if needed.
• render()
  Creates and renders the encapsulated view body, if any.

Inherited members

• emit()
  Emits an event, immediately calling all event handlers.
• emitChange()
  Emits a change event.
• listen()
  Adds a handler for all events emitted by this object.
• listenOnce()
  Returns a promise for a single event with the provided name.
• listenAsync()
  Adds a handler for all events emitted by this object, and returns an async iterable.
• observe()
  Observes a property, a bound property from an attached parent, or an observable object.
• observeAsync()
  Observes one or more targets asynchronously, batching or debouncing/throttling updates.
• attach() protected
  Attaches the specified observable object to this object.
• isUnlinked()
  Returns true if the object has been unlinked.
• unlink()
  Unlinks this observable object.
• beforeUnlink() protected
  A method that’s called immediately before unlinking an object, can be overridden.