Portal主题皮肤开发
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3
ቤተ መጻሕፍቲ ባይዱ
主题开发-创建您自己的主题
用新主题名称新建一个目录:
was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/MyTheme was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/MyTheme
将所有文件和子目录从另一个主题目录复制到新目录:
例如，您可以从 /IBM 主题复制文件
JSP Default.jsp 所有屏幕聚集都从 Default.jsp 开始; head.jspf Head.jsp 生成标题并嵌入指向样式表文件的链接; banner.jspf 显示横幅图片、公司标志信息页面 topNav.jspf 显示页面一级导航栏、个性化设置
7
皮肤开发
8
皮肤开发-创建新外表
•用新外表名称创建一个新目录 was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/markup_type/M ySkin 避免在目录名中使用 DBCS 字符 •将所有文件和子目录从另一个外表目录复制到新目录 例如，可以从 /IBM 外表目录复制文件 •JSP 编辑 Control.jsp 来创建标题栏和各个 portlet 周围的边框。 其他 JSP（如 UnlayeredContainer-H.jsp 和 UnlayeredContainer-V.jsp）则供 门户网站定制在页面内排列 portlet 时使用 •图像 用于创建 portlet 标题栏或背景图像的图像。您可以修改这些图像或创建您自 已的图像，并将它们添加到 JSP 中。 •添加外表 使用管理、门户网站用户界面下的主题和外表 portlet。您所添加的外表名称 必须与该外表使用的子目录名相同
httpserver7皮肤开发8皮肤开发创建新外表?用新外表名称创建一个新目录wasprofilerootinstalledappscellnamewpsearwpswarskinsmarkuptypemyskin避免在目录名中使用dbcs字符?将所有文件和子目录从另一个外表目录复制到新目录例如可以从ibm外表目录复制文件?jsp编辑controljsp来创建标题栏和各个portlet周围的边框
主题皮肤开发
--IBM Portal实战培训
作者:puzhilin@
1
名词解释
主题(又称为基调)
提供 portlet 内容区域（主屏）外的门户网站的外观 和布局，包括颜色、字体和图像
皮肤(又称外表)
指组件（如行容器、列容器或 portlet）周围呈现的边 框。
2
目录文件
主题渲染文件 AppServer/installedApp/<cellname>/ wps.ear/wps.war/themes/xxx/Defaul t.jsp 皮肤渲染文件 AppServerinstalledApp/<cellname>/ wps.ear/wps.war/skins/yyy/Control.j sp
9
皮肤开发-创建新外表
•用改portlet的标题背景图 请找到.war/skin/html下，发现系统已经呆了好几套皮肤，打开其中任意一个 文件夹，您都能发现这个文件：Control.jsp 在第一个<td>里面加上这么一句代码： <td width="100%" height="21" border="0" cellpadding="0" cellspacing="0" background='<wps:urlFindInSkin file="wave.jpg"/>'> •隐藏掉“最大化”、“最小化”图标 <wps:portletMinimize> <a href='<%=wpsPortletMinimizeURL%>'></a> </wps:portletMinimize>去掉上面部分代码即可；
11
运行调试-控制台
通过控制台 控制台->应用程序->wps.ear 重新启动wps.ear 验证修改主题、皮肤是否生效； 注：如果修改主题Default.jsp以外其他 jsp时候必须同时在Default.jsp也修改保 存。
12
Q&A
13
10
运行调试-启用自动 JSP 重新装 入
打开文件 was_profile_root/config/cells/cell_name/applications/wps.ear/deployments /wps/wps.war/WEB-INF/ibm-web-ext.xmi 在此文件中找到下列条目： <webappext:WebAppExtension xmi:version="2.0" xmlns:xmi="/XMI" xmlns:webappext="webappext.xmi" xmlns:webapplication="webapplication.xmi" xmlns:commonext="commonext.xmi" xmlns:common="common.xmi" xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false" fileServingEnabled="true" directoryBrowsingEnabled="false" serveServletsByClassnameEnabled="false" preCompileJSPs="false"> 更改 reloadingEnabled 的值为 true。 保存文件。 重新启动门户网站服务器。 注：调试的时候开，如果在上线正式用的时候最好别打开此设置，会影响性能。
请设定一个变量width,先写一个JavaScript，用 来读取客户端的浏览器分辨率，如果是800的， 则给给变量赋值width =800，反之如果是1024 的，就给赋值为width =1024
6
皮肤开发
Control.jsp 每个 portlet 都是通过 Control.jsp. 文 件中的 <wps:portletRender/> 标记呈示的。 注：portlet 标题栏中的某些图标对性能有影 响。 解决方案：Http Server
4
主题开发-创建您自己的主题
sideNav.jspf: 显示左侧导航栏菜单 banner_toolbar.jspf 显示帮助、注销链接页面 footer.jspf 页尾
5
主题开发-开发1024和800下自适 应得主题
在Default.jsp最外层的表格中这样写死：
<table> <tr> tr> <td width=”1024”> width=” 1024” 具体的调用！ </td> </tr> </tr> </table>
ቤተ መጻሕፍቲ ባይዱ
主题开发-创建您自己的主题
用新主题名称新建一个目录:
was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/MyTheme was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/MyTheme
将所有文件和子目录从另一个主题目录复制到新目录:
例如，您可以从 /IBM 主题复制文件
JSP Default.jsp 所有屏幕聚集都从 Default.jsp 开始; head.jspf Head.jsp 生成标题并嵌入指向样式表文件的链接; banner.jspf 显示横幅图片、公司标志信息页面 topNav.jspf 显示页面一级导航栏、个性化设置
7
皮肤开发
8
皮肤开发-创建新外表
•用新外表名称创建一个新目录 was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/markup_type/M ySkin 避免在目录名中使用 DBCS 字符 •将所有文件和子目录从另一个外表目录复制到新目录 例如，可以从 /IBM 外表目录复制文件 •JSP 编辑 Control.jsp 来创建标题栏和各个 portlet 周围的边框。 其他 JSP（如 UnlayeredContainer-H.jsp 和 UnlayeredContainer-V.jsp）则供 门户网站定制在页面内排列 portlet 时使用 •图像 用于创建 portlet 标题栏或背景图像的图像。您可以修改这些图像或创建您自 已的图像，并将它们添加到 JSP 中。 •添加外表 使用管理、门户网站用户界面下的主题和外表 portlet。您所添加的外表名称 必须与该外表使用的子目录名相同
httpserver7皮肤开发8皮肤开发创建新外表?用新外表名称创建一个新目录wasprofilerootinstalledappscellnamewpsearwpswarskinsmarkuptypemyskin避免在目录名中使用dbcs字符?将所有文件和子目录从另一个外表目录复制到新目录例如可以从ibm外表目录复制文件?jsp编辑controljsp来创建标题栏和各个portlet周围的边框
主题皮肤开发
--IBM Portal实战培训
作者:puzhilin@
1
名词解释
主题(又称为基调)
提供 portlet 内容区域（主屏）外的门户网站的外观 和布局，包括颜色、字体和图像
皮肤(又称外表)
指组件（如行容器、列容器或 portlet）周围呈现的边 框。
2
目录文件
主题渲染文件 AppServer/installedApp/<cellname>/ wps.ear/wps.war/themes/xxx/Defaul t.jsp 皮肤渲染文件 AppServerinstalledApp/<cellname>/ wps.ear/wps.war/skins/yyy/Control.j sp
9
皮肤开发-创建新外表
•用改portlet的标题背景图 请找到.war/skin/html下，发现系统已经呆了好几套皮肤，打开其中任意一个 文件夹，您都能发现这个文件：Control.jsp 在第一个<td>里面加上这么一句代码： <td width="100%" height="21" border="0" cellpadding="0" cellspacing="0" background='<wps:urlFindInSkin file="wave.jpg"/>'> •隐藏掉“最大化”、“最小化”图标 <wps:portletMinimize> <a href='<%=wpsPortletMinimizeURL%>'></a> </wps:portletMinimize>去掉上面部分代码即可；
11
运行调试-控制台
通过控制台 控制台->应用程序->wps.ear 重新启动wps.ear 验证修改主题、皮肤是否生效； 注：如果修改主题Default.jsp以外其他 jsp时候必须同时在Default.jsp也修改保 存。
12
Q&A
13
10
运行调试-启用自动 JSP 重新装 入
打开文件 was_profile_root/config/cells/cell_name/applications/wps.ear/deployments /wps/wps.war/WEB-INF/ibm-web-ext.xmi 在此文件中找到下列条目： <webappext:WebAppExtension xmi:version="2.0" xmlns:xmi="/XMI" xmlns:webappext="webappext.xmi" xmlns:webapplication="webapplication.xmi" xmlns:commonext="commonext.xmi" xmlns:common="common.xmi" xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false" fileServingEnabled="true" directoryBrowsingEnabled="false" serveServletsByClassnameEnabled="false" preCompileJSPs="false"> 更改 reloadingEnabled 的值为 true。 保存文件。 重新启动门户网站服务器。 注：调试的时候开，如果在上线正式用的时候最好别打开此设置，会影响性能。
请设定一个变量width,先写一个JavaScript，用 来读取客户端的浏览器分辨率，如果是800的， 则给给变量赋值width =800，反之如果是1024 的，就给赋值为width =1024
6
皮肤开发
Control.jsp 每个 portlet 都是通过 Control.jsp. 文 件中的 <wps:portletRender/> 标记呈示的。 注：portlet 标题栏中的某些图标对性能有影 响。 解决方案：Http Server
4
主题开发-创建您自己的主题
sideNav.jspf: 显示左侧导航栏菜单 banner_toolbar.jspf 显示帮助、注销链接页面 footer.jspf 页尾
5
主题开发-开发1024和800下自适 应得主题
在Default.jsp最外层的表格中这样写死：
<table> <tr> tr> <td width=”1024”> width=” 1024” 具体的调用！ </td> </tr> </tr> </table>