目录   -  关于样式和 IDE -  打开样例项目 -  将样式应用于单个组件 -  创建新的样式规则以应用于组件的选定实例 -  编辑现有的样式规则以更改组件的所有实例 -  创建新的样式表 -  高级提示 -  小结

关于样式和 IDE

• 第一优先级。转至内嵌样式。在 Java Studio Creator IDE 中，内嵌样式适用于添加到组件样式属性中的规则，可以使用样式编辑器来编辑这种样式属性（请参见图 1）。使用内嵌样式时，将覆盖缺省的 CSS 文件 stylesheet.css，多数情况下，还将覆盖缺省主题 defaulttheme.jar。如果要使一个组件不同于页面上的其余组件，则最好基于每个组件设置样式。例如，您可能希望使 "Order" 按钮看上去比应用程序中的其余按钮更大一些。但是，建议不要将基于每个组件设置样式作为惯用做法。
  
  例如，如果要更改此 "Order" 按钮的 background-color，则不仅需要设置样式属性的 background-color，而且还需要将 background-image 设置为 null，以覆盖 css_master.css .Btn2 类的设置。有关详细信息，请参见本教程的高级提示部分。
  
  
• 第二优先级。转至缺省的 CSS 文件，Java Studio Creator IDE 将该文件添加到创建的每个项目中，并且 IDE 还在每个页面中包含了一个指向添加到项目中的 CSS 文件的链接。通过使用 CSS 文件，您可以编写应用于许多组件而不仅仅是单个组件的样式。那么，一旦更改了某一位置的样式定义，则该样式会立即反映在所有相同的组件类型中。IDE 含有一个用于编辑 CSS 文件的 CSS 编辑器和一个用于创建新样式规则的样式规则编辑器（请参见图 2）。此外，IDE 还包含一个 styleClass 属性编辑器（请参见图 3），该编辑器可用于将样式类添加到 styleClass 属性中，或者将 styleClass 属性绑定到 JavaBean 上，该 JavaBean 用于确定运行时应用于组件的样式类。
  
  
• 第三优先级。转至主题。IDE 将指定每个项目的缺省主题。主题由图像、JavaScript、CSS 文件和消息组成，组件通过这些内容来定义组件的外观。您无法编辑主题，但是如果知道应用于组件的主题规则的话，则可以通过在缺省 CSS 文件中创建同名的规则来覆盖它。本教程的编辑现有的样式规则以更改组件的所有实例部分包含了有关查找组件主题规则的说明。
  
  

打开样例项目

1. 打开项目之前，请确保应用服务器和捆绑的数据库服务器正在运行。
   
   
1. 在“服务器”窗口中，右键单击“部署服务器”，选择“启动/停止服务器”，然后单击“启动服务器”。
   
   
2. 在“服务器”窗口中，右键单击“Bundled Database 服务器”，然后选择“启动 Bundled Database”。
   
   
2. 在主菜单中，选择“文件”>“新建项目”。
   
   
3. 在“新建项目”向导中，从“类别”窗格中选择“样例”，从“项目”窗格中选择 "Vehicle Incident Report Application"，然后单击“下一步”。
   
   项目名称以 VehicleIncidentReportApplicationx 的形式列出，其中 x 是附加的版本号。您可以重命名项目或保留其缺省名称。在本教程中，项目名称为 VehicleIncidentReportApplication1。
   
   
4. 单击“完成”以在可视设计器中打开新项目。
   
   SearchAVehicle 页将在可视设计器中打开。

将样式应用于单个组件

1. 在可视设计器中，选择位于 SearchAVehicle 页左下角的 "Search" 按钮。
   
   
2. 在“属性”窗口中，单击 style 属性旁边的省略号按钮 (...) 以打开样式编辑器。
   
   
3. 使用样式编辑器，为 "Search" 按钮组件设置以下字体样式：
   
   
   • 字体系列为 Georgia, 'Times New Roman', times, serif
   • 大小为 24
   
   在样式编辑器底部的“CSS 样式”文本区域中，可以看到新样式的预览效果，如图 1 所示。
   
   

   图 1：样式编辑器

    
   
4. 单击“确定”以应用样式并关闭样式编辑器。
   
   
5. 要验证样式更改，请单击可视设计器工具栏中的“在浏览器中预览”图标 ，然后在缺省浏览器中查看页面。

