Icefaces 的默认外观以及如何自定义它

Question

我有一个关于 Icefaces 造型的问题。 我有一个可以使用 Icefaces 组件的最小应用程序，但是当我使用它们并查看页面时，组件没有样式（例如按钮具有默认外观，选项卡根本没有外观，没有图像，什么都没有）。 我想知道这是为什么，以及我应该做什么才能让默认的 Icefaces 外观发挥作用。

接下来我不明白的是如何通过更改一些自动应用于组件的默认 css 样式类来自定义外观，因此我使用的每个组件都会获得更改后的样式。

谢谢您的回答！

Answer 1

There are three predefined ICEfaces style sheets included:

(1) xp.css
(2) royale.css
(3) rime.css

Developers may also create their own custom style sheet based on a predefined ICEfaces style sheet. If the style class names match those defined in the ICEfaces style sheets, the ICEfaces components will use the specified styles by default, without the need to specify the style class names explicitly on each component.

(1) Where to find CSS class names ?

IMPORTANT : The default CSS class names associated with each component are listed in the component's TLD (taglib) description.

(2) How To use a predefined style :


<link rel="stylesheet" type="text/css" href="./xmlhttp/css/xp/xp.css" />

     OR


<ice:outputStyle href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css"  />

(3) Is there any Advantages of using ICEFaces OutputStyle ?

The ice:outputStyle component has the following advantages over the HTML link tag:

- Automatically includes browser-specific variants of the main style sheet in the page to adapt the theme styling to account for differences in each browsers' CSS support. See the TLD (taglib) documentation for the ice:outputStyle component for details.
- Provides the ability to dynamically change the theme style sheet at runtime via a value binding on the component's `href` attribute.

(4) What is meant by xmlhttp ?

The xmlhttp->css->xp path is automatically resolved by ICEfaces and all needed resources are loaded from the ICEfaces.jar

Hope this helps..!! :)

Answer 2

我建议您采用 ICEfaces 包中包含的现有样式表之一（检查下载的 ICEfaces-1.8.1-bin.zip 的resources文件夹）：

• rime
• Royale
• xp

You可以在 ICEfaces 展示中预览它们

将其包含在您的 *.xhtml 文件中通过 标签：

(portlet)
<ice:outputStyle href="/xmlhttp/css/rime/rime-portlet.css"/>

(servlet)
<ice:outputStyle href="./css/demo_template.css"/>

从这里开始，您可以随意操作所选的样式表，或者 - 我喜欢 - 在 ICEfaces 的样式表之后包含您自己的样式表并覆盖所需的样式。

关于你的第二个问题：
基本上每个 ICEfaces 组件都有自己的样式类。 只需浏览展示并使用 Firebug 检查组件即可。 我还没有找到很多在不同组件之间重用的类。 因此，您必须自己自定义每个组件 - 或者通过 styleClass 属性将您自己的通用样式类应用到您使用的每个组件。

<ice:panelGrid styleClass="myCommonStyleClass">
<ice:inputField styleClass="myCommonStyleClass">