How to create component dynamically

Hi, what’s the proper way to create component dynamically

I’ve tried:

const x = new $ui.MyWidget(parent);
parent.addChild(x);

but x has no children and properties and their bindings, if but it seems it’s not suggested to call $c $s manually.

[whoozle]

Hi Thanks for reaching us out 😃

There’s a few ways of doing this, and instantiation is the most complex of them. 😃

The easiest way of creating components dynamically is Loader: https://pureqml.com/docs/core/Loader.html

If you really want to create components dynamically, you can use the following snippet from Loader

		var item = new <COMPONENT>(PARENT);
		item.__init(); //this will call all creation phases ($c and $s)
		this._context.scheduleComplete() //run onCompleted, you can call it just once after all components have been created
		this._updateVisibilityForChild(this.item, this.recursiveVisible); //this is needed for visible/recursiveVisible to work
		this._tryFocus(); //this will set focus if needed

__init is a shortcut for single component creation. If you want to create more than one component, you have to do it in more phases

for all components you have to call

1. ctor (with proper parent)
2. $c (this will add ids)
3. $s (this will install all handlers and schedule async handlers)
4. this._updateVisibilityForChild(this.item, this.recursiveVisible)
5. this._tryFocus()

after that you have to call this._context.scheduleComplete()

addChild is not strictly needed, only if you want the object appear among .children

[whoozle]

starting with 07098447450bbb49ed1bc8c3880ef49fce699bb4, it’s possible to just

var foo = new Foo(parent)
$core.core.createObject(foo)