1

JSF アプリケーションを開発していますが、JSTL を使用した Facelets ページについて質問があります。私は ui:repeat にいくつかの質問、質問と 3 つの回答 (条件付きで書式設定) を表示し、質問が正しい場合は回答の前にチェックマーク (tickSmall.png) または X (xSmall.png) を表示したいと考えています。違う。

回答は正しくフォーマットされていますが、目盛り/ Xが正しく配置されていません（ブール値が正しいことを確認しました。一部は真で、一部は偽です）。ティックがある場合でも、X を置くたびに。

含めましたxmlns:c="http://java.sun.com/jsp/jstl/core

コード：

     <ui:repeat var="n"
                    value="#{answerResultBean.accessWrongAnswerColumnWrapperList}">
                    <hr />
                    <h:outputText value="#{n.noQuestion}. #{n.question}" />
                    <h:panelGrid columns="2" style="text-align: left;">
                        <c:choose>
                            <c:when test="#{n.rightGridAnswerA}">
                                <h:form>
                                    <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
                                </h:form>
                            </c:when>
                            <c:otherwise>
                                <h:form>
                                    <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
                                </h:form>
                            </c:otherwise>
                        </c:choose>
                        <h:outputText value="a) #{n.a}"
                            style="#{n.userAnswerA ? 'font-weight:bold;' : 'font-weight:normal;'}" />

                        <c:choose>
                            <c:when test="#{n.rightGridAnswerB}">
                                <h:form>
                                    <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
                                </h:form>
                            </c:when>
                            <c:otherwise>
                                <h:form>
                                    <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
                                </h:form>
                            </c:otherwise>
                        </c:choose>
                        <h:outputText value="b) #{n.b}"
                            style="#{n.userAnswerB ? 'font-weight:bold;' : 'font-weight:normal;'}" />

                        <c:choose>
                            <c:when test="#{n.rightGridAnswerC}">
                                <h:form>
                                    <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
                                </h:form>
                            </c:when>
                            <c:otherwise>
                                <h:form>
                                    <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
                                </h:form>
                            </c:otherwise>
                        </c:choose>
                        <h:outputText value="c) #{n.c}"
                            style="#{n.userAnswerC ? 'font-weight:bold;' : 'font-weight:normal;'}" />
                    </h:panelGrid>
                </ui:repeat>
4

1 に答える 1

3

JSTL タグと JSF コンポーネントは、コーディングから期待されるように同期して実行されません。JSTL タグは、ビューのビルド時に最初に実行され、JSF コンポーネント ツリーを生成します。その後、ビューのレンダリング時に JSF コンポーネントが実行され、HTML 出力が生成されます。そのため、JSTL が実行されると、その時点で が実行されていない#{n}ため、EL スコープで は使用できません。<ui:repeat>

代わりにJSF コンポーネントの属性が必要renderedになるか、EL で三項演算子をスマートな方法で使用します。

次の不器用なブロック

<c:choose>
    <c:when test="#{n.rightGridAnswerA}">
        <h:form>
            <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
        </h:form>
    </c:when>
    <c:otherwise>
        <h:form>
            <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
        </h:form>
    </c:otherwise>
</c:choose>
...
<c:choose>
    <c:when test="#{n.rightGridAnswerB}">
        <h:form>
            <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
        </h:form>
    </c:when>
    <c:otherwise>
        <h:form>
            <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
        </h:form>
    </c:otherwise>
</c:choose>
...
<c:choose>
    <c:when test="#{n.rightGridAnswerC}">
        <h:form>
            <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
        </h:form>
    </c:when>
    <c:otherwise>
        <h:form>
            <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
        </h:form>
    </c:otherwise>
</c:choose>

rendered属性を使用して次のように書き換えることができます。

<h:form>
    <h:graphicImage name="img/tickSmall.png" alt="tick" rendered="#{n.rightGridAnswerA}" />
    <h:graphicImage name="img/xSmall.png" alt="wrong" rendered="#{not n.rightGridAnswerA}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/tickSmall.png" alt="tick" rendered="#{n.rightGridAnswerB}" />
    <h:graphicImage name="img/xSmall.png" alt="wrong" rendered="#{not n.rightGridAnswerB}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/tickSmall.png" alt="tick" rendered="#{n.rightGridAnswerC}" />
    <h:graphicImage name="img/xSmall.png" alt="wrong" rendered="#{not n.rightGridAnswerC}" />
</h:form>

または条件演算子を使用して次のようにします。

<h:form>
    <h:graphicImage name="img/#{n.rightGridAnswerA ? 'tick' : 'x'}Small.png" alt="#{n.rightGridAnswerA ? 'tick' : 'wrong'}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/#{n.rightGridAnswerB ? 'tick' : 'x'}Small.png" alt="#{n.rightGridAnswerB ? 'tick' : 'wrong'}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/#{n.rightGridAnswerC ? 'tick' : 'x'}Small.png" alt="#{n.rightGridAnswerC ? 'tick' : 'wrong'}" />
</h:form>

(これはまだDRYではありませんが、それは別の問題です)

以下も参照してください。

于 2013-03-21T00:51:45.887 に答える