1. 概述

随着互联网行业的迅速发展,在实际开发中也越来越趋于敏捷化快速化,对于前台与后台的开发各式各样的框架体系应运而生,方便开发的同时也大大的缩短了开发周期,而Portal作为门户平台实现了以组件的形式对门户网站进行快速配置,也正是这种独特的方式使得Portal备受推崇。

Portal与定制网页的不同在于定制网页开发只会根据需求进行开发,Portal则可以根据需求对不同的主题及色调进行切换,其中的主题可以根据需求进行定制开发,也就是说只需要对主题单独的进行开发就可以完成页面不同样式之间的切换,而内容则是通过需求进行组件的配置,实现了内容与主题的分离,对于页面的展示更加灵活,本文则是对Portal的主题开发进行诠释。

2. AEAI PORTAL

2.1 产品介绍

AEAI Portal作为数通畅联的核心产品之一,其主要功能在于门户平台的展现,实现了对页面,菜单的集成以及统一门户认证实现单点登录的功能。对于多个异构系统内容实现了通过门户平台的一次性展现,而且用户可以根据需求对展现的内容实现自由的配置,具有灵活可变的特性。

2.2主题应用

在数通畅联的AEAI Portal产品中预置了多个个性主题可供选择,针对于不同的客户也可根据客户的需求对相应的主题进行修改和二次开发,而不是对整个页面进行重新编写,这样的操作既满足了客户的需求也大大的缩短了开发周期,真正意义上实现了敏捷开发的核心思想。

3. 实现过程

1.  进入Portal控制台选择“主题管理”功能(本文代码以后台标准主题为例,虽然主题的代码编写方式不同但结构基本相同);

2. 进入“主题管理”后找到需要修改的主题所对应的jsp页面(主题页面位于theme包下);

3.进入MiscdpStudio找到需要修改的jsp页面,按照需求对内容进行修改;

4.进入主题jsp页面,根据需求修改显示内容

当需要修改头部显示的信息时需要对以下代码进行修改:

<header class="main-header">

<a href="javascript:void(0)" class="logo">

<span class="logo-mini">数通畅联</span>

<span class="logo-lg">企业应用中心</span>

</a>

<nav class="navbar navbar-static-top">

<a class="sidebar-toggle">

<span class="sr-only">Toggle navigation</span>

</a>

<div class="navbar-custom-menu">

<ul class="nav navbar-nav">

<!--

<li class="dropdown messages-menu">

<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">

<i class="fa fa-envelope-o "></i><span class="label label-success">4</span>测试连接

</a>

</li>

-->

<li class="dropdown user user-menu">

<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">

<img src="<%=themeRelativePath%>/images/System.jpg" class="user-image" alt="User Image">

<span class="hidden-xs"><%=userName%><i class="fa fa-caret-down" style="padding-left:5px;"></i></span>

</a>

<ul class="dropdown-menu pull-right">

<li><a class="menuItem" href="javascript:openModifyPasswordBox()"><i class="fa fa-user"></i><%=resourceBundle.getString("CommonMenu.changedPassword")%></a></li>

<li><a class="menuItem" href="javascript:openPersonalThemeBox('<%=navigaterId%>')"><i class="fa fa-puzzle-piece"></i><%=resourceBundle.getString("CommonMenu.themeSetting")%></a></li>

<li><a class="menuItem" href="javascript:openPersonalColorBox('<%=navigaterId%>','<%=themeId%>')"><i class="fa fa-delicious"></i>色调设置</a></li>

<%if (isAdmin){%>

<li><a id="portletConfigA" οnclick="changeInnerMode()"><i class="fa fa-pencil-square"></i><%=modeText%></a></li>

<li><a href="/portal/entry/00"><i class="fa fa-wrench"></i>门户管理</a></li>

<%}%>

<li class="divider"></li>

<li><a href="javascript:void(0);" οnclick="logout()"><i class="ace-icon fa fa-power-off"></i>安全退出</a></li>

</ul>

</li>

</ul>

</div>

</nav>

</header>

当需要修改左侧导航信息时需要对以下代码进行修改:

<div class="main-sidebar">

<div class="sidebar">

<ul class="sidebar-menu" id="sidebar-menu">

