我们先介绍一下主题和外表开发的基本思路,然后先从IBM主题那里进行修改生成我们自己的基本主题和外表,最后说一下如何改造这个自定义主题和外表将IBM拖拽功能增加到我们自己的主题和外表上来。
1.主题和外表的基本结构
这一块在InfoCenter中有基本说明,在这里我简单说明一下。
主题路径
profiles/wp_profile/installedApps/nodename/wps.ear/wps.war/themes/html/
外表路径
profiles/wp_profile/installedApps/nodename/wps.ear/wps.war/skins/html/
主题JSP和JSPF:default.jsp
这个文件是主题的主文件,在这个文件中决定了整个布局,在这个文件中直接引用head.jspf,flyout.jspf,banner.jspf,topnav.jspf,sidenav.jspf,footer.jspf,所有jspf文件进行编辑要生效必须修改此文件并保存。
style.jsp:所有style开头的jspf都是在这个文件里调用的
head.jspf:在这个文件中定义了所有头信息,包含JS,样式表引用等,另外还有选项板和上下文菜单的JS扩展。
banner.jspf:所有banner_*.jspf文件在这里引用,这个也是可以修改的,我就是直接把这个文件改掉了:),当然增加了自己要的元素。在这里要说明一下,
banner_crumbtrail.jspf文件是路径轨迹显示,banner_searchControl.jspf搜索控件显示,banner_toolbar.jspf包含增加portlet,人员搜索、帮助按钮及注销及登录按钮(我的拖拽改造也集中这个文件)
topnav.jspf:显示顶部导航
sidenav.jspf:显示侧边导航
footer.jspf:显示页脚
外表JSP和JSPF:UnlayeredContainer-V.jsp
布局列:UnlayeredContainer-H.jsp
布局行:Control.jsp
具体每一个portlet控制容器,主题和外表自定义
在这里我要提醒一下,并不是从头开始自己写一套和IBM样的主题和外表文件(这样子做也可以,只要你有这个耐心和心境),最好是复制IBM目录,然后安装到成新主题进行修改(外表也一样),并且在测试的时候建立自己的测试页来试用这个主题和外表,不要把这些测试的主题和外表设在默认主题和外表
default.jsp文件修改,在这里可以修改default.jsp文件的布局,建立自己的布局格式,具体可以参照图片,我只说一下这里有几点地方注意,一不要去掉这个文件所定义的DIV或改变DIV的ID名称,以备个性化portlet之用。原来所有的样式不要删除,你可以修改style_*.jspf文件或者增加文件到链接到style.jsp文件或head.jspf,但是一定要去掉默认定义的样式。
head.jspf增加自己的样式表文件或JS文件引用。格式参照文件里的引用方法,这样子可以有缓存。在这个文件修改的过程中不要去掉里面的脚本文件,你可以增加:)
banner.jspf 增加自己的标志,对其它的几个banner_*.jspf在这里都有引用,如果不需要可以注释掉。或者你可以把这些整合进自己的主题,可以修改指定样式,在style_theme.jspf文件里
topnav.jspf文件建立自己的导航格式(结合原来默认文件和CSS),这个没什么好说的。
sidenav.jspf文件建立自己的侧边导航,这个文件的修改要注意TAG的参数应用,我刚开始就弄错了:),结果导航多级就有问题了。
footer.jspf文件就没什么好说的了,你修改成你想要的就可了
补充:
default.jsp:保留所有定义的DIV,只改变布局,所有定义的名称不要改变,因为在flyout.jspf要用到这个页面里的这几个DIV来计算flyout的高度和位置
/*if ( document.getElementById( 'wpsFLYflyout' ) && document.getElementById( 'footer' ) && document.getElementById( 'mainContent' ) ) { document.getElementById( 'wpsFLYflyout' ).style.top = getTop( document.getElementById( 'mainContent' ), true ) + "px"; document.getElementById( 'wpsFLYflyout' ).style.height = Math.max( (getTop( document.getElementById( 'footer' ), true ) - getTop( document.getElementById( 'mainContent' ), true ) - 2 ), 300 ) + "px"; document.getElementById( 'wpsFLY_flyoutIFrame' ).style.height = Math.max( (getTop( document.getElementById( 'footer' ), true ) - getTop( document.getElementById( 'mainContent' ), true ) - 2 ), 300 ) + "px";}*/
head.jspf:这个文件中的
/*{ url: "", icon: "", activeIcon: "", hoverIcon: "", active:false, altText:"", activeAltText:"" },{ url:"", icon: "", activeIcon: "", hoverIcon: "", active:false, altText:"", activeAltText:"" },{ url:"", icon: "", activeIcon: "", hoverIcon: "", active:false, altText: "", activeAltText:""}];<script type="text/javascript">
var javascriptEventController = new ElementJavascriptEventController(), flyOut = [
<c-rt:if test = "${themePolicy.renderContentPalette}">
{
url: "<portal-navigation:urlGeneration contentNode='ibm.portal.Content Palette' layoutNode='ibm.portal.Content Palette Control' newWindow='true' portletWindowState='Maximized'><portal-navigation:urlParam name='WCN' value='<%=pageOidStr%>' type='render' /><% wpsURL.write(out); %></portal-navigation:urlGeneration>",
icon: "<portal-logic:urlFindInTheme file='images/toolBar/content.gif'/>",
activeIcon: "<portal-logic:urlFindInTheme file='images/toolBar/Active_content.gif'/>",
hoverIcon: "<portal-logic:urlFindInTheme file='images/toolBar/EnabledHover_content.gif'/>",
active:false,
altText:"<portal-fmt:text key='link.palette.portlet' bundle='nls.engine'/>",
activeAltText:"<portal-fmt:text key='link.palette.close' bundle='nls.engine'/>"
}
<%arrayPosition++;%>
</c-rt:if>
<c-rt:if test = "${false}">
<%--<c-rt:if test = "${themePolicy.renderPeoplePalette}">--%>
<%if(arrayPosition != 0){%>,<%}%>
{
url:"<portal-navigation:urlGenerationcontentNode='ibm.portal.People Palette' layoutNode='ibm.portal.People Palette Control' newWindow='true' portletWindowState='Normal'><% wpsURL.write(out); %></portal-navigation:urlGeneration>",
icon: "<portal-logic:urlFindInTheme file='images/toolBar/people.gif'/>",
activeIcon: "<portal-logic:urlFindInTheme file='images/toolBar/Active_people.gif'/>",
hoverIcon: "<portal-logic:urlFindInTheme file='images/toolBar/EnabledHover_people.gif'/>",
active:false,
altText:"<portal-fmt:text key='link.palette.people' bundle='nls.engine'/>",
activeAltText:"<portal-fmt:text key='link.palette.close' bundle='nls.engine'/>"
}
<%arrayPosition++;%>
</c-rt:if>
<c-rt:if test = "${themePolicy.renderExtensions}">
<portal-theme-ext:themeExtension id="com.ibm.portal.theme.plugin.Flyouts" >
<portal-theme-ext:themeExtensionLoop>
<%if(arrayPosition != 0){%>,<%}%>{
url:"<portal-theme-ext:themeExtensionItemUrl/>",
icon: "<portal-theme-ext:themeExtensionItemIconUrl state='STATE_ENABLED' />",
activeIcon: "<portal-theme-ext:themeExtensionItemIconUrl state='STATE_ACTIVE' />",
hoverIcon: "<portal-theme-ext:themeExtensionItemIconUrl state='STATE_ENABLED_HOVER' />",
active:false,
altText: "<portal-fmt:title varname='<%=(com.ibm.portal.theme.plugin.ThemeItem) themeExtension%>' />",
activeAltText:"<portal-fmt:text key='link.palette.close' bundle='nls.engine'/>"}
<%arrayPosition++;%>
</portal-theme-ext:themeExtensionLoop>
</portal-theme-ext:themeExtension>
</c-rt:if>
];
</script>*/
这些内容不能去掉。可以把有关人员查找的内容可以注释掉。
banner_toolbar.jspf:
/*<if test="${!isSafari}"><if loggedin="yes" portletsolo="no"><script type="text/javascript">
wpsFLY_markupLoop( flyOut );
</script></if></if>*/
以上代码可以放到不同的地方,这样子就有一个加号选择出来,可以弹出portlet选择项。
这样,就可以和IBM默认的主题一样显示flyout选用板了,剩下的就是对选用板portlet进行改造,以适合我们的主题和外表样式。
外表:
要继续用IBM下拉的菜单项。因为这一块内容没办法更改只能扩展,我还没有找到如何将菜单一部分单独使用的方法,在外表里也不能去掉关于dnd标志的内容,只能修改,这样子才能拖拽。菜单项里有删除。
发表评论
-
控制台SESSIONOUT
2010-09-17 13:04 1131通过配置文件来修改WAS控制台Session过期时间的方法 ... -
SOCKET 异常类型
2010-03-30 16:42 1736Error code Meaning ... -
Transaction Introduce
2010-03-30 14:01 1111Transaction 什么是Transaction? ... -
DB2 死锁
2010-03-26 10:33 4213解决“SQL0911N 因为死锁 ... -
WAS 事物引起的错误
2010-03-25 17:13 2457一、性能故障的现 ... -
案例分析
2010-03-16 16:53 1583系统上线后偶有宕机, ... -
Remote Rendering portlet hangs on socketRead0()
2010-03-16 16:46 1935当我们在JAVACORE文件中发现很多WEBCONTAINER ... -
Portal 主题部署
2010-03-12 22:21 1368部署定制的主题和外 ... -
应用服务器出现错误的原因简析
2010-03-11 22:19 868磁盘已满 导致 ... -
WAS 中Too many open files问题
2010-03-11 22:16 1254WAS下的应用系统,在对其他性能开至较大时出现系统无法返回的情 ... -
急性者的性能优化
2010-03-05 11:02 877引言 如果您是这样一个人:启动并运行 WebSphere ... -
控制台安全性破解
2010-03-04 23:05 946常在河边走,哪有不湿鞋,WebSphere管理中最让人 ... -
查看WAS版本
2010-03-04 22:39 2611一、查看WAS版本的方式:1、命令行 cd $WAS_HOM ... -
WAS设置编码方式
2010-03-04 22:29 4362当安装了webSphere的小型机的默认编码不是GBK ... -
WAS 6.1 的类加载四
2010-03-04 12:35 108712.5.2 步骤 2:添加一个EJB模块和工具JAR ... -
WAS的类加载机制三
2010-03-04 12:34 141112.3.1 类加载策略 ... -
WAS的类加载机制二
2010-03-04 12:33 89312.2 概览Websphere 类加载器 注意:每一个 ... -
WAS的类加载机制一(包含JVM的类加载机制.转载)
2010-03-04 12:29 1074abstract:本文截取IBM 红皮书《WebSpher ...
相关推荐
《基于WAS 6.1的WebSphere Portal 6.1 Cluster配置详解》一文深入探讨了在IBM WebSphere Application Server (WAS) 6.1版本上构建WebSphere Portal 6.1集群的方法与技巧,这对于追求高可用性和负载均衡的企业级应用...
JNDI名称(Java Naming and Directory Interface)通常遵循一定的命名规则,如 `jdbc/DataSourceName`。 5. **配置数据源参数** 按照向导的提示,提供数据库连接所需的详细信息,包括: - **Server Name**:...
Enterprise Java development and XML are two of the hottest topics in technology today. Both riddled with acronyms and buzzwords, they are also two of the most poorly understood and abused technologies...
【IBM WebSphere Portal 介绍】 IBM WebSphere Portal 是一个企业级的门户平台,它为企业提供了一个集中化的访问点,将各种不同的信息系统、应用程序和内容整合到一个统一的界面上。这个平台旨在解决企业中常见的...
Hands-On Game Development without Coding: Create 2D and 3D games with Visual Scripting in Unity by Lucas Bertolini English | 2018 | ISBN: 1789538335 | 430 Pages | EPUB | 102 MB Develop your own games...
ACPI was developed through collaboration between Intel, Microsoft*, Toshiba*, HP*, and Phoenix* in the mid-1990s. Before the development of ACPI, operating systems (OS) primarily used BIOS (Basic ...
Django is a web framework that was designed to strike a balance between rapid web development and high performance. It has the capacity to handle applications with high levels of user traffic and ...
本文档将详细介绍如何安装和配置Portal系统,以及与之相关的DB2数据库、IDS(Information Delivery Services)、WAS(WebSphere Application Server)和WPS(WebSphere Process Server)。 首先,我们来理解各个...
### WAS7 Admin Console and Commands #### 一、引言 在本章节中,我们将详细介绍IBM WebSphere Application Server V7(以下简称WAS7)中的管理控制台和命令行工具。WAS7提供了强大的管理功能,帮助管理员高效地...
C# 7.1 and .NET Core 2.0 – Modern Cross-Platform Development – Third Edition 版本: Create powerful applications with .NET Standard 2.0, ASP.NET Core 2.0, … Visual Studio 2017 or Visual Studio Code ...
2. **通过命令行控制WAS和PortalServer**: - 打开命令提示符窗口,切换到`D:\IBM\WebSphere\wp_profile\bin`目录。 - 启动WAS服务器:`startServer.bat server1 –username 用户名 –password 密码`。 - 启动...
This book is about Angular 2 and Bootstrap 4, the two tremendous and most popular names in contemporary web development. Angular 2 is the successor of AngularJS, but better than the predecessor in ...
The Advanced Configuration and Power Interface (ACPI) specification was developed to establish industry common interfaces enabling robust operating system (OS)-directed motherboard device ...