Component - Documentation

Constructor

new Component()

Source:

Core/Component.js, line 14

Component constructor.

Classes

Component

Methods

init()

Source:

Core/Component.js, line 48

Initialize instance values

Upgrade this.componentname and this.componentId by this.packagename if defined.
To avoid conflicting componentId, it is highly recommended to define this.packagename in the constructor of your Component sub-class.

TODO: waiting ES2020 class fields (to be able to define packagename in class field)

You should never call this method directly, and should never override this method.
This is a part of loadView the initialization processs of Component, but separated for readability.

Use viewDidLoad for your additional initialization.

(highly recommended to be implemented as synchronous)

render()

Source:

Core/Component.js, line 67

Render RootView and load stylesheet.

template() and style() can access to its instance variables via this.

(highly recommended to be implemented as synchronous)

renderView()

Source:

Core/Component.js, line 77

Render template, and get the shadow DOM.

If you call this method, this.root(including scoped style) will be cleared.

loadStyle()

Source:

Core/Component.js, line 92

Load style defined in this instance

appendStyle(style, id)

Source:

Core/Component.js, line 104

Load style from text, and append it to the shadow root.

Parameters:

Name	Type	Description
`style`	String	stylesheet text expression
`id`	String	id for the style tag (optional)

unloadStyle()

Source:

Core/Component.js, line 121

Remove all styles

loadView(callback)

Make this.view(RootView) and this.css

Source:

Core/Component.js, line 155

Make this.view(RootView) and this.css.

ViewController or component consumer should call this method just after instantiate the component,
or whenever you want to use the instance of this component that is not yet ready (isViewLoaded is false).

You should not override this method.
Use viewDidLoad for your additional initialization.

If you have to implement your own loadView method, you must implement yours as:

this.init();
this.render();
(here, you can access to the RootView of this component)
(your component setup is in here)
set isViewLoaded to true.
call this.viewDidLoad(callback);

and incomming callback should be passed to the viewDidLoad.

(this is highly recommended to be implemented as synchronous)

Parameters:

Name	Type	Description
`callback`	function	callback

unloadView(callback)

Source:

Core/Component.js, line 167

Remove this.view (shadow DOM) from the Shadow host, and clear memory.

Parameters:

Name	Type	Description
`callback`	function	callback

viewDidLoad(callback)

Source:

Core/Component.js, line 185

Lifecycle method:
Called at the end of loadView. Component instance loaded and ready to use this.view.

You have to call callback at the end of yours.

Parameters:

Name	Type	Description
`callback`	function	callback

viewWillAppear(callback)

Source:

Core/Component.js, line 200

Lifecycle method:
Called just before appending this.view to the parent.

You must call callback at the end of yours.

Component RootView is now on the screen (in the browser DOM tree),
and concrete ViewController should ensure to be able to access this.view via global DOM tree after here.

Parameters:

Name	Type	Description
`callback`	function	callback

viewDidAppear(callback)

Source:

Core/Component.js, line 213

Lifecycle method:
Called just after this.view appended to the parent.
After this method, you can access the compoenent's RootView via document.getElementByID and some other query selectors.

You have to call callback at the end of yours.

Parameters:

Name	Type	Description
`callback`	function	callback

viewWillDisappear(callback)

Source:

Core/Component.js, line 226

Lifecycle method:
Called just before removing this.view from its parent.
You may remove your listener defined in viewWillAppear or viewDidAppear.

You have to call callback at the end of yours.

Parameters:

Name	Type	Description
`callback`	function	callback

viewDidDisappear(callback)

Source:

Core/Component.js, line 238

Lifecycle method:
Called just after this.view removed from its parent.

You have to call callback at the end of yours.

Parameters:

Name	Type	Description
`callback`	function	callback

showView(callback)

Source:

Core/Component.js, line 251

Show this component.

TODO:
this.view.style.display should cascade original definition.
It may be inline-block.

Parameters:

Name	Type	Description
`callback`	function	callback

showComponent()

Source:

Core/Component.js, line 259

alias for showView

hideView(callback)

Source:

Core/Component.js, line 268

Hide this component.

Parameters:

Name	Type	Description
`callback`	function	callback

hideComponent()

Source:

Core/Component.js, line 276

alias for hideView

appendSubView(options, callback)

Append sub-view to this.view

Source:

Core/Component.js, line 317

Append sub-view to this.view.

Example

// append btn.view at the end of panel.view.

panel.appendView(btn);

// append btn.view in '#btn' under the ShadwRoot

this.appendView({
    target    : this.shadow.getElementById('btn'),
    component : btn
});

or

this.appendView({
    id        : 'btn', // or '#btn'
    component : btn
});

// if you know the structrue of panel.view, you can append btn.view directly into the deep point of the panel.

panel.appendView({
    target    : panel.shadow.getElementById('btn'),
    component : btn
});

Parameters:

Name Type Description

options

Object

option

Properties

Name	Type	Description
`target`	Element	target element to place the view
`component`	Craft.UI.Componenet	sub view

callback

function

callback

appendView()

Source:

Core/Component.js, line 356

TODO: PENDING DEPRECATE:
alias for appendSubView

removeSubView(options, callback)

Remove a sub-view from this.view

Source:

Core/Component.js, line 378

Remove a sub-view from this.view

removeView does not call unloadView of the removed view.
When to parge the component is a responsibility of your component consumer.

Example

// remove this.btn.view from this.view. 

this.removeView(this.btn);

Parameters:

Name Type Description

options

Object

option or remove target Componenet

Properties

Name	Type	Description
`component`	Craft.UI.Componenet	Component to be removed

callback

function

callback

removeView()

Source:

Core/Component.js, line 400

TODO: PENDING DEPRECATE:
alias for removeSubView

removeFromParent()

Source:

Core/Component.js, line 407

Remove me from parent

replaceView()

Source:

Core/Component.js, line 430

TODO: replaceView -> replaceSubView

Replace view

remove all components in the target, and append new one.

Example

let loading_indicator = new LoadingIndicator();

this.appendView(loading_indicator);

database.load(id,(data)=>{
    let view = new DataView({data:data});
    this.replaceView(view);
});

style(componentId)

Source:

Core/Component.js, line 472

Stylesheet definition.

If you would like to cascade styles from parent class, just append super.style

style(componentId){
    return　super.style(componentId) + `
        .override { ... }
    `;
}

Parameters:

Name	Type	Description
`componentId`	String	this.componentId

template(componentId)

Source:

Core/Component.js, line 481

RootView template.

template must have only one element.

Parameters:

Name	Type	Description
`componentId`	String	this.componentId