# 总述

微简页面设计系统（Vj-Page）是一套针对web应用程序的前端页面制作工具。无论是否熟悉前端页面开发、是否有美工基础，都可用它快速、轻松的制作出专业、美观的Html5、Ext、Jquery等类型的前端页面。需求人员可用它制作可用型页面原型、编写业务规则、数据字典；美工可用它做页面示例；前端工程师、普通程序员都可用它进行前端页面开发。

# 快速入门

- 第一步：新建项目

打开主菜单，文件—>新建项目，输入项目名称：“我的第一个项目”，选择html5作为默认框架。单击确定按钮。

选择存放项目的文件夹，输入主文件名称“project1”，单击保存。

系统自动进入主界面。

- 第二步：增加页面

打开主菜单，页面—>增加页面。选择空白页面，页面宽度为1024。单击创建按钮。

系统自动创建一个页面并打开。

选中页面树的节点，单击节点或按下F2，将页面名改为“主页面”。

点击菜单树收缩按钮，将菜单树缩回。

- 第三步：加入组件

单击组件面板的“组合组件”，找到“顶部-常用”，将该组件拖拽到设计器中。组件位置放到左上角。

注意：组合组件是很多组件的组合，并非单个组件。

继续拖入“分割区-登录信息、当前时间”，并对齐到顶部标题下方。

继续拖入“导航栏-树（面板容器）”，并对齐到分割区下方最左侧。注意，导航栏默认是设计状态，需要选中标题栏，然后右键—>移动，切换到移动状态，然后才能移动。

继续拖入“分隔条-横向左箭头”，并对齐。

继续拖入“面板-直角不透明”，并对齐。注意：面板也是容器，移动时需要先切换到移动状态。

在设计器中，右键—>页面属性，设置html文件名为“index.htm”。保存一下，养成随时保存的好习惯。

- 第四步：生成单个页面

打开主菜单，工具->生成本页面。设置目标文件夹（存放html的文件夹）。

单击确定按钮。第一个页面就生成了。

是不是很爽！

我们继续！

- 第五步：增加第二个页面

展开页面树。打开主菜单，页面->增加页面。依然选择“空页面”，宽度1024。

将页面重命名为“员工信息”。

拖入“表单-增删改”，并对齐到左上角。

- 第六步：主页面加入iframe

切换到“主页面”。组件面板切换到“常规”，拖入“iframe”组件到面板容器中。

选中iframe，设置属性“指向”，单击旁边的小按钮，打开选择指向界面，选择“员工信息”，单击确定按钮。

效果如下：

调整ifram的大小。

切换到“员工信息”，调整页面元素的大小。

- 第七步：生成全部页面

打开主菜单，工具->生成全部页面，单击确定按钮。

系统生成全部页面，并自动打开了索引页面。

打开主页面链接，可看到ifram引用的页面。

# 【使用手册】

## ◆基本操作

- 整体页面

左侧为页面树，用来组织页面关系。

右侧上方为组件工具。包括常规、框架、组合组件、自定义组件四部分。

右侧下方为属性窗口。

中间为页面设计器。

- 项目存储结构

项目是以文件方式来存储的。包括主项目文件、相关页面、引用的文件。每个页面文件对应一个xml文件，如：page1.xml。

具体结构如下：

- 新建项目

输入项目名称，选择支持的框架，单击确定。

选择存放项目的路径，输入主项目文件名称（可以是中文字符）。

- 打开项目

选择主文件，单击打开即可。

- 关闭项目

关闭当前项目，同时关闭所有的页面。

- 最近使用的项目

最近使用的项目列表，可通过它直接打开项目。

- 项目属性

包括项目名称、主题风格、框架、页面数量等属性。框架版本只有ext项目有效，可以在各版本之间切换。config文件名、索引文件名在单人设计时用默认值即可；在多人协作时使用，每个人可设置不同的文件名。

可单击主题风格按钮设置项目的配色风格。

- 页面

每个页面文件对应一个xml文件。页面可组织为树形结构。

- 新建页面、新建子页面

新加页面、新建子页面，选择页面模板，设置页面宽度，单击创建。

- 删除页面

删除选中的页面，页面必须关闭后才能删除。如果页面节点下有子页面，则所有子页面都会被删除。

- 页面属性

页面属性包括页面名称、生成的html文件名、页面类型，背景色、背景图像、重复方式、页面宽度、页面对齐方式、页面存储文件等属性。

页面类型：默认、弹出窗口、iframe页。

