变更风格包
生产线项目有多个风格包可以选择。并且可以在当前应用的风格包基础上定义自己的样式。
Option1:产品模型下载风格包样式文件。
在产品模型，产品配置-项目级-外观，选择合适的框架风格。这里选择科协蓝风格
在产品模型右上角的扩展，进入产品模型-扩展部分,下载文件夹endpoints。
endpoints是产品原型演示用的静态文件，在endpoints找到文件夹plugin，plugin里面的文件，就是我们这次用到的风格包样式文件。
Option2:源码使用风格包样式文件。
step1：引入plugin
- 用下载的plugin替换项目源码中的plugin。源码路径为：pspl5example\src\main\webapp\plugin
step2：修改login页样式
编辑login.jsp，修改body里的代码为
<body> <div id="content"> <div class="allwrap"> <div id="headnav"> <div class="logo"> <img src="plugin/images/logo.png"> <span>${appName}</span> </div> </div> <div class="login-wrap login_bg "> <div class="login-layout "> <%@ include file="/WEB-INF/views/loginMinForm.jsp" %> </div> </div> </div> </div> </body>
编辑loginMinForm.jsp，修改login.css的引用
<!-- <link href="${contextPath}/static/css/login.css?v=${appVersion}" rel="stylesheet" type="text/css" /> --> <link type="text/css" href="${contextPath}/plugin/css/login.css" rel="stylesheet" type="text/css">
对页面进行细节的调整，使它更像风格包的样式。这里注释了自动登录, 登录控件由input 改为 button。
此时登录页已经很像风格包风格了。
- static/css/bootstrap.min.css样式与当前风格包存在轻微的样式冲突，如果对当前系统登录页的样式不满意，可以在当前jsp和plugin 进行更多的定制。
step3：修改Main页样式
- 编辑main.jsp，在head 中引入plugin里的main.css,menu.js, 删除旧的static/css 。引入 static 的avalon.js。
<head>
<%@ include file="/WEB-INF/ref/head.jsp" %>
<link href="${contextPath}/plugin/css/main.css?v=${appVersion}" type="text/css" rel="stylesheet" />
<script src="${contextPath}/plugin/js/menu.js?v=${appVersion} type="text/javascript"></script>
<script src="${contextPath}/static/js/avalon.js?v=${appVersion}" type="text/javascript"></script>
..........
- 编辑main.jsp，修改 head 中的js 代码
<script type="text/javascript" id="declaration">
avalon.config({debug: false});
var menuOptions = {};
var zNodes = [];
var dataSchema = {
systemName: 'spl5-example',//系统名称
curSubsystem: '', // 当前子系统
userInfo: {
userName: 'zhangsan',
personName: '张三',
},
subSystems: [],
topRightMenus: [
{
name: '退出',
onclick: function () {
window.location = 'login.html';
}
}
]
};
var vm = avalon.define({
$id: 'app',
data: dataSchema,
methods: {
showTab: function (e) {
$(e.target).tab('show');
return false
}
}
});
</script>
<script id="783475897346" pm>
var menuOptions = { homeUrl: 'desktop' };
var subSystems = {};
defaultSubsystems = [];
var zNodes = {};
</script>
<script jsp id="2348903485">
zNodes = z.toMap('${menus}', true);
function getSubsystemInfo() {
return {}
}
</script>
<script id="6339034590" pm>
function logout() {
$.ajax({
url: window.ctxPath + '/logout',
type: 'get',
success: function (result) {
window.location = window.ctxPath + '/login';
}
});
};
function releaseRunAs() {
$.ajax({
url: window.ctxPath + '/sysmgt/userList/releaseRunAs',
type: 'get',
success: function (result) {
window.location = window.ctxPath;
}
});
}
$(document).ready(function () {
if (window != window.top) {
window.top.location.href = window.location.href;
return;
}
var homeUrl = z.getValueFromQueryString('desktop');
if (homeUrl) {
menuOptions.homeUrl = homeUrl;
}
var m = $.menu(menuOptions);
window[z.settings.mainWindowMenus] = m;
if (!subSystems.length) {
m.render(zNodes);
} else {
var index = z.getValueFromQueryString('subSystem') || 1;
m.render(zNodes, index);
}
});
</script>
<script type="text/javascript" pm>
// 样例数据
function switchSubsystem(nodeIndex, fileName, title) {
var param1 = 'subSystem=' + nodeIndex;
var param2 = 'desktop=' + fileName;
var param3 = 'title=' + title;
window.location.search = param1 + '&' + param2 + '&' + param3; // 跳转
}
var subSystems = defaultSubsystems,
systemName = 'spl5-example',
curSubsystem = '当前子系统',
departmentName='单位名称',
userInfo = {
userName: 'zhangsan',
personName: '张三'
},
topRightMenus = [
{
name: '个人设置',
onclick: function () {
}
},
{
name: '修改密码',
onclick: function () {
}
},
{
name: '退出',
onclick: function () {
logout();
},
}
];
vm.data.systemName = systemName;
vm.data.subSystems = subSystems;
vm.data.curSubsystem = curSubsystem;
vm.data.userInfo = userInfo;
vm.data.topRightMenus = topRightMenus;
vm.data.departmentName= departmentName;
</script>
- 编辑main.jsp，修改 body 中的 代码
<body>
<!--原有的代码
<div id="wrapper">
<nav class="navbar-default navbar-static-side" id="navbar"></nav>
<div id="desktopWrapper">
<iframe id="mainFrame" name="mainFrame" style="width:100%; height:100%; border:0; overflow:hidden" ></iframe>
</div>
<div class="clearfix"></div>
</div> -->
<div class="page" :controller="app" class="ms-controller">
<div class="header">
<div class="navbar-header">
<div class="navbar-brand">
<span class="logo"></span>
<a href="main.html"> {{@data.systemName}}</a>
</div>
</div>
<ul class="nav navbar-nav" style="padding: 5px;margin-right: 0;">
<li class="ss-box" :if="@data.subSystems.length">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list"
:click="$event.stopPropagation()"></span>{{@data.curSubsystem}}<b class="caret"></b>
</a>
<div class="dropdown-menu">
<div id="tab-panel" class="widget">
<ul class="nav nav-tabs">
<li :for="(index, subSystem) in @data.subSystems"
:class="[index === 0 ? 'active' : '']">
<a :attr="{href: '#tab' + index}" data-toggle="tab"
:click="@methods.showTab">{{subSystem.name}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" :for="(index, subSystem) in @data.subSystems"
:attr="{id: 'tab' + index}" :class="[index === 0 ? 'active' : '']">
<a :for="item in subSystem.items" :click="item.onclick">{{item.title}}</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="search-box">
<input class="search" type="text" name="search" placeholder="搜索">
<span class="glyphicon glyphicon-search"></span>
</div>
<ul class="top-right-menu nav navbar-nav navbar-right">
<li>
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
{{@data.userInfo.personName}}({{@data.userInfo.userName}})<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li :for="menu in @data.topRightMenus">
<a :click="menu.onclick">{{menu.name}}</a>
</li>
</ul>
</li>
</ul>
<div class="department">
<img class="department-logo" src="plugin/images/danwei.png">
<span class="department-name">单位名称</span>
</div>
</div>
<div class="mainPanel">
<div id="leftPanel">
<nav class="left-navbar" id="navbar"></nav>
<div class="slider-wrapper">
<span id="slider"></span>
</div>
</div>
<div id="rightPanel">
<iframe src="desktop.html" id="mainFrame" name="mainFrame" scrolling="auto" width="100%" height="100%"
frameborder="0"></iframe>
</div>
</div>
</div>
</body>
此时main页已经很像风格包风格了。
到此，变更风格包就完成了。