新portal介绍

zhaixin

      X5平台在2000版本之后，推出了新的门户。新门户主要的特点是对于平板电脑更友好，界面更时尚并且容易定制。新门户采用组件的思路开发，样式和代码分离，结构清晰更易于修改和定制开发。 同时，新门户是完全采用X5界面模型开发的，采用.w和.j来实现，所有代码开发者都可以看到，更便于掌握和修改。

新门户的代码资源在 /UI/portal2/process/portal目录下

jishuang

在老portal的登录页面上添加一个checkbox，选择后登录跳转到新portal首页

/UI/portal/login.w中修改
1.添加checkbox选项

1. <div class="remember_div">
   
2. <input id="remember_checkbox" type="checkbox" checked="checked"/>
   
3. <span class="lable" style="vertical-align:middle">记住用户名</span>
   
4. <input id="maximize_checkbox" type="checkbox"/>
   
5. <span class="lable" style="vertical-align:middle">最大化</span>
   
6. <input id="newPortal_checkbox" type="checkbox" />
   
7. <span class="lable" style="vertical-align:middle">新Portal登陆界面</span>
   
8. </div>

复制代码

2.初始newPortal_checkbox

1. $.jpolite.Login.initRememberCheckbox("remember_checkbox"); // 初始化记住设置选择框
   
2. $.jpolite.Login.initMaximize("maximize_checkbox"); // 初始化记住最大化选择框
   
3. $.jpolite.Login.initLoginButton("login_button"); // 初始化登陆按钮
   
4. $.jpolite.Login.initNewPortalCheckbox("newPortal_checkbox"); //初始化跳转到新portal选择框
   
5. //$.jpolite.Login.initCancelButton("cancel_button"); // 初始化取消按钮

复制代码

/UI/portal/system/js/login.js中修改
1.定义login.w中用到的initNewPortalCheckbox

1. initNewPortalCheckbox:function(checkboxID){
   
2. this.items.newPortalCheckbox=$("#"+checkboxID).change(function(){
   
3. $.cookie("justep-full-screen", $.jpolite.Login.items.newPortalCheckbox.get(0).checked, {expires:7,path:'/'});
   
4. });
   
5. },

复制代码

2.页面的跳转
把如下代码

1. if($.jpolite.Login.items.maximizeCheckbox.get(0).checked){
   
2. if(!window.opener){
   
3. $.jpolite.Login.maximize();
   
4. }else{
   
5. window.location.href = window.location.href.replace(/login.*\.w.*/, $.jpolite.Login.indexPage) + "?timestamp=" + new Date().valueOf();
   
6. }
   
7. }else{
   
8. window.location.href = window.location.href.replace(/login.*\.w.*/, $.jpolite.Login.indexPage) + "?timestamp=" + new Date().valueOf();
   
9. }

复制代码

修改为

1. var bsessionid = data.bsessionID;
   
2. if($.jpolite.Login.items.newPortalCheckbox.get(0).checked){
   
3. alert(2);
   
4. window.location.href = window.location.href.replace(/\/portal\/login\.w.*/, '/portal2/process/portal/index.w')+"?bsessionid="+bsessionid+"×tamp=" + new Date().valueOf(); ;
   
5. }else{
   
6. if($.jpolite.Login.items.maximizeCheckbox.get(0).checked){
   
7. if(!window.opener){
   
8. $.jpolite.Login.maximize();
   
9. }else{
   
10. window.location.href = window.location.href.replace(/login.*\.w.*/, $.jpolite.Login.indexPage) + "?timestamp=" + new Date().valueOf();
    
11. }
    
12. }else{
    
13. window.location.href = window.location.href.replace(/login.*\.w.*/, $.jpolite.Login.indexPage) + "?timestamp=" + new Date().valueOf();
    
14. }
    
15. }

复制代码

zhaixin

/UI/portal2/process/portal/login.w
/UI/portal2/process/portal/login.js
/UI/portal2/process/portal/login.css
/UI/portal2/process/portal/login/images下的图片
/UI/portal2/process/portal/components/login/login.js
/UI/portal2/process/portal/components/login/login.css

zhaixin

/UI/portal2/process/portal/index.w
/UI/portal2/process/portal/index.js
/UI/portal2/process/portal/index.css
/UI/portal2/process/portal/index/images下的图片
/UI/portal2/process/portal/components/all.js
/UI/portal2/process/portal/components下的图片和css

zhaixin

首页使用div布局，包含两个大的div，一个是main，用于显示首页的内容，另一个是funcFrame，用于显示打开的功能页面。main又包含3个div，其中topPanel显示设置信息；head显示logo、登录人信息、常用功能等几个按钮；content包括已打开功能区域、常用功能区域、功能树区域、模块（widget）区域。

首页div结构如下
                <div id="main">
                        <div id="topPanel">
                        <div class="head">
                        <div class="content" style="position:relative">
                <div id="funcFrame">

zhaixin

head是一个宽度是100%，高度是114px;的区域，使用 index/images/bg-head.png 平铺。
其中调试模式提示框显示在固定的位置；
logo显示在左侧，里面显示 index/images/logo.png
右侧分为上下两个区域，上面显示登录人、登录日期、设置按钮、注销按钮；下面显示常用功能、已打开功能、功能列表3个按钮

