Setter
Defines a set attributes to use with apply or as a JSX element.
This function was previously known as
Set, but renamed due to the name clash with theSetconstructor. The old name still works for backwards compatibility.
See also:
JSX Example snippet using Setter with apply [► Run in Playground]
JSX Example snippet using Setter as an JSX element [► Run in Playground]
Methods
Setter(target, attributes)
Creates a attributes object for the given widget type. This is meant to be used to creates rule sets for the apply method. The benefit of using this method as opposed to passing the object directly is twofold:
1. The IDE and/or TypeScript compiler can check that the attributes are matching the given widget type.
- The
applymethod will only set the attributes if the selected widget matches the type given here. If there is a mismatch an error will be thrown.
| Parameter | Type | Description |
|---|---|---|
| target | WidgetConstructor<WidgetType> |
The type of the target widget. |
| attributes | Attributes<WidgetType> |
A set of attributes (properties and listeners) for the given widget type. |
Returns: Attributes<WidgetType>
Setter(target, selector, attributes)
Creates a type-safe RuleSet targeting widgets given the selector. Can be passed to the apply function or attribute directly or as in an array of rules sets.
| Parameter | Type | Description |
|---|---|---|
| target | WidgetConstructor<WidgetType> |
The type of the target widget. |
| selector | SelectorString |
Selector matching the target widget(s). |
| attributes | Attributes<WidgetType> |
A set of attributes (properties and listeners) for the given widget type. |
Returns: RuleSet
As JSX Element
This function can also be used as a JSX element inside another element to set on of its attributes. This is equivalent to setting the attribute directly in the parent element, but allows neatly inlining a multi-line expression such as an object literal or function. (Technically a JSX attribute can be multi-line as well, but this would look rather confusing.)
As a element Setter itself requires the following attributes:
| Attribute | type | Description |
|---|---|---|
target |
Constructor |
The type of the parent element. |
attribute |
string |
The attribute to set. |
The value to be set is then contained within the Setter element’s body. Example:
contentView.append(
<Stack>
<Button text='Simple dialog'>
<Setter target={Button} attribute='onSelect'>
{async () => {
await AlertDialog.open('Hello').onClose.promise();
$().only(TextView).text = 'Dialog closed';
}}
</Setter>
</Button>
<TextView/>
</Stack>
);
This is equivalent to:
contentView.append(
<Stack>
<Button text='Simple dialog' onSelect={showSimpleDialog}/>
<TextView/>
</Stack>
);
async function showSimpleDialog() {
await AlertDialog.open('Hello').onClose.promise();
$().only(TextView).text = 'Dialog closed';
}
Which is better is a matter of taste.
If an attribute is set both directly and via Setter an error will be thrown. Similarly, you can not specify multiple setter for the same attribute in the same parent element.
Apply
The Apply element is Setter for the apply attribute. It can be used to invoke apply on a <Composite> element (or any of its subclasses):
<Stack>
<Apply>{ {TextView: {font: '24px'}} }</Apply>
<TextView>Hello</TextView>
<TextView>World</TextView>
</Stack>
Alternatively it can be used with attributes to create a single rule. A single composite can contain multiple <Apply> elements, so this syntax still allows multiple rules.
All attributes are optional.
| Attribute | type | Description |
|---|---|---|
target |
Constructor |
The type of the target widget(s). |
selector |
SelectorString |
The selector matching the target widget(s). If omitted the target is also the selector. |
attr |
Attributes |
The attributes to apply to the target widget(s). Alternatively the attributes may be put in to the elements body. |
Example:
<Composite padding={8}>
<Apply target={TextView} selector='#foo' attr={ {textColor: 'white' } }/>
<Apply target={TextView} selector='#bar' attr={ {font: '24px'} }/>
<Apply target={TextView}>
{ {
top: 'prev() 10',
background: '#66E'
} }
</Apply>
<TextView id='foo'>Hello</TextView>
<TextView id='bar'>World</TextView>
</Composite>
