• 定制eclipse IDE


     

     

    为什么要定制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). 启动页
    启动页是一个门面,我们可将他换成可以体现自己产品的图片。
    替换过程:
    对应目录 eclipsepluginsorg.eclipse.platform_4.4.2.v20150204-1700splash.bmp,只需要换这张图片即可。
     
    (2). IDE图标
    这些图标的尺寸分别是16*16、32*32、48*48、256*256,是用来做应用图标或IDE窗口图标,我们只需要替换这四个尺寸的图标即可使得整个IDE大变样。
    替换过程:
    对应目录 eclipsepluginsorg.eclipse.epp.package.rcp_4.4.2.20150219-0708
    对应目录 eclipsepluginsorg.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工程
    在讲插件改变界面时,简单介绍一下创建插件的过程。
    由于篇幅比较长,所以就写在另外一篇文章,请查看:Eclipse Plug-in Hello world
     
    (2). IDE标题
    在第一个张图片中,我们可以看到IDE标题是,BingoTouch - welcome - BingoTouch IDE,这个标题是由三部分组成的,透视图名称- 编辑区名称 - 产品名称。其中透视图和编辑区的名称都好理解,而产品名称是在eclipsepluginsorg.eclipse.epp.package.rcp_4.4.2.20150219-0708plugin.xml里面定义的。所以IDE的名称并不是固定的,是由这三部分组成,我们也不必去改它们。
     
    (3). 隐藏菜单栏、工具栏
    很多时候,菜单栏或工具栏上的一些功能图标我们并不需要,为了使IDE看起来比较简洁,我们需要隐藏一些菜单、工具栏图标。我在前面说过,IDE整个界面关键的是透视图,菜单栏、工具栏的隐藏只是对于某个透视图来说的,例如你定制自己的透视图,其他透视图是不会影响到的。
    隐藏代码:
    复制代码
    <extension
        point="org.eclipse.ui.perspectiveExtensions" >
        <perspectiveExtension
            targetID="com.bingo.ide.perspective" >
                <hiddenMenuItem id="org.eclipse.ui.file.export"/>
                <hiddenToolBarItem id="org.eclipse.mylyn.tasks.ui.command.openTask"/>
        </perspectiveExtension>
    </extension>
    复制代码
    解析:
    hiddenMenuItem :隐藏菜单栏
    hiddenToolBarItem : 隐藏工具栏
    1.这个两个标签是写在拓展点(extension point)里面的,targetID是指明对哪个透视图生效。这里面有个关键的地方,就是id的获取,菜单栏、工具栏的选项对应的id是什么,这是非常关键的。
    2.我收集了Eclipse 常用的Id,同样因为篇幅原因,我把他收集在另一篇文章中:Eclipse 扩展点常量ID
    3.可能有人会发现,上面常量ID可能不够,有些我们想隐藏的没有在里面,那怎么办。办法总是有的,只要你寻找。我用了一种比较蠢但能解决问题的办法,同样因为篇幅原因,我把他写在另一篇文章中:Eclipse 寻找迷失的ID
     
    (4). 删除透视图
    有些透视图也是我们不想要的,例如下面这些透视图我们不想在定制的IDE出现。
     
    透视图也是插件实现的,所以我们只需要删除相应的插件就行,例如我们想删除Git的透视图,在eclipseplugins目录搜索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). 删除启动欢迎页
    有可能你不需要首次打开时显示欢迎页,你可以这样删除它。
    eclipsepluginsorg.eclipse.epp.package.rcp_4.4.2.20150219-0708plugin.xml
    删除:
    复制代码
    <extension
         point="org.eclipse.ui.intro">
        <introProductBinding
             introId="org.eclipse.ui.intro.universal"
              productId="org.eclipse.platform.ide">
        </introProductBinding>
    </extension>
    复制代码
    这篇文章篇幅太长了,先介绍到这里,下一篇继续讲解。
     
  • 相关阅读:
    svn更新报错:svn unable to connect to a repository at url
    js的json拼接
    MVC模式--DropDownList数据绑定
    String 普通字符串转 Base64编码
    在本地运行jar包步骤
    解除浏览器右键禁用 js代码
    一些特殊字符组合的 意思
    关于@Value注解 不能给static静态变量注入值的 问题及解决方案
    spring MVC 使用maven 区分环境配置
    Chrome浏览器关闭前端缓存
  • 原文地址:https://www.cnblogs.com/yaolei0422/p/9372515.html
Copyright © 2020-2023  润新知