`
sqiutz
  • 浏览: 71116 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

WAS Portal Theme Development And Configuration

阅读更多
我们先介绍一下主题和外表开发的基本思路,然后先从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标志的内容,只能修改,这样子才能拖拽。菜单项里有删除。
分享到:
评论

相关推荐

    WAS高手资料-基于WAS 6.1的WebSphere Portal 6.1 Cluster配置详解

    《基于WAS 6.1的WebSphere Portal 6.1 Cluster配置详解》一文深入探讨了在IBM WebSphere Application Server (WAS) 6.1版本上构建WebSphere Portal 6.1集群的方法与技巧,这对于追求高可用性和负载均衡的企业级应用...

    WAS data source configuration

    JNDI名称(Java Naming and Directory Interface)通常遵循一定的命名规则,如 `jdbc/DataSourceName`。 5. **配置数据源参数** 按照向导的提示,提供数据库连接所需的详细信息,包括: - **Server Name**:...

    J2EE and XML Development

    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门户解决方案

    【IBM WebSphere Portal 介绍】 IBM WebSphere Portal 是一个企业级的门户平台,它为企业提供了一个集中化的访问点,将各种不同的信息系统、应用程序和内容整合到一个统一的界面上。这个平台旨在解决企业中常见的...

    Hands-On Game Development without Coding: Create 2D and 3D games.epub

    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...

    Advanced Configuration and Power Interface (ACPI) Specification

    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 ...

    Web Development with Django Cookbook 2nd 2016第2版 epub格式

    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系统安装文档

    本文档将详细介绍如何安装和配置Portal系统,以及与之相关的DB2数据库、IDS(Information Delivery Services)、WAS(WebSphere Application Server)和WPS(WebSphere Process Server)。 首先,我们来理解各个...

    WAS7 Admin Console and Commands

    ### 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

    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 ...

    XP环境下安装Portal7的过程

    2. **通过命令行控制WAS和PortalServer**: - 打开命令提示符窗口,切换到`D:\IBM\WebSphere\wp_profile\bin`目录。 - 启动WAS服务器:`startServer.bat server1 –username 用户名 –password 密码`。 - 启动...

    Packt Learning Web Development with Bootstrap and Angular 2nd Edition

    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 ...

    ACPI 6.3 协议规范(英文版)---ACPI_6_3_May16.rar

    The Advanced Configuration and Power Interface (ACPI) specification was developed to establish industry common interfaces enabling robust operating system (OS)-directed motherboard device ...

Global site tag (gtag.js) - Google Analytics