1.1 简介
IBM WebShere Portal 7相对于之前版本最大的变化就增加了新的皮肤开发模式-PageBuilder2,官方翻译叫"页面构建器"。它同时支持旧的主题开发模式。新模式主要的改变就是将样式与页面布局分开了,同样页面布局可以应用不同的样式,就像WinXP的桌面主题,因此也带来了复杂性。
1.2 类型
PageBuilder2主题开发模式分为两种:
第一种: 样式+war包式。
第二种: 独立war包式。
其中第一种的war包是非必须的,如果不想改变缺省的面布局及内容,你只需修改样式并共享产品自带的war包即可。
1.3 步骤
下面分别详细介绍一下。
我的wp7是装在windows2003上的。
1.3.1 样式+共享war包式
开始之前需要准备一款WebDAV客户端工具(WebDAV我就不赘述了,搜狗(^0^)一下),我选择的是一个免费的由Java开发的工具“AnyClient”(见附件)。AnyClient需要jre,最低1.5,最高1.6(1.4可打开,但运行异常)。
1)使用AnyClient连接Portal的WevDAV目录。
连接地址为 http://localhost:10039/wps/mycontenthandler/dav/themelist/。
注意:
wps为上下文根,缺省名字为wps,如果你已经改变了文根,请将wps替换为你自定义的文根。
提示:
用户名与密码就是Portal was控制台的管理员和密码。如果你在Win7下使用Anyclient,请将窗口主题切换为“windows经典”,否则AnyClient窗口将会是一个大白板。
连接WebDAV时可能会很慢,要耐心等...!
2)拷贝themelist/目录下的csa2.theme目录到本地。
3)修改下载的csa2.theme文件夹为你喜欢的名字,如:my_theme。
4)修改\metadata\localized_zh.properties文件内的title属性。
写个你喜欢的名字吧,最好是英文的(不能直接写中文,需要编码,非必须就别给自己找麻烦了^_^) 。
5) 将你修改好的主题文件夹利用AnyClient传输到themelist/文件下。
6)传输完成后,你就已经有一个新的主题可选了。
提示:
很显然,你在主体管理工具那是看不到新的主题的,这时你需要任意选择一个主题,点击编辑,然后再点一下保存,这样会强制wp刷新主题列表缓存,你新建的主题就出来了。
总结:
这种方式创建的新主题与wp7自带的主体样式是一样的(复制的嘛),并且共享Jsp页面文件。也就是你只能修改样式。说实话,我感觉真挺不好改的,主题里全是css与js,不知从何改起,我是没再深研究。
1.3.2 样式+独享war包式
如果想修改页面的布局与内容,你需要使用自己的主题war包。方法还是一样:复制并改名在传回去。
1)复制PageBuilder2 war包并改个名字。
路径为:wp7安装目录+\IBM\WebSphere\PortalServer\theme\wp.mashup.cc.theme\ installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war
2)删除 ./skins 目录下的所有文件。
3)修改./themes/html/目录下的PageBuilder2文件夹的名字,如:my_pb2,以下都用my_pb2代表你喜欢的名字。
4)在WEB-INF文件夹里删除plugin.xml文件,别的文件不用删。
5)修改web.xml里的display-name属性为my_pb2。
6)修改ibm-web-bnd.xmi 与 ibm-web-ext.xmi 文件。
ibm-web-bnd.xmi修改位置为:<webapp href="WEB-INF/web.xml#my_pb2"/>
ibm-web-ext.xmi修改位置为:<webApp href="WEB-INF/web.xml#my_pb2"/>
7)将修改完的文件打成war包,部署到wp7的was控制台。
注意:
发布时,进行到映射服务器那步时,一定要选择WebSphere_Porta,系统自动选择的那个是错误的。
记住你在部署时输入上下文根路径如:my_pb2。
8)测试新部署的主题war包。
访问: http://localhost:10039/wps/my_pb2/dav/themelist/customTheme/
如果页面报500错误,证明你已经部署成功了。因为它缺少Portal环境,所以报错。
9)利用xmlaccess 导出主题部署信息。
xmlaccess在中文版中叫“导入xml”,菜单位置在portal后台管理左树-〉门户网站设置-〉导入xml。
将以下xml内容保存为一个文件,使用xmlaccess导入portal。
<?xml version="1.0" encoding="UTF-8"?> <request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd" type="export" create-oids="true"> <portal action="locate"> <theme action="export" objectid="*" /> </portal> </request>
10)导入成功后,你会得到返回的xml字符串,保存为本地文件并修改其中的内容。
修改其中的 context root, resource root, uniquename与为“my_pb2”如:
<theme action="update" active="false" context-root="/my_pb2" default="false" domain="rel" objectid="ZJ_618LOIP300NI60IE2H5GHD3001" resourceroot="my_pb2" uniquename="my_pb2">
11)将修改完的文件利用xmlaccess导入回去。
12)修改样式包里的 theme.html 文件。
利用用AnyClient下载到本地修改在传回覆盖原文件。
样式包就是在1.3.1中我们自己创建的那个样式文件夹(my_theme)。
还是要修改上下文根为“my_pb2”如:
替换以下内容:
<link rel="dynamic-content" href="dyn-cs:id:head@tl:oid:csa2.theme">
为:
<link rel="dynamic-content" href=" res:/my_pb2/themes/html/my_pb2/head.jsp">
同样的,在theme.html中查找包含“rel="dynamic-content" ”的标签,根据 href属性中位于“id:”与"@"符号之间的内容,替换href属性内容:
<a rel="dynamic-content" href="dyn-cs:id:bannerNav@tl:oid:csa2.theme">
根据红色字体,替换href属性:
<a rel="dynamic-content" href="res:/my_pb2/themes/html/my_pb2/bannerNav.jsp">
需要替换的所有jsp页面列表如下:
res:/customTheme/themes/html/customTheme/bannerNav.jsp
res:/customTheme/themes/html/customTheme/search.jsp
res:/customTheme/themes/html/customTheme/bannerCommonActions.jsp
res:/customTheme/themes/html/customTheme/status.jsp
res:/customTheme/themes/html/customTheme/tabNav.jsp
res:/customTheme/themes/html/customTheme/pageToolbar.jsp
res:/customTheme/themes/html/customTheme/asa.jsp
res:/customTheme/themes/html/customTheme/config.jsp
注意:
在/nls文件夹下还有一个theme_zh.html文件,也需要按照以上步骤修改。
总结:
完工了,现在就可以在主题管理里面使用新的皮肤了,显然它和缺省皮肤一样。如果只需要改样式,则修改样式文件,然后用WebDAV工具上传更新;如果要改变页面格局及内容,则需要修改样式war包中的jsp。
1.3.3 独立war包式
抱歉没有亲自实践,不敢乱写,请参考下面列出的文档吧,
《Consolidated Steps for Creating Custom Themes in WP7 》里面有简单的介绍。
2 参考文档
Creating a new PageBuilder2 custom theme: wp7
How to deploy a theme as a custom war into WebSphere Application server console
Consolidated Steps for Creating Custom Themes in WP7
后记:
这篇文章大都是翻译而来,其中添加了我遇到的一些问题及解决方法。次篇只是抛砖引玉,入门而已。再多讨论请查阅IBM的信息中心:
http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=WebSphere%20Portal%20and%20Lotus%20Web%20Content%20Management%20Version%207.0%20documentation
欢迎转载,请注明出处,谢谢!
分享到:
相关推荐
本文适用于创建一个新的基于新PageBuilder2的主题。开始创建自己的自定义主题的最佳方式是通过复制门户PageBuilder2主题,这将确保你的主题为主题,以功能所需的所有元素
与WebSphere Portal V7附带有两个主题。本文适用于创建一个新的基于新PageBuilder2的主题。开始创建自己的自定义主题的最佳方式是通过复制门户PageBuilder2主题,这将确保你的主题为主题,以功能所需的所有元素。
Laravel-Pagebuilder 拖放页面构建器,用于管理任何Laravel项目中的页面。 Laravel Pagebuilder建立在。 它集成了最受欢迎的开源拖放页面构建器: 。 该程序包的设计考虑了自定义,允许您配置,禁用或替换其任何模块...
基于PageBuilder2的主题、皮肤、布局操作手册(PORTAL 8.0)
Magento 2 - Page Builder 智能 html 编辑器 预习
没有安装的同学执行下面的命令全局安装:sudo yarn install @talentui/cli项目创建完成后执行npm install npm start启动本地代理@talentui/dev-server,打开pageBuilder的一个页面,即可看到本地开发的组件开发...
SE7ENSKY CMS插件原料药 pageBuilder: component: "@webiny/serverless-page-builder" inputs: ... plugins: - ... - "@se7ensky/webiny-api-page-builder-page-settings-additional" - "@se7ensky/webiny-api-page-...
我受到了Wordpress和Divi-PageBuilder的启发。 看看我们的网站: :先决条件为了使用FlatSiteBuilder,您必须安装以下软件包。 pip3 install --user PyQt5pip3 install --user PyQtWebEnginepip3 install --user ...
可移除BookBuilder-合并/重做-书籍PageBuilder-合并/重做-书籍BookFormatter-合并/重做-书籍冷却时间-合并/重做-Baffe 冷却时间-合并/重做-挡板实时-可移除RealTimeUnit-可移除麦田守望者》-合并/重做-功能效果-可...
出血边缘入门主题。 产品特点 主题功能 范本 由驱动的Pagebuilder 可以访问的更清洁菜单 自动编辑器样式表 (多语言)选项页面支持 Polylang支持,管理员可以完全控制字符串翻译 自动资产清单处理资产缓存...
PageBuilder----------参数构建器 PageCallBack---------回调处理 四、选项配置 自定义网格(行数、列数) 自定义页面边距 是否显示指示器 自定义指示器大小 自定义指示器间隔 自定义指示器图片 自定义指示器位置 ...
此存储库是扩展和自定义内容类型模块的集合,这些模块的创建是为了教您如何为Page Builder开发的。 这些模块旨在帮助您通过示例学习,并教您扩展和创建Page Builder的新内容类型的最佳实践。 注意: Page Builder...
CM页面生成器 受概念启发的页面构建器 CM Page构建器是基于的现代富文本组件页面构建器。 该组件使您可以在Web...import PageBuilder from 'cm-page-builder' 初始化和用法 使用页面构建器组件的示例: < PageBui
(2) 浏览器 - 服务器内文件生成及删除 - 文件上传,目录生成及删除 - 主页文件制作 - 制作文件时利用 include.php3 文件直接调用 - 扁鸥殿殿. (3) 会员管理 - 帐号重复检查 - 身份证号重复检查 - 身份证号码合法性...
语言:English PageFly-高级PageBuilder
依存关系 后端 Zend框架3 Doctribe ORM 协同数据网格 前端 jQuery查询 jQuery UI 引导程序 JqGrid 综合依赖 花式盒子 多选 标签输入 P通知 将widgets.php.dist复制到config.autoload并重命名
HtmlPageBuilder 描述 HtmlPageBuilder是一个简单的库,可让您构建包含头部和身体组件HTML... 有关使用此库的示例应用程序,请参阅解决方案中包含的Test项目。 v1.0.0的新功能 初始发行 简单的例子 ...p ....p ....p ....p ....p ....
构建页面 链接 执照 描述 Build A Page 是一个应用程序,用户可以在其中快速轻松地构建引人注目的响应式模板。... 我们未来的改进意味着网站能够发布到 Github Pages。 目录 ... 登陆页面模板 2 用