Studio Developer Manual / Version 2406.1
Table Of Contents
When creating complex GUI components, it is good practice to provide an abstract model in
the form of a bean to back the view. In combination with ValueExpressions
this allows an easy dependency tracking between the different widgets of a complex GUI.
The best practice here, is to lazy initialize the model bean through a getter method.
The bean itself is created there using the call
beanFactory.createLocalBean()
upon first access:
import Config from "@jangaroo/runtime/Config";
import Panel from "@jangaroo/ext-ts/panel/Panel";
import Bean from "@coremedia/studio-client.client-core/data/Bean";
import beanFactory from "@coremedia/studio-client.client-core/data/beanFactory";
class MyComponent extends Panel {
#model: Bean;
constructor(config: Config<MyComponent>) {
super(config);
this.#initModel(config);
//...
}
getModel(): Bean {
if (!this.#model) {
this.#model = beanFactory._.createLocalBean();
}
return this.#model;
}
#initModel(config: Config<Panel>): void {
this.getModel().set("myProperty", config.title);
//...
}
//...
}
export default MyComponent;
Example 5.20. Model bean factory method
The model can then be used inside a ValueExpression and be bound to components:
import Config from "@jangaroo/runtime/Config";
import TextField from "@jangaroo/ext-ts/form/field/Text";
import BindPropertyPlugin from "@coremedia/studio-client.ext.ui-components/plugins/BindPropertyPlugin";
import ValueExpressionFactory from "@coremedia/studio-client.client-core/data/ValueExpressionFactory";
// inside items of some container:
Config(TextField, {
itemId: "...",
plugins: [
Config(BindPropertyPlugin, {
bindTo: ValueExpressionFactory.create("myProperty", this.getModel()),
bidirectional: true,
}),
],
})
//...
Example 5.21. Model bean access
Here a text field is configured to display the value of a property, but of course arbitrary widgets can be used.
In fact, the property is not directly accessed by the plugin, but indirectly through a value expression that, in this case, simply evaluates to a property value. Value expressions will be discussed in the next section.
