close

Filter

loading table of contents...

Studio Developer Manual / Version 2207

Table Of Contents

5.3.5 Model Beans for Custom Components

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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.