网站建设资讯

NEWS

网站建设资讯

IBMWebSpherePortal6.0的主题与皮肤开发-创新互联

1.1  入门:Portal的主题与皮肤开发

要了解如何开发Portal的主题,首先要了解IBM WebSphere Portal的显示流程。IBM WebSphere Portal 使用不同的 Java Server Page(JSP)、级联样式表(Cascading Style Sheet,CSS)和图像来显示门户页面。它使用位于X:\WebSphere\AppServer\installedApps\YourNodeName\ wps.ear\wps.war 目录下 themes、skins 和 screens 目录中的 JSP 来构造门户页面,其中每一个目录下都包含html、wml和chtml子目录,WebSphere Portal用它们服务于不同的客户机,例如桌面浏览器和移动设备。这里我们以通常使用的HTML方式下的主题开发为例,介绍Portal的主题开发。

为企业提供网站设计、成都网站制作、网站优化、全网营销推广、竞价托管、品牌运营等营销获客服务。创新互联拥有网络营销运营团队,以丰富的互联网营销经验助力企业精准获客,真正落地解决中小企业营销获客难题,做到“让获客更简单”。自创立至今,成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题,同时降低了营销成本,提高了有效客户转化率,获得了众多企业客户的高度认可!

IBM WebSphere Portal 6.0的主题与皮肤开发所谓Portal的主题,指的是系统的整体界面风格与显示方式,主要包括网站页面初始化以前的调用、徽标logo、一级菜单、二级菜单、网站下边的版权信息,以及页面初始化完成后的善后逻辑处理。我们要开发一套主题,可以直接复制themes/html下的一个包含有各个页面文件的文件夹,重新命名并在管理界面中添加、指定给相关页面就可以了。在这个文件夹中,默认的初始调用文件是Default.jsp,这个文件绘制了一张表格,然后在各个单元格内调用不同的文件。在IBM WebSphere Portal 6.0中调用的文件有:Head.jsp、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js,以及延伸出来的PageBeginInclude.jsp、 PageEndInclude.jsp。下面进行详细介绍。

IBM WebSphere Portal 6.0的主题与皮肤开发

1.1.1   Default.jsp

Portal系统的主题与皮肤的始化是从Default.jsp开始的,用于默认主题的Default.jsp位于wp_root\app\wps.ear\ wps.war\themes\html下。这个JSP包含了其他用于显示标题、公司徽标、工具栏的JSP,以及用于向页面中插入内容的 JSP。在Default.jsp的末尾处,screenRender JSP指向被请求处理的页面,例如login或forgotpassword。Default.jsp初始化一张表格,表格内部划分为单元格,每个单元格内可以直接显示内容,也可以调用其他的JSP页面。我们以从上到下、从左到右的顺序来分别介绍开发主题所用到的页面。下面介绍的JSP就是以这样的顺序先后调用的。

1.1.2  Head.jsp

Head.jsp 位于Default.jsp初始化表格的最上一行单元格内,负责生成标题并嵌入指向级联样式表文件的链接。它还定义了支持BiDi(双向)文本所需的变量。这个页面一般没有实质性的显示内容,例外的是,开发者喜欢在这里初始化网页的标题,通常是读取属性文件,比如位于web_inf/下的engine.properties。这样安排比较灵活,后期维护可以直接在属性文件里面进行。当然,如果用户的网页标题是确定的而且不再更改,那么也可以通过在这里定死,这比IBM公布的以标签方式写容易,也更易使用。如果你开发了多套主题,而且这几套主题的网页标题也一样(除了虚拟门户,一般是这样),那么可以把这个文件放到themes/html的根目录下,其他主题的Default.jsp都来调用这个文件就可以了。

1.1.3  AdminLinkBarInclude.jsp

AdminLinkBarInclude.jsp主要用来显示“新建页面”、“编辑页面”和“分配页面许可权”三个标签。该文件在Default.jsp初始化表格的第二行被调用。用户使用这三个链接来创建、修改自己的个性化页面,也可以由门户网站管理员来布局整个网站的风格,管理页面资源的权限。不过,在开发实践中你会发现,大部分客户不喜欢这几个标签,他们要求将这些标签放到管理页面,取而代之的是一些欢迎信息,比如:“某某员工,欢迎您登录!”。要实现这个也很容易,只要稍微修改一下这个页面就可以了。实现方法是:我们在系统中添加一个标签,这个标签对应的Java文件负责读出登录用户的姓名,并使用像JSP中添加JSTL一样的方法,添加一个Label。在进行主题与皮肤开发时,只要在显示欢迎信息的地方应用这个标签就可以了。

