Amethyst Beta 6: 基于Visual Studio 的Flex可视化IDE

前几个月发过一篇博文关于Amethyst beta 1释放的，转眼间beta 6都释放了。

SapphireSteel软件今天释放出了基于Visual Studio 的Amethyst Flex IDE的Beta 6版本，这个版本首次集成了Amethyst Designer – 可进行拖拽的Flex 程序开发工具。

 

Amethyst Designer 的主要功能

• 从Visual Studio的工具栏中拖动组件到设计区
• 使用鼠标移动组件以及调整组件的尺寸
• 使用键盘上的方向键移动组件（或者使用Shift+方向键进行更大尺度的移动）
• 使用Backspace键删除选择的组件
• 使用自动排列工具栏可视化地对齐组件
• 将组件对齐到网格中（不管是移动还是重新设置它们的大小）
• 使用Amelyst 布局工具栏对已选择的控件的组进行整体性的对齐和调整尺寸
• 在Amethyst Designer中支持右键
• 在代码（Editor）编辑器和设计（Designer）编辑器中切换（在Designer和Editor 窗口的底部的按钮）
• 在代码编辑器和设计编辑器中的多层级的撤销/重做（Undo/Redo）（默认的快捷键是Ctrl+Z和Ctrl+Y）
• 可以根据需要设置Amythyst Designer的显示和行为属性
• 在设计器或者事件窗口中自动创建事件处理方法
• 在设计器的属性窗口中设置控件的属性

Amethyst 布局工具栏

 


您可以点击Amethyst 布局工具栏上的按钮对选择的对象组进行自动对齐、设计间距、调整尺寸。若要打开Amethyst布局工具栏，请右键菜单或者Visual Studio工具区顶部的工具栏区域，选择“Amethyst Layout”。
 
Amythyst 布局工具栏提供了如下的功能：

• 对齐到网格
• 对齐到左侧
• 对齐到右侧
• 对齐到顶部
• 对齐到底部
• 对齐到中心-水平（需要“引用的”控件）
• 对齐中中间-垂直（需要“引用的”控件）
• 设置同样的宽度（需要“引用的”控件）
• 设置同样的高度（需要“引用的”控件）
• 设置同样的尺寸（需要“引用的”控件）
• 将尺寸排列到网格上
• 设置同样的水平间距
• 移除水平间距
• 设置同样的垂直间距
• 移除垂直间距
• 上移一层
• 下移一层

选择控件

 
Amethyst 布局栏上的大多数方法用于操作选择的控件组。您可以使用一下三种方法选择控件：
1) 使用“区域选择方式”
您可以单击程序的空旷区域（没有任何组件的区域），按下鼠标，拖动鼠标进行矩形的选择控件，这时已选择的控件将有个矩形环绕并在四个角落会分别有一个矩形。
2) 分别点击控件

• 单击一个控件进行选取，再单击取消选取
• 按住Ctrl键进行多选，对某一个控件取消选择。

3)选择所有控件
在设计器获得焦点之后，按下Ctrl+A或者使用”编辑”->”选择所有”按钮选择所有的控件

使用“引用的”控件
 
选择了三个按钮并单击右下角的按钮使它成为“引用的”组件
 
当单击了“设置同样的尺寸”按钮之后，所有选择的按钮的尺寸都与“引用”的按钮一样（即右下角的按钮）
1) 需要一个“引用的”控件的函数
有一些对齐函数需要一个“主”控件来对选择的控件进行对齐和设置尺寸。举个例子，一个“引用的”组件可以在点击了“设置同样的尺寸”之后被用于定义选择的控件的尺寸或者在点击了“水平居中对齐”和“垂直居中对齐”进行水平位置上或者垂直位置上的堆砌
2) 需要一个“引用的”控件的函数是可选的
当使用了“矩形区域方式”选择了多个控件之后，没有任何一个控件定义为“主控件”或“引用的控件”，所有的控件的边缘都是灰边。如果您点击了“居左对齐”或者“顶部对齐”，那么所有的控件将会对选择的矩形区域的边缘进行居左或者顶部对齐。
如果您想定义一个控件作为“引用的”控件…
只要单击您要定义为“引用的”控件。单击之后，选择的控件的边框将变为黑色以表示此时该控件为选择的控件。此时，当您单击了对齐或者设置尺寸按钮之后，其他选择的控件将相对定义为“引用的”控件进行对齐或者改变尺寸。

