1

色の異なる行に jsf 2 テキストを書き込む必要があります。これが私のコードです：

<h:panelGrid id="accessinfo_grid" columns="3">
<h:outputText id="loginid" value="#{msgs.loginId}" styleClass="label"/>
<h:outputText id="loginid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
<h:inputText  id="inputusername" disabled="true" value="#{userAccount.userName}"/>
<h:outputText id="password" value="#{msgs.passwordID}" styleClass="label"/>
<h:outputText id="passwordid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
<h:secretText  id="inputpassword" disabled="true" value="#{userAccount.password}"/>
</h:panelGrid>

出力を次のようなものにしたい * 赤色：

Login:* edit_box
Password:* edit_box

しかし、今は次のようなものです：

Login:   * edit_box
Password:* edit_box

その * 赤を最初のテキストの直後にしたい。おそらく、私は panelGrid 以外のものを使用しようとする必要がありますが、何をどのように使用するのかわかりません。

私はこれで初心者です。

ありがとう、

4

2 に答える 2

4

<h:panelGrid>HTMLを生成する、では、<table>すべての直接の子JSFコンポーネントが独自のになり<td>ます。JSFコンポーネントをグループ化する必要があります。これらのコンポーネントは、で同じ<td>になるはず<h:panelGroup>です。

<h:panelGrid id="accessinfo_grid" columns="2">
    <h:panelGroup>
        <h:outputText id="loginid" value="#{msgs.loginId}" styleClass="label"/>
        <h:outputText id="loginid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
    </h:panelGroup>
    <h:inputText id="inputusername" disabled="true" value="#{userAccount.userName}"/>

    <h:panelGroup>
        <h:outputText id="password" value="#{msgs.passwordID}" styleClass="label"/>
        <h:outputText id="passwordid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
    </h:panelGroup>
    <h:inputSecret id="inputpassword" disabled="true" value="#{userAccount.password}"/>
</h:panelGrid>

h:secretText（存在しないものをに置き換えたことに注意してくださいh:inputSecret。なぜそれを使用したのかわかりません）

これはCSSとは何の関係もないことに注意してください。CSSを無効にしても、まったく同じ問題が発生します。JSFを一時停止し、適切なHTMLチュートリアルを読んで、JSFが生成しているものがすべてどのように機能するかを理解することをお勧めします（ブラウザーでJSFページを開き、右クリックして[ソースの表示]を実行すると表示されます）。

于 2012-07-27T13:44:52.757 に答える
0

を使用して、<h:outputText>を介してクラス属性を追加できますstyleClass="color-red"。例：

<h:outputText styleClass="color-red" value="*" /> ...

次に、CSS で対応するクラスを作成します。

.color-red {
    color: #F00;
}
于 2012-07-27T13:31:33.553 に答える