自定义 WebSphere Business Monitor 业务空间的外观

Business Space 概述

在 V6.1.2 前，WebSphere Business Monitor（以下称为 Monitor）的用户界面是业务仪表板，供用户创建业务数据的个性化视图。以前有两种仪表板：基于 WebSphere Portal 的仪表板和基于 Web 2.0 的仪表板。Monitor V6.1.2 引入了称为 Business Space 的新用户界面，提供了用于随时随地访问业务数据的更为强大的功能。

通过使用新的 Web 2.0 Business Space 界面，用户可以创建包含来自多个源的业务数据的个人业务空间。每个业务空间都由若干自定义页面组成，每个页面上使用一个或多个视图显示内容。页面上的视图由小部件提供支持，这些小部件均针对不同类型的动态和静态内容进行自定义，如业务流程信息、人工任务活动、流程关系图、关键业务性能指标（Key Performance Indicators，KPI）、维度视图和文档（如电子表格和演示文稿）。内容源可以位于本地，也可以位于远程位置。每个用户可以创建多个业务空间。

由于 Business Space 支持 WebSphere Business Monitor、WebSphere Process Server、WebSphere Business Modeler Publishing Server 和 WebSphere Business Services Fabric，因此可通过其向用户提供大量的业务数据。可以将单个 Business Space 安装配置为访问来自这些产品的多个安装的数据，从而为用户提供与多个业务数据源交互的单个界面。

像业务仪表板一样，业务空间的视觉外观是由主题确定的。主题由层叠样式表（Cascading Style. Sheet，CSS）和样式文件中引用的图像定义。图像为业务空间、小部件和用户界面的其他方面提供总体框架和边界。Business Space 提供了缺省主题，可以使用自定义主题对其进行替换，以为业务空间提供公司或组织所需的外观。

在本文中，您将了解可以如何对随 Monitor 安装的缺省 Business Space 进行自定义。我们将说明如何创建自定义主题、安装主题以及自定义不由主题控制的视觉外观，如页面和小部件标题。尽管本文的重点是自定义随 Monitor 安装的 Business Space，但这些信息也适用于其他产品的 Business Space 安装。

提供了名为 ClipsAndTacksTheme 的主题供下载。此示例设计为与 BPM V6.1.1 Clips and Tacks 教程中的 Clips and Tacks 示例一起使用。更新 Clips and Tacks 示例使用 Business Space 的方法在姊妹篇文章 Getting started with WebSphere Business Monitor Business Space: Running the BPM V6.1.1 Clips and Tacks tutorial in Business Space V6.1.2 进行了描述。如果您安装了 V6.1.2 Clips and Tacks 示例，则可以使用示例自定义主题来更改示例应用程序的外观

查看内置主题

业务空间的视觉外观由一组外部 CSS 文件控制。主样式表是主题的 CCS。随 Monitor 或其他 V6.12 产品安装 Business Space 时，会有一个名为 Default 的内置主题应用到用户创建的每个个人业务空间。此主题也会应用到与业务空间关联的页面和小部件。图 1 显示了应用了缺省主题的业务空间。

图 1. 应用到业务空间的缺省主题

Business Space 还提供了其他主题。要查看这些空间的缩略视图，请执行以下操作：

1. 登录到 Business Space。
2. 在 Business Space Manager 中，单击某个业务空间的标题栏的空白区域。如果未列出任何业务空间，请单击 图标，以从内置模板之一创建业务空间。名称、主题和关于业务空间的其他信息显示在 Business Space Manager 的右侧部分。
3. 在 Theme 行上，单击 Change。将会随即显示 Change Theme 窗口，如图 2 中所示。
   
   图 2. 查看内置主题的缩略图
   
   
   
