主要是 theia extension 开发进程中会遇到的代码
没有相关阅历的同学，可以先了解下 InversifyJS， 再直接跑下官方供应的拓展比方，熟修改器软件悉下根本的开发
指令（Command）
结束 Cojson格局怎样翻开mmandContribution 接口，假设传入的 Command 中带 label 字段的话，则该指令也会闪现在指令面板中
@修改器哪个好用injectable()
export class Tes接口英文tCommandContributAPPion implements CommandContribut接口测验的流程和过程ion {
registerCommands龚俊(commands: CommandRegis接口类型try): void {
comma接口的效果nds.registerCommand(SayHjsonobjectello, {
execute: () => {
this.messageService.info('hello hello'); // 提示框
}
});
}修改器软件
}
// fontend-mod接口测验ule.ts
bind(Com公积金mandContributjson格局怎样翻开ion).to(LdpCom接口crc过错计数mandContribution).inSingleto修改器下载nScope();
菜单（Menu）
结束 MenuContribution 接口，点击则会实行 Command.id 对应的指令
const SayHellojson格局: Command = {
id: 'say:hello', // 对应的 command id
label: 'Say Hello', // 菜单上闪现的文字
category: 'test' // 类别
};
@injectabjson文件是干什么的le()
export class TestMenuContribution implem接口测验ents MenuContribution {
registerMenus(menus: MappstoreenuModelRegistry): void {
menus.registerMenuAction(CommonMenus.FILE, {
commandId: SayHello.id,
lab接口测验的流程和过程el: SayappreciateHello.label,
});
}
}
// fontend-module.ts
bind(MenuContribution).to(LdpMenappreciateuContribution).inRequestScope();
自定义JSON视图
- 结束
BaseWidget或ReactWidget接口，自接口英文定义视图
import * as React from 'react';
import { injectable, postConstruct, inject } from 'invers接口的效果ify';
import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
@injectable()
export class WidgetWidget extends ReactWidget{
static readonly ID = 'test:widget';
static reado宫崎骏nly LABEL = 'Test Widget';
static readonly TOGGLE_COMMADND_ID = 'test.widget';
@p修改器软件ostConstruct(approve)
protected async init(): Promise<void> {
// 初始化
this.id = WidgetWidget.ID;
this.title接口测验.label = WidgetWidget.LABEL;
this.title.caption = WidgetWidget.LABEL;
this.title.closable = true;
this.title.iconClass = 'fa fa-window-maximize'; // example widget icon.
this.updatapp装置下载e(); // 更新视图
}
protected render(): React.ReactNode {
return (
<di修改器哪个好用v>自定义视图</div修改器>
)
}
}
- 继承抽象类
AbstractViewContr接口卡ibution，将视图添加到对应的DOM中
这个json转map类中除了结束了 widget 绑定方法外，还包括指令、菜单、快捷键等方法的绑定
import { injectable, inject } from 'inversify';
import { Command, CommandRegistry, MenuModelRegistry, MessageService } from '@theia/接口的效果core';
importjson { WidgetWidget } from './widget-widget';
import { AbstractViewContribution, CommonMe接口和抽象类的差异nus } from '@theia/core/lib修改器和编译器的差异/brows宫崎骏er';
const TestCommand: Command = {
id: 'test',
label: 'test'
}
@injectable()
export class W修改器小说idgetContribution extends AbstractViewContribution<WidgetWidget> {=
constructor() {
super({
widgetId: WidgetWidget.ID,
widgetName: WidgetWidget.接口卡LABEL,
defaultWidgetOptionapproves: { area: 'main'},
toggleCommandId: WidgetWidget.ID
});
}
// 经过改写 registerCommands 方法，绑定接口和抽象类的差异其他指令
registerCommands(coapproachmmands: CommandRe修改器的文章怎样导入大众号gistry) {
super.regjsonpisterCommands(commands);
commands.registerCommand(TestCommand, {
execute: () => console.log(12json文件是干什么的3)
})
}
// 经过改写 registerMenus 方法，绑定其他菜单项
registerM接口enus(menu公积金s: MenuModelRegistry) {
sup接口卡eGor.registerMenus(menus);
menus.registe接口卡rMenuAction(CommonMenus.VIEW_VIEWS, {application
commandId: Test修改器英文Command.id,
label: TestCommand.label
})
}
}
- 绑定到容器中
impo接口测验的流程和过程rt { ContainerModule } from 'inversify';
import { WidgetWidget } from './widget-widget';
import {appstore WidgetContribution } from './widget-contribappleution';
import { bindViewContribution, FrontendA接口和抽象类的差异pplicationContribution, WidgetFactory } from '@theia/core/lib/browser';
export default nejsonpw ContainerapplicationModule(bind => {
bindViewContribution(bind, WidgetContribution);
bindappointment(FrontendApplicationCo宫颈癌ntribution).toService(WidgetContribution);
bind(WidgetWidg接口测验et).toSelf();
bind(WidgetFactory).toDynamicValue(ctx => ({
id: WidgetWidget.ID,
createWidget: () => ctx.container.get<WidgetWidget>宫崎骏(WidgetWidggoogleet)
})).inSingletonScope(狗狗币);
});
自定义修改器闪现
也appreciate就是阻拦 Theia 的默许修改修改器小说器
- 结束
OpenHandler接口
WidgetOpenHandler 实践也是结束了 O接口penerHandler 接口，当咱们有其他定制化需求的时分，就可以自宫崎骏己结束 OpenHandler 接appreciate口，详细可以模仿 WidgetOpenHandler 结束，不翻开阐明
- 继承抽象类
WidgetOpenHandler
// widget.ts
i狗狗币mport * as React from 'react';
import { injectjson解析able, postConstruct } from 'inversify';
i宫崎骏mport { ReactW工商银行idget } from 'apple@theia/core/lib/browser/w修改器英文idgets/react-widget';
@接口crc过错计数injectable()
export class CustomWidget extends ReactWidget {
static readonly ID = 'test:widget';
static readonly LABEL = 'Custom Editor';
protected text: string;
@postCons接口和抽象类的差异truct()
protected async i修改器小说nit(): Promise<voiappled> {
// 初始化
this.APPid = WidgetWidget.I修改器的文章怎样导入大众号D;
this.title.label = WidgetWidget.LABEL;
this.title.caption = WidgetWidget.LABEL;
this.title.closable = true;
this.title.iconClass = 'fa fa-window-maximize'; // example widget icon.
this.update(); // 更新龚俊视图
}
setText(text: string) {
this.text = text;
}
// 依据接收到的参数闪现
protected render(): React.ReactNode {
return (
<React.Fragment&appearancegt;
<div>自定义修改器</div&修改器下载gt;
<diapp装置下载v>{this.text}</div>
</React.Fragment>JSON;
)
}
}
// 继承 WidgetOpenerHandler
import { injectable } from 'i接口英文nversify';
import { WidgetOpenHandler, WidgetOpenerOptions } from '@theia/core/lib/browser';
import { CustomWidget } from './widget-widget';
import URI from '@theia/core/lib/common狗狗币/修改器软件uri';
export interface CustomWidgetOptions {
text: string;
}
@injectable()
exportGo class CustomOpenHandjsonobjectler extends WidgetOpenHandler<CustomWidget> {
readonly id = CustomWid接口的效果get.ID;
canHandle(uri: URI): number {
console接口协议.log(uri.path.ext);
ifapprove(uri.path.ext === '.json') {
return 500;
}
return 0;
}
// 这儿可以设置传递修改器给 widget 的参数
createWidgetO修改器软件ptions(uri: URI, options?: WidgetOpenerOptions): CustomWidgetOptions{
return {
text: '这是 json 文件'
};
}
}
// fontend-module.ts
bind(OpenHandler).toSGoervice(CustomOpenH公积金andler);
bind(CustomOpenHandler).toSelf().inSinapproachgle宫崎骏tonScope();
bind(CustomWidget).toSjsonelf();
bind(WidgetFactory).toDynamicValue(ctx => ({
id: CustomappearWidget.ID,
createWidget: (optionsGo: CustomWidgetOptioappearancens) => {
const widget = ctx.container.get<CustomWidget>(CustomWidget);
cons枸杞ole.log(options);
widget.setText(optiojsonpns.text);
return widget;
}
})).inSingletonScope();修改器软件
当翻开 json 文件的时分，就会闪现咱们自定义的修改器
弹窗
结构自带
MessageServappreciateice（右下角通知提示框）
@inject(MessageService)
pjsonprotected messageService接口crc过错计数: MessageService;
this.meapp装置下载ssageService.info('hello hello');
对话框
commGoands.registerCommand(Dialog修改器小说Command, {
execute: async () => {
const confirmed = await new ConfirmDialog({
title: '这是个招认框',
msg: '招认实行吗？',修改器和编译器的差异
ok: '招认',
cancel: '撤销'
}).op修改器未包括main类型en();
console.log('招认了吗', confirmed);
}
});
结构还供应了 SingleTextInputDialog 等其他对话框，详细可看 packages/core/src/browser/dialogs.ts 这个目录
FileDialogService（文件/目录挑选框）
-
showOpenDialog：挑选文件/目录，回来挑选的URI
commands.regist修改器erCommand(FileDialog, {
execute: async () => {
const uri = await this.fappstoreileDialogService.showOpenDialog({
title: '挑选目录',修改器下载
canSelectFiles: false,
can工商银行SelectFolders: true,
openLabel: '挑选',
});
console.log('挑选途径', uriappointment);
}
});
-
showSaveDialog：保存文件对话框
commands.reappstoregisterCommand(FileDialog, {
execute: async () => {
co接口和抽象类的差异nst uri = await this.fileDialogService.showSaveDialog({
title: '挑选保存目录',
saveLabel: '保存'
});
console.log('保存途径', u狗狗币ri);
}
});
自定义对话框
结束 AbstractDiGoalog 或 ReactDialog 接口 (详细可参看 packages修改器和编译器的差异/core/src/browser/dialogs.ts 其他 Dialog 的结束)
// cus接口英文tomDialog.tsx
import * a龚俊赵丽颖被公安官博点名s React from 'react';
import { inject, injectable } from 'inversify';
importjsonp { ReactDia接口卡log } from '@theia/core/lib/browser/dialogs/reac枸杞t-dialog';
import { DialogPropsapplication } from '@theia/core/lib/browser/dialogs';
// 定义入参
@injectable()
export class CustomDialogProps extends Dial接口是什么ogProps {
readonly text: string;
readonly okValue: string;
readonly cancelValue: string;
}
// 定义回来
interface CustomDialogValue {
text: string;
}
@injectable()
export class CustomjsonpDia修改器软件log extends Reappearanceacjson格局怎样翻开tDialog<CustomDialogValue> {
protected readonly text: string;
constructJSONor(
@inject(CustomDialogProps) prot修改器英文ected readonly props: CustomDialogProappearanceps
) {
super(props);
const { text, o修改器和编译器的差异kValue, cancappleelValue } = thi宫崎骏s.props;
this.text = text;
this.appendCloseButton(cancelValue接口的效果);
this.appendAcceptButton(okValue);
}
pr修改器英文otected render(): React.ReactNode {
return (
<div>
{t修改器手机版his.text}
</div>
);
}
get value(): CustomDiapproachal龚俊ogValue {
return {
text: this.text
}
}
}
// fjson格局ontend-module.ts
bind(CustomDialogProps).toSelf();
bind(CustomDialog).toSelf();
commands.registerCommand(SayHello, {
execute: async () => {
const text = await new CustomDialog({
tijson解析tle: '查验对话框',
text: '查验',
okValue: '保存',
cancelValue: '撤销'
}).open()狗狗币;
console.log('回来文字', text);
}
});
SourceSaveable
TreeWidget
持续更新中
