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