创建门户

1.概述

门户是实现个性化、分业务群展现的重要手段，能够将用户关心的内容集中在一起，提供快速访问的通道。

下图是一个供数据消费者访问的门户，其中我们在数据资源目录中挂载了数据资源门户，数据产品目录挂载了数据产品门户，而个人中心挂载了“我的服务”、”我的分析”和”修改密码”等。

本文主要介绍如何制作上图所示门户。

2.操作步骤

2.1新建门户

点击-【门户管理】-【新建】

我们以“网页风格”模板为例进行创建，并在【门户标题】中编辑好门户名称，模板创建后如下图

2.2调整门户顶部

首先需要替换模板中的原有logo（如需删除，右键“删除”即可），右键点击该logo图片，点击“属性”。在右侧【属性面板】中找到背景图片属性，点击，进入【选择文件】页面

在此页面必须先点击“门户图标”（门户图标目录下才能上传文件），将新替换的图片通过“上传本地文件”进行上传，选中新上传图片并点击确定（灰色文字部分为资源管理器中该文件所在路径）

替换后效果如下

鼠标按住拖拉调整logo到合适大小和位置。模板中logo是用简单面板组件实现的，也可以删除后添加图片组件来实现logo。

然后需要替换门户顶部区域的背景图片，选中该区域所在容器，右键“属性”打开属性面板，替换背景图片操作同上，不再赘述。

背景图片替换后效果如下

我们再修改一下门户顶部的高度，使其更美观。选中该区域所在容器，在【属性面板】中勾选“高度固定”，编辑最小高度改为合适数值（此处示例为120），如下图

2.3挂载资产门户

接下来我们编辑菜单栏，左键双击“菜单组件1”，在【菜单编辑对话框】中选中“菜单组件1”

在右侧【菜单栏配置】中，可编辑标题信息为：数据资源目录，点击链接后方的，从【公共平台服务器】-【数据资产】-【服务门户】-【门户管理】找到“数据资源门户”，选中并确定。

打开方式默认为菜单栏下方的子窗口：iframe1，如需修改可根据提示进行下拉选择，如下图。

此时，点击工具栏中的“预览”，目前门户的效果图如下

按照上述步骤，同理将“菜单组件2”改为“数据产品目录”并链接对应资源。

2.4创建子页面

因为平台中没有现成的【个人中心】资源可供我们在【链接】中使用，所以我们需要再新建一个页面，并将其制作成我们所需要的效果。

点击左上角【新建】，选择“从空页面创建”

从左侧【工具】-【布局】中拖入“左右型布局”至新门户中。给左侧容器设置背景颜色。

并设置左侧容器为“固定宽度”，设置“最小宽度”为240。

这时，右侧容器的最小宽度默认为百分比，需要调整成像素值，去掉%即可。

从【工具】-【高级组件】将【树】拖动至左侧容器，双击添加的树组件进入【树编辑对话框】

点击可新建当前节点下的“子节点”

点击则新建当前节点的“同级节点”

点击删除当前节点，点击或则上升当前节点层级，点击或则下降当前节点层级

新建1个子节点，编辑其【标题】修改为“我的服务。输入【链接】为：/上下文根/web/edataasset/myservice/toMyService.do

【图标】可在“门户图标”上传本地图标或选择平台中的“资源图标”

按照以上步骤新增2个“同级子节点”，分别命名为“我的分析”和“修改密码”，如下图

“我的分析”链接地址为：/上下文根/web/edataasset/myservice/toMyAnalysis.do

“修改密码”链接地址为：/上下文根/web/eacl/userset/setpw.do

从左侧【工具】中将“子窗口”拖至右侧容器中，用于展示打开的页面

在【树】的【属性面板】中添加鼠标单击事件，使用户点击【树】的各节点页面在子窗口iframe1中打开，脚本如下：

function(item){

if(!item) return;

var url = item.url;

if(!url) return;

var urlparams = item.urlparams;

var iframe = $p.$("iframe1");

var index = iframe.setUrl(url,urlparams);

}

最后，点击【保存】，保存page1页面。

2.5挂载子页面

切回到page页面，双击第三个菜单组件，修改标题为“个人中心”，在链接处选中刚刚新建的子页面，最后点【确定】。删掉多余的菜单组件。

2.6预览保存

点击左上角【保存所有】，然后【预览】效果如下