Theia 窗口组件 widget

组件widget是在 Theia 工作台中显示内容的部分，例如 视图或编辑器。 Theia 中现有组件的示例是文件浏览器、代码编辑器或问题视图。 通过自定义小部件，您可以将自己的自定义 UI 放置在基于 Theia 的应用程序中。 您的自定义 UI 在窗口布局方面与其他组件的行为相同，包括标题选项卡、调整大小、拖动和打开/关闭（请参见下面的屏幕截图）。

 

 此外，组件将接收来自周围工作台的事件，例如 在应用程序启动、调整大小或分离时。 但是，在提供的框架中呈现的组件的实际内容的实现完全取决于您。 例如，您可以在组件中使用 React 实现一些自定义 UI。

简而言之，组件是将一些自定义（基于 HTML）UI 嵌入到 Theia 工作台中的框架（见下图）

  

在本文中，我们将描述如何向 Theia 工作台贡献自定义组件。 我们将专注于一个简单的视图（与编辑器相比）并使用 React 来实现 UI。

如果您还不熟悉 Theia 中的贡献点或依赖注入的使用，请参考有关服务和贡献的指南。

如果您想查看示例代码，请使用 Theia 扩展生成器。 安装生成器，选择“Widget”示例并输入“MyWidget”作为扩展名。

贡献一个组件（一个视图）

贡献一个组件，在我们的示例中，一个视图由三个组件组成：

实际的个组件，负责：
设置基本参数，例如 ID、标签和图标
创建实际的 UI 及其行为
响应生命周期事件，例如 `onUpdateRequest` 或 `onResize`
一个组件工厂，负责实例化小部件
小部件贡献，负责将视图与 Theia 工作台连接，以便可以从 Theia 工作台内打开小部件，例如通过视图菜单
实现一个小部件
对于自定义小部件的实现，Theia 提供了几个可以继承的基类。这使您可以只专注于创建自定义 UI，因为基类已经实现了大多数必需的功能。 Theia 不依赖于特定的 UI 技术，例如 React、Vue.js 或 Angular。但是，它通过提供相应的基类来提供便利支持，例如对于反应。如果有疑问，使用 React 是目前实现自定义小部件的最常见选择。您可以在下面找到类层次结构的摘录。如果您想使用 react 实现一个小部件，请选择 ReactWidget 作为基类。如果要实现主要显示树的小部件，请使用 TreeWidget。如果您不想使用 React，请使用 BaseWidget。浏览 BaseWidget 的类型层次结构以查看其他可用选项。

BaseWidget
反应小部件
树小部件
…
在下面的代码示例中，我们使用 ReactWidget 作为基类。如下所示，我们首先用一些基本参数初始化小部件：

id：唯一标识小部件，例如通过 WidgetManager 打开它。
标签：小部件打开时显示在选项卡中。
标题：当小部件打开时将鼠标悬停在选项卡上时显示。
可关闭的：用户是否可以关闭小部件（通过选项卡中的“x”或通过右键菜单）。
iconClass：小部件打开时选项卡中显示的图标。
mywidget-widget.ts

