$

$ is a global helper function that may be used to create instances of WidgetCollection, to generate strings from JSX expressions, or to access specific NativeObject instances for debugging purposes.

Examples

JSX

Group widgets in a WidgetCollection:

contentView.append(
  <$>
    <TextView/>
    <Button/>
    <CheckBox/>
  </$>
);

Create a markup string:

const str = (
  <$>
    This is <b>some</b> text
    across multiple lines
  </$>
);
contentView.append(<TextView>{str}</TextView>);

Same as:

contentView.append(
  <TextView>
    This is <b>some</b> text
    across multiple lines
  </TextView>
);

Obtaining a widget reference:

contentView.append(
  <Composite>
    <TextView>Hello World</TextView>
  </Composite>
);

const textView = $(TextView).first();
console.log(textView === contentView.find(TextView).first()); // true

TypeScript/JSX

Create markup string, but avoid implicit any type:

const str: string = (
  <$>
    This is <b>some</b> text
    across multiple lines
  </$>
);

Interactive Console

Obtain any NativeObject instance by cid:

>> console.dirxml(tabris.contentView)
<ContentView cid='$3' bounds='{left: 0, top: 0, width: 768, height: 1004}'>
  <Stack cid='$31' bounds='{left: 0, top: 248, width: 768, height: 207}' alignment='stretchX'>
    <CheckBox cid='$24' bounds='{left: 0, top: 0, width: 736, height: 25}' text='Tint background' checked='false'/>
    <CheckBox cid='$25' bounds='{left: 0, top: 25, width: 736, height: 25}' text='Tint textColor' checked='false'/>
  </Stack>
</ContentView>
<- undefined
>> $(24)
<- CheckBox[cid="$24"]
>> $(24).textColor
<- rgb(0, 0, 0)
>>

Methods

$(selector?)

A shortcut to tabris.contentView.find(). Returns a collection containing all descendants of contentView that match the given selector. This does not include any widgets in the drawer, a popover, or an encapsulated custom component. A custom component is encapsulated if it overrides the children() method or uses the @component decorator.

Parameter Type Description
selector Selector A selector expression or a predicate function to filter the results. Optional.

Returns: WidgetCollection

$(cidNumber)

Returns the non-disposed NativeObject instance (e.g. a widget) associated with the given cid number. The number can be obtained via the cid property. Example: If the cid of an object is '$23' it can be obtained by $(23). The cid is visible in the log when passing a NativeObject to any log method, e.g. console.log(widget), or console.dirxml(widget). The native object may then be obtained using the developer console or the interactive console feature for the tabris CLI serve command.

This feature is meant for debugging purposes only. Using it in production code is dangerous since it allows interfering with the internals of the framework or encapsulated components. Also, the cid of a NativeObject is not stable, meaning it can change each time the code is executed.

Parameter Type Description
cidNumber number The cid number is the trailing part of the cid property string.

Returns: tabris.NativeObject