Portal如何对主题定制开发

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作为展示层给我们所带来的便捷，在对主题定制开发后客户可以随心的根据自己的喜好改变网站主题，而不再是定制网站的千篇一律、一层不变。可能有的人会说瑕不掩瑜，功能强大才是真理，但是有没有想过如果一道菜没有一个好的品相可能美食家连碰都不会去碰，那又何谈美味呢？