Внешний вид Icefaces по умолчанию и как его настроить - PullRequest
Новая
       3

Внешний вид Icefaces по умолчанию и как его настроить

0 голосов
/ 05 августа 2009

У меня вопрос по стилю Icefaces. У меня есть минимальное приложение, которое может использовать компоненты Icefaces, но когда я использую их и просматриваю страницу, компоненты не стилизуются (например, кнопки имеют внешний вид по умолчанию, а вкладки вообще не выглядят, нет изображений, ничего). Мне было интересно, почему это так, и что мне следует делать, чтобы заставить работать Icefaces по умолчанию.

Следующее, что я не понимаю, это как настроить внешний вид, изменив некоторые классы стилей CSS по умолчанию, которые автоматически применяются к компонентам, поэтому каждый используемый мной компонент получает измененный стиль.

Спасибо за ваши ответы!

Ответы [ 2 ]

5 голосов
/ 05 августа 2009

Я предлагаю вам взять одну из существующих таблиц стилей, которые включены в пакет ICEfaces (проверьте папку resources загруженного ICEfaces-1.8.1-bin.zip):

  • Иней
  • Royale
  • хр

Вы можете просмотреть их в витрине ICEfaces

Включите его в файл * .xhtml с помощью тега <ice:outputStyle>: 

(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">
1 голос
/ 23 апреля 2013 
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..!! :)
...