起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 28759|回复: 40

新portal介绍

  [复制链接]

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
发表于 2013-1-15 10:42:04 | 显示全部楼层 |阅读模式
      X5平台在2000版本之后,推出了新的门户。新门户主要的特点是对于平板电脑更友好,界面更时尚并且容易定制。新门户采用组件的思路开发,样式和代码分离,结构清晰更易于修改和定制开发。 同时,新门户是完全采用X5界面模型开发的,采用.w和.j来实现,所有代码开发者都可以看到,更便于掌握和修改。

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

86

主题

12万

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28447
发表于 2013-1-15 17:30:07 | 显示全部楼层
在老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. }
复制代码

点评

大赞   发表于 2015-4-21 16:56
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 10:42:22 | 显示全部楼层

登录页相关资源

/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
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 10:46:52 | 显示全部楼层

首页相关资源

/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
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 11:10:24 | 显示全部楼层

首页介绍

首页使用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">
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 11:31:33 | 显示全部楼层

首页—head—介绍

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中
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 11:49:14 | 显示全部楼层

首页—content—介绍

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>
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 11:55:19 | 显示全部楼层

功能树介绍

功能树是用两个组件实现的,一个是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.         for(var i in nodes.childNodes){
  16.             var item = nodes.childNodes[i],
  17.                 serverName = window.location.pathname.split('/')[1],
  18.                 style = ((item.icon16 || item.icon))? ('style="background-image: url(/' + serverName + (item.icon16 || item.icon) + ');background-repeat:no-repeat;padding-left:24px"') : undefined;

  19.             var li = $('<li role="' + item.role + '"><a href=\'#\' ' + style + '>' + item.label + '</a></li>');
  20.             item.el = li;
  21.             if(item.url)
  22.                 li.click((function(item){
  23.                     return function(){
  24.                         me.funcMng.runFunc(item);
  25.                     }
  26.                 })(item));
  27.             li.append(genTree(item, level + 1,me));
  28.             ul.append(li);
  29.         }
  30.     }               
  31.     return div;
  32. }
复制代码
以上代码遍历了整个功能树
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 13:13:49 | 显示全部楼层

获得登录者信息

在执行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里面的方法获取
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 14:20:52 | 显示全部楼层

添加模块(widget)

1、模块在应用的 config 目录里面的 xxx.widget.xml 文件中定义
2、模块中显示的功能分配权限后,才能看到该模块
3、建议使用门户默认布局管理和门户默认布局分配功能设置登录者的默认布局
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9469

帖子

5061

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5061
QQ
 楼主| 发表于 2013-1-15 14:29:47 | 显示全部楼层

新portal中的组件

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

远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2019-8-26 08:26 , Processed in 0.059272 second(s), 29 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表