重复方式：repeat（横向纵向平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）、no-repeat（不平铺、只显示一份）

- 关闭全部页面

习惯使用关闭全部页面按钮，使打开的页面很少，可更方便的找到对应的页面、并有效释放内存。

- 页面复制

复制页面是最快、最有效的创建页面方式。可使用ctrl+c快捷键。注意：使用快捷键时要保证焦点在页面树上，防止和复制组件混淆。

- 粘贴页面、粘贴为子页面、粘贴到当前位置

粘贴页面包括三种，粘贴到同级页面最后一个节点位置、粘贴到子页面最后一个节点位置、粘贴到当前位置。默认ctrl+v时，粘贴到当前选中节点的同级最后一个节点。

- 生成本页面

生成当前打开的页面。选择目标文件夹。可选择是否生成后自动打开。

设置风格色调。

- 生成全部页面

生成本项目的全部页面。选择目标文件夹。可选择是否生成后自动打开。

设置风格色调。

- 打开索引页面

打开索引页面。需要打开已经生成的页面，又不想再生成一次、或者到资源管理器中寻找，可直接打开索引文件。

- 导入导出页面

- 导出页面

可以将系统中的页面导出为文件包。

- 导入页面

可以将外部页面文件包导入到系统中。

## ◆页面设计

- 组件、组合组件

组合组件是由多个组件组成的，并不是单个的组件。系统内置了很多常用的组件组合，方便设计时使用，称之为组合组件。

组件工具中“自定义”部分也属于组合组件。

拖入设计器之后，组合组件的各个组件可以单独设置属性。如果想修改组合组件整体，可修改后保存为另一个自定义组合或组合组件。

- 拖入组件

可从组件工具中拖入组件、组合组件。

拖入时可直接放到页面上，也可放到容器上。

容器有两种状态，一种是设计状态，一种是移动状态，只有设计状态时可以拖入组件。

部分组件只能放到特定的容器中。ext菜单只能放到ext工具栏中。工具栏分隔条只能放到工具栏中。

主菜单一般直接放在页面上或者放在body区域中，否则下拉菜单时可能被容器挡住不能显示。当然，单级菜单不存在这个问题。

- 固定布局、自动布局

固定布局时，位置相对于容器都是固定的，可以任意拖拽组件位置、大小。而自动布局时，组件位置、大小会根据布局属性自动变化。所以，系统需要自适应浏览器、根据浏览器大小的变化而变化时，一般采用自动布局。

- 常用ext布局

1、absolute绝对布局

完全手工设置组件位置，组件位置、大小相对于容器都是固定的。

2、border边框布局

边框布局是将容器划分为5个区域，东南西北中。使用时为父容器指定border布局，为子组件设置区域（东南西北中）（east、south、west、north、center）。子组件会根据设置来对齐。

有少于5或多于5个区域时，依然根据这个规则来自动布局。

3、fit自适应布局

容器设置为fit时，内部组件会充满容器。

4、anchor锚固布局

容器布局为anchor时，内部组件会根据相对宽度、相对高度自动变化。

5、accordion手风琴布局

一般用于这种抽屉式容器。

6、hbox水平布局

一般用于容器中横向排列组件。

7、vbox垂直布局

一般用于容器中纵向排列组件。

- 相对宽度、相对高度

部分布局中可使用相对宽度、相对高度来设置组件尺寸比例。边框布局、水平布局、垂直布局、锚固布局中都可以使用。

如果容器是HBox，相对宽度对应的是ext的flex属性。组件实际宽度 = 容器宽度*(本组件相对宽度/所有相对宽度之和)
例如：容器内三个组件相对宽度分别设置为1、2、2，
表示这3个元素占的宽度分别为1/(1+2+2)、2/(1+2+2)、2/(1+2+2)

如果容器是VBox，相对高度对应的是ext的flex属性。组件实际高度 = 容器高度*(本组件相对高度/所有相对高度之和)
例如：容器内三个组件相对高度分别设置为1、2、2，
表示这3个元素占的宽度分别为1/(1+2+2)、2/(1+2+2)、2/(1+2+2)

- jquery的布局、对齐

jquery的布局主要使用“布局容器”、“布局区域”。支持border布局，同ext布局一致（详情见“固定布局、自动布局”）。

另外，“布局容器”可有左自适应对齐、右自适应对齐、居中对齐；相对高度、相对宽度。“块”组件可以左对齐、右对齐、居中对齐；相对高度、相对宽度。这些属性可以结合使用来实现页面的整体布局。

