门户开发-页面及元素组件介绍-门户管理-O2OA企业应用开发平台-人人都是协同系统开发专家

门户开发-页面及元素组件介绍

时间：2023-03-17

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力，平台通过门户定制，可以根据企业的文化，业务需要设计符合企业需要的统一信息门户，系统首页等UI界面。从本篇开始介绍门户开发中直接可以拖拽使用的系统已有元素组件。

一、先决条件

1、O2Server服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署O2OA》

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录O2OA(翱途)开发平台，如：xadmin

3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》

二、页面设计器说明

image (1).png

页面组件元素列表：存放页面设计组件和元素的区域，通过拖拽，可以将设计组件和元素添加到页面设计区。
页面工具栏：保存页面、预览页面等操作按钮。
页面设计区：页面的可视化编辑区域。
页面元素区：页面中所有的设计元素在列表中按层次结构列出。当此区域中的元素被选中时，页面设计区中的相应元素也被选中，反之亦然。
页面属性区：页面和设计元素的属性可以在此编辑。当在页面设计区中选中设计元素时，此区域显示所选设计元素的属性；当页面设计区中未选择任何设计元素时，此区域显示当前页面的属性。

页面设计步骤

接下来，是对页面的编辑，可以按以下步骤进行：

所有页面可用组件都在页面组件元素列表区列示，可以通过拖拽的方式添加到页面的相应位置。

点击组件的菜单按钮，可以看到目前组件分为几个大类，分别是表单组件、布局组件、数据组件、功能组件和Element组件。

组件包含如下：容器、文本、文本字段、人员组织、日期选择、多行文本、下拉框、单选框、多选框、地址、组合框、数据表格、数据模版、Iframe、HTML、树、嵌入视图、嵌入统计、平台应用、SmartBI报表，还有很多Element组件等等，组件功能非常丰富！

页面基本属性如下表：

属性	描述	备注
标识	页面的唯一标识	自动生成
名称	页面的名称	必填，同一个门户内不可重名
描述	页面的描述
图标	可以为页面设置一个图标
预加载脚本	可以为页面增加一个脚本，在页面加载之前执行	预加载脚本有缓存，速度会比较快
样式	可以为页面定制CSS样式	页面可以是看作是一个容器，它对应HTML的一个DIV对象，您可以为这个DIV对象设置CSS样式和HTML属性。
属性	可以为表单设置HTML属性
CSS	可以在此编写CSS，用于页面内元素的样式渲染

页面的事件包含两种：一种是页面容器对应的DIV对象的DOM事件，一种是页面系统事件。页面主要事件如下表：

事件名	描述
beforeLoad	表单被载入之前执行。
queryLoad	表单被载入之前执行。
beforeModulesLoad	在表单已经初始化，但表单中的元素加载之前执行
afterload load postLoad	表单被载入之后执行，不能确保子表单元素或一些异步元素加载完成，如要严格在所有元素加载完成后执行，请使用afterModulesLoad事件。
afterModulesLoad	在表单所有元素载入完成后执行。
beforeClose	表单窗口被关闭之前。

表单容器的DOM事件请参考相关HTML规范。可参考：
MDN:HTMLDivElement

logo_all@1.5x.png

以上是门户应用中对应的页面设计器的简单说明，希望对您有帮助，关于门户页面开发的更多介绍请参考以下文章：