المظهر الافتراضي لـ Icefaces وكيفية تخصيصه

Question

لدي سؤال حول التصميم Icefaces.لدي تطبيق بسيط يمكنه استخدام مكونات Icefaces، ولكن عندما أستخدمها وأعرض الصفحة، لا يتم تصميم المكونات (على سبيل المثال، تتمتع الأزرار بالشكل الافتراضي ولا تحتوي علامات التبويب على أي مظهر على الإطلاق، ولا توجد صور، ولا شيء).كنت أتساءل عن سبب ذلك وما الذي يجب أن أفعله حتى أتمكن من تشغيل المظهر الافتراضي لـ Icefaces.

الشيء التالي الذي لا أفهمه هو كيفية تخصيص المظهر عن طريق تغيير بعض فئات أنماط CSS الافتراضية التي يتم تطبيقها على المكونات تلقائيًا، بحيث يحصل كل مكون أستخدمه على النمط المتغير.

شكرا لإجاباتك!

Answer 1

أقترح عليك أن تأخذ إحدى أوراق الأنماط الموجودة، والتي تم تضمينها في حزمة ICEfaces (راجع ملف موارد مجلد ICEfaces-1.8.1-bin.zip الذي تم تنزيله):

• الجير
• الملكي
• xp

يمكنك معاينتها في معرض 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">

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