Icefaces의 기본 모양과 사용자 정의 방법

Question

Icefaces의 스타일링에 대한 질문이 있습니다. Icefaces 구성 요소를 사용할 수있는 최소한의 응용 프로그램이 있지만 사용하고 페이지를 볼 때 구성 요소는 스타일이 적용되지 않습니다. 예를 들어 단추에는 기본 모양이 있고 탭에는 모양이없고 이미지가없고 아무것도 없습니다. 내가 왜 그런지 궁금해서 기본 Icefaces가 작동하도록해야 할 것입니다.

다음에 얻지 못하는 것은 구성 요소에 자동으로 적용되는 일부 기본 CSS 스타일 클래스를 변경하여 모양을 사용자 정의하는 방법입니다. 따라서 사용하는 모든 구성 요소가 변경된 스타일을 얻습니다.

답장을 보내 주셔서 감사합니다.

Answer 1

난 당신이합니다 (자원을 다운로드 ICEfaces-1.8.1-bin.zip의 폴더를 확인)을 ICEfaces 패키지에 포함되어있는 기존의 스타일 시트 중 하나를 수행하는 것이 좋습니다 :

• 빙으로
• 로얄
• 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"> 

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