- 选择组件

提供以下八种选择组件方式：

1. 单击选择单个组件。
2. 在页面上，可通过鼠标左键框选来选择多个组件；
3. 在容器中，按住ctrl然后用鼠标左键框选来选择组件。
4. 按住shift，然后单击组件，可多选或不选组件。
5. ctrl+A选择全部组件。
6. 选中容器，然后选择所有子组件。
7. 选择单个组件，然后选中父组件。
8. 打开主菜单，组件->组件列表，选中组件。

- 组件大小、位置

在固定布局中需要对组件位置、大小进行调整。通常通过拖拽改变组件的位置、大小。也可通过属性设置修改左、上、右、下、宽、高。

组件边缘被挡住无法拖拽调整时，可使用属性设置。

微调几个像素时，可使用快捷键调整。shift+箭头用于调整大小；ctrl+箭头用于调整位置。

还可以使用对齐功能来调整位置、大小。

- 组件对齐

组件对齐包括：左对齐、右对齐、上对齐、下对齐、等高、等宽、水平等距、垂直等距。

对齐时以第一个选中的组件为准。

- 复制组件

使用复制组件方式来设计页面是最快、最有效的方式，大部分情况都可以通过复制相同、相似的组件来设计页面。

可通过主菜单、快捷菜单、快捷按钮、ctrl+C等方式来复制、粘贴组件。

注意：粘贴组件时，如果在页面中粘贴，粘贴位置还是原来的位置，可能不在当前显示的页面范围内，需要翻页才能看到组件。

- 删除组件

删除选中的组件，可用del键、菜单、快捷按钮来删除组件。注意删除表格、数据表格时，二者如果处于编辑状态，则删除操作为删除表格内容，而不是删除组件。

- 移动组件

容器组件、表格、数据表格等组件移动的时候，需要切换为移动状态再移动；其他组件可直接拖拽来移动。

通过设置属性左、上来移动组件。

通过ctrl+箭头来移动组件。

- 表格操作

系统提供了大部分常用的表格操作。可用于表格制作、table布局。

具体功能包括（具体操作方式与excel类似，这里不做具体介绍）：

1. 插入表格，设置表格行数、列数；
2. 插入行、插入列、删除行、删除列；
3. 拆分单元格、合并单元格、剪切单元格、复制单元格、粘贴单元格；
4. 删除内容、清除所有内容；
5. 水平对齐、垂直对齐；
6. 行高、列宽、平均分布行高、平均分布列宽；
7. 鼠标框选、全选。

注意：

1. 表格状态分为编辑状态、移动状态、无焦点状态。按下快捷键时，如果处于编辑状态，会操作单元格内容；如果是移动或无焦点状态，会操作组件。
2. 删除组件、删除单元格内容、要分清楚。

- 数据表格操作

数据表格而用于展示数据。

具体功能包括（具体操作方式与excel类似，这里不做具体介绍）：

1. 插入表格，设置表格行数、列数；
2. 调整列宽；
3. 增加行、插入行、增加列、插入列、删除行、删除列；
4. 剪切单元格、复制单元格、粘贴单元格；
5. 删除内容、清除所有内容；
6. 鼠标框选、全选。

注意：

1. 表格状态分为编辑状态、移动状态、无焦点状态。按下快捷键时，如果处于编辑状态，会操作单元格内容；如果是移动或无焦点状态，会操作组件。
2. 删除组件、删除单元格内容、要分清楚。

- 恢复图片原始大小

图片组件加载图片之后，如果修改了大小，想回到原始大小，可使用该功能。也可以重新选择图片来恢复大小。

- 选中父节点

页面设计时，容器嵌套情况非常多，而且很多容器没有边框，所以“选中父节点”功能非常重要，可通过它来确定容器嵌套情况。

- 选中所有子组件

容器内部一般会有很多组件，而且内部嵌套也比较复杂，需要复制组件、或者更换容器时，可以通过该功能选中容器内所有子组件进行操作。

- 设置组件属性

属性设置时，一般数值型属性需要回车以生效。

可通过单击标签查看属性说明。

- tab顺序

可视化调整tab顺序。html中只有部分组件有tab顺序，所以只显示有tab顺序的组件。如果不设置tab顺序，系统会默认为载入顺序。

可通过按钮调整顺序。

- 组件列表

组件列表显示所有组件，包括容器嵌套关系。

可用它来清晰的看到组件间的父子关系；也可通过组件列表来找到某个组件。

- 设置样式

