CodeCoupler UI Update from 1.x (cc-complete) to 2.x (cc-ui)
Changed Initializing procedure
Before:
| //Target element is inside of "options" defined
let system = new System(options).then(() => {
//Do something here
});
|
After:
| let system = new System(element, options);
await system.initialized;
//Do something here
|
Stage loading option run
changed to stage
.
Before:
| let system = new System(element, {
stages: [
{
run: SomeStage,
options: {},
},
],
}).then(() => {});
|
After:
| let system = new System(element, {
stages: [
{
stage: SomeStage,
options: {},
},
],
}).then(() => {});
|
System changes
- Function
getAuthModule
removed. Use system.auth.module
instead.
- Functions
getAppLauncher
, getAppLauncherUI
and getAppUIName
removed.
- Function
run
renamed to app
Stage changes
- Stage object must be derived from object
Stage
and will not use the old Widget-Factory anymore.
Implications:
- The HTML will not be loaded automatically
- The class with the dashed name of the stage will not appended on the parent stage.
initState
is now initialized
and will be automatically handled by base class.
- The constructor arguments changed from (
current stage
, options
) to (environment
, options
).
- The property
$ccSystem
will not merged anymore into options
. Use instead the property system
from the argument environment
.
- The css class
cc-os-stage
will not set to new stages anymore.
DataSource "LoopbackRepeating" changes
All the special properties was moved from trasnportSettings
to transport
.
These properties changed:
- UnauthorizedStatus: Changed name to
repeatOnStatus
and from int
to Array
.
- onUnauthorizedError: Change name to
repeatProcess
. Arguments is now the result object of the
ajax request and not anymore a message which is configured in UnauthorizedMessage
.
- The property
UnauthorizedMessage
do noit exist anymore.
Also keep in mind, that the repeating request feature was outsourced into the own base class
DataSourceRepeating
.
Launcher
renamed to Sidebar
once
(boolean) do not exist anymore, use id
(string) now.
App changes
- Everything inside the property
definition
is now moved to the root.
Before:
| app.definition.ui;
app.definition.name;
app.definition.namespace;
app.definition.getSplashContent;
app.definition.getDashedName;
|
Now:
| app.ui;
app.name;
app.namespace;
app.getSplashContent;
app.getDashedName;
|
initPrepare
, initPanel
, initApp
and initWidgets
moved to only one function init
Return of prepare
is now always:
| return {
version: "", //Before inside of "layoutStorage"
widgets: {}, //Before inside of "layoutStorage"
layout: {}, //Before inside of "layoutStorage"
panel: {}, //Before on top of returned object
};
|
window.libs
Registration not used anymore
block
will use the arguments type, text
like the System.block
function and not html
anymore
- CSS class derived from name will not be set automatically
closeApp
renamed to close
widgetsById
, widgetsAll
and widgetsByName
replaced with widgets
where you can acces only
widgets which have an id
.
- With the new
widgetsContainer
you can access the container of each widget.
Changes to Layout configuration:
widget
and componentName
is not used anymore. Set the widget class directly into
componentType
.
config
is not used anymore. Use componentState
instead
Before:
| widget.definition.getDashedName;
widget.definition.getPluginName;
widget.definition.getComponentName;
|
Now:
| widget.getDashedName;
widget.getPluginName;
widget.getComponentName;
|
init
renamed to start
. The method cannot return false to reject initialisation. It should just
throw an error.
- jQuery Wrapper not supported anymore
- Plugin Data-API not supported anymore
block
will use the arguments type, text
like the System.block
function and not html
anymore
showHint
reneamed to hint
If the widget is written based on the template in the documentation, you can follow these steps to
get the work done:
- Remove encapsulation bracket with a standard class definition:
| (function(/*...*/ undefined) {
//...
}(/*...*/)
|
| export default class {
//...
}
|
- Remove the
widgetDefinition
and the widgetObject
assignment.
- Change the
widgetDefaults
assignment into a static property:
| var widgetDefaults = {
//...
};
|
| static defaults = {
//...
};
|
- Replace the
init
function with async init(env, options)
and add these three lines to get the
old functionality:
| #env;
#settings;
async init(env, options) {
this.#env = env;
this.#settings = $.extend(true, {}, this.constructor.defaults, options);
this.#env.$element.addClass("....") //If needed
//...
}
|
- Replace all other functions into class methods:
| function something(configObject) {}
|
| something(configObject) {}
|
- You can replace private functions into real private class methods:
| function _something(configObject) {}
|
| #something(configObject) {}
|
- Replace calling private functions with invoking real class methods:
| _something.call(this /*...*/);
|
| this.#something(/*...*/);
|
- Replace the following variables:
| this.el => this.#env.element
this.$el => this.#env.$element
this.settings => this.#settings
Sometimes defined as:
widget.el => widget.#env.element
widget.$el => widget.#env.$element
widget.settings => widget.#settings
|
Panel changes
Moved functionality from Panel
to Apllication
:
- Button Shortcuts for
footerToolbar
- Block and Unblock
- Hints
- Layout:
- Option
component
will not moved to application
. Only layout
allowed.
- Option
layoutTarget
moved to layout.element
- Option
register
removed