目录   -  了解主题 -  创建自己的主题 -  添加主题 -  删除主题 -  用户提示：使用 ZIP 和 JAR 文件

了解主题

1. 启动应用服务器和捆绑的数据库服务器（如果它们尚未运行）。
   
   
   1. 在“服务器”窗口中，右键单击“部署服务器”，选择“启动/停止服务器”，然后单击“启动服务器”。
   2. 在“服务器”窗口中，右键单击“Bundled Database 服务器”，然后选择“启动 Bundled Database”。
      
      
2. 在主菜单中，选择“文件”>“新建项目”。
   
   
3. 在“新建项目”向导中，从“类别”窗格中选择“样例”，并从“项目”窗格中选择“车辆事故报告应用程序”，然后单击“下一步”。
   
   项目名称将以 VehicleIncidentReportApplicationx 的形式列出，其中 x 是附加的版本号。您可以重命名项目或保留其缺省名称。在本教程中，项目名称为 VehicleIncidentReportApplication1。
   
   
4. 单击“完成”以在可视设计器中打开新项目。
   
   
5. 要查看 IDE 附带的主题列表，请在“项目”窗口中展开“主题”节点。
   
   主题包括 Jump Start Cycles 主题、绿色主题、缺省主题和灰色主题。灰色主题是 VehicleIncidentReportApplication1 当前使用的主题，由一个蓝色箭头指示，如图 1 所示。
   
   

   图 1：设置为当前主题的灰色主题

    
   
您无法编辑现有的主题文件，但是可以查看这些只读的主题文件，以了解组件获取其消息、样式和外观的位置。
 

6. 要查看当前主题文件的内容，请在“项目”窗口中展开“库”>“灰色主题”，然后双击要查看的文件。
   
   图 2 中左侧的窗口显示了展开的主题库 css_master.css 和 css_ie55up.css 样式表资源文件。css_master.css 文件包含所有组件使用的样式类定义。css_ie55up.css 文件是用于 Internet Explorer 5.5 的样式表，它包含组件在 Internet Explorer 中运行时的样式类。样式类是 css_master.css 文件中类的子集。图 2 中右侧的窗口显示了缺省的样式表 stylesheet.css。您可以使用 CSS 编辑器编辑缺省的样式表。
   
   

   图 2：主题库文件（左侧）和缺省的样式表文件（右侧）

    
   
注意：尽管主题可以管理组件的外观，但是它可以被直接添加到组件的样式（内联样式）和缺省样式表 stylesheet.css 所覆盖。有关 IDE 中使用的样式优先级的详细信息，请参见教程将样式添加到组件。


7. 在“项目”窗口中，右键单击项目并选择“运行项目”以部署项目，然后查看 VehicleIncidentReportApplication1 中使用主题元素的方式。
   
   图 3 显示了部署的应用程序。单击 "Search A Vehicle" 页面底部位于左侧的 "Search" 按钮，转到 "Select A Vehicle" 页，并注意背景色、表的标题栏颜色和按钮颜色。它们都是在灰色主题中定义的一些属性。
   
   

   图 3：使用灰色主题的车辆事故报告应用程序 "Select A Vehicle" 页

    
   

创建自己的主题

1. 创建一个名为 test 的新目录，然后将 %SystemDrive%:\installation-directory\Sun\Creator2\rave2.0\modules\ext\defaulttheme-gray.jar 文件复制到 test 目录中。
   
   
2. 将 defaulttheme-gray.jar 文件的内容解压缩到 test 目录中，然后删除 defaulttheme-gray.jar 文件。
   
   有关创建 ZIP 和 JAR 文件的提示，请参见本教程的用户提示：创建 ZIP 和 JAR 文件部分。
   
   
3. 将 $HOME\test\com\sun\rave\web\ui\defaulttheme-gray 目录重命名为 $HOME\test\com\sun\rave\web\ui\purpletheme。
   
   您必须将 defaulttheme-gray 目录更改为唯一的名称，因为 IDE 不允许使用同名的主题。

