Skip to content

CodeCoupler UI Update from 2.x to 3.x

Changes in DataSource Mixins

Exported class names changed the Prefix DataSourceMixin into a shorter DSM. Example: DataSourceMixinLoopback => DSMLoopback.

DataSourceMixinMockup do not exist anymore.

The DataSource Mixin ExtendedFields is not included anymore.

The DataSource Mixin Repeating will support by default version 3 of CodeCoupler. If you want to use the Mixin for version 2 you have to set the option supportLegacy=2.

Changes in System

The system constructor have now only one argument. The previous first argument element is now the property container in the previous second argument options.

Some settings defined in the previous second argument options are moved into the new property settings. This applies in particular to settings that apply throughout the system and not just for the initialization of the system. Please read the documentation of the System class for details.

The structure in system wide messages settings have changed.

The static defaults which define now only syste, wide settings and not options anymore was renamed to settings.

The method getData() do not exist anymore. Use the getter dataSources.

Changes in all Components

All components init() methods do not receive any arguments anymore. The previous argumnet env is now accessible over this.env. The previous argumnet options is now accessible over this.options.

Changes in Stages

Stages defined as vue applications do not receive anymore the env and options properties. Instead of they receive a component property which is a pointer to the base Stage class. So you have to rewrite this.env to this.component.env and this.env.stage to this.component.

Changes in Widgets

Widgets defined as vue applications do not receive anymore the env and options properties. Instead of they receive a component property which is a pointer to the base Widget class. So you have to rewrite this.env to this.component.env and this.env.widget to this.component.

The static field ui was removed. Use the async prepare() override to disable scrolling container.

The Event visibilitychanged and the getter fullvisible do not exist anymore. The concept was replaced by he getter and event visibility.

The static isWidget do not exist anymore. Use instanceof Widget instead.

The event destroy will not triggered anymore. Use the async destroy() method instead.

Changes in Applications

Split init into init and start

Do not call super.init() within your init() method anymore. All code behind the super call should placed in a new method called start(). The init() method must now return the application configuration object previous used as argument for the super.init() call.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
export default class extends Application {
  asnyc init(options) {
    return {
      /* Return config instead calling super.init() */
    }
  }
  async start(options) {
    /* Put your code here what you would do after the old super.init() call */
  }
}

Application Configuration object

The object that was used as argument for the call super.init() and to create the panel do not exist anymore. Only the value of the property panel is now the return value of the init(). All other properties have to be replaced as follows:

  • The property messages do not exists anymore. Messages will be taken from this.settings.messages.APP.BUTTONS.*
  • The property buttons do not exists anymore. Button shortcuts are now defined in this.settings.buttons.shortcuts and templates in this.settings.buttons.templates, where this.settings.buttons.templates.default is the previous template defined in etc.buttonTemplate.
  • The property widget (widget creation shortcut) do not exists anymore. With removing this widget the mechanism to add an widget into a container marked with "data-role=widget" also omitted. Use from now on the widget factory method of the application instance:
1
2
3
4
5
6
7
8
await this.widget({
  container: this.panel.content, //Set this
  id: "...",
  widget: YourWidget,
  options: {
    /*...*/
  },
});
  • The construct of layout, widgets and version as shortcut to create an layout widget do not exist anymore. This is now part of the layout widget.
  • Replacements handles.onError, handles.onSuccess, handles.onNoChanges and handles.onInputError will be defined here later.

On the Fly Applications

The application start configurations property init was removed. Instead defining the init method you can write this direct in the app object. Its not much more code. Furthermore the init semantic have changed and you can define further initialization methods like start.

Instead:

1
2
3
await app.app({
  init: async () => {},
});

Write now:

1
2
3
4
5
6
await app.app({
  app: class extends Application {
    async init() {}
    async start() {}
  },
});

Application as Function

You cannot define an application in the start definition object as simple function anymore. This had never started a real application and was used only for testing purposes.

Removed depricated

The deprecated application start configurations property layout and the application instance property layoutwas removed. Use widget: Layout instead.

Splash

  • getSplashContent method removed
  • splash method added
  • start config splash have two sub-properties init and start that can set to false

Removed

Static property isApp is removed.

Removed Widgets

  • GenericWidget
  • GenericWidgetNoScroll

Stages reworked

The Class Stage as a component do not exist anymore. You have to change the base class from Stage to Canvas and publish your main stage with this.registerStage() instead of the data attribute data-role="stage".

Fixed height Widgets

Do not use the following snippet anymore to create a non-scrollable widget:

1
2
3
4
async prepare(env) {
  env.feature.scroll = false;
  return super.prepare(env);
}

Extend instead the widget from the base class Canvas (not Widget).

Remove Blocking

It is not possible anymore to avoid blocking while initializing with the snippet:

1
2
3
4
async prepare(env) {
  env.feature.block = false;
  return super.prepare(env);
}

