Рефакторинг ссылки и изображения - PullRequest
Новая
       41

Рефакторинг ссылки и изображения

4 голосов
/ 22 февраля 2011

Я должен написать ссылку с изображением внутри. Вместо объяснения вот код, который у меня сейчас есть: 

<c:if test="${userSession.loggedUser eq null and company.image != null}">
    <a onclick="${rich:component('loginPanel')}.show()">
        <img src="/download.do?hash=#{company.image.hash}" />
    </a>
</c:if>
<c:if test="${userSession.loggedUser eq null and company.image == null}">
    <a onclick="${rich:component('loginPanel')}.show()">
        <img src="${request.contextPath}/img/icons/logo_default.jpg" />
    </a>
</c:if>
<c:if test="${userSession.loggedUser ne null and company.image != null}">
    <a href="company.xhtml?${company.name}">
        <img src="/download.do?hash=#{company.image.hash}" />
    </a>
</c:if>
<c:if test="#{userSession.loggedUser ne null and company.image == null}">
    <a href="company.xhtml?${company.name}">
        <img src="${request.contextPath}/img/icons/logo_default.jpg" />
    </a>
</c:if>

Этот код выглядит ужасно - есть две точные ссылки с двумя точными изображениями, но объединенные во всех возможных комбинациях. Есть ли способ лучше? Есть ли способ избежать c: if - он создал таблицы?

Обновление : Божо предлагает: Вы можете заменить <c:if и <a на <h:outputLink rendered="#{..}". Кроме этого я не вижу никакой другой оптимизации.

Но это не работает. Это не правильно отображать: 

<a href=>
<h:outputLink rendered="#{..}
<h:outputLink rendered="#{..}
</a>

(изображение находится вне якоря)

Это действительно хорошо: 

<h:outputLink value=>
<h:outputLink rendered="#{..}
<h:outputLink rendered="#{..}
</a>

, но всегда добавляет href, и в двух случаях я не хочу href при рендеринге.

Update2 : у меня тоже их было 2 на 2: 

<c:if>
  <a href...>
    <c:if><img...></c:if>
    <c:if><img...></c:if>
  </a>
</c:if>
<c:if>
  <a onclick...>
    <c:if><img...></c:if>
    <c:if><img...></c:if>
  </a>
</c:if>

Это также не отображается правильно - <a не окружает изображения по какой-то сумасшедшей причине.

Ответы [ 5 ]

1 голос
/ 22 февраля 2011

Как насчет этого? 

<c:set var="isLoggedIn" value="#{userSession.loggedUser != null}" />
<c:set var="showPage" value="company.xhtml?#{company.name}" />
<c:set var="showLogin" value="javascript:${rich:component('loginPanel')}.show()" />
<c:set var="hasImage" value="#{company.image != null}" />
<c:set var="companyImage" value="/download.do?hash=#{company.image.hash}" />
<c:set var="defaultImage" value="#{request.contextPath}/img/icons/logo_default.jpg" />

<a href="#{isLoggedIn ? showPage : showLogin}">
    <img src="#{hasImage ? companyImage : defaultImage}" />
</a>

Это можно сократить следующим образом (будет немного неприятнее для быстрого чтения / интерпретации): 

<c:set var="showPage" value="company.xhtml?#{company.name}" />
<c:set var="companyImage" value="/download.do?hash=#{company.image.hash}" />
<c:set var="defaultImage" value="#{request.contextPath}/img/icons/logo_default.jpg" />

<a href="#{userSession.loggedUser != null ? showPage : 'javascript:${rich:component(\'loginPanel\')}.show()'}">
    <img src="#{company.image != null ? companyImage : defaultImage}" />
</a>
0 голосов
/ 22 февраля 2011

Вы уже пробовали: 

<h:link value="#{}" onclick="..." rendered="#{not empty sessionScope.loggedUser and not empty company.image}">
    <h:graphicImage value="#{requestScope.contextPath}/img/icons/logo_default.jpg" />
    <f:param name="company" value="#{company.name}" />  
</h:link>

То, что я пытаюсь показать вам, это тег.Просто поиграйте немного с этим :) Должно быть хорошо, чтобы решить вашу проблему.

0 голосов
/ 22 февраля 2011

Я сделал это: 

<c:set var="companyImage" value="/download.do..." />
<c:set var="defaultImage" value="logo_default.jpg" />

<c:if test="${userSession.loggedUser == null}">
    <a onclick="${rich:component('loginPanel')}.show()">
        <img
            src="#{company.image != null ? companyImage : defaultImage}"
            alt="logo"
            width="84"
            height="42"
            class="th_user"
        />
    </a>
</c:if>
<c:if test="${userSession.loggedUser != null}">
    <a href="companyUrl.jsf">
        <img
            src="#{company.image != null ? companyImage : defaultImage}"
            alt="logo"
            width="84"
            height="42"
            class="th_user"
        />
    </a>
</c:if>

Это не красиво, потому что изображение все еще там дважды со всеми его атрибутами, но я потратил слишком много времени на это.Если кто-то думает о чем-то лучше, пожалуйста, поделитесь.

0 голосов
/ 22 февраля 2011

Вы хотите создать ссылку зависит от 3 параметров: test, href и src.Вы можете создать свой собственный тег.

отредактировано: Или следующее решение: Вы можете заметить, что всегда будет генерироваться только одна ссылка, поэтому я бы изменил, если переключиться и сделать что-то вроде этого: 

<c:set var="loggedUser" value="${userSession.loggedUser eq null}" />
<c:set var="isCompanyImage" value="${company.image != null}" />

<c:choose>
    <c:when test="${loggedUser && isCompanyImage}">
        <c:set var="aPart">onclick="${rich:component('loginPanel')}.show()"</c:set>
        <c:set var="imgPart">/download.do?hash=#{company.image.hash}</c:set>
    </c:when>
    ...
</c:choose>

<a ${aPart}><img src="${imgPart}" /></a>
0 голосов
/ 22 февраля 2011

Вы можете заменить <c:if и <a на <h:outputLink rendered="#{..}".
Или <c:if с <h:panelGroup rendered="#{..}"> (ради большего jsf-ish)

Чтобы уменьшить дублирование, вы можете создать отдельную страницу: 

<h:panelGroup rendered="#{condition}">
    <a onclick="${rich:component('loginPanel')}.show()">
        <img src="#{imgSrc}" />
    </a>
</h:panelGroup>

, а затем <ui:include> с правильным <ui:param>. переключение между onclick / href может выполняться другим параметром и условно отображать один из тегов <a.

...