<li class="header" style="padding-left:19px;font-size:13px"><i class="fa fa-th-large" style="margin-right: 5px;"></i>导航菜单</li>

</ul>

</div>

</div>

当需要修正文处显示的样式时需要对以下代码进行修改:

<div id="content-wrapper" class="content-wrapper">

<div class="content-tabs">

<button class="roll-nav roll-left tabLeft">

<i class="fa fa-backward"></i>

</button>

<nav class="page-tabs menuTabs">

<div class="page-tabs-content" style="margin-left: 0px;">

</div>

</nav>

<button class="roll-nav roll-right tabRight" style="right:120px;">

<i class="fa fa-forward" style="margin-left:3px;"></i>

</button>

<button class="roll-nav roll-right fullscreen" style="right:80px;">

<i class="fa fa-arrows-alt"></i>

</button>

<div class="roll-nav roll-right" style="right: 40px;">

<button class="dropdown" data-toggle="dropdown" style="right: 0px;" aria-expanded="false">

<i class="fa fa-gear" style="padding-left: 3px;"></i>

</button>

<ul class="dropdown-menu dropdown-menu-right">

<li><a class="tabReload" href="javascript:void(0);">刷新当前</a></li>

<li><a class="tabCloseCurrent" href="javascript:void(0);">关闭当前</a></li>

<li><a class="tabCloseAll" href="javascript:void(0);">全部关闭</a></li>

<li><a class="tabCloseOther" href="javascript:void(0);">关闭其它</a></li>

</ul>

</div>

<div class="roll-nav roll-right" style="right: 0px;">

<button class="dropdown" data-toggle="dropdown" style="right: 0px;" aria-expanded="false">

<i class="fa fa-heart" style="padding-left: 3px;"></i>

</button>

<ul id="favoriteMenu" class="dropdown-menu dropdown-menu-right">

<li><a οnclick="addMyFavoritePage('<%=navigaterId%>')" href="javascript:void(0);">加入收藏夹</a></li>

<li><a οnclick="setupPersonalFavorite('<%=navigaterId%>');" href="javascript:void(0);">管理收藏夹</a></li>

<li class="divider"></li>

</ul>

</div>

</div>

<div class="content-iframe" style="overflow: hidden;">

<div class="mainContent" id="content-main">

</div>

</div>

</div>

</div>

4. 注意事项

1. 由于主题页面无对应的控制层,所以其显示内容基本为作用域获取的,一般情况下在主题的区域不建议放置过多的动态数据,如无法避免需要在主题内扩展显示动态数据可通过js调用rest服务进行获取。

2. 由于页面内容多为通过js进行标签的拼接以及数据的展示,所以在修改此类数据时需要谨慎。

3. 在完成主题的新增后需要在控制台中根据对应的jsp页面新增相应的主题后方可应用。

5. 个人总结

Portal作为一个能快速搭建门户网站的平台被广大计算机爱好者以及受众人所熟知,而作为数通畅联的核心产品之一的AEAI PORTAL也正是秉承了这一理念并在其原有的基础上进一步的进行封装,在保留其干净整洁的页面同时也使其功能更为强大,使用更加便捷,操作更加简单。也正是通过对门户主题的修改和二次开发深深体会到portal作为展示层给我们所带来的便捷,在对主题定制开发后客户可以随心的根据自己的喜好改变网站主题,而不再是定制网站的千篇一律、一层不变。可能有的人会说瑕不掩瑜,功能强大才是真理,但是有没有想过如果一道菜没有一个好的品相可能美食家连碰都不会去碰,那又何谈美味呢?

