使用JSTL< c:choose>进行条件图像渲染； [英] Conditional image rendering using JSTL <c:choose>
问题描述
我正在开发JSF应用程序，我对使用JSTL的Facelets页面有疑问.我想在ui中显示:重复多个问题，一个问题和3个答案(有条件地格式化)，如果问题是正确的或重复的，则在答案前面打勾(tickSmall.png)或X(xSmall.png)错误的.
I`m developing a JSF application and I have a question regarding a Facelets page with JSTL. I want to display in an ui:repeat a number of question, a question and 3 answers (formated conditionally) and in front of the answers a tick (tickSmall.png) or an X (xSmall.png) if the questions are right or wrong.
答案的格式正确，但是记号/X的格式不正确(我检查了布尔值是正确的，有些是正确的，有些是错误的).每次都会有一个X，即使应该有一个刻度.
The answers are formated correctly, but the tick / X is not put correctly (I checked the booleans are correct, some are true, some are false). EVERY time it puts an X, even if there should be a tick.
我已经包含了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>
推荐答案
JSTL标记和JSF组件未如您期望的那样同步运行. JSTL标记在视图构建期间首先运行，从而生成JSF组件树.此后，JSF组件将在视图渲染期间运行，从而产生HTML输出.因此，当JSTL运行时，#{n}在EL范围内无处可用，因为<ui:repeat>当时还没有运行.
JSTL tags and JSF components doesn't run in sync as you'd expect from the coding. JSTL tags runs first during view build time, producing the JSF component tree. JSF components runs thereafter during view render time, producing HTML output. So, when JSTL runs, the #{n} is nowhere available in the EL scope, because the <ui:repeat> hasn't run at that moment.
您需要使用JSF组件的rendered属性，或者以一种聪明的方式利用EL中的三元运算符.
You need JSF component's rendered attribute instead, or make use of the ternary operator in EL the smart way.
以下几段笨拙
<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属性将
重写如下:
can be rewritten as follows using the rendered attribute:
<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>
或使用条件运算符如下:
or as follows using the conditional operator:
<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 ，但这是一个不同的问题)
(which is still not DRY, but that's a different problem)
- JSTL in JSF2 Facelets... makes sense?
- How to reference CSS / JS / image resource in Facelets template?
这篇关于使用JSTL< c:choose>进行条件图像渲染；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
