$

$ 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.

Example

Usage in JSX to group widgets in a WidgetCollection:

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

Usage in JSX to create a markup string:

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

Same as:

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

To avoid str having an implicit any type in TypeScript:

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

Usage to obtain a widget reference.

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

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

Usage to obtain any NativeObject instance in an interactive console:

>> 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 encapsulated in a custom component.

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

Returns WidgetCollection

$(attributes, children)

A JSX stateless functional component that groups all given widgets in a WidgetCollection

Parameter Type Optional Description
attributes {children: tabris.JSXChildren<tabris.Widget>} | null No This parameter needs to be null since <$> does not support any attributes
children tabris.JSXChildren<tabris.Widget> No The widgets to be included in the resulting WidgetCollection instance.

Returns WidgetCollection

$(attributes, children)

A JSX stateless functional component that joins any given content in to a single string. The text is treated as markup, meaning that multiple whitespaces in succession (including <br/>) are reduced to a single one.

Parameter Type Optional Description
attributes {children: string | number | boolean | Array<null | string | number | boolean>} | null No This parameter needs to be null since <$> does not support any attributes.
children string | number | boolean | Array<null | string | number | boolean> No The content of the resulting string.

Returns string

$(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 Optional Description
cidNumber number No The cid number is the trailing part of the cid property string.

Returns tabris.NativeObject