1.1.4  ToolBarInclude.jsp

ToolBarInclude.jsp用来显示欢迎消息,以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如,登录的用户会看到“我的门户网站”、“管理”(仅管理员可见)、“编辑我的‘概要文件’”、“注销”之类的工具;而注销的用户会看到“忘记密码”、“登录”、“帮助” 之类的工具。通常的做法是将“管理”链接放到一个Portlet中,只有当登录的用户是Portal系统管理员时,才在该Portlet中显示欢迎信息,或者其他的资源链接。

1.1.5  PlaceBarInclude.jsp

PlaceBarInclude.jsp用来显示一级菜单,即“首页”、“文档管理器”、“公司概况”、“业务简介”等,属于最高层的目录。在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单,所创建的内容将被存储到数据库(原始使用的是Cloundscape),也可以导入到DB2、Oracle等任何一个Portal所支持的数据库中。

1.1.6  PageBarInclude.jsp

PageBarInclude.jsp用来显示二级菜单,当点击一级菜单中的任何一个标签时,系统会调用该文件,并检索出该菜单的所有子菜单,默认显示在PlaceBar的下面。该文件在Default.jsp初始化表格的第三行被调用,如果不调用该文件,那么包含子菜单的一级菜单被调用时,其子菜单将在屏幕的左侧显示。该文件位于皮肤文件夹下,具体的文件操作我们将在后面的皮肤开发中介绍。

1.1.7  Portal 6.0中的文件调用关系

现在介绍一下Portal 6.0中的文件调用关系及其作用。如图1-1所示为Portal开发一套主题需要调用的页面清单。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-1  Portal开发一套主题需要调用的页面清单

其中几个主要文件的作用如图1-2所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-2  文件的作用

1.2  初级:如何更换Portal系统的logo图标1.2.1  Default.jsp的工作原理

门户系统的初始化页面是从Default.jsp开始的。Default.jsp文件调用其他不同的页面分别显示主页上不同区域的内容。例如:

IBM WebSphere Portal 6.0的主题与皮肤开发

1.2.2  换一个logo

打开Default.jsp,你会看到一个表格,在表格的左上角有这样一段语句,用来显示默认主题的logo图标:

IBM WebSphere Portal 6.0的主题与皮肤开发

上面已经介绍过,整个Portal系统的页面是Default.jsp初始化的一个大表格,用来显示或者调用不同的JSP。我们在这个大表格的最左上角划出一个,用来显示公司的徽标。这段语句的作用就是在这个单元格内插入一张图片,名为Logo.gif。

你可以将这个文件名改为自己想插入的任意一张图片的名字,只要将这张图片放到.war/images/目录下就可以了。这里支持几乎所有的图片格式,你可以任意摆放,大小、位置等都是你说了算。这时你可能会问:如何插入一个Flash呢?别着急,下面将会介绍。

1.2.3  用Flash动画作Logo

用Flash作徽标是个不错的注意,它可以使门户网站看起来更丰富、生动一些。但是,Flash即.swf格式的文件,是不能直接通过这种方式来插入的,因为浏览器并不能识别它。要插入一个动画,必须为它指定相应的驱动,你可以通过如下这段代码来生成。

IBM WebSphere Portal 6.0的主题与皮肤开发

这里插入了一个名为firstpagelogo.swf的影片作公司徽标,它的大小是 510*81,请将这个影片文件放在.war/images目录下,重启服务器,看看首页上是不是已经出现了Flash。

细心的读者可能已经发现,在安装了更新系统编号为KB912945的补丁后,凡是在一个页面内使用标签的活动内容都不会被自动激活,需要用户手动单击,Flash控件也不例外。这是微软为了避免与Eolas公司和加利福尼亚大学发生专利侵权纠纷,而发布的一个IE非安全更新,这不是Bug。但是安装此更新后,在启用ActiveX控件之前,无法在某些网页与这些控件交互,要启用 ActiveX 控件,请手动单击该控件。这使得我们的门户网站看起来总有个虚框,好像一个疤痕。例如:

IBM WebSphere Portal 6.0的主题与皮肤开发

是不是很难看?没关系,我们就在主题与皮肤开发中解决这个问题。

