门户设计器

1.10.3 门户设计器

用户从"门户管理"功能中，选择"新建–从空页面创建"后，门户设计的主界面如下：

主界面分为几个部分：菜单工具栏、对象面板区、属性面板区、编辑区等。

1.10.3.1        顶部菜单区

顶部菜单区提供新建、保存、另存为、撤消、重做、门户配置、选中上层、画笔拆分、资源定位、源代码、预览功能。

新建：创新一个新的门户。

保存：保存对门户的编辑，并将门户文件保存至/root/portals/pages/esp/+门户拼音首字母组成的路径下。

另存为：将当前的门户文件另存复制为一个新的门户。 撤消：取消对门户所做的修改，并回退到上一步操作。

重做：重新执行刚撤销的操作。

门户配置：配置门户的基本信息，如：门户名称、门户主页、预览图片、门户描述的内容。

配置门户的基本信息：如名称，首页，门户图标，描述等等

选中上层：选中组件或容器的父级组件或容器。

画笔拆分：通过鼠标画拆容器。

定位资源：当选中含有资源的组件时，点击后会在左侧资源树上定位。

源代码：直接编辑门户文件内容，非图形化的操作，对非常熟悉门户文件格式及功能的用户可以很好的使用该功能进行各种扩展，一般不建议使用。

1.10.3.2        编辑状态

1.10.3.2.1    编辑组件树

编辑组件树时，提供添加子节点、添加邻节点、设置图标、设置高亮图标、设置链接、扩展参数、删除节点功能。

1.10.3.2.2    编辑标签

编辑标签时，支持添加标签页、移除活动页、选择图标、粗体、斜体、字体、字体大小、字体颜色、背景颜色设置和操作。

1.10.3.2.3    文本编辑

支持粗体、斜体、字体、字号、字体颜色、背景颜色设置和操作。

1.10.3.3        菜单栏

根据操作内容的不同，显示不同的菜单。

1.10.3.3.1    门户管理菜单栏

在菜单栏第一个图标，点击鼠标左键后，出现下图所示的界面，每个三角形后面还有二级子菜单。

文件菜单：提供"新建、关闭、关闭所有、保存、另存为、保存所有"二级子菜单。

编辑菜单：提供"复制、粘贴、撤消、重做、删除、门户配置"二级子菜单。

查看菜单：提供"工具面板、显示/隐藏标尺、源代码、预览"二级子菜单；其中，工具面板支持"显示/隐藏-属性面板、显示/隐藏-布局、显示/隐藏-基本组件、显示/隐藏-高级组件、显示/隐藏-资源树、显示/隐藏-文件"三级子菜单。

1.10.3.3.2    容器设置

提供布局方式、新增容器、拆分、插入行、插入列、删除行、删除列、属性设置菜单。

支持三种布局方式：

流式布局：组件按从左到右进行布局。

块式布局：组件按每个组件占一行进行布局。

固定布局：组件位置可以重叠，不局限于按从左到右进行布局。

1.10.3.3.3    组件设置

当组件采用固定布局方式时，选中组件，通过鼠标右键菜单，可以设置叠放次序（置于顶层、置于底层、上移一层、下移一层）、组件定位方式（系统默认水平左定位、竖直上定位），根据需要设置组件定位方式后，系统将根据显示界面的大小自动适应。如图：

注意：

1. 组件定位方式选择居中定位方式后，拖动组件将不会改变位置。例如：设置水平居中，则无论拖动组件到哪个位置，水平方向的位置不会改变，仅竖直方向位置变化；采用竖直定位的方式，效果同样；如果两者均设置为居中，拖动组件则无效。

2. 拖动组件超出原所属容器范围将被添加到新容器内，拖动多个效果一样。

1.10.3.3.4    组件排版

鼠标右键菜单如下图所示：

注意：

如果组件达到3个及以上，对齐设置将增加横向分布、纵向分布选项设置。

1.10.3.3.5    删除容器

注意：对于嵌套了多层的容器，如何快速选中容器外层进行删除？ 点击工具栏中的“ ”选中上层，选中容器外层，通过鼠标右键菜单“ ”进行删除。

1.10.3.3.6    工具组件面板

鼠标右键菜单支持浮起、关闭设置。

1.10.3.3.7    文件设置

提供设置为主页、预览、删除、重命名、克隆、下载设置菜单。

1.10.3.4        对象面板

对象面板区提供资源面板、工具组件面板、结构树面板、文件面板。 用户点击“  ”可以设置对象面板栏浮起，点击“ ”可以将对象面板栏收拢。

1.10.3.4.1         资源面板

资源面板如下图所示：

1.10.3.4.2    工具组件面板

工具组件面板：包括布局、基本组件、高级组件，主要应用于门户与登录页面的设计。 支持添加(拖入)容器、拖入组件、拖动组件/容器到不同的父容器内、删除容器/组件等操作；支持选中容器/组件 - 点击选中，ctrl多选组件；支持编辑容器/组件属性值；支持编辑容器 - 增删行列，画笔，橡皮擦，设置容器布局；支持编辑组件 - 拖动大小，拖动位置，键盘微调位置，设置组件层级，组件对齐方式；支持复制粘贴容器/组件、撤销重做。

1.10.3.4.3    结构树面板

    结构树面板如图所示：这里可以查看门户的结构层次，点击相应的组件时会在编辑区中高亮显示。

1.10.3.4.4    文件面板

    文件面板如图所示：这里列出了已保存的门户文件，双击可以打开编辑。

1.10.3.5        属性面板

属性面板提供了对象的属性编辑选项，根据所选择对象的不同，面板栏显示不同的属性选项，并支持脚本配置。