1. 在文本编辑器中打开 css_master.css 文件，然后通过使用十六进制代码 #e9dff7 将 BODY 背景色更改为淡紫色（如代码样例 1 中的粗体文本所示）。
   
   

   代码样例 1：css_master.css 文件

   /* GLOBAL STYLES */ BODY, TH, TD, P, DIV, SPAN, INPUT, BUTTON, SELECT, TEXTAREA, FORM, B, STRONG, I, U, H1, H2, H3, H4, H5, H6, DL, DD, DT, UL, LI, OL, OPTION, OPTGROUP, A {font-family:sans-serif;font-size:12px} BODY {color:#000;background-color:#e9dff7;margin:0px}

    
   
2. 编辑 .Btn1 和 .Btn2 样式类的字体大小。
   
   
   1. 搜索样式类 .Btn2Dis {font-size:12px;padding:1px 8px}
   2. 将 font-size:12px 替换为 font-size:16px。
      
      
3. 保存文件，并使其保持打开状态。您将需要在下一部分编辑此文件。

1. 解压缩 themes_examples.zip（它包含 secondary-enabled-new.gif 文件和 table_titlebar_solid.gif 文件）的内容。
   
   
2. 将 secondary-enabled-new.gif 文件复制到 $HOME\test\com\sun\rave\web\ui\purpletheme\images\button 目录中，并将 table_title_solid.gif 复制到 $HOME\test\com\sun\rave\web\ui\purpletheme\images\table 目录中。
   
   
3. 要修改样式类，请将新图像文件的路径添加到 css_master.css 文件。
   
   
   1. 在 css_master.css 文件中，搜索 secondary-enabled.gif。
   2. 要更改 .Btn2 样式类使用的图像，请将 secondary-enabled.gif 替换为您所添加的文件 secondary-enabled-new.gif。
   3. 按照步骤 a - c 更改 caption.TblTtlTxt 样式类使用的图像（方法是将 table_titlebar_gradient.jpg 替换为 table_titlebar_solid.gif）。
      
      请注意，新的 table_titlebar_solid.gif 文件具有 .gif 文件扩展名，并将替换 JPEG 文件。对于图像文件，您可以使用 GIF 或 JPEG 文件。
      
      
4. 保存并关闭 css_master.css 文件。

1. 在文本编辑器中打开 $HOME\test\META-INF\MANIFEST.MF 文件，并将 X-SJWUIC-Theme-Name 由 defaulttheme-gray 重命名为 purpletheme。
   
   新主题的名称必须是唯一的，因为 IDE 不接受重复的主题名。
   
   
2. 将 defaulttheme-gray 的所有实例更改为 purpletheme。请不要编辑 Name: com/sun/rave/web/ui/theme/ 路径或 X-SJWUIC-Theme-Prefix: /theme 路径。
   
   代码样例 2 是 MANIFEST.MF 文件的示例，其中以粗体文本显示了编辑的字段。
   
   

   代码样例 2：MANIFEST.MF 文件

   Manifest-Version: 1.0 Ant-Version: Apache Ant 1.6.2 Created-By: 1.4.2_07-b05 (Sun Microsystems Inc.) Name: com/sun/rave/web/ui/theme/ //Comment: DO NOT EDIT. X-SJWUIC-SWAED-Version: 3.0 X-SJWUIC-Theme-Version: 1.0 X-SJWUIC-Theme-Name: purpletheme //Comment: This field should be a unique name. X-SJWUIC-Theme-Prefix: /theme //Comment: DO NOT EDIT. X-SJWUIC-Theme-Messages: com.sun.rave.web.ui.purpletheme.messages.messages X-SJWUIC-Theme-Images: com.sun.rave.web.ui.purpletheme.properties.images X-SJWUIC-Theme-JavaScript: com.sun.rave.web.ui.purpletheme.properties.javascript X-SJWUIC-Theme-Stylesheets: com.sun.rave.web.ui.purpletheme.properties.stylesheets

    
   注意：编辑 MANIFEST.MF 文件时，请确保该文件的结构与代码样例 2 中所示文件的结构相同。某些文本编辑器会添加换行符，这将导致 IDE 无法读取该文件。列出主题文件内容的路径名时，请务必使用正斜杠 (/)。
   
   
3. 保存并关闭 MANIFEST.MF 文件。
   
   
4. 在文本编辑器中，打开位于 $HOME\test\com\sun\rave\web\ui\purpletheme\properties 中的 images.properties、stylesheets.properties 和 javascript.properties 文件，并将 defaulttheme-gray 的所有实例更改为 purpletheme。
   
   
5. 保存并关闭 properties 文件。
   
   
6. 在 test 目录中，创建一个包含 META-INF 和 com 目录的 ZIP 或 JAR 文件，并将该文件命名为 purpletheme.zip。
   
   创建 ZIP 或 JAR 文件时，请不要包含 test 目录。有关创建 ZIP 和 JAR 文件的提示，请参见本教程的用户提示：创建 ZIP 和 JAR 文件部分。

添加主题

1. 在 IDE 中选择“工具”>“库管理器”。
   
   
2. 在左窗格中选择“主题库”，然后单击“新建库”。
   
   
3. 在“新建库”对话框中，键入 PurpleTheme（新库的名称中不应包含空格），然后单击“确定”。
   
   新主题的名称并非一定要与添加到库的新主题 JAR 文件的名称匹配。
   
   
4. 在库管理器中，选择“类路径”标签，然后单击“添加 JAR/文件夹”。
   
   
5. 从文件选择器中选择 purpletheme.zip 文件，然后单击“添加 JAR/文件夹”。
   
   purpletheme.zip 文件的路径将在“库类路径”窗格中列出，如图 4 所示。
   
   

   图 4：库管理器

    
   
6. 在库管理器中，选择“运行环境”标签，然后单击“添加”。
   
   
7. 从文件选择器中选择 purpletheme.zip 文件，然后单击“添加 JAR/文件夹”。
   
   
8. 在库管理器中，单击“确定”。
   
   您会看到 PurpleTheme 现在位于“项目”窗口中“主题”节点的下方。

1. 在“项目”窗口中，右键单击 "PurpleTheme" 条目，然后选择“设置为当前主题”。图 5 显示了设置为当前主题的 PurpleTheme。
   
   注意：如果使用的是 Microsoft Windows，则在更改当前主题后，IDE 将显示一条消息，指出您需要重新启动应用服务器，然后清理并生成项目，以便将新主题应用于项目。在重新启动应用服务器且清理并生成项目之后，才会应用新主题。
   
   

   图 5：设置为当前主题的 PurpleTheme

    
   
2. 仅适用于 Windows 操作系统：在“服务器”窗口中，右键单击“部署服务器”，选择“启动/停止服务器”，然后单击“启动服务器”以重新启动应用服务器。
   
   
3. 在“项目”窗口中，右键单击 VehicleIncidentReportApplication1，然后选择“清理并生成项目”。
   
   
4. 要预览在部署的应用程序中所进行的主题更改，请在“项目”窗口中右键单击项目，然后选择“运行项目”。
   
   
5. 在浏览器中，单击 "Search" 按钮以转到 "Select A Vehicle" 页。
   
   图 6 显示了 PurpleTheme 更改，其中包括新出现的淡紫背景色、.Btn2 样式类对字体大小和背景图像进行的更改，以及 caption.TblTtlTxt 样式类对表标题栏进行的更改。
   
   

   图 6：使用 PurpleTheme 的车辆事故报告应用程序 "Select A Vehicle" 页

    
   注意：如果您没有看到 PurpleTheme 应用于所部署的应用程序，请刷新浏览器。

删除主题

1. 在 IDE 中选择“工具”>“库管理器”。
   
   
2. 在左窗格中选择“主题库”下的 "PurpleTheme"，然后单击“删除”。
   
   PurpleTheme 即从库系统信息库中删除，并且也将从“项目”窗口中的“主题”节点下删除。

用户提示：创建 ZIP 和 JAR 文件

1. 选择要打开的 ZIP 文件。如果要解压缩 JAR 文件，请首先将其重命名为以 .ZIP 为扩展名的文件。
   
   
2. 右键单击该文件，然后选择“打开方式”>“压缩 (zipped) 文件夹”。内容将被解压缩到包含该 ZIP 文件的目录中。

1. 在资源管理器窗口中，选择要包含在 ZIP 文件中的文件夹和文件。
   
   
2. 单击鼠标右键，然后选择“发送到”>“压缩 (zipped) 文件夹”。
   
   新 ZIP 文件的缺省文件名取自包含在 ZIP 文件中的最后一个选定项。如有必要，请重命名 ZIP 文件。

小结

1. 识别主题文件的各个部分，包括 MANIFEST.MF 文件、属性文件和资源文件。
2. 复制 defaulttheme-gray.jar 文件以将模板用于新的主题文件。
3. 修改 css_master.css 样式表。
4. 将图像添加到 images 目录。
5. 为主题创建新的 MANIFEST.MF 文件。
6. 修改属性文件以反映新的目录结构。
7. 将主题添加到主题库。
8. 将新主题应用于项目。
9. 从主题库中删除主题。

• 主题文件 defaulttheme.jar 的结构，这是一个联机帮助的主题，它包括有关主题样式表、键和选定器的详细信息。要在 IDE 内访问主题，请从工具栏中选择“帮助”>“帮助内容”>“搜索”，然后搜索 "defaulttheme"。
• 将样式添加到组件，该教程介绍了如何将内联样式应用于组件以及如何编辑缺省样式表。
• 层叠样式表，第 2 级，第 1 次修订，CSS 2.1 规范