65.9K
CodeProject 正在变化。 阅读更多。
Home

Visual Studio 2010 Concept IDE

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.78/5 (108投票s)

2005年5月23日

10分钟阅读

viewsIcon

690346

downloadIcon

2

一款新的 Visual Studio UI 的设计概念。

概述

  1. 代码 (2005 年 5 月 23 日)
  2. 调试 (2005 年 6 月 6 日)
  3. 测试
  4. 重构

I. 代码

单击此处查看带有全尺寸图片的文章。

就像一款概念车炫耀其本领一样,Visual Studio 2010 概念 IDE 充满了过度的功能和奇怪的想法。它看起来再温顺不过了,这个 UI 的设计只有一个目的:尽情编写代码。把那些怪异的 Windows Media 风格的皮肤留给朋克吧,我们还有正事要做。

如下所示

概念一:解决方案资源管理器(绿色框)

Solution Explorer

左上角的绿色框清楚地标识了解决方案的名称,并提供了两个不错的摘要统计信息:总类型计数和总源代码行计数。

单击绿色箭头可展开一个面板,提供解决方案的完整配置选项。

概念二:程序集(黄色框)

从程序集中添加、删除或构建程序集。按字母顺序或构建顺序显示程序集。通过单击右侧的构建号来构建单个程序集。阴影圆圈表示程序集中代码文件的数量 - 颜色越深表示文件数量越多。

Assembler

单击黄色箭头可展开一个充满程序集配置梦想工具的面板。

概念三:CodeFile Crawler(蓝色框)

CodeFile Crawler

你的程序集中正好有亿万个代码文件,对吧?使用 Crawler 来查找你需要处理的文件。按类型、类型名称、命名空间搜索,或使用根功能选择一个根类型 - Crawler 将会查找所有引用类型,直到零级。如果类型太多,可以使用 Level Cutter 将结果限制在给定级别。

概念四:Head(编辑器上方的颜色编码区域)

在 Crawler 中选择一个类型后,类型名称和相关统计信息将显示在 Head 中。当然,统计信息会随着你编写代码而更新。

概念五:Remoting Eye(Head 中的大圆形图标)

Remoting Eye

当然你在进行结对编程——眼睛会告诉你。只要显示眼睛,你的编程伙伴的计算机就连接到了会话。单击眼睛并选择“传递指挥棒”以发送当前副本、差异,或从你伙伴的计算机检出相同的文件(无论你的版本控制系统做什么),然后将你的 UI 切换到远程模式。

概念六:Click Strip(编辑器正上方)

当前选定类型引用的所有类型都显示在此条带中,只需单击它们即可查看该类型的代码文件。

概念七:Ashes(灰色框)

Ashes

右侧列出了过去选定的代码文件,以及指示每个文件上已完成工作量的摘要统计信息。在顶部的 Filter 框中输入代码文件的前几个字母即可跳转到条目。

概念八:Floating Run Button

垂直居中于当前插入点所在方法的右侧是浮动运行按钮。它会构建并运行应用程序(就像 F5 一样)。

概念九:Floating Search and Replace

Floating Search And Replace

编辑器顶角处的巨大放大镜表明简陋的重构工具触手可及。是的,它能完成所有标准的搜索和替换功能。

概念十:Greenboard

Greenboard 是单击浮动运行按钮时显示的弹出窗口。每个要构建的程序集都伴有一个条形图,其大小按程序集中源代码的数量成比例确定。错误消息收集在面板底部。如果程序集构建失败,Greenboard 会自动关闭并显示 Error Trap。

概念十一:Error Trap

编译失败时会出现 ErrorTrap。它能够清晰、快速地识别错误。

II. 调试

单击此处查看带有全尺寸图片的文章。

在 Visual Studio 2010 概念 IDE 文章的第二部分中,我们将讨论调试。在开始之前,让我们先使用概念 IDE 中的折叠系统来最大化代码。在这里,所有折叠都已折叠,最大化了代码编辑器。