事实上,在head.jspf的中我们已经调用了该主题下的JS文件。你要确保没有删掉引用语句,否则其他的JS方法都不能使用,或者说,整个门户网站就被你这样轻松地破坏了。如果确实已经删除了,请确保加入以下语句。

IBM WebSphere Portal 6.0的主题与皮肤开发

然后打开flyout.js文件,加入如下函数。

IBM WebSphere Portal 6.0的主题与皮肤开发

最后在需要插入Flash文件的地方插入以下代码。

IBM WebSphere Portal 6.0的主题与皮肤开发

重启服务器,再检查一下,是不是虚框已经没有了?

1.3  中级进阶:开发个性化的Portal主题1.3.1  理解各级菜单

Default.jsp调用PlaceBarInclude.jsp文件来显示一级菜单,如果一级菜单下面还有二级菜单,那么当点击该一级菜单时,Default.jsp将调用PageBarInclude.jsp来显示二级菜单。当然,也可以不调用该文件,系统将默认调用Portlet皮肤中的LayerContainer.jsp文件,用三级菜单代替二级菜单。这就是菜单的个性化,这个方法使得系统的三级及三级以下的菜单显示在页面的左侧,就像Windows资源管理器一样以树形目录显示,用户更容易接受。

打开LayerContainer.jsp文件,你会发现里面的内容非常简单。

首先有这样一个标签:

IBM WebSphere Portal 6.0的主题与皮肤开发

意思是说,如果菜单是可用的,那么当登录进去以后将执行下面的操作。使用这句代码,必须引入Portal的标签库,具体的过程这里不再赘述。接下来绘制了一个表格,用来显示里面的操作。

菜单的左右协调:如果一共定义了十几个一级菜单,而一栏只能显示8个,那么剩下的菜单怎么办?我们在这里放置了两个三角形小图标,如果右边还有更多的菜单,小图标会自动出现,当点击时,就会显示剩下的菜单。具体的代码是通用的,这里不再赘述。需要强调的是,菜单条在这里只划分为两种情况:一是在选中的情况下,二是在未选中的情况下。

IBM WebSphere Portal 6.0的主题与皮肤开发

例如:

IBM WebSphere Portal 6.0的主题与皮肤开发

IBM WebSphere Portal 6.0的主题与皮肤开发

我们首先添加一张背景图片,然后左侧放一张图片做前缀,中间打印该菜单条的名字,右侧又放一张图片做后缀,这样整个菜单条看起来就非常漂亮了。

接下来是显示工具栏的情况:

IBM WebSphere Portal 6.0的主题与皮肤开发

这里的操作将使具有权限的用户通过点击这张图片,直接编辑相应的Portal页面。不过,根据我的开发经验,大部分用户会隐藏这个入口,以免引起管理上的混乱。

最后的代码用来显示系统收藏夹。登录后,会发现在一级菜单的最右边多出一个“我的最爱”,这是Portal系统自带的收藏夹,可以通过这个入口将自己喜欢的页面添加到收藏夹,然后就可以通过点击这里直接进入到所收藏的页面了。

1.3.2  个性化工具栏

要获得个性化的工具栏,可以修改ToolBarInclude.jsp文件,这个文件提供了Portal系统管理员进到管理界面的入口。

在这里可以编辑自己的“概要文件”,针对个人的用户信息,修改自己的姓名、密码等。更进一步,可以在这里显示欢迎信息,例如,张三同志登录后,会显示出:“欢迎您,张三同志!”。要实现这个功能实际上非常简单,请看:

IBM WebSphere Portal 6.0的主题与皮肤开发

当然,需要引入相应的标签库。具体的应用属于普通的JSP开发,你可以借鉴平常的开发经验去实现。

1.3.3  个性化管理标签

所谓的个性化,指的是可以删除一个或者多个管理标签,也可以根据自己的喜好添加标签。这需要修改AdminLinkBarInclude.jsp文件。例如:

IBM WebSphere Portal 6.0的主题与皮肤开发

这段代码用来显示“新建页面”的管理标签,通过点击这个标签,可以为当前页面创建一个子页面。同理,可以个性化“编辑页面”和“分配页面权限”。当然,也可以隐藏这个入口。

1.4  高级探索:开发自适应分辨率下的主题与皮肤1.4.1  1024*768分辨率下的主题

刚安装好Portal系统后,上面介绍的几个JSP文件会在默认的.war/theme目录下,你可以新建一个文件夹,将这几个JSP文件拷贝至该目录下,然后在管理界面下添加该主题,该主题默认是1024*768分辨率的。你可以开发多套主题。注意:请充分利用一些公共的资源,因为这些主题可能使用的是同样的版权信息,这样就可以将PageEnd.jsp放到themes/entention下,然后让所有的主题调用这个文件。

