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的主题开拓。
所谓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。下面进行详细先容。
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。这样安排比较灵巧，后期掩护可以直接在属性文件里面进行。当然，如果用户的网页标题是确定的而且不再变动，那么也可以通过<title></title>在这里定去世，这比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开拓一套主题须要调用的页面清单。
图1-1 Portal开拓一套主题须要调用的页面清单
个中几个紧张文件的浸染如图1-2所示。
图1-2 文件的浸染
1.2 低级：如何改换Portal系统的logo图标
1.2.1 Default.jsp的事情事理
门户系统的初始化页面是从Default.jsp开始的。Default.jsp文件调用其他不同的页面分别显示主页上不同区域的内容。例如：
1.2.2 换一个logo
打开Default.jsp，你会看到一个表格，在表格的左上角有这样一段语句，用来显示默认主题的logo图标：
上面已经先容过，全体Portal系统的页面是Default.jsp初始化的一个大表格，用来显示或者调用不同的JSP。我们在这个大表格的最左上角划出一个<td>，用来显示公司的徽标。这段语句的浸染便是在这个单元格内插入一张图片，名为Logo.gif。
你可以将这个文件名改为自己想插入的任意一张图片的名字，只要将这张图片放到.war/images/目录下就可以了。这里支持险些所有的图片格式，你可以任意摆放，大小、位置等都是你说了算。这时你可能会问：如何插入一个Flash呢？别焦急，下面将会先容。
1.2.3 用Flash动画作Logo
用Flash作徽标是个不错的把稳，它可以使门户网站看起来更丰富、生动一些。但是，Flash即.swf格式的文件，是不能直接通过这种办法来插入的，由于浏览器并不能识别它。要插入一个动画，必须为它指定相应的驱动，你可以通过如下这段代码来天生。
这里插入了一个名为firstpagelogo.swf的影片作公司徽标，它的大小是 51081，请将这个影片文件放在.war/images目录下，重启做事器，看看首页上是不是已经涌现了Flash。
细心的读者可能已经创造，在安装了更新系统编号为KB912945的补丁后，凡是在一个页面内利用<object>、<embed>或<applet>标签的活动内容都不会被自动激活，须要用户手动单击，Flash控件也不例外。这是微软为了避免与Eolas公司和加利福尼亚大学发生专利侵权轇轕，而发布的一个IE非安全更新，这不是Bug。但是安装此更新后，在启用ActiveX控件之前，无法在某些网页与这些控件交互，要启用 ActiveX 控件，请手动单击该控件。这使得我们的门户网站看起来总有个虚框，彷佛一个疤痕。例如：
是不是很丢脸？没紧要，我们就在主题与皮肤开拓中办理这个问题。
事实上，在head.jspf的<head></head>中我们已经调用了该主题下的JS文件。你要确保没有删掉引用语句，否则其他的JS方法都不能利用，或者说，全体门户网站就被你这样轻松地毁坏了。如果确实已经删除了，请确保加入以下语句。
然后打开flyout.js文件，加入如下函数。
末了在须要插入Flash文件的地方插入以下代码。
重启做事器，再检讨一下，是不是虚框已经没有了？
1.3 中级进阶：开拓个性化的Portal主题
1.3.1 理解各级菜单
Default.jsp调用PlaceBarInclude.jsp文件来显示一级菜单，如果一级菜单下面还有二级菜单，那么当点击该一级菜单时，Default.jsp将调用PageBarInclude.jsp来显示二级菜单。当然，也可以不调用该文件，系统将默认调用Portlet皮肤中的LayerContainer.jsp文件，用三级菜单代替二级菜单。这便是菜单的个性化，这个方法使得系统的三级及三级以下的菜单显示在页面的左侧，就像Windows资源管理器一样以树形目录显示，用户更随意马虎接管。
打开LayerContainer.jsp文件，你会创造里面的内容非常大略。
首先有这样一个标签：
意思是说，如果菜单是可用的，那么当登录进去往后将实行下面的操作。利用这句代码，必须引入Portal的标签库，详细的过程这里不再赘述。接下来绘制了一个表格，用来显示里面的操作。
菜单的旁边折衷：如果一共定义了十几个一级菜单，而一栏只能显示8个，那么剩下的菜单怎么办？我们在这里放置了两个三角形小图标，如果右边还有更多的菜单，小图标会自动涌现，当点击时，就会显示剩下的菜单。详细的代码是通用的，这里不再赘述。须要强调的是，菜单条在这里只划分为两种情形：一是在选中的情形下，二是在未选中的情形下。
例如：
我们首先添加一张背景图片，然后左侧放一张图片做前缀，中间打印该菜单条的名字，右侧又放一张图片做后缀，这样全体菜单条看起来就非常俊秀了。
接下来是显示工具栏的情形：
这里的操作将使具有权限的用户通过点击这张图片，直接编辑相应的Portal页面。不过，根据我的开拓履历，大部分用户会隐蔽这个入口，以免引起管理上的混乱。
末了的代码用来显示系统收藏夹。登录后，会创造在一级菜单的最右边多出一个“我的最爱”，这是Portal系统自带的收藏夹，可以通过这个入口将自己喜好的页面添加到收藏夹，然后就可以通过点击这里直接进入到所收藏的页面了。
1.3.2 个性化工具栏
要得到个性化的工具栏，可以修正ToolBarInclude.jsp文件，这个文件供应了Portal系统管理员进到管理界面的入口。
在这里可以编辑自己的“概要文件”，针对个人的用户信息，修正自己的姓名、密码等。更进一步，可以在这里显示欢迎信息，例如，张三同道登录后，会显示出：“欢迎您，张三同道！
”。要实现这个功能实际上非常大略，请看：
当然，须要引入相应的标签库。详细的运用属于普通的JSP开拓，你可以借鉴平常的开拓履历去实现。
1.3.3 个性化管理标签
所谓的个性化，指的是可以删除一个或者多个管理标签，也可以根据自己的喜好添加标签。这须要修正AdminLinkBarInclude.jsp文件。例如：
这段代码用来显示“新建页面”的管理标签，通过点击这个标签，可以为当前页面创建一个子页面。同理，可以个性化“编辑页面”和“分配页面权限”。当然，也可以隐蔽这个入口。
1.4 高等探索：开拓自适应分辨率下的主题与皮肤
1.4.1 1024768分辨率下的主题
刚安装好Portal系统后，上面先容的几个JSP文件会在默认的.war/theme目录下，你可以新建一个文件夹，将这几个JSP文件拷贝至该目录下，然后在管理界面下添加该主题，该主题默认是1024768分辨率的。你可以开拓多套主题。把稳：请充分利用一些公共的资源，由于这些主题可能利用的是同样的版权信息，这样就可以将PageEnd.jsp放到themes/entention下，然后让所有的主题调用这个文件。
当然，为了保险起见，可以在Default.jsp最外层的表格中这样写去世：
1.4.2 800600分辨率下的主题
开拓800600分辨率下的主题非常大略，代码如下：
将这个表格覆盖到原来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可以这样来设计：
<wps:if loggedIn=\"大众no\"大众> //在没有登录的情形下，提醒用户输入用户名和密码（见图1-3）
</wps:if>
图1-3 登录界面
用户单击“登录”按钮后，将用户名和密码提交到系统自带的Action中。
<wps:if loggedIn=\公众yes\公众>
//如果已经登录了，则可以显示用户的常用信息。比如，读取用户的Lotus邮箱，然后显示有几封邮件等（见图1-4）
</wps:if>
图1-4 显示邮件信息
乃至可以利用url-mapping自定义几个页面，从首页直接进入业务系统，这样就可以封去世Portal页面右上角自带的“登录”标签。大概你会问：我又想用系统自带的页面，怎么办呢？没紧要，你也可以在浏览器中输入http://hostname:9081/wps/myportal，或者，干脆直接输入一个缺点的用户名和密码，系统自然会带你回到系统自带的页面。
1.5.2 谢绝系统自带的登录页面
但是采取上面先容的办法，可能会涌现这种情形：当用户名或者密码缺点的时候，系统会返回到系统自带的登录框上面。为避免这种情形，可以封去世这个开关。
系统自带的登录页面是.war/screen/html下的login.jsp文件，可以删除该文件里的所有内容，然后加入这么一句：
这样是不是带你又回到了首页呢？是的，确实如你所想，这样就封去世了系统自带的登录页面。如果你的用户名或者密码缺点，或者你通过myportal直接调用，系统就会带你回到首页的登录界面，重新输入。从这里我们可以延伸开来，比如说Session过期、修正用户的个人信息等，都可以通过这种办法封掉这个接口。
1.6 Portlet的皮肤开拓
1.6.1 改换标题背景图片
在.war/skin/html下，系统已经存在了好几套皮肤，打开个中任意一个文件夹，你都能创造Control.jsp这个文件。该文件初始化一个小表格，该表格有两行：第一行用来显示Portlet的标题，后面是最大化、最小化、编辑按钮；第二行是Portlet的body，用来显示Portlet的内容。一样平常来说，用户喜好在Portlet名称前面或者后面放个小图标等之类的装饰，我们可以直接在这个单元格里面操作，这符合基本的HTML语法。当然，如果Portlet的名称是固定的，我们也可以像开拓Portal主题的菜单一样，用图片来替代。实在只要判断一下Portlet标题，如果符合，就调用相应的图片，或者单独为这个标题的Portlet开拓一个皮肤，用于调用专门的图片，或者直接显示，或者作为背景，都很随意马虎。
要换掉Portlet标题的背景图片非常大略，在第一个<td>里面加上这么一句代码：
就统统OK了。
下面这个页面是皮肤开拓结合比较好的例子（见图1-5），大家可以思考一下如何实现。
图1-5 皮肤开拓结合比较好的页面
1.6.2 隐蔽工具图标
有些用户不喜好Portlet有太繁芜的操作界面，哀求去掉“最大化”、“最小化”、“还原”等功能，当然也就不显示了。实在这非常随意马虎，看如下一段代码：
这段代码是用来显示“最小化”按钮的，直接去掉就行了。而且，可以对此进行编辑，包括添加什么显示内容，乃至添加什么新的事宜等。同样的道理，我们可以用相同的方法来操作“最大化”和“还原”两个图标。
1.6.3 个性化左侧菜单
在项目履行中我创造这样一个有趣的征象：IBM产品的虔诚用户，每每钟情于IBM系列产品的一向风格。比如，某客户几年前履行的OA系统，“收件箱”、“发件箱”、“垃圾箱”等一系列菜单全部竖排在屏幕的左侧，那么，客户在履行Portal系统的时候，他就比较方向于二级乃至一级菜单全在左侧竖排的情形。实在实现很大略，只要我们不再调用原来用于显示一级菜单和二级菜单的JSP页面，一级菜单就会以竖排的办法自动排列到屏幕的左侧。那么我们要想美化这种菜单怎么办呢？我们可以很随意马虎地找到这个文件。
打开skin目录，你会创造有这样一个文件：LayeredContainer.jsp。不错，便是它，它首先初始化一个表格：
该表格左侧便是三级菜单（如果在Default.jsp中不再调用PageBar的话，这便是二级菜单；如果连一级菜单PlaceBar都不调用了，那么它便是一级菜单了）。右边则是全体Portal系统的body部分，显示了所有的Portlet。不晓得IBM为什么要这样安排，彷佛有点不合理。不过，确实是在这里修正的，可能是把它看做一个容器了吧！
在左侧的表格部分，你可以像编辑普通的网页一样，只要轻微有些美工知识，就可以为所欲为地制作出个性化的左侧管理菜单了。
1.7 合理利用CSS样式表
看图1-6所示的页面效果，是不是非常俊秀。
图1-6 页面效果
实在实现很大略，看LayeredContainer.jsp文件，下面是它的表格代码，轻微加一些CSS，就能实现这种效果了。比如皮肤右侧俊秀的弧线，实在只要这么大略的一句话就OK了。
我们再来看看某电力公司的首页（见图1-7），这也是皮肤开拓结合比较好的例子。请留神赤色框里面的内容，里面的弧线、角度堪称美工与主题皮肤开拓职员黄金差错的一个好例子。
图1-7 皮肤开拓结合比较好的首页
当然，这须要本色比较高的美工合营，也须要工程师在长期的开拓中仔细琢磨。
1.8 主题与皮肤的支配
假设我们现在已经开拓出一套主题和皮肤，那么如何将这套主题和皮肤支配到门户系统呢？下面是详细的方法。
1.8.1 皮肤的支配
① 将皮肤文件传送到这个路径下（见图1-8）：
/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/skins/html/
图1-8 传送皮肤文件
② 以门户超级管理员身份登录，并依次单击“Launch”（启动）→“Administration”（管理）→“WebSphere Portal”（Portal主门户）→“Portal User Interface”（门户界面）→“Themes and Skins”（主题和皮肤管理），如图1-9所示。
图1-9 设置主题和皮肤
③ 单击“Add new theme”（添加新皮肤）按钮，输入皮肤的名称和目录名称，如图1-10所示。把稳：目录名称必须与你上传的目录名称同等，而且只填相对路径。
图1-10 添加新皮肤
④单击“OK”按钮，皮肤添加成功，如图1-11所示。
图1-11 皮肤添加成功
⑤ 如果须要将该皮肤设为系统的默认皮肤，则可以选中该皮肤后，单击右侧的“Set as default portal skin”（设为默认皮肤）按钮，那么往后当你没有为主题或页面上的Portlet指定皮肤时，系统将自动调用该皮肤，如图1-12所示。
图1-12 设置默认皮肤
1.8.2 主题的支配
① 将主题文件上传到这个目录下（见图1-13）：
/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/themes/html/
图1-13 上传主题文件
② 单击“Add new theme”（添加新主题）按钮，并在接下来的界面中为主题指定名称和所在目录，如图1-14所示。同皮肤的添加一样，主题的目录名称也必须与主题的文件夹名称同等。同时，还须要为该主题指定可能会用到的皮肤，如果希望利用默认皮肤，则可以将已经添加的皮肤设置为该主题的默认皮肤，那么往后当你没有为该主题下的Portlet指定皮肤时，系统将默认调用这套皮肤。
图1-14 添加新主题并指定皮肤
③ 单击“OK”按钮，完成该主题的支配，如图1-15所示。
图1-15 完成主题的支配
④如果希望将该主题设置为系统默认的主题，则可以选中该主题后，单击右侧的“Setas default portal theme”（设为默认主题）按钮，那么往后当你没有为门户系统的页面指定主题时，系统将自动调用该主题，如图1-16所示。
图1-16 设置默认主题
1.8.3 利用XmlAccess命令导入已经创建好的页面
① 将主题与皮肤文件解压到/opt/IBM/WebSphere/，如图1-17所示。
图1-17 解压主题与皮肤文件
②到/opt/IBM/WebSphere/主题目录名/theme/目录下确认文件 updateJKThemePolicies.sh 具有精确的参数。
③在SSH命令走运行命令 updateJKThemePolicies.sh，如图1-18所示。
图1-18 运行命令
④为导入的页面分配主题，选择主题“JKEnterprises”，然后单击“OK”按钮，如图1-19所示。
图1-19 选择主题
1.8.4 检讨新主题是否已经起浸染
① 退出并重新以wpsadmin身份登录Portal系统，单击“管理”进入管理界面，单击“编辑页面属性”按钮进入页面属性页，确认该页面的Theme（主题）所利用的主题是否为刚刚支配的新主题，如图1-21所示。
图1-20 运用新主题与皮肤
确认是否发生变革，如图1-21所示。
图1-21 运用了新主题与皮肤的登录界面
② 登录进去后，创造主页也已经运用了新主题与皮肤，如图1-22所示。
图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 复制法
复制法指的是从已经有的主题文件夹里复制一份，然后在复制出的文件夹里修正干系的页面代码。这种方法适用于对已经存在的主题仅做少量的修正，如果是做大量的修正，乃至对全体页面构造做大的改动，那就没必要利用这种方法了，由于修正页面框架的韶光可能会远远大于重新开拓的韶光。复制出类似主题所在的文件夹后，重新命名新文件夹，然后将这个主题添加到系统，并指定给相应的测试页面。由于复制出来的主题是第一次安装，当然会“重新编译”了。看得出来，这种方法比较未便利，只适用于分外情形。
