Bootstrap

VSCode插件开发教程(二)创建第一个activity界面

Activity Bar

首先我们认识下什么是Activity Bar,如果下图所示,最左边的那一列,就是Activity Bar,我们在插件市场安装的很多插件,都会在Activity Bar这里有一个图标作为入口。

image-20230916154854524

#Views

View,可以称为视图或界面,一个Activity Bar单元可以对应多个views,如果下图所示,Activity Bar上的第一个图标explorer,对应了右边的5个view(OPEN FOLDERS, HELLO, OUTLINE, TIMELINE, FILTERS)

image-20230916155028859

#定义自己的Activity Bar

接下来我们来定义自己的Activity Bar,里面包含两个view,在package.json里增加以下配置

image-20230916191252266

配置说明:

首先在"viewsContainers"下定义"activitybar", "viewsContainers"的意思是视图容器,就是用来装视图的,视图容器有多种,activitybar只是其中的一种,还有其它的比如statusbar(显示在vscode底部的)等。这个配置表明我们要在Activity Bar的位置增加一个视图容器,id为hello。

然后在"views"节点下定义具体的视图。 "views"下的"hello"节点,对应的是上面的activitybar的id,表示在"hello"节点下定义的视图,都是要装在id为"hello"的activitybar里的。

定义完后,运行插件,效果如下图所示

image-20230916191740621

可以看到,在Activity Bar末尾多了一个笑脸图标,这个图标就是我们上面定义的

"icon": "resources/smile.svg"

点击这个图标,会出现2个视图,就是我们定义的VIEW 1和VIEW 2。

视图内容显示There is no data provider registered that can provide view data.是因为我们只是定义了视图,没有指定视图显示什么数据。

下一步我们让视图显示具体的内容。

;