当然,为了保险起见,可以在Default.jsp最外层的表格中这样写死:

IBM WebSphere Portal 6.0的主题与皮肤开发

1.4.2  800*600分辨率下的主题

开发800*600分辨率下的主题非常简单,代码如下:

IBM WebSphere Portal 6.0的主题与皮肤开发

将这个表格覆盖到原来Default.jsp文件中最外层的表格就可以了。注意:在Default.jsp调用的各个文件中,可能都有表格存在,如果这些表格中有的宽度超过了800,或者两个并列的表格宽度超过了800,请适当调小;否则里面的表格会将此表格向两侧撑开,从而导致表格不协调。

1.4.3  1024和800下自适应主题

要开发自适应主题就更简单了!请设定一个变量w,先写一个JavaScript脚本,用来读取客户端的浏览器分辨率,如果是800的,则给变量赋值w=800;如果是1024的,就赋值为w=1024。这样Default.jsp初始化表格的宽度就以w来替代,对具体JSP文件调用的单元格的长和宽都在原来的基础上乘以1或者乘以0.78。

1.5  高手过招:更改Portal系统的登录方式1.5.1  从首页登录

我们需要用WSAD开发一个Portlet,并在JSP中写一个代理,将用户凭证提交给系统自带的认证Action中。这个Portlet可以这样来设计:

 //在没有登录的情况下,提醒用户输入用户名和密码(见图1-3)

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-3  登录界面

用户单击“登录”按钮后,将用户名和密码提交到系统自带的Action中。

IBM WebSphere Portal 6.0的主题与皮肤开发

//如果已经登录了,则可以显示用户的常用信息。比如,读取用户的Lotus邮箱,然后显示有几封邮件等(见图1-4)

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-4  显示邮件信息

甚至可以利用url-mapping自定义几个页面,从首页直接进入业务系统,这样就可以封死Portal页面右上角自带的“登录”标签。也许你会问:我又想用系统自带的页面,怎么办呢?没关系,你也可以在浏览器中输入http://hostname:9081/wps/myportal,或者,干脆直接输入一个错误的用户名和密码,系统自然会带你回到系统自带的页面。

1.5.2  拒绝系统自带的登录页面

但是采用上面介绍的方式,可能会出现这种情况:当用户名或者密码错误的时候,系统会返回到系统自带的登录框上面。为避免这种情况,可以封死这个开关。

系统自带的登录页面是.war/screen/html下的login.jsp文件,可以删除该文件里的所有内容,然后加入这么一句:

IBM WebSphere Portal 6.0的主题与皮肤开发

这样是不是带你又回到了首页呢?是的,确实如你所想,这样就封死了系统自带的登录页面。如果你的用户名或者密码错误,或者你通过myportal直接调用,系统就会带你回到首页的登录界面,重新输入。从这里我们可以延伸开来,比如说Session过期、修改用户的个人信息等,都可以通过这种方式封掉这个接口。

1.6  Portlet的皮肤开发1.6.1  更换标题背景图片

在.war/skin/html下,系统已经存在了好几套皮肤,打开其中任意一个文件夹,你都能发现Control.jsp这个文件。该文件初始化一个小表格,该表格有两行:第一行用来显示Portlet的标题,后面是大化、最小化、编辑按钮;第二行是Portlet的body,用来显示Portlet的内容。一般来说,用户喜欢在Portlet名称前面或者后面放个小图标等之类的装饰,我们可以直接在这个单元格里面操作,这符合基本的HTML语法。当然,如果Portlet的名称是固定的,我们也可以像开发Portal主题的菜单一样,用图片来替代。其实只要判断一下Portlet标题,如果符合,就调用相应的图片,或者单独为这个标题的Portlet开发一个皮肤,用于调用专门的图片,或者直接显示,或者作为背景,都很容易。

要换掉Portlet标题的背景图片非常简单,在第一个里面加上这么一句代码:

IBM WebSphere Portal 6.0的主题与皮肤开发

就一切OK了。

下面这个页面是皮肤开发结合比较好的例子(见图1-5),大家可以思考一下如何实现。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-5  皮肤开发结合比较好的页面

1.6.2  隐藏工具图标