All shutters collapsed

概念十二:Visual Breakpoint Conditions

现在可以直接在编辑器中输入断点条件,只需单击标记为“Condition”的小红箭头,即可在断点下方展开一个面板并进行编码。条件是持久的,也就是说,只要定义了断点的源代码行存在,该行的条件就会一直保留。

Visual Breakpoint

概念十三:Stepper

Stepper 悬停在当前正在执行的最重要代码行上。这个小导航器可以轻松地进行 Step Into、Step Over 或 Step Out。它还会枚举当前行中待解析的各种属性 getter。你可以轻松地在进入目标方法时跳过它们,或者通过单击 Stepper 中的内容来进入它们。包含除字段值简单返回以外任何内容的 Getter 都用特殊图标标记。

Stepper

概念十四:Minis

这些生成的图表构成了运行应用程序的地图。查看哪些对象被实例化,哪些方法被调用,并轻松检查对象值。Minis 及其生成标准将在此处详细讨论。

Minis

概念十五:Visual Stack

Minis 为我们提供了将堆栈可视化为图表的机会,其中某些方法、属性 getter/setter 或接口实现被“点亮”,以显示它们当前受到 CPU 的关注。单击 Mini 中的任何位置,源文件就会在 Code Editor 中显示。通过将 Mini 中的内容拖到 Watch 窗口来创建 Watch 值。

Visual Stack

概念十六:Object Dash

单击 Mini 左上角的小橙色方块即可显示 Object Dash。这个小的监视窗口默认显示对象中的字段值,但可以用基于代码的监视进行自定义。可以通过单击左侧的复选框快速删除默认值。一旦自定义了 Object Dash,这些自定义就会按类型记住。也可以在 Debug UI 中的任何显示对象引用的地方(例如 Call Stack、Watch 窗口或 Code Editor 本身)将鼠标悬停在引用上并按 Ctrl-Shift-O 来启动 Object Dashes。

Object Dash

概念十七:LiveObjects

当调试器命中断点时,使用 LiveObjects 面板来查看当前存在的对象。

Live Objects

概念十八:The Barge

The Barge 是一个已垃圾回收的所有对象的列表,包括回收的内存量。通过右键单击并过滤掉委托、属性、集合或任何类型的后代来减少此列表中的噪声。

Barge

概念十九:Origins

了解当前存在(LiveObjects)或曾经存在(The Barge)的对象肯定很棒。当对象计数看起来不正确并且你需要知道创建这些对象的对象的方法时,请检查 Origins 面板。双击方法即可在代码编辑器中显示源文件。

Origins

概念二十:Trax

从单击浮动运行按钮的那一刻起,到关闭应用程序的那一刻止,都会跟踪已执行的代码行和每个代码行消耗的 CPU 时间量。使用 Trax Summary 来定位最耗时或最冗长的方法。在 Summary 中选择一个方法,SubTracker 将显示该方法中所有耗时较长的调用。单击 SubTracker 中的调用或 Code Editor 中的“bullet”以继续向下钻取。Trax 还突出显示上一次运行期间执行的每一行源代码,从而可以轻松区分哪些行已执行,哪些未执行。

Trax

你的回合

就这样。Visual Forms Designer、重构、UML、Tests 以及那个为我编写所有代码的 AI Buddy 呢?到 2010 年,这些小玩意儿会包含在里面吗?嗯,这取决于你了。提出将这个 UI 进一步向前推进的方法,我们将在本文的修订版中采纳最好的建议!

概念 IDE 背后的概念

本 IDE 中的 Edward R. Tuft 式的构想是

这个 IDE 的“外观”受到了 Edward R. Tufte 作品的启发。编辑区域是白色的,将你的注意力引向工作的焦点:代码。左侧的颜色编码区分了主要区域,并在 Head 中清晰地标识了它们(即,当单击巨大的箭头时)。你创建的任何名称都显示为黑色。属于 IDE 的任何名称都被弱化。“硬”分隔线已被避免。

