Eclipse用户界面指南.docx
《Eclipse用户界面指南.docx》由会员分享，可在线阅读，更多相关《Eclipse用户界面指南.docx（35页珍藏版）》请在冰豆网上搜索。
Eclipse用户界面指南
简介
本文是一篇介绍Eclipse用户界面设计指南的文章。
Eclipse是一个通用的工具平台——一个可以用来做任何事情的开放，可扩展的IDE。
它的真正价值来自工具插件，它能够“教”Eclipse怎样和其他东西协同工作－Java文件，Web内容，图片，视频－几乎是你能够想到的任何东西。
Eclipse使你能够独立开发出软件工具，能够和其他工具无缝集成，并且你不用知道一个工具在哪里结束而另一个在哪里开始。
我们所熟知的工具的最初概念这里则完全消失了。
这个平台非常灵活而且可扩展性强,，但这个灵活性也有一个严重的缺点。
特别是程序无法保证平台内的已注册组件的用户界面一致性。
本文试图为组件创建定义标准用户界面指南，从而解决这个问题。
如果你在自己的工具中采用了这些指南，就可以很好地保证和平台及其他工具的一致性，并且对于你的用户来说更容易理解。
这些指南主要供Eclipse用户界面的设计者和实现者使用。
Workbench
首先，让我们来看一下Eclipseworkbench用户界面，和它里面的各种组件。
Workbench是多个窗口的集合。
每个窗口包含菜单栏，工具栏，快捷方式栏，以及一个或者多个透视图。
透视图是一个包含一系列视图和内容编辑器的可视容器。
视图完全存在于某个透视图中而且不能被共享，而任何打开的内容编辑器可以在透视图间共享。
如果两个或者多个prespective打开了同样的视图，他们共享这个视图的同一个实例，虽然在不同透视图之间视图的布局可能不同。
对于不同的Workbenck窗口中的透视图，编辑器和视图都不能共享。
一个透视图就好像是一本书里面的一页。
它存在在一个窗口中，并且和其他透视图一起存在，和书中的一页一样，每次你只能看到一个透视图。
Workbench的主菜单栏通常包括File，Edit，Navigate，Project，Window，Help这些顶层菜单。
其他的顶层菜单位于Edit和Project菜单之间，往往是和上下文相关，这个上下文包括当前活动的透视图，最前面的编辑器（不管是否活动）以及活动视图。
在File菜单中，你可以找到一个New子菜单，它包括Project，Folder，File的创建菜单项。
File菜单也包含ImportandExport菜单项，用来导入文件到Wrokbench中，以及导出它们。
在Edit菜单中，你可以找到象Cut，Copy，Paste，和Delete这些命令。
这些命令称为全局命令，作用于活动部件。
也就是说，如果当Navigator活动时使用Delete命令,实际操作是由Navigator完成的。
在Project菜单中，你可以找到和项目相关的命令，比如OpenProject，CloseProject和RebuildPorject等。
在Run菜单中，你可以看到和运行，调试应用代码相关的命令，以及启动象Ant脚本这样的外部工具。
在Window菜单中，你可以找到OpenPerspective子菜单，根据你开发任务的需要打开不同的透视图。
你也能看到透视图布局管理菜单栏。
ShowView子菜单用来在当前的Workbench窗口中增加视图。
另外，你可以通过首选项菜单项来修改Workbench的功能首选项配置。
作为plug-in开发者，你可以为平台提供新的视图，编辑器，向导，菜单和工具项。
这些东西都是用XML来定义的，一旦注册后，就可以和平台中已经存在的组件无缝地集成在一起。
Projects，Folders和Files
Eclipse可以用来创建不同类型的内容——Java文件，Web内容，图片，视频——几乎你可以想到的任何内容。
这些对象作为普通文件保存在EclipseWorkspace中。
Worspace包含多个项目。
每个Project包含了很多目录和文件。
这些对象通常被叫做资源。
怎样开始
对大多数开发者来说，平台的介绍内容实在是太多了。
你可能会问：
我该从哪里开始呢？
这里有一些基本规则可以帮助你。
本文适合UI设计者和开发者。
我们讨论的任何应用都会有两个主要的层次：
模型层和用户界面层。
Eclipse的模型层，也叫做Workspace，包含了很多资源（项目，目录和文件）。
用户界面，也叫做Workbench，定义了这些资源的表现方式。
作为UI开发者，你同时会有一个模型和一个表现方式。
我们假设你希望让模型通过表现层可见，大多数开发者会首先在Workbench中添加一个新的视图或者编辑器。
在Eclipse中，编辑器用来显示基本内容，例如需要用户交互的文件或者数据对象。
在任何情况下，这个内容是基本关注点，而且还是基本任务的体现。
为了解释这个概念，让我们看一些常见的例子。
对于Java编程来说，基本任务就是创建，编辑和调试Java代码。
基本关注点是Java代码，因此编辑器用来和那些代码交互。
Navigator视图，Outline视图，和Properties视图用来支持这个基本任务，当你写Java代码时，它们很少能引起你的注意。
对于阅读email来说，基本任务是创建，发送，阅读和回复邮件。
基本关注点是某个特定的邮件，因此编辑器用来显示或者回复一份邮件。
视图可以用来选择邮件阅读并且打开一个编辑器。
对于使用即时消息通信，基本任务是交谈。
基本关注点是一次特定的交谈，因此编辑器用来进行交谈。
视图可以用来列出所有你可以开始交谈的人。
对于浏览网页，基本任务是阅读。
基本关注点是某个网页，因此编辑器用来浏览网页。
在任何情况下，基本任务决定了基本关注点。
作为基本关注点，它应该处于在UI的主要位置（作为编辑器），并且能够给Workbench的主菜单栏和工具栏提供命令。
一个视图可以用来保存你最喜爱的链结，并且可以重新打开他们。
在任何时候，你可以编辑你正在看的页面。
这将打开一个新的编辑器。
视图用来支持基本任务。
你可以用它们来浏览信息的层次，打开编辑器，或者查看活动部件的属性。
每个视图可以有它自己的工具栏和菜单栏。
一旦你添加了一个新的视图或者编辑器，一个有趣的问题出现了。
这个模型是从哪里来的？
在Eclipse中，大部分数据是用创建向导生成的。
你可能也想添加一个创建向导。
一旦一个对象存在，你可能需要用属性页面，或者属性对话框编辑对象的属性。
所有的这些内容都将在本文的后续部分详细讨论。
通用UI指南
本文定义了用于Eclipse平台的UI设计指南。
它是对其他标准UI指南的一个补充，这些UI指南包括MicrosoftUserExperience，MacintoshHumanInterfaceGuidelines，以及JavaLookandFeelGuidelines等。
对于基本的UI设计和实现的建议，你可以去查阅这些文件。
希望你已经对EclipseUI结构和API已经有了基本的了解，并且了解UI设计的基本规则：
用户可控，直接，一致，容错，反馈，美观和简洁。
如果你目前还没有这些基本的知识，请先去阅读相关的文档。
指南1.1
遵循并应用好的界面设计原则：
用户可控，直接，一致，容错，反馈，美观和简洁。
Eclipse的精髓
Eclipse的本质是一个工具插件平台。
这些插件可以由一个团队或者多个团队一起开发，或者用户从不同的地方集成一系列的插件。
无论哪种情况，某个工具的可用性，以及Eclipse的整体性，都会受到用户界面一致性的影响。
如果你还不知道一个工具应该有怎样的外观和感觉，先看一下平台，然后再看一下Jave开发工具和Eclipse的插件开发环境（PDE）。
在很多情况下，你所想像的工作流可能已经存在在Eclipse中了。
如果是这样，直接采用平台的工作流和用户接口惯例。
这样可以更好地保证和平台以及其他插件的一致性，并且你的用户也更容易学习使用。
在有些情况下，可能要忽略Eclipse的工作流而实现“定制”的用户界面。
这个界面在整个集成环境中会很突兀，因为其他工具都采用了平台的惯例。
这样做会丢失过去经验的很多好处，并且要强迫你的用户来学习新的概念。
请查询最佳实现章节获得更多的例子和信息。
也请访问Eclipseplatform新闻组和社区共享信息。
指南1.2
遵循平台的用户界面惯例。
如果你决定使用Eclipse的一些设计惯例，注意不要盗用Eclipse特有的UI惯例。
例如，Workbench窗口的活动部分用带阴影的标题表示。
编辑器中带阴影标题的使用（见下图）可以是显示那个部分中焦点位置的一种方式，这样就会和窗口的活动部分引起混淆。
指南1.3
注意不要混用UI隐喻。
这样会引起原始概念和你的应用相混淆。
Eclipse是一个开源项目。
如果你觉得你的某些想法有用，加入Eclipse社区，写一个提议，和Eclipse社区一起工作，努力把Eclipse变成更好的产品开发平台，增加客户满意度。
访问http:
//www.eclipse.org/加入EclipseUI邮件列表platform-ui-dev。
指南1.4
如果你有好的想法，和Eclipse社区一起工作，把Eclipse变成更好的平台。
字母大写的使用
在一个插件中，采用大写一致的文本会让人感觉良好，认为代码质量也较高。
在一个对话框或者窗口中，所有的标题，菜单，工具条，标签（Tab）和按钮都应该采用标题形式的大写。
例如，“RuntoLine”可以用做菜单项的文本。
对于所有的checkbox，radiobutton，以及group的文本，必须采用句子形式的大写。
例如，“ChooseanoptionfortheJavafile”可以用作一个group的文本。
指南1.5
在菜单，工具提示（ToolTip）以及所有的窗口，对话框，标签（Tab），表格的列标题（ColumnHeading）和按钮（PushButton）的标题中，都应该使用标题形式的大写。
除了第一个和最后一个单词的首字母大写，所有名词，代名词，形容词，动词和副词也要首字母大写。
不要包含结束标点。
指南1.6
对于对话框或窗口中的控件标签，包括checkbox，radiobutton，grouplabel，和simpletextfields，均采用句子形式的大写。
把第一个单词的首字母大写，以及其他象Java这样的词也要首字目大写。
语言
clipse可以在不同的平台，不同的地区使用。
要支持不同的语言和数字格式，本地化策略需要应用到每个plug-in的文本和图像中。
这就涉及到把所有的资源从plug-in的源码中分离出来，这样才能把这些资源进行转换以适应新的地区。
参考最佳实现章节查看例子和更多信息。
指南1.7
在你的plug-in中创建资源的本地化版本。
错误处理
如果Eclipse中出现错误，要根据错误的上下文做出合适的响应。
请参考向导部分查看如何在向导中处理用户输入错误。
请参考编辑器部分查看如何在编辑器中处理错误的指南。
如果出现一个错误需要用户的明确输入或者立刻注意，就需要使用模态对话框把错误报告给用户。
这样能够迫使用户注意并且立刻处理问题。
指南1.8
如果出现一个错误需要用户的明确输入或者立刻注意，使用模态对话框。
如果在产品中出现编程错误，就必须使用错误对话框报告给用户。
同时你也必须使用workbench的错误记录机制来记录错误。
这样就给了用户机会，可以重启平台，卸载相关的功能，以及和系统管理员联系。
Plug-in必须在错误对话框的详细内容区域中提供以下信息：
∙提供者名字
∙plug-in名称（用户友好的名字）
∙plug-inID
∙版本
指南1.9
如果产品中出现编程错误，使用模态对话框，并且log出错信息。
可视化设计
所有为Eclipse创建的可视化用户界面元素都遵循一个公共风格，称做Eclipse可视风格或者Eclipse风格。
在下面的指南中，你可以找到基本的设计信息，以及在基于Eclipse框架的工具中，实现Eclipse风格图标和向导图片的规范。
遵循这些指南可以保证可视用户界面元素以及它们在Eclipse工具和plug-in中实现的一致性。
这些元素的一致性包括：
可视元素的语意，风格以及实现上的考虑。
下面的部分将讨论这些话题。
--CONSISTENCYSECTIONSTARTS-->
--Consistency-->
一致性
在Eclipse风格图标的发展中，形成了一种用来描述用户界面中不同概念的可视化语言。
这些概念现在通过一大批小的可视符号表现出来，通过使用Eclipse工具你会知道有很多这样的可视符号。
为了保证用户获得一致的视觉体验，通过工具理解这些概念，并且避免混淆，我们建议你尽可能重用Ecplise风格图形元素。
图标重用
在Eclipse可视风格中已经创建了很多图标，因此你很可能在里面找到你需要的图标或图形元素。
下表就是一个例子。
每个元素有自己特定的含义，因此使用时要注意让它们保持原有的含义。
指南2.1
重用核心可视化概念来保持它们在Eclipseplug-in中表现方式和含义的一致性。
--ICONSPECIFICATIONSECTIONSTARTS-->
--IconSpecifications/IconPalettes-->
图标调色板
创建Eclipse风格图标时可以采用多种调色板。
有3种不同的调色板用来创建3种不同的图标状态，如下：
∙256色调色板用于图标的活动或者选中状态，也称为图标的“彩色”状态。
∙8色灰度调色板用于preseptive，视图，工具条，工具条向导以及局部工具条图标的可用状态。
∙2色灰度调色板用于工具条，工具条向导以及局部工具条图标的不可用状态。
256色调色板
Eclipse风格图标必须用一个特殊的256色调色板来设计，该调色板包括20个标准色和236个用户自定义颜色，如下。
注意：
虽然显示的调色板是基于来自AdobePhotoshop的标准windows.aco调色板，但是，这两种调色板是不同的，而且只有显示的调色板才能用于Eclipse风格图标的创建。
指南2.2
使用Eclipse256色调色板来创建所有类型图标的活动或选中状态。
8色灰度调色板
为了创建你全彩色图标的灰度可用状态的版本，你会需要用到下面的8色调色板：
指南2.3
使用Eclipse8色调色板来创建透视图，视图，工具栏，工具栏向导和局部工具栏图标的可用状态。
2色灰度调色板
Tocreategrayscale,disabledversionsofyourfullcolorandenabledicons,youwillneedtouseasubsetofthe8colorpalette,thatconsistsofthe2colorsshownbelow:
为了创建你的全彩色图标的灰度的不可用状态版本，你可以用8色调色板的一个子集，其中包括以下两种颜色：
指南2.4
使用Eclipse2色调色板创建工具条，工具条向导和局部工具条图标的不可用状态。
--IconSpecifications/IconTypes-->
图标类型
Eclipse风格图标都被划分成不同的类别，这样可以根据它们在用户界面中的不同位置进行优化。
下面就显示了不同的图标分类和它们所处的位置。
（译：
在下面图标类型的章节中，图标类型只作部分翻译（如：
ViewIcon就翻译成View图标），以保证文字和下图的对应一致。
）
AProduct
Prodcut图标表示产品的标识，通常处于窗口标题栏的最左边，在透视图，文档和产品名称的前面。
BPerspective和Fastview
Perspective和Fastview图标在workbench的左下方。
这些图标让用户可以快速地在不同的透视图之间切换，或者调用被作为Fastview创建的视图。
CToolbar
Toolbar图标在workbench顶部的主工具条中。
这些图标都可以调用命令，包括全局命令和编辑器内的命令。
DToolbarWizard
ToolbarWizard图标可以在workbench顶部的主工具条中找到。
这些图标带有棍子和火花图形，很容易看到。
选中这些图标的一个会启动一个向导。
EView
View图标位于workbench中每个视图标题栏的左边。
这些图标表示了每个视图的功能。
FLocal（View）Toolbar
Local（View）Toolbar图标位于workbench中每个视图标题栏中View图标的右边。
这些图标会调用那个视图中的命令。
局部工具条图标也可以出现在所有的菜单，包括主菜单，下拉菜单和上下文菜单中。
GModelObject
ModelObject图标可以在workbench中的tree视图，list视图和编辑器标签（EditorTab）中找到（例如文件，文件夹，项目等等）。
HObjectOverlay
ObjectOverlay图标也位于tree视图或者list视图中。
它们附在模型对象图标的角上，用来表示某些变化。
指南2.5
在用户界面中适当的位置使用适当的图标。
--IconSpecifications/IconSize&Placement-->
图标尺寸和放置
除了少数例外，Eclipse风格图标一般设计在16×16像素组成的区域内。
在该区域内，15×15像素的空间是给图像本身用的，剩下一行和一列空像素，可以让你把图像放在界面中合适的位置。
注意看一下下图例子中空像素的位置。
图标按照特定位置进行裁减以保证在用户界面中可以排列整齐。
下面的图显示了不同类型图标的正确尺寸，以及他们在所分配的屏幕空间中合适的摆放位置。
View图标
最大16×16像素，总是居中。
空像素位于左边和下面。
Perspective图标
Fastview图标
最大16×16像素，总是居中。
空像素位于右边和下面。
Toolbar图标
ToolbarWizard图标
LocalToolbar图标
最大16×16像素，总是居中。
空像素位于左边和上面。
ModelObject图标
最大16×16像素，总是居中。
模型对象图标不能大于15像素高。
ObjectOverlay图标
对象掩模是唯一的一个例外，它不是16×16像素大小的。
最大7像素宽×8像素高，总是居中。
该图标必须有一条白色的外边线用来把它和其附着的图标分开。
关于如何在不同类型的对象掩模图标上使用外边线，查看下一节图标定位。
指南2.6
对于每个类型的图标遵循其特定的尺寸规范。
指南2.7
按照图示的特定位置裁减图标以保证其在用户界面中排列整齐。
--IconSpecifications/IconPositioning-->
图标定位
为了遵循不同类型图标在其所分配的屏幕空间中特定的尺寸和摆放位置，下面的定位指南可以让这些元素相对于其他元素排列整齐，并创建出一个组织很好的，美观的用户界面。
（所有的度量单位为像素。
）
概况
1.Toolbar图标
（包括Toolbar图标和ToolbarWizard图标）
《
--1strow:
tablecategories-->
项目
定位和间隔
--2ndrow:
beginningoftablecontents-->
A
工具条
22像素高
B
左边缘和柄（handle）之间
4像素
C
柄和第一个图标之间
7像素
C
图标和工具条顶部之间
3像素
C
图标和工具条底部之间
3像素
C
图标和下拉（twisty）之间
7像素
D
下拉和分隔（hardrule）之间
7像素
E
分隔和图标之间
6像素
F
图标之间
7像素
G
图标和分隔之间
10像素
H
分隔和柄之间
2像素
2.Titlebar图标
（包括View图标和LocalToolbar图标）
项目
定位和间隔
A
TitleBar
22像素高
B
左边缘和View图标之间
4像素
B
View图标和文字标签之间
3像素
B
TitleBar图标和TitleBar顶部之间
3像素
B
TitleBar图标和TitleBar底部之间
3像素
C
LocalToolbar图标之间
7像素
D
最后一个LocalToolbar图标和关闭窗口'x'之间
7像素
E
关闭窗口'x'和右边缘之间
4像素
3.Perspective图标
（包括Perspective和Fastview图标）
--TD1begins-->
--TD2begins-->
Perspective图标
--TD2:
Table1begins-->
项目
定位和间隔
A
Perspectivebar
27像素宽
B
左边缘和图标之间
5像素
B
图标和右边缘之间
6像素
B
透视图区域顶部和第一个图标之间
3像素
B
图标和分隔（hardrule）之间
6像素
C
分隔和图标顶部之间
6像素
D
图标间的垂直间隔
6像素
E
图标和分隔之间
6像素
--TD2:
Table2begins-->
Fastview图标
项目
定位和间隔
D
图标间的垂直间隔（和Perspective图标一样）
6像素
E
图标和分隔之间
6像素
F
左边缘和图标之间
5像素
F
Fastview区域顶部和第一个图标之间
3像素
F
图标和右边缘之间
6像素
4.TreeView图标
（ModelObject图标）
项目
定位和间隔
A
“+/-”widget和窗口左边之间
4像素
A
“+/-”widget窗口顶部之间
4像素
B
窗口顶部和第一个图标之间
0像素
B
图标间的垂直间隔
0像素
B
水平Treeview分支和图标之间
0像素
B
图标和文本标签之间
3像素
C
文本被嵌在文本标签内
左边和顶部留3像素，右边2像素，底部4像素（长度可变）
--IconSpecifications/IconOverlays-->
图标掩模（IconOverlays）
正如我们在图标尺寸和摆放位置中所说的，所有的掩模必须是同一个尺寸：
7×8像素。
为了把它们从底下的模型对象图标中分开，必须在项目类型掩模和Jave掩模中加上另外的白色边线。
边线的位
升级会员 