定制Eclipse IDE之界面篇-白红宇

定制Eclipse IDE之界面篇

阅读量：5782 次

发布时间：2019-06-18

本文共 3853 字，大约阅读时间需要 12 分钟。

为什么要定制IDE?

在工作时候，当公司有了自己的框架，给自己开放人员用，甚至是可以卖的时候，我们可以做成一个产品，而这个产品将包括框架本身、文档、工具、教程等等。工具之中最重要的莫过于开发工具（IDE）、调试工具。

我在公司里面做的是一个hybrid框架，而一个配套的IDE是比不可少的，主要用来开发HTML5。这个IDE可以算是框架东西的聚合，可以将在线文档、工程模板、打包调试等功能都揉合在IDE。当我们提供给开发者东西时，我们只需要提供一个IDE，里面已经包含所有框架的东西。

我花费了一个月去做这个IDE，基于Eclipse来做。之所以用Eclipse不用什么dreamweaver、notepad++等，是因为这些看起来不专业，可拓展的东西也是有限。目前apicloud或dcloud这些hybrid框架都是基于Eclipse做定制的，只不过dcloud做得比较彻底。

我就把我这个月的开发经历一并告诉大家。

怎么定制IDE?

我们之所以能够定制Eclipse IDE，并不是我们写的东西有多厉害，而是Eclipse的本身，它是一个平台，能够让我们编写插件拓展功能，达到支持各种语言编辑的IDE。在Eclipse官方下载有很多版本的Eclipse，可以说这就是不同插件组装而成的。所以我们定制IDE，其实就是编写Eclipse插件（Eclipse plug-in）。

IDE定制成什么样？

下面就是这一个月来定制最后的结果，我将从结果讲解，这个东西怎么一步步搭起来的（支持windows、mac的IDE）。另外里面出现BingoTouch的名称是我开放框架，大家可以忽略。从下面可以看到我们需要定制菜单栏、工具栏、视图区。

这里讲一个很关键的概念就是透视图（perspective），透视图可以看成一种编辑视图，我们熟知的可能有Java、debug（可以通过右上角切换透视图），一切的东西都可以在透视图上设置，类如设置菜单栏、工具栏有什么，视图区是由什么构成的。

手动定制界面过程

接下来我将讲对界面一些定制的细节，注意里面列举的目录要按你使用eclipse决定，可能版本会不同。

（1）. 启动页

启动页是一个门面，我们可将他换成可以体现自己产品的图片。

替换过程：

对应目录 eclipse\plugins\org.eclipse.platform_4.4.2.v20150204-1700\splash.bmp，只需要换这张图片即可。

（2）. IDE图标

这些图标的尺寸分别是16*16、32*32、48*48、256*256，是用来做应用图标或IDE窗口图标，我们只需要替换这四个尺寸的图标即可使得整个IDE大变样。

替换过程：

对应目录 eclipse\plugins\org.eclipse.epp.package.rcp_4.4.2.20150219-0708

对应目录 eclipse\plugins\org.eclipse.platform_4.4.2.v20150204-1700

覆盖掉里面的eclipse16.png,eclipse32.png,eclipse48.png,eclipse256.png 替换即可。

（3） . eclipse.exe图标

当我们想把图标换得更彻底的时候，即连eclipse.exe图标都换。我在网上找了很多工具，却发现要么不行、要么只替换了某个大小尺寸的。最后找到一个工具IconWorkshopshiyongban 。用IconWorkshopshiyongban 修改exe图标，这个才是最直接完整的工具。

替换过程：

1. 用IconWorkshopshiyongban 打开 eclipse.exe，我们看到下面界面，我们第二步用的图标又派上用场了（尺寸一模一样）。

2. 然后用这个工具打开那四个不同尺寸的图标，会得到下面界面。

3.双击 eclipse.exe里面任一图标，然后用复制粘贴的办法覆盖掉所有尺寸图标。

4.保存即可，就会发现exe的图标已经换了，在不同尺寸下都显示正常。

ps:可能会出现图标会没替换到的样子，这时你可以换个目录来看，就正常的，那只是应用图标没刷新而已。

