Gestisci avanti e indietro in Richfaces

Question

Utilizzo la libreria di componenti RichFaces e voglio gestire la cronologia della navigazione Ajax, in modo che l'utente finale possa utilizzare i pulsanti Indietro e Avanti del browser.

C'è un modo pulito per farlo, modello di progettazione, libreria, ecc.?

Answer 1

È possibile utilizzare RSH per gestire la storia Ajax

Per l'esempio lascia supporre che si dispone di una pagina in cui l'utente deve selezionare un colore. Quindi, il colore selezionato viene pubblicato sul server usando XmlHttpRequest.

Ora vogliamo ripristinare la selezione precedente quando si preme il pulsante di navigazione avanti e indietro.

Esempio di codice

Bean:

public class Bean { 

    private static final String DAFAULT_COLOR = "green"; 

    private Map<String, Color> colors; 
    private Color selectedColor; 
    private String restoredColor; 

    @PostConstruct 
    public void init() { 
     this.colors = new HashMap<String, Color>(); 
     this.colors.put("green", new Color("Green", "008000")); 
     this.colors.put("blue", new Color("Blue", "0000FF")); 
     this.colors.put("red", new Color("Red", "FF0000")); 
     this.colors.put("purple", new Color("Purple", "FF0000")); 
     this.colors.put("purple", new Color("Purple", "800080")); 
     this.colors.put("yellow", new Color("Yellow", "FFFF00")); 
     this.colors.put("silver", new Color("Silver", "C0C0C0")); 
     this.colors.put("black", new Color("Black", "000000")); 
     this.colors.put("white", new Color("White", "FFFFFF")); 

     this.selectedColor = this.colors.get(DAFAULT_COLOR); 
    } 

    public void setSelectedColor(ActionEvent event) { 
     UIComponent component = event.getComponent(); 
     String color = ((String)component.getAttributes().get("color")).toLowerCase(); 
     this.selectedColor = this.colors.get(color); 
    } 

    public void restoreColor() { 
     if(restoredColor.equals("") || restoredColor.equals("null")) { 
      restoredColor = DAFAULT_COLOR; 
     } 

     this.selectedColor = this.colors.get(restoredColor); 
    } 

    public List<Color> getColors() { 
     return Arrays.asList(colors.values().toArray(new Color[0])); 
    } 

    public Color getSelectedColor() { 
     return selectedColor; 
    } 

    public String getRestoredColor() { 
     return restoredColor; 
    } 

    public void setRestoredColor(String restoredColor) { 
     this.restoredColor = restoredColor.toLowerCase(); 
    } 

} 

Vista:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:t="http://myfaces.apache.org/tomahawk" 
    xmlns:c="http://java.sun.com/jstl/core" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich" 
    template="/WEB-INF/template/default.xhtml"> 

<ui:define name="head"> 
    <script type="text/javascript" src="#{request.contextPath}/js/rsh/rsh.js"></script> 
    <script type="text/javascript"> 
     window.dhtmlHistory.create({ 
      toJSON: function(o) { 
       return Object.toJSON(o); 
      }, 
      fromJSON: function(s) { 
       return s.evalJSON(); 
      } 
     }); 

     Event.observe(window, 'load', function() { 
      dhtmlHistory.initialize(); 
      dhtmlHistory.addListener(handleHistoryChange); 
     }); 

     var registerHistoryPoint = function(newLocation, historyData) { 
      dhtmlHistory.add(newLocation, historyData); 
     }; 
    </script> 
</ui:define>  

<ui:define name="content"> 
    <a4j:form id="frmColor"> 
     <div class="colors"> 
      <ul> 
       <a4j:repeat value="#{bean.colors}" var="color"> 
        <li style="background:##{color.hex};"> 
         <a4j:commandLink value="&#160;" 
          actionListener="#{bean.setSelectedColor}" 
          reRender="frmColor" 
          oncomplete="registerHistoryPoint('#{color.name}', '#{color.name}');"> 
          <f:attribute name="color" value="#{color.name}"/> 
         </a4j:commandLink> 
        </li> 
       </a4j:repeat> 
      </ul> 
     </div> 
     <div class="selection" style="background:##{bean.selectedColor.hex};"> 
      <div class="selected-color" 
       style="color: ##{bean.selectedColor.name eq 'White' or 
         bean.selectedColor.name eq 'Yellow' ? '000000' : 'ffffff'}"> 
       <h:outputText value="#{bean.selectedColor.name}"/> 
      </div> 
     </div> 
     <a4j:jsFunction name="handleHistoryChange" reRender="frmColor" 
      action="#{bean.restoreColor}"> 
      <a4j:actionparam name="historyData" assignTo="#{bean.restoredColor}" /> 
     </a4j:jsFunction> 
    </a4j:form> 
</ui:define> 
</ui:composition> 

Ora, quando viene richiamato l'utente clicca su un colore della registerHistoryPoint. Questo registrerà historyData che verrà passato al bean quando vengono premuti i pulsanti Indietro e Avanti.

ad es.

• L'utente seleziona Giallo.
• Il giallo è registrato.
• L'utente seleziona Blu.
• Il blu è registrato.
• L'utente fa clic su Indietro.
• Il giallo viene ripristinato.
• Fare clic su utente in avanti.
• Il blu viene ripristinato.