@injectable()
export class MyWidget extends ReactWidget {

static readonly ID = 'my:widget';
static readonly LABEL = 'My Widget';

@postConstruct()
protected async init(): Promise < void> {
    this.id = MyWidget.ID;
    this.title.label = MyWidget.LABEL;
    this.title.caption = MyWidget.LABEL;
    this.title.closable = true;
    this.title.iconClass = 'fa fa-window-maximize'; // example widget icon.
    this.update();
}

使用相应的基类时，小部件的实现可以非常简单，并且专注于自定义 UI 部分。 在我们的示例中，我们只实现了将创建我们实际的自定义 UI（使用 JSX/React）的渲染函数。 示例 UI 包含一个按钮，该按钮将触发下面的 displayMessage 函数。

mywidget-widget.ts

protected render(): React.ReactNode {
    const header = `This is a sample widget which simply calls the messageService in order to display an info message to end users.`;
    return <div id='widget-container'>
              <AlertMessage type='INFO' header={header} />
              <button className='theia-button secondary' title='Display Message' onClick={_a => this.displayMessage()}>Display Message</button>
           </div>
}

@inject(MessageService)
protected readonly messageService!: MessageService;
  
protected displayMessage(): void {
    this.messageService.info('Congratulations: My Widget Successfully Created!');
}

请注意，您可以覆盖 BaseWidget 或 ReactWidget 的函数以挂钩到小部件的特定生命周期事件，例如onUpdateRequest 或 onResize。这些事件由底层窗口管理框架 Phosphor.js 定义，请参阅有关 Widget 类的文档。

除了实现实际的小部件之外，您还需要将它与 Eclipse Theia 工作台连接起来，这将在接下来的两节中进行描述。

实现一个小部件工厂
Theia 中的小部件由中央服务 WidgetManager 实例化和管理。这允许应用程序跟踪所有创建的小部件。例如，WidgetManager 支持函数 getOrCreate，如果它已经创建，它将返回一个现有的小部件，或者如果没有创建一个新的小部件。

要使小部件管理器可实例化自定义小部件，您需要注册一个 WidgetFactory。小部件工厂由一个 ID 和一个创建实际小部件的函数组成。小部件管理器将收集所有贡献的小部件工厂，并按 ID 为相应的小部件选择正确的工厂。

在我们的示例中（参见下面的代码），我们首先将小部件 MyWidget 绑定到自身，以便我们可以在工厂中使用依赖注入来实例化它。如果它们内部不使用依赖注入，则所有小部件都不一定需要这样做。我们在上面的示例中使用依赖注入来检索消息服务和@postConstruct 事件。其次，我们绑定一个定义小部件 ID 的 WidgetFactory 和 createWidget 函数。此功能允许您控制小部件的创建，例如如果需要，将特定参数传递给自定义小部件。在我们的简单示例中，我们只是使用依赖注入上下文来实例化我们的小部件。

mywidget-frontend-module.t

bind(MyWidget).toSelf();
bind(WidgetFactory).toDynamicValue(ctx => ({
    id: MyWidget.ID,
    createWidget: () => ctx.container.get<MyWidget>(MyWidget)
})).inSingletonScope();

现在您已经可以通过使用小部件管理器 API 手动打开小部件。但是，对于大多数用例，您希望将视图添加到视图菜单并提供相应的命令。这可以使用下一节中描述的小部件贡献来方便地完成。

小部件贡献
小部件贡献允许您将小部件连接到 Theia 工作台，更准确地说是将它们添加到视图菜单和快速命令栏。 Theia 提供了一个方便的基类 AbstractViewContribution 来继承，它已经实现了最常见的功能集（参见下面的示例代码）。对于初始化，您只需要指定以下参数：

widgetID：小部件的ID，用于通过小部件管理器打开它
widgetName：显示在视图菜单中的名称。通常与小部件选项卡使用的名称相同。
defaultWidgetOptions：影响小部件在打开时显示位置的选项，例如在工作台的左侧区域。有关更多信息，请参阅 typedoc。
toggleCommandId：打开视图的命令。您可以使用超类提供的预先实现的 openView 功能。除了指定这些基本参数外，您还需要注册打开视图的命令。基类实现了相应的命令贡献接口，因此您只需要实现 registerCommands 即可（见下文）。
mywidget-contribution.ts

export const MyWidgetCommand: Command = { id: 'widget:command' };
export class MyWidgetContribution extends AbstractViewContribution<MyWidget> {
   constructor() {
       super({
           widgetId: MyWidget.ID,
           widgetName: MyWidget.LABEL,
           defaultWidgetOptions: { area: 'left' },
           toggleCommandId: MyWidgetCommand.id
       });
   }

   registerCommands(commands: CommandRegistry): void {
       commands.registerCommand(WidgetCommand, {
           execute: () => super.openView({ activate: false, reveal: true })
       });
   }
}

有了上面的贡献，视图现在将显示在 Theia 的标准“视图”菜单中，您也可以使用相应的“打开视图”命令打开它。

标签：Theia,自定义,示例,部件,widget,视图,组件,MyWidget
来源： https://www.cnblogs.com/theia-ide/p/16524381.html