“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

TheiaDevCon 2019: “Life of a Theia Widget”

If you’re interested, you can watch the video

What is a Widget

HTML elements with lifecycle hooks (views)

An example

export class MyWidget extends BaseWidget {
    static ID = 'myWidget';

    constructor() {
        super(a);this.id = 'my-widget';   / / the view ID
        this.addClass('my-widget');   / / style
        this.title.label = 'My Widget Label';
        this.title.caption = 'My Widget caption';   // Hover
        this.title.iconClass = 'database-icon';    // For some reason, it is not displayed
        this.title.closable = true;    // Whether to close the window}}Copy the code

Widget Life Cycle

Instantiation

Widgets created through widgetManager

Widget ID = Factory ID + Widget Options

View Contribution

Widget ID = Factory ID (because Widget Options are undefined)

Opening URIs

Here the URI is the Widget Options, so the Widget ID = Factory ID + URI

Attaching (Add view)

The view is divided into the following areas

  • left: Left view
  • main: the main view
  • right: Right view
  • bottom: Bottom view

Add a view with shell.addWidget and remove it with Widget.detach

We can control other properties such as the display area of the widget by passing in the options in the shell.addWidget

Activation (set focus, focus)

First we need to understand two concepts

  • active widget: There are focus elements (focus)widget
  • current widget: The last oneactive widget

Test: Let’s identify which one is active and which is current widget

The answer

  • There is noactive widgetBecause threewidgetAll have nofocusElement of state
  • current widgetThe last oneactive widget, that is,navigator-widget.tsxRight deserve that view

If the widget does not set the focus element, we will get the following error message on our page

If the current widget simply does not need a focus element, add the view using the Widget.RevealWidget method

Rendering (Rendering)

Unidirectional data flow

state

Define callbacks for value and value change

Action

When the value changes, the state’s Value Change callback method is triggered, which in this example corresponds to the update method in the widget

View

Update method, which triggers the onUpdateRequest callback in the View to update the data in the View

Here’s an example of React

Event Handling

Destruction (Destruction)

Call a widget. The dispose ()

ToDispose refers to a collection of items that need to be disposed of together when a view is destroyed (for example, services and listeners, which are not necessary if the view does not exist).

Life cycle callback function