组件可设置多种样式，不同的样式会生产不同的html组件。

- 链接页面

可设置要打开的页面，设置目标。树、列表、菜单等组件可对每个项单独设置链接、目标。

链接：要打开的页面。

目标包括：_self、_blank、_parent、_top、指定框架。

1. _blank：在新窗口中打开被链接文档。
2. _self：默认。在相同的框架中打开被链接文档。
3. _parent：在父框架集中打开被链接文档。
4. _top：在整个窗口中打开被链接文档。
5. 指定框架：在指定的框架中打开被链接文档。

- 打开窗口

窗口组件可设置“默认打开”属性，设为true时，页面加载时自动弹出窗口。

如果在页面运行时打开窗口，需要写脚本来实现。注意：html5、jquery和ext打开窗口的方式不同。

例如，要通过按钮来打开弹出窗口。为按钮增加打开窗口事件即可。

第一步：

右键—>代码，打开代码窗口。选中button，右键->增加事件。

第二步：（如果是html5、jquery项目）

选择onclick事件

事件编辑窗口输入： opendilogs()

保存。

切换到脚本窗口

单击插入代码按钮，选择javascript常用——打开关闭窗口，选中打开窗口部分，单击插入选中部分。然后将#page1_jDialog1修改为对应的窗口名即可。

第三步（如果是ext项目）：

选择click事件

选中ext常用->打开关闭窗口，在事件编辑窗口插入下图代码，插入后修改窗口名称，注意格式为窗口名称+_obj

- 图表的使用

图标提供了以下几种类型：

1. column：柱状图；
2. bar：线条图；
3. line：折线图；
4. pie：饼图；
5. area：面积图；
6. point：散点图；
7. doughnut：环状图；
8. gauge：表盘图；
9. radar：雷达图。

使用图表时，可使用“组合组件”中的图表组件，每个类型都默认了简单的示例，可参照示例来设计图表。

数据列类型包括：x、y、value，分别对应x轴的取值、y轴的取值、对应的数值。

数据类型包括：string字符型、int整形、float浮点型。

- 柱图示例：

x轴设为年份，类型为string；y轴设为收入，类型为int。value无需设置。柱状图、线条图、折线图、饼图、面积图、散点图、环状图都只设置x、y即可。

- 表盘图示例：

x为最小值，y为最大值，value为当前值。

- 雷达图示例

x轴为产品，类型为string；y轴为特性，类型为string；value为值int。

- 页面注释——编写业务内容

页面注释可用于编写任何文档。比如与页面相关的功能描述、业务规则、数据字典等。如果使用表格，可在word中做好后复制过来。

可在生成页面后的页面索引文件中打开页面注释。

- iframe、框架

框架用于引用页面，以便最好的复用页面。可以将通用的页面、部分页面区域用框架来引用。这样，大量相同的地方需要修改时，修改一处即可。

一般建议使用iframe框架来引用页面。

系统虽然内置了部分常用框架，但设计时尽量少用。

- 快捷键

F8：查看整页

F9：生成本页面

F10：生成全部页面

ctrl+箭头：移动组件

shift+箭头：调整组件大小

箭头：组件间移动

ctrl+S：保存

ctrl+X：剪切

ctrl+C：复制

ctrl+V：粘贴

ctrl+A：全选

F2：重命名

F1：帮助

## ◆高级页面设计

- Html组件

使用Html组件可在指定位置插入一段html代码，这样理论上为本设计系统提供了任何可能。

拖入设计器后打开“编辑html”属性。

源码界面：

- 代码、事件、外部引用

可以在页面中使用事件、编写代码，引用外部文件。

页面设计器中，右键—>代码，打开代码窗口。可以在页面中加入事件、写脚本、引用外部文件。

脚本嵌入方式：脚本可以嵌入html页面中，也可以存为独立的文件。

脚本嵌入位置：嵌入html页面中时，可以放在body前、body后、body中，或者html前（比如asp脚本的引用）。

脚本类型：可嵌入任何html支持的脚本，如javascript、vbscript、asp、php等。选择none的时候还可以嵌入任何自定义的脚本格式。

添加事件

脚本编写：

代码模板

引用文件：

- 脚本组件

和页面代码不同，脚本组件可以放在页面body的任何位置，比如某个容器部分，也可以在容器部分引用某个外部文件。

可以在页面中编写代码，引用外部文件。使用时与代码功能基本相同。

将脚本组件拖入设计器中，单击脚本属性编辑。

## ◆自定义组件、模板