有些用户不喜欢Portlet有太复杂的操作界面,要求去掉“大化”、“最小化”、“还原”等功能,当然也就不显示了。其实这非常容易,看如下一段代码:

IBM WebSphere Portal 6.0的主题与皮肤开发

这段代码是用来显示“最小化”按钮的,直接去掉就行了。而且,可以对此进行编辑,包括添加什么显示内容,甚至添加什么新的事件等。同样的道理,我们可以用相同的方法来操作“大化”和“还原”两个图标。

1.6.3  个性化左侧菜单

在项目实施中我发现这样一个有趣的现象:IBM产品的忠实用户,往往钟情于IBM系列产品的一贯风格。比如,某客户几年前实施的OA系统,“收件箱”、“发件箱”、“垃圾箱”等一系列菜单全部竖排在屏幕的左侧,那么,客户在实施Portal系统的时候,他就比较倾向于二级甚至一级菜单全在左侧竖排的情况。其实实现很简单,只要我们不再调用原来用于显示一级菜单和二级菜单的JSP页面,一级菜单就会以竖排的方式自动排列到屏幕的左侧。那么我们要想美化这种菜单怎么办呢?我们可以很容易地找到这个文件。

打开skin目录,你会发现有这样一个文件:LayeredContainer.jsp。不错,就是它,它首先初始化一个表格:

IBM WebSphere Portal 6.0的主题与皮肤开发

该表格左侧就是三级菜单(如果在Default.jsp中不再调用PageBar的话,这就是二级菜单;如果连一级菜单PlaceBar都不调用了,那么它就是一级菜单了)。右边则是整个Portal系统的body部分,显示了所有的Portlet。不晓得IBM为什么要这样安排,似乎有点不合理。不过,确实是在这里修改的,可能是把它看做一个容器了吧!在左侧的表格部分,你可以像编辑普通的网页一样,只要稍微有些美工知识,就可以随心所欲地制作出个性化的左侧管理菜单了。

1.7  合理使用CSS样式表 

看图1-6所示的页面效果,是不是非常漂亮。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-6  页面效果

其实实现很简单,看LayeredContainer.jsp文件,下面是它的表格代码,稍微加一些CSS,就能实现这种效果了。比如皮肤右侧漂亮的弧线,其实只要这么简单的一句话就OK了。

IBM WebSphere Portal 6.0的主题与皮肤开发

们再来看看某电力公司的首页(见图1-7),这也是皮肤开发结合比较好的例子。请留意红色框里面的内容,里面的弧线、角度堪称美工与主题皮肤开发人员黄金搭档的一个好例子。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-7  皮肤开发结合比较好的首页

当然,这需要素质比较高的美工配合,也需要工程师在长期的开发中仔细琢磨。

1.8  主题与皮肤的部署

假设我们现在已经开发出一套主题和皮肤,那么如何将这套主题和皮肤部署到门户系统呢?下面是详细的方法。

1.8.1  皮肤的部署

IBM WebSphere Portal 6.0的主题与皮肤开发 ①将皮肤文件传送到这个路径下(见图1-8):

/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/skins/html/

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-8  传送皮肤文件

IBM WebSphere Portal 6.0的主题与皮肤开发 ②以门户超级管理员身份登录,并依次单击“Launch”(启动)→“Administration”(管理)→“WebSphere Portal”(Portal主门户)→“Portal User Interface”(门户界面)→“Themes and Skins”(主题和皮肤管理),如图1-9所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-9  设置主题和皮肤

IBM WebSphere Portal 6.0的主题与皮肤开发 ③单击“Add new theme”(添加新皮肤)按钮,输入皮肤的名称和目录名称,如图1-10所示。注意:目录名称必须与你上传的目录名称一致,而且只填相对路径。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-10  添加新皮肤

IBM WebSphere Portal 6.0的主题与皮肤开发 ④单击“OK”按钮,皮肤添加成功,如图1-11所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-11  皮肤添加成功

IBM WebSphere Portal 6.0的主题与皮肤开发 ⑤如果需要将该皮肤设为系统的默认皮肤,则可以选中该皮肤后,单击右侧的“Set as default portal skin”(设为默认皮肤)按钮,那么以后当你没有为主题或页面上的Portlet指定皮肤时,系统将自动调用该皮肤,如图1-12所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-12  设置默认皮肤

1.8.2  主题的部署

IBM WebSphere Portal 6.0的主题与皮肤开发 ①将主题文件上传到这个目录下(见图1-13):

/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/themes/html/

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-13  上传主题文件

