Переключить изображения с помощью ajax

Question

У меня есть 4 кнопки, каждая кнопка будет отображать одно изображение с помощью Ajax.

<h:form> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Family" /> 
      </h:commandButton> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Karam"/> 
      </h:commandButton> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Memo"/> 
      </h:commandButton> 
      <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}"> 
       <f:ajax render="Baba"/> 
      </h:commandButton> 

      <h:panelGroup id="Family"> 
       <p:graphicImage library="images/img" name="family.png" id="FamilyImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
      <h:panelGroup id="Karam"> 
       <p:graphicImage library="images/img" name="Karam.png" id="KaramImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
      <h:panelGroup id="Memo"> 
       <p:graphicImage library="images/img" name="memo.png" id="MemoImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
      <h:panelGroup id="Baba"> 
       <p:graphicImage library="images/img" name="baba.png" id="BabaImg" rendered="#{userAjaxData.status}"/> 
      </h:panelGroup> 
     </h:form> 

Мой сведущих боб:

@ManagedBean(name = "userAjaxData", eager = true) 
@SessionScoped 
public class UserAjaxData implements Serializable { 

    private static final long serialVersionUID = 1L; 
    private boolean status = false; 

public void toggleStatus() { 
     status = true; 
    } 

    public boolean isStatus() { 
     return status; 
    } 

    public void setStatus(boolean status) { 
     this.status = status; 
    }} 

при нажатии любой кнопки он будет отображать взаимосвязанное изображение, так что если я нажимаю первый будет отображать первое изображение, а вторая кнопка будет отображаться второе изображение, но первое изображение не будет удалено. Мне просто нужно один способ отображения одного изображения каждый раз, когда я нажимаю кнопку. поэтому, если я нажму на первую кнопку, тогда вторая кнопка должна отобразить второе изображение, а первое исчезнет.

Как это сделать?

Answer 1

Если UseCase действительно так просто, я бы рекомендовал использовать только один всегда оказывается <h:graphicImage /> (нет необходимости в PrimeFaces GraphicImage в данном случае) и установить соответствующее изображение, чтобы показать во вспомогательном компоненте через AJAX вместо один или несколько переключаемых статусы с чем-то вроде этого:

<h:form id="form"> 
    <h:commandButton 
     id="familyButton" 
     action="#{toggleImageView.setImage('family.png')}" 
     value="Family" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <h:commandButton 
     id="karamButton" 
     action="#{toggleImageView.setImage('karam.png')}" 
     value="Karam" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <h:commandButton 
     id="memoButton" 
     action="#{toggleImageView.setImage('memo.png')}" 
     value="Memo" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <h:commandButton 
     id="babaButton" 
     action="#{toggleImageView.setImage('baba.png')}" 
     value="Baba" 
    > 
     <f:ajax render="image" /> 
    </h:commandButton> 
    <br /> 
    <h:graphicImage 
     id="image" 
     library="image/img" 
     name="#{toggleImageView.image}" 
    /> 
</h:form> 

@ManagedBean 
@RequestScoped 
public class ToggleImageView { 

    private String image; 

    @PostConstruct 
    public void initialize() { 
     image = "family.png"; 
    } 

    public String getImage() { 
     return image; 
    } 

    public void setImage(String image) { 
     this.image = image; 
    } 
} 

Просто приспосабливаются к вашим потребностям.