- 制作模板

可以将当前打开的页面保存为模板，保存到指定的分类上。

还可为模板指定预览图片。

- 制作组合组件、自定义组合组件

可以将当前打开的页面保存为组合组件。可以保存到组合组件分类下，也可以保存到自定义组合组件下。一般使用时建议保存到自定义下。

还可为组合组件指定预览图片。

- 模板管理

模板管理功能用来维护模板。具体功能包括：增加预览文件、删除预览文件、增加分类、修改分类、修改模板名称、删除分类、删除模板、上移、下移等功能。

- 导入导出模板

- 导出模板

可以将系统中的模板导出为文件包。

- 导入模板

可以将外部模板导入到系统中。

- 组合组件管理

组合组件管理功能用来维护组合组件。具体功能包括：增加预览文件、删除预览文件、增加分类、修改分类、修改组件名称、删除分类、删除组件、上移、下移等功能。

- 导入导出组合组件

可以将系统中的组合组件导出为文件包。

- 导入组合组件

可以将外部组合组件包导入到系统中。

- 自定义组合组件维护

包括删除、重命名、增加预览图片、删除预览图片等功能。

- 导入导出自定义组合组件

可以将系统中的自定义组合组件导出为文件包。

- 导入自定义组合组件

可以将外部自定义组合组件包导入到系统中。

## ◆常用技巧

- 更换容器

1. 选中容器，点击选中所有子组件按钮
2. 剪切组件（ctrl+X）
3. 拖入新容器，粘贴
4. 先选中旧容器，再选中新容器，然后按下等宽按钮、等高按钮
5. 删除旧容器
6. 将新容器放到指定位置

- 查看属性说明

单击属性标签即可。

- 快速建大量页面

选中类似的页面，然后ctrl+c，再重复按下ctrl+v，可瞬间建多个页面。

- 选中部分组件

最常用的是选中容器内的所有组件：选中容器，然后单击“选中所有子组件”按钮。

多层父容器的嵌套时，单击选中父组件即可。

系统提供以下八种选择组件方式：

1. 单击选择单个组件。
2. 在页面上，可通过鼠标左键框选来选择多个组件；
3. 在容器中，按住ctrl然后用鼠标左键框选来选择组件。
4. 按住shift，然后单击组件，可多选或不选组件。
5. ctrl+A选择全部组件。
6. 选中容器，然后选择所有子组件。
7. 选择单个组件，然后选中父组件。
8. 打开主菜单，组件->组件列表，选中组件。

- 自动布局时如何调整组件

可以先将父容器改为absulute绝对定位，调整内容，调整完之后再改过来。

- 不会自动布局怎么办

对于同一类型页面，先用绝对定位排好，再慢慢的试各种自动布局。自动布局看似复杂，其实挺容易，多试几次就熟悉了。

- 容器充满时如何加入新组件

方法一：复制同类型组件，选中父容器，粘贴。

方法二：将组件放到空白处，剪切，然后选中父容器，粘贴。

方法三：先将容器布局改为绝对布局absolute，拖拽大小，找出空位，然后拖入组件。

- 微调组件位置、大小

移动一个像素：ctrl+箭头。或者直接在属性栏输入数字。
调整大小：shift+箭头。

- 粘贴组件后看不到

粘贴组件时，如果在页面中粘贴，粘贴位置还是原来的位置，可能不在当前显示的页面范围内，需要翻页才能看到组件。

也可用组件列表来选中组件，然后修改属性左、上。

- 组件太大超出范围

选中组件，然后将属性宽、高改的小点，然后再用鼠标调整。

- 页面注释中使用表格

可以做好模板从word中复制过来。

- 如何成为高手

一般来说高手应该是做的又快、又漂亮。单从原型制作、页面设计来说，尽量找现成的模板，尽量使用复制页面、复制组件来设计页面，这是迈向高手行列的最佳途径。

微简论坛提供大量的模板、组合、图片、图标。

- 多人协作

以三人协作为例：

1、将项目分成三部分，没人负责设计一部分。

2、各自新建一个项目。打开项目属性，各自设置自己的config文件名、索引文件名。三人不能相同。

3、生成html页面的目录要放到同一目录中。

4、将生成的目录放在svn、cvs等版本控制软件的同一位置。每个人上传时都直接覆盖该目录即可。

5、最后给开发人员的时候，开发人员需要手工合并一下。

注意：项目源文件要放在不同的位置。共享部分可以单独做一个项目，打开链接时直接使用外部链接即可