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文件。

Answer 2

有两种方法可以让它变红。

使用inlineStyle
使用styleClass

你可以选择任何人。希望它可以帮到你。

Answer 3

您可以轻松地在adf面板（例如面板框）中使用inlineStyle标签。

例如 inlineStyle="margin-left: 25px;"

在ADF JSF页面中添加CSS文件

3 个答案: