在 ADF JSF 页面中添加 CSS 文件答案

【问题标题】：Adding CSS file in ADF JSF page在 ADF JSF 页面中添加 CSS 文件
【发布时间】：2016-01-21 05:59:24
【问题描述】：

我已经创建了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 代码的正确方法。

【问题讨论】：

标签： css jsf oracle-adf

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

使用inlineStyle
使用styleClass

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

【讨论】：

是的，我正在使用 af:resource 类型标签在 ADF 中尝试 inlineStyle，但它不起作用。
使用它...希望它对你有用..
是的，但我必须对每个 inputText 执行此操作。我们不能像在 html 中那样使用 adf，例如：
mkyong.com/jsf2/… 检查此链接...希望它能清除您的概念...
其实，这些都是一次性的，当你想覆盖皮肤时，不是首选。

【解决方案3】：

您可以在面板框等adf面中轻松使用inlineStyle标签。

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

【讨论】：