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

【问题标题】：The default look of Icefaces and how to customize itIcefaces 的默认外观以及如何自定义它
【发布时间】：2009-08-04 23:53:53
【问题描述】：

我对 Icefaces 的样式有疑问。我有一个可以使用 Icefaces 组件的最小应用程序，但是当我使用它们并查看页面时，组件没有样式（例如，按钮具有默认外观，选项卡根本没有外观，没有图像，什么都没有）。我想知道为什么会这样，我应该怎么做才能让默认的 Icefaces 看起来正常工作。

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

感谢您的回答！

【问题讨论】：

标签： java icefaces

【解决方案1】：

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

雾凇
皇家
xp

您可以在ICEfaces showcase中预览它们

通过<ice:outputStyle> 标签将其包含在您的*.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">

【讨论】：

【解决方案2】：

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..!! :)

【讨论】：