定製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）. 啓動頁

啓動頁是一個門面，咱們可將他換成能夠體現本身產品的圖片。

替換過程：

對應目錄 eclipse\plugins\org.eclipse.platform_4.4.2.v20150204-1700\splash.bmp，只須要換這張圖片便可。

 

（2）. IDE圖標

這些圖標的尺寸分別是16*1六、32*3二、48*4八、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* 5十二、1024*1024。

PS:若是發現啓動程序後，發現任務欄的應用圖標變暗變模糊了，就須要在icns文件加上128*128尺寸的。

 

 

插件定製界面過程

上面介紹的是手動更換界面的辦法，而接下來就是介紹插件改變界面的東西。我推薦使用eclipse-rcp-and-rap-developers這個Eclipse做爲開放插件的IDE。

下載地址： http://www.eclipse.org/downloads/packages/eclipse-rcp-and-rap-developers/lunasr2

（1）. 插件hello world工程

在講插件改變界面時，簡單介紹一下建立插件的過程。

因爲篇幅比較長，因此就寫在另一篇文章，請查看： Eclipse Plug-in 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整個界面關鍵的是透視圖，菜單欄、工具欄的隱藏只是對於某個透視圖來講的，例如你定製本身的透視圖，其餘透視圖是不會影響到的。

隱藏代碼：

<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的透視圖，在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

刪除：

<extension
     point="org.eclipse.ui.intro">
    <introProductBinding
         introId="org.eclipse.ui.intro.universal"
          productId="org.eclipse.platform.ide">
    </introProductBinding>
</extension>

 

這篇文章篇幅太長了，先介紹到這裏，下一篇繼續講解。

 

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/4693467.html