Toggle Bilder mit Ajax

Question

Ich habe 4 Tasten, jede Taste wird ein Bild mit Ajax angezeigt.

<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> 

Meine manged Bohne:

@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; 
    }} 

, wenn ich eine Schaltfläche klicken Sie auf das zugehörige Bild Es wird angezeigt, so dass, wenn ich das erste klicken, wird es das erste Bild anzuzeigen, und die zweite Taste wird angezeigt das zweite Bild, aber das erste Bild wird nicht entfernt. Ich brauche nur eine Möglichkeit, jedes Mal ein Bild anzuzeigen, wenn ich auf die Schaltfläche klicke. Wenn ich also auf die erste Schaltfläche klicke, wird die zweite Schaltfläche angezeigt und die erste ausgeblendet.

Wie kann ich es verwalten?

Answer 1

Wenn Ihr usecase wirklich so einfach ist, würde ich empfehlen, nur mit einem immer gemacht <h:graphicImage /> (keine Notwendigkeit für PrimeFaces GraphicImage in diesem Fall) und das entsprechende Bild gesetzt in der Backing Bean über Ajax zu zeigen, statt ein oder mehrere Toggle-Status mit etwas wie folgt aus:

<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; 
    } 
} 

einfach an Ihre Bedürfnisse anpassen.