Use instead default settings:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
static defaults = {
  "@codecupler": {
    component: {
      splash: {
        init: false,
        start: false,
        destroy: false,
        error: false
      }
    }
  }
}

Change Widget init() to start()

A Widget to not have this.env.element or this.element defined in the init() method. You have to use the method start().

Changed env variables

  • env.$element is now this.element or `this.element.$.
  • env.element is now this.element.get().
  • env.system is now env.root.
  • env.app.parent and env.app.root do not exists anymore. Use instead env.parentOfType(Application) and env.rootOfType(Application).
  • env.container and env.$container do not exists anymore. Use instead env.start.stage.element and env.start.stage.$element
  • env.init do not exist anymore. Use instead env.start. To get the id from the environment object you have to use env.id.

Changed Start Definition Object

Specialized properties of components like app or widget do not exist anymore. You have to use the unified component property.

Changed "prepare" arguments

The argument env was removed. Use this.env instead.

Unified starting of components

The methods app, rootApp, forceApp and widget do not exists anymore. Instead you have to initiate a component with new componentClass(startDefinition). The startDefinition must at least define a Stage

The collections apps and widgets do not exist anymore.

Not existing

  • Component.destroying: true if component destroying already
  • Application.closeForce()
  • messages.COMMON.DESTROYED

Destroying

Do not override destroy() to destroy inner libraries. Use destroySelf() instead!

Auth Changes

The auth property of the ComponentStart object have changed:

  • The property requiredPermissions do not exists anymore. User instead required: { authentication: bool, authorization: null | any}
  • Authentication Modules have to implement async isAuthorized()

Changes in Preloaders

DataSource Preloaders do not exist anymore. You can use init() to preload datasources without authentication and start() if needed authentication.

Or you put everything into init() and use the datasource mixin Repeat.

Hints on how to migrate 2.x Stages to 3.x Components

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//From
export default class extends Stage {}
//To
export default class extends Widget {}
//Or
export default class extends Canvas {}

//From
async init() {}
//To
async start() {}

//From
this.env.$element
//To
this.element

//From
async start(){
  let settings = $.extend(
    true,
    {
      //Some Default Values
    },
    this.options
  );
}
//To
static defaults = {
  //Some Default Values
}
async start(){
  //Use from here this.options instead the local variable "settings"
}

1
2
3
4
<!-- From -->
<div data-role="cc-stage"></div>
<!-- To -->
<div data-cc-stage="$"></div>

Changes in Application Registry

The Application Registry and its methods getApp() and getApps() in a system component do not exist anymore. Use instead the Component Registry which is avalilable in all component with the new methods registerComponent() and getRegisteredComponent().

The component start property apps which was used only for starting a system component do not exist enymore. Use instead the method registerComponent() inside of the method init() or start() of the system component.

Changes in Apllications

The option modal: true do not exist anymore. To open a modal application you can load an application into the level "block".

Changes in Start Object

Property settings not valid anymore. Use instead namespaced options.

Setting the language over settings.language not provided anymore. Use component specific language options and the helper function this.setLanguage().

Block

The method block() do not return an object with an handle which was used to destroy the blocking layer. The returned value is a component which can be destroyed with destroy().

Rwrite as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
//From:
handle = await this
  .block("info","text")
  .then((e) => e.handle);
//To:
handle = await this
  .block("info","text")

//From
this.unblock(handle);
//To
handle.destroy();

"manifest" moved to "defaults"

From:

1
2
3
4
static manifest = {
  name: "Name of Component",
  iconHtml: '<i class="fas fa-tachometer-alt fa-fw"></i>'
};

To:

1
2
3
4
5
6
static defaults = {
  $manifest: {
    name: "Name of Component",
    iconHtml: '<i class="fas fa-tachometer-alt fa-fw"></i>'
  }
};

Moved default panel settings

From:

1
2
System.settings.panel.setStatus = "maximized";
System.settings.panel.header = false;

To:

1
Application.defaults["@codecoupler"].application.panel.setStatus = "fullsize";

Data Start Object

  • useSettings is now useDefaults

Removed Components

Sidebar, DSMMockup, System

Application panel init

Use instead a return value of init() the defaults "@codecoupler".panel

From:

1
2
3
4
5
6
async init() {
  return {
    panelSize: "640 510",
    headerTitle: "Test Component Features"
  };
}

To:

1
2
3
4
5
6
7
8
static defaults = {
  "@codecoupler": {
    panel: {
      panelSize: "640 510",
      headerTitle: "Test Component Features"
    }
  }
};

Grid

  • All Options now under "@codecoupler".grid.
  • The options property grid do not exist anymore. All Grid Options are now defined in the new root.
  • The options property events completely removed. Use the new on property.
  • The option grid.selectionModel was moved to setSelectionModel