Skip to content

Options: Options Inheritance

The options that are available in this.options are collected in a very specific way.

What are we learning here?

  • Important details of options

Merging Defaults of Class Inheritance

First, all static defaults of all base classes are merged. Let's look at our application component that extends the class Application:

export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "640 400",
        headerTitle: "Test Widget Features"
      }
    }
  };
}

The Application class, in turn, extends the Panel class. And this ultimately like all components extends the Component class:

Our Class
  ^
Application
  ^
Panel
  ^
Component

Any class in this hierarchy can define its own defaults. To keep these options from getting in each other's way, each class uses its own namespace.

The class Application have defined its default in @codecoupler.application, the class Panel in @codecoupler.panel and the class Component in @codecoupler.component.

It should be best practice if writing components that are intended to be extended to put the default options into an own namespace. The namespace should be the company name, prefixed by @ and divided into subspaces named like the component.

As you see we override in our class the default options of the Panel class which is responsible to build the dragable panel.

Passing Options

After merging the defaults these are in turn merged with the passed options. You have two options to pass overriding options.

We just got to know the first alternative. The options are passed using the load method. Either in the short version with load(Component, Options) or per start definition object with load({options: {...}}).

The second one can only be done per start definition object. The property you have to use is settings. This would look like:

this.load({
  settings: {} //Define "settings" here
})

The "settings" have a very special meaning because they are used for the component to be loaded and all other child components loaded by this component. Settings are valid for the entire component hierarchy from this point on.

Global Defaults

You can modify also defaults globally. This is not recommended. It is always better to use settings on the root component to set the defaults for all child components.

To set defaults globally you set modify the static property. Here we set for example the default panel size for all components on any stage that will be created after this:

1
2
import { Panel } from "@codecoupler/cc-ui";
Panel.defaults["@codecoupler"].panel.panelSize = "640 400";

Well known Options

Furthermore, there are options that are always expected at the root level. To distinguish these from other options, they start with a $ sign. We will see some examples later in this walkthrough. First of all, here is a brief overview. For now the following well known options will be used:

  • $manifest: Information about the component that have to be available before loading.
  • $i18n: Language strings of a component.

Sum Up

So the final options you get is a compilation of base class options, your own defaults, passed options and fixed settings for the hierarchy:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Instatiate Final Class with:
- options
- settings
   |                      1. Merge static defaults of class hierarchy. Intermediate result is
   v                         available in "this.env.defaults".
   +--------------------> 2. Merge settings passed to parent component with passed settings.
   ^                         Intermediate result is available in "this.env.settings".
   |                      3. Merge merged defaults, merged settings and passed options
   |                         into "this.options". The origin passed options are available in
   |                        "this.env.options".
Defaults of Final Class
   |
Defaults of Base Class
   |
Defaults of Base Class

As you see in this overview all intermediate results are available and you can of course build your own merging startegy from this.

Where to set own Options

As you know you can define your own defaults with static defaults. but sometimes this is not the best place to define your own options or to override base options.

For example, if you want to set options with callback functions that need to access an instance and not a class.

The asnyc init() method is best suited for this purpose. The async start() method we have used so far is not suitable for this. When this function is called, all base classes have already completed their initialization and have used their options.

So both codes below do the same thing:

export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "640 400",
        headerTitle: "Test Widget Features"
      }
    }
  };
}

export default class extends Application {
  async init(){
    this.options["@codecoupler"].panel.panelSize = "640 400";
    this.options["@codecoupler"].panel.headerTitle = "Test Widget Features";
  }
}