head中div结构如下
        <div class="head">
                <div class="inner">
                        <div class="debug-mode" title="当前运行在调试模式下"/>
                        <div class="logo"/>
                        <div class="main">
                                <div class="bar">
                                <div class="menu">

这里面涉及的样式都在index.css中

zhaixin

content是一个宽度是100%，高度自动调整的区域。从上到下依次显示已打开功能、常用功能、功能树、模块（widgets）区域。

content中div结构如下
        <div class="content" style="position:relative">
                <div class="inner" style="position:relative">
                        <div id="b1"></div>
                        <div id="b2"></div>
                        <div class="fun-map" id="cv1"></div>
                        <div id='portal'></div>
                </div>
        </div>

zhaixin

功能树是用两个组件实现的，一个是FuncManager，提供方法用于获取功能树、遍历功能树等操作。另一个是FuncTreeView，用于以横向的方式展开功能树。

下面是在index.js中，创建这两个对象的代码
        var funcMng = new FuncManager({
                bsessionid : _config.bsessionid,
                data : _config.functree.childNodes,
                customizer : customizer,
                agents : _config.agents
        });

        var view = new FuncTreeView({
                id:'cv1',
                funcMng: funcMng
        });

其中：_config见下面的帖子 获得登录者信息

初始化功能树的代码在 all.js 的 FuncTreeView.prototype.init 方法中
系统提供的横向展开功能树的做法是
      调用 FuncManager.prototype.getFuncTree 获得功能树
      调用 FuncTreeView.prototype.createColumn 显示菜单
      调用 FuncTreeView.prototype.createDetail 显示功能信息
      调用 FuncTreeView.prototype.extend 展开下一级菜单
      调用 FuncManager.prototype.runFunc 打开功能

如果要把功能树改为树形结构展示，可以在 all.js 的 FuncTreeView.prototype.init 方法中加入下面的代码

1. for(var i=0; i < this.data.length; i++){
   
2.     var item = this.data[i];
   
3.     var dt = $("<dt class=\'\'><span  title='" + item.label + "'>" + item.label + "</span></dt>");
   
4.     var dd = $('<dd></dd>');
   
5.     var ul = genTree(item, 0, this);
   
6.     dd.append(ul);
   
7.     this.el.append(dt);
   
8.     this.el.append(dd);
   
9. }
   
10.                
    
11. function genTree(nodes, level, me){
    
12.     var div = $('<div class=\'\'></div>');
    
13.     if (nodes.childNodes && (nodes.childNodes.length > 0)) {
    
14.         var ul = $('<ul></ul>').appendTo(div);
    
15. 
    
16.         for(var i in nodes.childNodes){
    
17.             var item = nodes.childNodes[i],
    
18.                 serverName = window.location.pathname.split('/')[1],
    
19.                 style = ((item.icon16 || item.icon))? ('style="background-image: url(/' + serverName + (item.icon16 || item.icon) + ');background-repeat:no-repeat;padding-left:24px"') : undefined;
    
20. 
    
21.             var li = $('<li role="' + item.role + '"><a href=\'#\' ' + style + '>' + item.label + '</a></li>');
    
22.             item.el = li;
    
23.             if(item.url)
    
24.                 li.click((function(item){
    
25.                     return function(){
    
26.                         me.funcMng.runFunc(item);
    
27.                     }
    
28.                 })(item));
    
29.             li.append(genTree(item, level + 1,me));
    
30.             ul.append(li);
    
31.         }
    
32.     }               
    
33.     return div;
    
34. }

复制代码

以上代码遍历了整个功能树

zhaixin

在执行index.w文件时，会执行/UI/portal2/process/portal/dsrc/Index.java，在java中将bsessionid、功能树信息、代理信息、首页配置信息存入config中，在index.w中执行js代码 var _config = ${config};，将java中的config存入_config中

index.w中的代码如下
<xui:resource id="resource1">
        <xhtml:script type="text/javascript"><![CDATA[
                var _config = ${config};
        ]]></xhtml:script>
</xui:resource>

当前人信息通过justep.Context里面的方法获取

zhaixin

1、模块在应用的 config 目录里面的 xxx.widget.xml 文件中定义
2、模块中显示的功能分配权限后，才能看到该模块
3、建议使用门户默认布局管理和门户默认布局分配功能设置登录者的默认布局

zhaixin

组件	描述
AdvancedSet	高级设置组件
AgentList	代理列表
Dialog	对话框组件
FlagBar	带标志的按钮组件，如常用功能按钮
FuncFrame	运行的功能
FuncManager	功能数据组件，包括功能树数据、常用功能数据、已打开功能数据
FuncTreeView	功能树显示组件
PortalManager	模块数据组件
PortalSet	模块设置组件
PortalView	模块区域显示组件
QuickList	常用功能组件
Reminder	提醒组件
SetPwd	密码设置组件
SliddingPanel	滑动面板组件，如设置
sortablebar	已打开功能
Tab	页签组件，如基本设置
WidgetLayout	模块内部布局组件