（4）. Eclipse.icns

这个是mac上Eclipse的应用图标，路径如下（我们也要输出mac的IDE）。

替换过程：

其实替换过程跟eclipse.exe一样，只不过需要的尺寸多了两个512* 512、1024*1024。

PS:如果发现启动程序后，发现任务栏的应用图标变暗变模糊了，就需要在icns文件加上128*128尺寸的。

插件定制界面过程

上面介绍的是手动更换界面的办法，而接下来就是介绍插件改变界面的东西。我推荐使用eclipse-rcp-and-rap-developers这个Eclipse作为开放插件的IDE。

下载地址：

（1）. 插件hello world工程

在讲插件改变界面时，简单介绍一下创建插件的过程。

由于篇幅比较长，所以就写在另外一篇文章，请查看：

（2）. IDE标题

在第一个张图片中，我们可以看到IDE标题是，BingoTouch - welcome - BingoTouch IDE，这个标题是由三部分组成的，透视图名称- 编辑区名称 - 产品名称。其中透视图和编辑区的名称都好理解，而产品名称是在eclipse\plugins\org.eclipse.epp.package.rcp_4.4.2.20150219-0708\plugin.xml里面定义的。所以IDE的名称并不是固定的，是由这三部分组成，我们也不必去改它们。

（3）. 隐藏菜单栏、工具栏

很多时候，菜单栏或工具栏上的一些功能图标我们并不需要，为了使IDE看起来比较简洁，我们需要隐藏一些菜单、工具栏图标。我在前面说过，IDE整个界面关键的是透视图，菜单栏、工具栏的隐藏只是对于某个透视图来说的，例如你定制自己的透视图，其他透视图是不会影响到的。

隐藏代码：

解析：

hiddenMenuItem :隐藏菜单栏

hiddenToolBarItem : 隐藏工具栏

1.这个两个标签是写在拓展点（extension point）里面的，targetID是指明对哪个透视图生效。这里面有个关键的地方，就是id的获取，菜单栏、工具栏的选项对应的id是什么，这是非常关键的。

2.我收集了Eclipse 常用的Id，同样因为篇幅原因，我把他收集在另一篇文章中：

3.可能有人会发现，上面常量ID可能不够，有些我们想隐藏的没有在里面，那怎么办。办法总是有的，只要你寻找。我用了一种比较蠢但能解决问题的办法，同样因为篇幅原因，我把他写在另一篇文章中：

（4）. 删除透视图

有些透视图也是我们不想要的，例如下面这些透视图我们不想在定制的IDE出现。

透视图也是插件实现的，所以我们只需要删除相应的插件就行，例如我们想删除Git的透视图，在eclipse\plugins目录搜索git关键字。将这两个包删掉，再次打开IDE时候，你会发现Git的透视图不见了。所以请记住，删透视图即是删插件。

（5）. 视图定义

视图定义从下图可看到有三部分，左边是项目管理视图，右上是编辑视图，右下是控制台视图

这视图的定义可以用xml定义，也可以用代码。我建议是用代码，因为这个自由度更高。

String editorArea = layout.getEditorArea();//添加视图layout.addView(IPageLayout.ID_PROJECT_EXPLORER, IPageLayout.LEFT, 0.22f, editorArea);IFolderLayout bottom =layout.createFolder("bottom", IPageLayout.BOTTOM, 0.75f , editorArea) ;bottom.addView("org.eclipse.ui.console.ConsoleView"); //bottom.addView(IPageLayout.ID_PROBLEM_VIEW);IViewLayout projectLayout = layout.getViewLayout(IPageLayout.ID_PROJECT_EXPLORER);projectLayout.setCloseable(false);projectLayout.setMoveable(false);

解析：

其实代码都比较好理解，不要使用xml配置，在代码里面写，可以添加一个folder包含多个窗口。

（6）. 删除启动欢迎页

有可能你不需要首次打开时显示欢迎页，你可以这样删除它。

eclipse\plugins\org.eclipse.epp.package.rcp_4.4.2.20150219-0708\plugin.xml

删除：