原视频地址: TheiaDevCon 2019: "Life of a Theia Widget"
有兴趣的小伙伴，可以直接看视频
什么是 Widget
具有生命周期钩子的 HTML 元素（视图）
例子说明
export class MyWidget extends BaseWidget {
static ID = 'myWidget';
constructor() {
super();
this.id = 'my-widget'; // 视图 ID
this.addClass('my-widget'); // 样式
this.title.label = 'My Widget Label';
this.title.caption = 'My Widget caption'; // 鼠标悬浮提示
this.title.iconClass = 'database-icon'; // 不知为啥没显示
this.title.closable = true; // 是否可关闭窗口
}
}
widget 生命周期
Instantiation（实例化）
通过 widgetManager 创建的 Widget
Widget ID = Factory ID + Widget Options
View Contribution
Widget ID = Factory ID (因为 Widget Options 是 undefined)
Opening URIs
这里 URI 是 Widget Options，所以 Widget ID = Factory ID + URI
Attaching（添加视图）
视图分为以下几个区域
left：左侧视图main：主视图right: 右侧视图bottom：底部视图
通过 shell.addWidget 添加视图，Widget.detach(widget) 移除
我们可以在 shell.addWidget 中传入对应的选项，来控制 widget 显示区域等其他属性
Activation（设置焦点，focus）
首先我们需要了解两个概念
active widget：存在焦点元素（focus）的widgetcurrent widget：最后的那个active widget
测试：让我们识别下下面那个是 active widget，那个是 current widget
答案
- 没有
active widget，因为 3 个widget都没有focus状态的元素 current widget，最后那个active widget，也就是navigator-widget.tsx对应得那个视图
widget 如果不设置焦点元素的话，我们的页面上就会得到以下这个报错信息
如果当前的 widget 就是不需要焦点元素的话，则使用 widget.revealWidget 方法添加视图
Rendering（渲染）
单向数据流
state
定义 value 和 value change 的回调
Action
当 value 改变，就会触发 state 的 value change 回调方法，例子中对应执行 widget 中的 update 方法
View
update 方法，就会触发 View 中 onUpdateRequest 中回调，从而更新视图中的数据
以下这个是 React 的例子
Event Handling（事件处理）
Destruction（销毁）
调用 widget.dispose()
toDispose 可以理解为当视图销毁时，需要被一同销毁的集合（例如：services 和 listener，也就是数据和监听器，当我们的视图不存在时，这些也就没必要存在了）