4. 单击主题的名称，以显示其缩略视图。
5. 如果希望更为仔细地分析主题，请在 Change Theme 窗口中选择主题，并单击 OK。单击 Save，以显示更改，然后打开业务空间。

   创建自定义主题

   创建自定义主题的最简单方法是从内置主题着手。找到与您所需的调色板最接近的主题，然后修改该主题的 CSS 和图像。业务空间的很多区域的颜色都是由小型图像文件控制，而不受 CSS 文件中的颜色设置控制。选取与所需调色板接近的主题，可以减少制作自定义主题所需修改的图像文件的数量。

   1. 请按照查看内置主题中的相同步骤来标识希望重用的主题。请注意主题的名称。
   2. 在 Monitor 安装上，转到包含内置主题的图像文件的目录。例如：
      monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\img
      其中，monitor_root 是 Monitor 安装的根目录，monitor_profile 是 Monitor 配置文件名称，monitor_cell 是计算单元名称。
   3. 在 \img 目录下创建新文件夹。将此文件夹命名为自定义主题的名称，例如，executiveTheme。
   4. 找到希望重用的主题的文件夹。文件夹名称中包含了 Change Theme 窗口中显示的主题的名称。例如，Objectives 主题图像位于 objectivesTheme 文件夹中。
   5. 将目标主题的以下四个文件夹复制到新主题文件夹中：
      • Frame：包含组成业务空间的边界和选项卡的图像。
      • Palette：包含提供面板的边界和工具栏的图像，面板提供用于向页面添加小部件的控件。
      • SpaceBrowser：包含与 Business Space Manager 关联的图像，此工具提供各种控件，用于创建和导入业务空间与页面，更改业务空间的名称、所有者和主题以及与其他用户共享业务空间。
      • Wframe：包含定义小部件边界和标题栏的文件。
   6. 在服务器系统上为自定义主题创建目录。在本文中，我们将此目录称为主题扩展目录。此目录具有以下特点：
      • 不应位于 Monitor 安装路径中，以免在安装 Monitor 更新时被覆盖。
      • 是自定义主题 CSS 和 JavaScript. 文件的存储库。
      • 支持使用稍后将设置的 Java™ 运行时变量动态加载对应的两个文件。
   7. 转到包含主题的 CSS 和 JavaScript. 文件的目录。例如：
      monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\themes。
      
   8. 找到希望重用的主题的 CSS 和 JavaScript. 文件。这些文件包含 Change Theme 窗口中显示的主题的名称。例如，Objectives 主题文件为 objectivesTheme.css 和 objectivesTheme.js。
   9. 将这两个文件复制到刚刚创建的主题扩展目录中。
   10. 将文件名更改为新主题的名称，例如，executiveTheme.css 和 executiveTheme.js。
   11. 编辑主题 JavaScript. 文件，并进行以下更改：
       • 将 className 属性更改为主题 CSS 文件的文件名，不包含文件扩展名。
       • 将 name 属性更改为主题的显示名称。安装了自定义主题后，显示名称将在 Change Theme 窗口中列出，并会显示在使用该主题的任何个人业务空间的 Theme 字段中。
       • 对于 locale 属性，请删除括号之间的代码行，但请保留括号。这些代码行是原始主题名称的翻译。如果稍后获得了您的主题名称的翻译，请将经过翻译的字符串添加到 locale 属性中。
   12. 编辑 CSS 文件，并进行以下更改：
       • 使用您的主题类名称替换对旧主题类名称的所有引用。例如，如果修改 Objectives 主题，请将字符串 .objectivesTheme 的所有匹配项更改为 .executiveTheme。
       • 将字符串 background-image: url 的所有实例的值更改为您的主题的目录路径。例如，如果在修改 Objectives 主题，请将 background-image: url(../img/objectivesTheme/Frame/bg.jpg); 更改为 background-image: url(../img/executiveTheme/Frame/bg.jpg);。

         注意：正如我们稍后要讨论的，CSS 文件在运行时复制到 Monitor themes 子文件夹中，从而使CSS 文件中的 URL 为相对于 themes 文件夹的相对路径。不要更改目标文件的名称，只修改文件的路径即可。

       • 查找属性 .bspacelogo。将为属性 background-image: url 指定的值更改为 background-image: url(../img/yourTheme/yourImage.extension);，即自定义旗帜的路径和文件夹。如果尚未创建自定义文件，请设置占位符名称，待知道最终的名称后更改。
   
   

   修改 CSS 和图像文件

   自定义主题的基础文件现在已经就位。接下来 Web 设计人员、图形设计人员和其他专业人员需要修改 CSS 和图像，以根据需要设置颜色、字体和其他属性。修改文件时，请遵循以下建议：

   • 创建业务空间，并将空间主题设置为您的自定义主题，以便在开始前了解其呈现情况。有关如何设置业务空间的主题的说明，请参见查看内置主题。
   • 使用工具来标识向业务空间的不同区域应用了哪些样式。该信息将帮助您标识控制这些方面的视觉外观的图像文件或 CSS 样式。Firebug 就是一个这样的工具，它是 Mozilla® Firefox® 的插件，支持对 CSS 进行编辑和调试。
   • 编辑用于框架和边界的图像时，请根据需要更改颜色，以使其与主题的调色板相配。避免更改图像的尺寸。
   • 主题 CSS 文件和 theme 文件夹中的图像控制业务空间的大部分视觉外观，可以在不影响其他主题的情况下进行编辑。不过，业务空间的某些方面由共享图像和 CSS 文件控制。例如，img\iconsCommon 和 img\controlsCommon 文件夹中包含跨业务空间主题使用的图像。在编辑 \img 子文件夹外的任何主题文件或主题 CSS 文件前，请对原始文件进行备份。
   • 如果创建了自定义旗帜，将会在该安装的所有业务空间使用。图 1 显示了 Default 主题的旗帜。请将自定义旗帜放在主题的图像文件夹的根目录 img\yourTheme 中，并验证主题 CSS 文件在样式 .bspacelogo 的 URL 中引用了该文件名。如果旗帜在业务空间中的显示尺寸不对，请编辑 banner.jsp 文件：
     1. 转到 Monitor 安装上的以下目录：
        monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war。
     2. 建立 banner.jsp 文件的备份副本。
     3. 在文本编辑器中打开 banner.jsp 文件。
     4. 找到样式引用 bspacelogo。
     5. 根据旗帜图像的大小调整 width 和 height 属性的值。
   • 如果您为登录页创建了自定义背景，将会在该安装的所有业务空间使用。图 3 显示了缺省登录页。将自定义背景图像放入主题的图像文件夹的根目录 img\yourTheme 中。
   
   图 3. 缺省登录页
    

   创建自定义登录页

   业务空间主题不会应用到登录页。登录页的外观由 CSS 文件 login.css 控制。此文件中定义的样式包括页的背景图像。通过样式，可以方便地设置登录页来显示公司徽标或其他独特的图形。对 login.css 文件的更改会影响该 Business Space 安装的所有用户的登录页的外观。要修改登录页的 CSS，请进行以下操作：

   1. 在安装 WebSphere Business Monitor 的服务器上，转到以下目录：
      monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\css。
   2. 保存 login.css 文件的备份副本。
   3. 在文本编辑器中打开 login.css 文件。
   4. 找到名为 .login-bg 的样式。
   5. 将 background-image: url 属性设置为放在 img\yourTheme 目录中的自定义背景文件的路径。
   6. 保存 login.css 文件。
   7. 为了对更改进行测试，请登录到 Business Space。login.css 文件中的自定义背景图像和任何其他更改都应呈现在登录页上。图 4 显示了自定义登录页。
   
   图 4. 自定义登录页
   

   配置 Java 运行时变量

   完成了所有主题更改后，需要设置指向主题扩展目录的 Java 运行时变量。使用该扩展变量确保主题 CSS 和 JavaScript. 文件不会在更新安装时被覆盖。如果不希望使用扩展变量动态地将这些文件复制到 Monitor themes 目录，请直接将这些文件的最终版本放入以下路径，并跳过此过程：
   monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\themes。

   1. 登录到 Monitor 安装的管理控制台。
   2. 选择 Servers => Application servers => server_name ，其中 server_name 是 Monitor 安装的应用服务器名称，如 server1。
   3. 在 Server Infrastructure 部分，选择 Java Process Management => Process Definition => Environment Entries。
   4. 单击 New。将会显示图 6 中所示的对话框。
   5. 在 Name 字段中键入 WBM_WEB_DASHBOARD_EXT_DIR。
   6. 在 Value 字段中，指定在创建自定义主题部分中创建的主题扩展目录。
   7. 单击 OK。从现在起，任何时候用户登录，服务器都会检查主题扩展目录。
      
      图 6. 设置 Java 运行时变量
      
      
      
   8. 从管理控制台注销。
   9. 重新启动服务器。
   
   

   更改业务空间或页面的名称

   创建空白业务空间或使用模板时，可为业务空间指定名称。如果通过导入业务空间数据文件创建业务空间，新业务空间的名称与数据文件中定义的名称相同。如果后面希望更改业务空间名称，请使用 Business Space Manager。要重命名资源，您必须为其所有者，或具有编辑权限。业务空间或某个页面的名称更改会应用到该业务空间的所有用户。

   要更改业务空间或页面的名称，请进行以下操作：

   1. 打开 Business Space Manager。
   2. 在右侧，单击业务空间或页面的标题栏（但不是标题本身）。
   3. 在右侧的 Name 字段中输入业务空间或页面的新名称。
   4. 单击 Save。

   重命名页面的另一个方法是，在业务空间中打开页面时更改名称，具体操作如下：

   1. 打开希望重命名的页面。
   2. 在页工具栏上，显示页面菜单并选择 Rename，如图 7 中所示。
      
      图 7. 更改页面名称
      
      
      
   3. 在 Name 字段中键入新名称。
   4. 单击 Save。
   
   
   
   

   更改小部件标题

   小部件显示业务空间页中一个部分的内容。除非更改了标题，否则会显示缺省小部件标题。名称更改仅仅应用于该实例。如果向页面添加了此小部件的另一个实例，新实例在更改前都会使用缺省标题。要更改单个小部件实例的小部件标题，请进行以下操作：

   1. 转到希望重命名的小部件。
   2. 单击标题。标题将突出显示，并会显示标题输入字段，如图 8 中所示。
      
      图 8. 更改小部件标题
      
      
      
   3. 键入小部件的新标题。
   4. 单击标题字段外的任意位置。字段将关闭，新标题将显示在标题栏上，并应用了主题颜色。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14789789/viewspace-586918/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14789789/viewspace-586918/