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