3.2. 可视化开发

3.2.1. 标签栏

Apusic Studio的标签栏在WTP2.0的基础上增加了Apusic Ajax、Apusic Graph、Apusic Layout、Apusic Widget四部分,如下图:

  1. Apusic Ajax,放的是与Ajax有关的标签,如Action,Updater等。

  2. Apusic Graph,放的是与图表有关的的标签,如饼图,曲线图等。

  3. Apusic Layout,放的是于页面布局有关的标签,如BorderLayout,PanelGrid等。

  4. Apusic Widget,放的是常用的标签,如Button,TextField,DataGrid等。

这些标签都可以通过鼠标的拖放到可视化的编辑器中去。

3.2.2. 图形编辑器和代码编辑器

Apusic Studio中的编辑器包含两种视图,一种是图形视图,一种是代码视图,两个视图之间是即时同步的,换句话说,在图形视图上做修改,代码视图立刻就改变,反之亦然。

  1. 图形编辑器,适用鼠标操作,可以通过单击、双击、右键菜单、拖动等方式来设计。

  2. 代码编辑器,适用键盘操作,而且支持常用的快捷键,有代码辅助(Ctrl + /)、代码导航(Ctrl + 鼠标左键或者F3)、自动补全、语法高亮、代码格式化(Ctrl + Shift + F)、代码折叠(Ctrl + 小键盘的/)、语法校验等功能,见下图:

    代码辅助

    图 3.1. 代码辅助


    代码导航
    代码导航

    图 3.2. 代码导航


    代码格式化(前后对比)
    代码格式化(前后对比)

    图 3.3. 代码格式化(前后对比)


    代码折叠

    图 3.4. 代码折叠


3.2.3. 属性视图

在图形编辑器上,选中一个标签,双击或者右键菜单->Show->Properties可以打开属性视图,属性视图有3个标签页,分别是Quick Edit,Advanced,Attributes

  1. Quick Edit放的是最常用的几个属性,如下图所示,是一个outputColumn标签,该标签最常用的属性就是Value,Header,Width等,因此把它们放在 Quick Edit,可以不用去寻找所有的属性,提高开发的效率

  2. Advanced把所有的属性进行分类,以块的形式展现出来,提高了查找属性的速度,另外,还对style样式、Managed Bean方法绑定等提供了更加方便的操作界面,如下图:

  3. Attributes是WTP默认提供的属性标签页,内容与Advanced是一样的,只是展现的方式不一样,如下图:

3.2.4. 大纲

大纲(outline)是一个特殊的代码视图,如下图所示,把代码以树的形式显示出来,方便我们查看代码的结构,定位节点,对节点进行操作等,当选中一个节点的时候,在代码编辑器中该节点的完整代码会相应的被选中。

对键盘的支持也很好,例如键盘的上下左右键分别可以上移、下移、收缩节点、展开节点,按del键可以删除当前节点等。

同时,右键菜单也提供了丰富的对节点操作的功能。