css - 在 ADF JSF 页面中添加 CSS 文件

Question

我已经创建了jsf页面

<f:view>

 <af:document id="d1">
   <f:facet name="metaContainer">
   <af:resource type="css">
     af|inputText :: content
     {
     color:Red;
     }
</af:resource>
  </f:facet>


 <af:form id="f1">
  <af:panelHeader text="Customer" id="ph1">

    <af:selectOneRadio label="Gender"
                       requiredMessageDetail="Must Provide Gender"
                       id="sor1" layout="horizontal"
                       value="#{CustomerBean.gender}" autoSubmit="true">
      <af:selectItem label="Female" value="F" id="si1"/>
      <af:selectItem label="Male" value="M" id="si2"/>
    </af:selectOneRadio>
  </af:panelHeader>
  <af:inputText label="FirstName" id="it1" value="#{CustomerBean.first}"/>
  <af:inputText label="LastName" id="it2" value="#{CustomerBean.last}"/>
  <af:outputText id="ot1"
                 partialTriggers="sor1" value="#{CustomerBean.gender}"/>
</af:form>

我想对我正在使用的所有 inputText 应用红色。我们可以使用 CSS 执行它。但我无法从中获得任何输出。我也试过了

 <f:facet name="metaContainer">
  <af:resource type="css">
     .text-label
     {
     color:Red;
     }
  </af:resource>
  </f:facet>

我尝试的另一种方法是:

 <f:facet name="metaContainer">
     <af:resource type="css">
      [id=form\:inputText]{
       color: Red;
      }
     </af:resource>

但它不起作用。请建议我在 ADF 的 JSF 页面中使用 CSS 代码的正确方法。

Answer 1

您不直接在 ADF Faces 页面中使用 CSS，因为您在 ADF Faces 中使用的组件会生成多个 HTML 元素。你使用皮肤。看这个video开始。和 this和 this .阅读新框架的文档通常是个好主意；-)

您没有说明您使用的是什么版本 - 该信息可以帮助我们帮助您 - 但最新版本有一个 skin editor内置到 JDeveloper 中或可下载。

使用 Skin Selectors为组件和子组件设置样式。

当页面生成并随页面一起下载时，皮肤文件会生成正确的 CSS 文件。