IBM WebSphere Portal 6.0的主题与皮肤开发 ②单击“Add new theme”(添加新主题)按钮,并在接下来的界面中为主题指定名称和所在目录,如图1-14所示。同皮肤的添加一样,主题的目录名称也必须与主题的文件夹名称一致。同时,还需要为该主题指定可能会用到的皮肤,如果希望使用默认皮肤,则可以将已经添加的皮肤设置为该主题的默认皮肤,那么以后当你没有为该主题下的Portlet指定皮肤时,系统将默认调用这套皮肤。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-14  添加新主题并指定皮肤

IBM WebSphere Portal 6.0的主题与皮肤开发 ③单击“OK”按钮,完成该主题的部署,如图1-15所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-15  完成主题的部署

IBM WebSphere Portal 6.0的主题与皮肤开发 ④如果希望将该主题设置为系统默认的主题,则可以选中该主题后,单击右侧的“Setas default portal theme”(设为默认主题)按钮,那么以后当你没有为门户系统的页面指定主题时,系统将自动调用该主题,如图1-16所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-16  设置默认主题

1.8.3  使用XmlAccess命令导入已经创建好的页面

IBM WebSphere Portal 6.0的主题与皮肤开发 将主题与皮肤文件解压到/opt/IBM/WebSphere/,如图1-17所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

IBM WebSphere Portal 6.0的主题与皮肤开发 到/opt/IBM/WebSphere/主题目录名/theme/目录下确认文件 updateJKThemePolicies.sh 具有正确的参数。

IBM WebSphere Portal 6.0的主题与皮肤开发 在SSH命令行运行命令 updateJKThemePolicies.sh,如图1-18所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-18  运行命令

IBM WebSphere Portal 6.0的主题与皮肤开发 为导入的页面分配主题,选择主题“JKEnterprises”,然后单击“OK”按钮,如图1-19所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-19  选择主题

1.8.4  检查新主题是否已经起作用

IBM WebSphere Portal 6.0的主题与皮肤开发 退出并重新以wpsadmin身份登录Portal系统,单击“管理”进入管理界面,单击“编辑页面属性”按钮进入页面属性页,确认该页面的Theme(主题)所使用的主题是否为刚刚部署的新主题,如图1-21所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-20  应用新主题与皮肤

确认是否发生变化,如图1-21所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-21  应用了新主题与皮肤的登录界面

IBM WebSphere Portal 6.0的主题与皮肤开发 登录进去后,发现主页也已经应用了新主题与皮肤,如图1-22所示。

IBM WebSphere Portal 6.0的主题与皮肤开发

图1-22  应用了新主题与皮肤的主页

1.9  主题与皮肤的调试

调试主题与皮肤一般采用两种方法:一是修改reload以便快速自动装载的方法,二是复制并添加主题与皮肤的方法。

1.9.1  自动装载法

我们知道,Portal系统的主题一切都是从Default.jsp文件开始初始化的,在通常的应用服务器上都有一个reload开关,用来控制服务器是否自动更新,IBM WebSphere Portal也不例外。如果打开这个开关(这个开关可以打开was,在管理控制台里面设定,然后重启机器),并设定了reload的时间,那么每隔一个时间段,系统会自动读取主题与皮肤文件。换言之,只要我们把这个时间差设得足够小,就能立刻观察到修改结果(注意:既然是从Default.jsp开始聚焦的,那么,如果修改了由Default.jsp调用的其他文件,比如BeginPage.jsp,而没有修改Default.jsp,系统会默认你没有做任何修改,所以也就没有任何改动了)。同时我也想声明一点,这种方法带来的系统开销特别大,只可用于开发环境,在生产环境中是万万不可用的!

1.9.2  复制法

复制法指的是从已经有的主题文件夹里复制一份,然后在复制出的文件夹里修改相关的页面代码。这种方法适用于对已经存在的主题仅做少量的修改,如果是做大量的修改,甚至对整个页面结构做大的改动,那就没必要使用这种方法了,因为修改页面框架的时间可能会远远大于重新开发的时间。复制出类似主题所在的文件夹后,重新命名新文件夹,然后将这个主题添加到系统,并指定给相应的测试页面。因为复制出来的主题是第一次安装,当然会“重新编译”了。看得出来,这种方法比较不方便,只适用于特殊情况。


标题名称:IBMWebSpherePortal6.0的主题与皮肤开发-创新互联
本文链接:http://njwzjz.com/article/iijhc.html