创建事件处理方法

您可以在已经选择的控件的属性面板中双击事件名称自动创建事件处理方法，或者直接在设计区域双击控件创建默认事件的事件处理方法。
 
这里我选择了一个按钮并且双击了”click”事件
 
自动创建了事件处理方法（MXML和ActionScript都是自动创建的）。

设置属性

 
您可以在属性面板中更改选择的控件的属性。您也可以点击属性面板上的特效和样式按钮往控件的MXML定义上添加特效和样式。

代码编辑器和设计器之间的切换

在加载了MXML之后，您可以再工作区域的底部使用”Code”和”Design”按钮进行“代码编辑”和“设计器”模式的切换
 
提示：在设计器模式下，您可以选择某个控件，然后单击右键选择”Go To MXML”显示该空间的MXML代码。在代码编辑模式下，您可以选择某一块MXML代码，选择右键菜单中的”View Designer”选择设计器中的某个控件

设置Amethyst Designer的属性

在一些情况下，您也许要设置Amethyst Designer的显示和行为，这可以通过选择”（工具）Tools”菜单来实现，选择“（选项）Option”然后再选择
“Amethyst Designer”。在这里您可以设置背景网格的大小（这现在的Beta版本中，我们建议您设置10,10或更大），以及样式（实线或者点状）以及是否显示网格。
 

您也可以设置“对齐提示(Snap to Alignment bars)”和“对齐到网格提示(Snap to grid)”。如果选择了”Snap to Alignmenet bars”，当您移动或者调整控件的大小时候，当控件的边与其他的控件对齐时将显示绿色的边。当控件的边与其他的控件的边比较贴近时，线条将略微具有磁性的吸附效果。如果选择了”Snap to grid”,当鼠标弹起时，选择的空间将会沿网格对齐。
 

在这里，我们同时选择了网格（点状）和alignment bars（绿色线条）以辅助在设计器中对齐。（译者注：Snap to Alignments bars 这个我也不知道该如何翻译为好，在Visual Studio 2008中，也没有翻译，欢迎大家提供译法）
“Snap to Alignment bars”和”Snap to Grid”选项并不是互斥的。也就是说，如果您希望，您可以同时选择两个选项。
如果您同时选择了两项，那么alignments bars将指示控件之间的对齐，但是”网格对齐”更为优先，如果某个控件没有对其到网格，那么在鼠标弹起的时候，控件将自动沿网格对齐。
注意：如果您更改了设计器的全局属性，您必须关闭并重新当前打开打开MXML文件以应用设置。

其他Beta 6中的特性

此外，在Beta 6中还有以下新特性：
反射（新加的特性）

• 提取接口
  
• 将局部变量提升为参数
  
• 移除参数
  
• 重新排列参数
  
• 移除类/重命名包
  

调试（新加的特性）

• 条件断点
  
• 断点停止
  

 

 

Amethyst Desinger Beta1的限制

以下是第一个Beta版本的Amethyst Designer 的主要限制（未实现的功能）

• 导航器未完全实现（如果您使用拖拽创建控件，但此时没有编辑器添加或组织页，在目前释放的版本中，Amethyst Desinger中的导航器的行为将可能不可预测）
  
• 一些”复合的控件”比如DateGrids并没有完全支持
  
• AIR程序的可视化设计没有完全支持
  
• 不支持进行第三方控件的可视化设计
  
• 不支持进行Flex 4控件的可视化设计
  
• MXML的样式（以及在属性面板中设置的样式）并不会在设计器中显示，而是现实默认的样式
  
• 当使用网格对齐时，当网格的大小小于10,10时，性能下降会比较明显，因此我们建议网格的大小大于等于10,10。
  
• 在设计器中，当使用鼠标的中间滚轮调整控件时将导致错误的偏移量，因此我们建议使用拖动框滚动。
  
• Delete键并不会删除选择的空间，取而代之的是使用BackSpace键
  
• 还不可以复制、剪切、粘贴控件
  
  当您尝试进行上述的不支持的特性时，结果可能不可预料。在接下来的版本中将会添加或者增强遗失或未完成的特性。
  
  要求：
  
  
  
  • Visual Studio 2008;Amethyst 不支持安装到VS 2005和VS Express版本
    
  • Flex 3.X SDK
    
  • 用于调试的Flash Player 10 For Internet Explorer 
    
  • Java