The KoiPanel component is designed for grouping a set of internal components.
The main purpose of the KoiPanel component is to aid in the design of components.
The KoiPanel component does not have its own data or socket, but it implements all the key initialization steps of a component, which means it can be transformed into any component using different behaviors.
Additionally, KoiPanel is a convenient tool for grouping components that interact with each other, thus ensuring controller functionality and organizing the behavior of components.
Class
The component initialization process works as follows:
-
_onConstructed() KoiStateCapable
- _constructState() KoiStateCapable
-
_onBeforeConnected() KoiElementStencil
-
_onConnected() KoiElementStencil
- _updateSomethingWhenConnected() KoiElementStencil
-
- _updateOwnDataWhenConnected() KoiElementStencil
- _updateStateCodeWhenConnected() KoiStateCapable
-
_onAfterConnected() KoiElementStencil
- isSomethingChanged() KoiStateCapable
- _handleSomethingChangedWhenAfterConnected() KoiBaseControl
-
- _updateAppearance() KoiBaseControl
- _setNothingChanged() KoiStateCapable
- _subscribeToEvents() KoiElementStencil
This is the most minimal initialization process a component can have. This is because the KoiPanel component lacks a socket and its own data, so it does not include behaviors associated with them.
Nevertheless, the KoiPanel component does have a state, and when the state changes, its display is updated accordingly.
Since the KoiPanel component does not have a socket, it does not alter its internal content. That is, if other tags are placed inside the KoiPanel component tag, they will remain unchanged. This feature of KoiPanel allows you to insert other components within KoiPanel during the HTML code phase, without the need to move them into the JavaScript code.
This feature enables the creation of components based on KoiPanel that act as wrappers for components that are not directly connected through code to the KoiPanel child component. This is useful for creating components that don’t manage their content but respond to events from the content. For example, it can be used to implement a menu component, which has no knowledge of the buttons inside it but can respond to button clicks.
Data
The KoiPanel component does not have its own data.
Attributes
| id | Component identifier |
|---|
The KoiPanel component has only one attribute: the component identifier.
Component State
The KoiPanel component does not have any additional display states beyond those provided by the base class KoiBaseControl. These states are managed by the show and hide methods.
Moreover, although the KoiPanel component does not have a socket and cannot modify its appearance, it has an internal state, _state, which changes as the component becomes ready. In the child components of KoiPanel, reactions to changes in this state can be implemented.
Event
The KoiPanel component does not trigger any events.
Usage
The KoiPanel component is not used on its own, as it does not implement any behavior related to data or sockets. However, a wide variety of components can be implemented based on KoiPanel, from controllers to proxies.
Once these components are created, the inheritance chain can be greatly simplified by inheriting from KoiBaseControl rather than KoiPanel. Therefore, while KoiPanel is well-suited for designing other components, it ultimately becomes unnecessary during optimization.