Portal如何对主题定制开发相关推荐

  1. 打印容器_化妆品行业是如何通过3D打印来定制开发产品的?

    随着各行各业都开始将3D打印技术与传统的生产模式相结合,化妆品产业也在借由3D打印技术来进行个性化定制,以往化妆品的包装容器等等都主要采用的是手工或CNC工艺制作,但是这些过程不仅流程繁琐复杂,而且成 ...

  2. Essential Studio for Windows Forms发布2017 v2,持office 2016和主题定制

    2019独角兽企业重金招聘Python工程师标准>>> Essential Studio for Windows Forms是一个帮您创建高性能的Windows应用程序的Window ...

  3. 企业软件定制开发的流程,有五点是需要注意的!

    企业软件定制开发的流程,有五点是需要注意的! 2020-05-30 12:32:59 在开发软件层面,挪动应用程序开发设计的渐近旅途不可忽视,由于全部重特大意外惊喜的小故事并沒有一天出現. 以便完成宏 ...

  4. poscms清除html,poscms用法总结(非定制开发,不涉及后台代码)

    这些天几个企业站仿下来,对poscms的用法多少有些了解了,在这个记录一下,好记性不如烂笔头嘛. 1.静态文件目录和模板文件目录 这两个目录分别放置css/js/image等静态文件和html模板文件 ...

  5. ExtJs皮肤主题定制 sencha Themer

    ExtJs皮肤主题定制 sencha Themer 1 介绍 在Ext JS中创建自定义主题一直是一项挑战.但是使用Sencha Themer可以大大提高你的开发效率. 2 准备工作 确保您拥有Sen ...

  6. Android10/11 原生Launcher3深度定制开发

    一.引言 关于Android10和11系统Launcher3的定制有很多,根据项目的需求会进行各种定制开发, 于是就需要研究Launcher3的源码.本文主要从Android 11的Launcher3 ...

  7. ERP软件定制开发需注意哪些问题?ERP定制开发要多长时间?

    多企业想选择定制开发ERP软件,但不清楚要怎么找,用什么标准去找软件开发商,前畏虎后怕狼,找来找去,犹如一团乱麻,那么ERP软件定制开发需注意哪些问题?要按照什么标准找,ERP定制开发要多长时间,要做 ...

  8. 关于如何定制开发Android第三方ROM,最全开发教程、原理阐述

    一.首先,搞明白ROM的概念. 广义上对于ROM,有两种定义: 1.官方原厂ROM. 就是官方适配的ROM,无修改,原汁原味由品牌厂商自己定制开发的ROM. 2.第三方定制ROM. 意思很明确,就是经 ...

  9. 网站定制开发需要注意那些 ?

    企业网站建设对于一个企业品牌及推广宣传是十分重要的.当前很多软件开发公司或者网站建设公司都有品牌网站开发.高端网站定制等业务,但有些软件开发公司自己的网站做的并不很好,这也从一定程度上反映出这个网站建 ...

最新文章

  1. Android 侧划菜单
  2. 电容和频率的关系_为什么会有直流电和交流电?频率为什么是50hz?白话科普专业知识...
  3. cannot create file怎么解决_内核问题解决方法记录
  4. Postfix+dovecot+extmail+sasl+mysql源码安装手册
  5. tensorboard 远程
  6. java gui 控制台_在GUI面板中创建Java控制台
  7. 后台和前台对转义符号'/'同时起作用的例子
  8. 「CodePlus 2017 11 月赛」可做题
  9. Hadoop的多节点集群启动,唯独没有namenode进程?(血淋淋教训,一定拍快照)(四十五)...
  10. python table_用python解析word文件(二):table
  11. vue-webpack项目本地开发环境设置代理解决跨域问题
  12. 优秀的互联网项目经理/市场总监如何选择给力的互联网技术实现团队?
  13. 一套提取自 Ant Design 的优质图标
  14. [活动]问卷调查:打造更好用的Visual Studio 2008
  15. [杂记]注册电气工程师考试复习及考试杂谈
  16. 实战SATA硬盘安装64位XP(转)
  17. 《彻底卸载chrome及注册表清理》
  18. 精约而不简单 极速迅雷只为下载而生
  19. (java)Climbing Stairs
  20. 快速将非Word中的不可编辑的公式转换为Word文档中公式编辑器里可编辑的公式的办法

热门文章

  1. 64位格式化字符串漏洞利用——axb_2019_fmt64
  2. BUUCTF axb_2019_fmt32(格式化字符串漏洞)
  3. 一年级男生上课不专心,说了很多次都不改!
  4. 前端获取用户ip地址,并放在请求头上(uniapp和H5)
  5. 文献阅读笔记(1)JSSC-清华Sticker ai芯片
  6. Keil编程常见错误及解决方案(持续更新)
  7. 吉天wms智能仓储物流管理系统
  8. 万能的越狱视频下载器:从iOS应用中提取视频
  9. BiLSTM+CRF
  10. 五种常见掩盖真实IP的网络攻击追踪