创建新的样式规则以应用于组件的选定实例

1. 在“项目”窗口中，展开 "VehicleIncidentReportApplication1" >“Web 页”> "resources"，然后双击 "stylesheet.css"。此时，会打开样式编辑器。
   
   
2. 通过单击样式表上方工具栏中的“创建规则”图标 ，打开样式规则编辑器。
   
   
3. 在位于“类”单选按钮下面的句点 (.) 之后的文本字段中，键入 fancybutton，如图 2 所示。
   
   

   图 2：样式规则编辑器

    
   
4. 单击 按钮，将 fancybutton 类移动到“样式规则分层结构”框中，然后单击“确定”。
   
   请注意样式表中规则名称之前的句点 (.)。此 CSS 语法定义的是类规则，而不是 HTML 元素规则或元素 ID 规则。
   
   
5. 在 CSS 编辑器中，选择以下字体样式：
   
   
   • 字体系列为 Georgia, 'Times New Roman', times, serif
   • 大小为 24
   
   
   则以下规则将应用于样式表：
   
   

   代码样例 1：fancybutton 样式

   .fancybutton { font-family: Georgia,'Times New Roman',times,serif; font-size: 24px }

    
   
6. 在“项目”窗口中，双击 "Login.jsp" 以便在可视设计器中打开该文件。
   
   
7. 在 "New User" 按钮的“属性”窗口中，单击 styleClass 属性旁边的省略号按钮 (...)。
   
   将打开 styleClass 属性编辑器，如图 3 所示。styleClass 属性编辑器显示了可用于 CSS 文件的所有样式类。
   
   

   图 3：styleClass 属性编辑器

    
   
8. 在“过滤器”字段中，键入 fan。
   
   可看到列出的 fancybutton 样式类。
   
   
9. 选择 fancybutton 样式类，单击 按钮，将其添加到“已选择”列表中，然后单击“确定”将此样式类添加到属性中。
   
   "New User" 按钮的字体类型和大小将更改为 fancybutton 样式类。
   
   注意：如果要将 fancybutton 样式规则一次性添加到多个按钮中，则可以在可视设计器中选择所有要应用该样式的按钮，然后将 fancybutton 添加到 styleClass 属性（仅需添加一次即可）。
   
   
10. 要查看样式更改，请右键单击 "Login" 页，然后选择“在浏览器中预览”。

编辑现有的样式规则以更改组件的所有实例

1. 选择要更改样式规则的组件，然后按住 Ctrl-Alt 组合键并单击鼠标按钮。
   
   组件的轮廓将变为红色。
   
   
2. 在“属性”窗口中，查看 "Attributes" 行。"Search" 按钮的样式类被列为 class="Btn2"，这是 Vehicle Incident Report Application 项目中所有按钮使用的样式类。单击 "Attributes" 旁边的省略号按钮 (...) 可查看属性的完整列表。
   
   
3. 在可视设计器中，单击 "SearchAVehicle" 标签打开该页，然后选择 "Search" 按钮。如果该页未打开，则在“项目”窗口中展开 "VehicleIncidentReportApplication1" >“Web 页”，然后双击 "SearchAVehicle.jsp"。
   
   
4. 在“属性”窗口中，选中 "Search" 按钮的 primary 属性复选框。
   
   设置 primary 属性可确保 "Search" 按钮的外观基于主题的 CSS 文件规则，并防止缺省 CSS 文件的规则覆盖主题的规则。
   
   
5. 单击 "stylesheet.css" 标签，在样式表中单击鼠标右键，然后选择“创建规则”。
   
   
6. 在“类”单选按钮下面的句点 (.) 之后的文本字段中键入 Btn2Hov。本教程上一部分中的图 2 显示了样式规则编辑器。
   
   
7. 单击 按钮，将 Btn2Hov 类移动到“样式规则分层结构”框中，然后单击“确定”。
   
   
8. 在编辑窗格下面的样式表编辑器中，在“样式”下拉列表中将字体设置为斜体。以下规则将应用于样式表：
   
   

   代码样例 2：Btn2Hov 样式

   .Btn2Hov { font-style: italic }

    
   