本 IDE 中的 Alan Cooper 式的构想是

固态

一切都被保存,包括所有代码文件的撤销堆栈、最后选择的类型、Ashes 列表等。无论你是拔掉电脑电源,还是执行一个友好的 Start | Turn Off 序列,下次启动 IDE 时它都会完全相同。

主权应用

这款 UI 被设计成最大化使用,并长时间使用,它拥有低调的控件,并且没有分散注意力的 3D 效果,除了热控件,在鼠标悬停时会以 XP 风格绘制。通过光标提示和热控件效果提供可感知性;专家用户可以随着时间的推移“发现”功能。

将意愿置于能力之上

开发人员可能想在 IDE 中做的无数事情都被归入了对话框和菜单。开发人员每天(或每分钟)绝对需要做的几件事情被放在了最前面。

链接

  • 面向对象:Alan Cooper
  • 定量信息的视觉显示:Edward R. Tufte

    Minis

    Mini 对象图(点击此处返回文章)

    在你说“又一个图表标准!”之前,请注意,概念 IDE 中的 DebugDiagrammer 是可插入的,可以替换为 UML 或你自己的自定义图表。目的是可视化对象,而不是类。Mini 是 Miniature 的缩写,图表就是这样,字面意思是显示对象内部工作原理的缩略图。



    Mini 图的核心是一个代表对象的矩形。

    Mini Object Rectangle

    属性由椭圆表示。

    Mini Property Ellipse

    如果属性实现了值类型,它会包含一个小的矩形。

    Mini Property Value

    如果属性实现了引用类型,它会包含一个圆圈。

    Mini Property Reference

    属性的 getter 由椭圆左侧的形状表示。

    Mini Property Getter

    属性的 setter 由椭圆右侧的形状表示。

    Mini Property Reference With Setter

    当 getter 或 setter 包含除简单返回或赋值字段值以外的任何代码时,将从封闭形状绘制一条线到椭圆边缘。这是一个带有 getter 中代码的读/写属性的示例。

    Mini Property Reference With Code

    方法由圆角矩形表示。

    Mini Methods

    小方块用于表示方法的参数。

    Mini Methods With Parameters

    参数超过三个的方法使用省略号代替第三个方块。

    Mini Methods With Parameter Ellipsis

    接口在左上方通过一个类似尖叉的符号显示。

    Mini Interface

    事件在底部显示,通过一个类似插座的形状。形状内的向下箭头代表用于实现事件的委托。

    Mini Event

    包含值类型的字段由小矩形表示——它们看起来几乎像一个连字符。

    Mini Value Field

    包含对象的字段(引用类型)显示为圆圈。

    Mini Object Field

    构造函数出现在左上方。与方法一样,这些形状包含代表任何参数的小方块。

    Mini Constructor

    析构函数(如果已声明)显示在最后一个构造函数正下方的灰色矩形中。

    Mini Destructor

    各种对象部分的范围和可见性由 Mini 中的位置指示。公共属性出现在左侧,椭圆的左尖端突出。

    Mini Public Properties

    公共方法出现在右侧,矩形的右边缘突出。

    Mini Public Methods

    公共事件出现在底部,插座突出。

    Mini Public Events

    要显示特定于 Mini 的监视窗口,请单击橙色按钮。

    Mini Dash

    静态、私有和受保护的成员显示在 Mini 的特殊区域中。这里有一个带有静态区域、私有区域和受保护区域的 Mini。顶部的静态区域包含字段。中间的私有区域包含字段和方法。底部的受保护区域包含方法和属性。

    Mini Placement

    当一个对象在一个类及其祖先之间划分实现时,一个 Mini 会画在上面,其底部有一个继承三角形。在这里,你可以看到堆栈通过祖先贯穿到后代实现。

    Mini Ancestry

    点击此处返回文章。

  • © . All rights reserved.