在 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

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

使用inlineStyle
使用styleClass

你可以选择任何人。希望对你有帮助。

Answer 2

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

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

使用Skin Selectors设置组件的样式和sub-components。

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

Answer 3

您可以在 panelbox 等 adf faces 中轻松使用 inlineStyle 标签。

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

在 ADF JSF 页面中添加 CSS 文件

Adding CSS file in ADF JSF page

css

jsf

oracle-adf