9. 通过从主菜单中单击“运行”>“运行主项目”来部署项目以验证更改。
   
   缺省情况下，在 Web 浏览器中打开的第一页是 "Search" 页。请注意，将鼠标悬停在 "Search" 按钮上时，它不会变为斜体，因为其样式是从主题的 CSS 文件规则中获取的。
   
   
10. 单击 "Search" 按钮转至车辆列表页，然后将鼠标悬停在表中的按钮上。
    
    对于所有未选中 primary 属性复选框的按钮，当将鼠标悬停在这些按钮上时都会变为斜体。创建的任何新按钮都将应用 Btn2Hov 样式。

创建新的样式表

1. 在“项目”窗口中，右键单击 "VehicleIncidentReportApplication1" >“Web 页”> "resources" 节点，然后选择“新建”>“层叠样式表”。
   
   
2. 在“层叠样式表”向导中，键入新样式表的名称。单击“完成”。
   
   
3. 编辑新的样式表以包含要进行的样式更改。
   
   
4. 打开要应用样式表的页面。
   
   如果打开页面中的组件处于选定状态，请单击页面背景以更改为页面属性。
   
   
5. 在该页的“属性”窗口中，将“样式表”属性设置为 /resources/<新样式表名称>.css。
   
   

1. 在“项目”窗口中，右键单击 "VehicleIncidentReportApplication1" >“Web 页”> "resources" 节点，然后选择“新建”>“层叠样式表”。
   
   
2. 在“层叠样式表”向导中，键入新样式表的名称。单击“完成”。
   
   
3. 编辑新的样式表以包含要进行的样式更改。
   
   
4. 打开要应用样式表的页面。
   
   如果打开页面中的组件处于选定状态，请单击页面背景以更改为页面属性。
   
   
5. 在“组件面板”窗口中，展开“高级”节点，然后将“链接”组件拖放到页面上。
   
   
6. 在新链接的“属性”窗口中，单击 URL 属性旁边的省略号按钮 (...)。
   
   将打开 URL 属性编辑器。
   
   
7. 在 URL 属性编辑器中，选择新的样式表，然后单击“确定”。
   
   新的样式表将与缺省样式表一起显示在“概要”窗口中。

高级提示

• 您可以使用 Mozilla DOM 功能来查看呈现的 HTML。另一种查看所呈现的 HTML 的方法是：选择组件，然后按住 Ctrl-Alt 组合键并单击鼠标按钮。当正确激活组件时，组件的轮廓将会变为红色。在“属性”窗口的 "JSF" 类别中，单击 Rendered HTML 属性旁边的省略号按钮 (...) 可查看为组件呈现的 HTML。在 Attributes 属性和 Rendered HTML 属性中，都可以找到活动的样式类名称。例如，"Search" 按钮将产生 class="Btn2"。
  
  
• 要查找类 Btn2 中定义的样式属性，请转至主题的只读 css_master.css 文件：
  
  
  1. 在“项目”窗口中，展开“库”>“缺省主题”> "com.sun.rave.web.ui.defaultheme.css"。
     
     
  2. 双击 css_master.css 文件以打开该文件。
     
     
  3. 在文件中搜索要查找的样式类，例如 Btn2。
     
     例如，要设置 Btn2 background-color，则必须同时定义 background-color 和 background-image 以覆盖现有的样式类。由于无法编辑只读的 css_master.css，因此可以使用样式属性编辑器将 background-image 设置为 null，并将 background-color 设置为组件所需的背景颜色。
     
     
• 另一种将样式表添加到项目的方法是：将样式表文件从文件管理器窗口拖放到页面上。样式表的链接将自动被添加到 JSP 文件中。

小结

• 可以编辑单个组件的样式属性，以覆盖缺省样式表。
• 可以创建新的样式规则，并将其应用于选定的组件。
• 对于项目中使用的具有相同类型的所有新组件或现有组件，可以编辑适用于它们的现有样式规则。
• 可以创建自己的样式表，并将其应用于项目。

• 使用页面片段，您可以在 Java Studio Creator 门户上访问该教程。
• 层叠样式表第 2 级第 1 次修订，即 CSS 2.1 规范，万维网联盟 (World Wide Web Consortium) 对该规范进行了定义。