Teknikler'de ileri ve geri yönetin

Question

RichFaces bileşen kitaplığını kullanıyorum ve Ajax gezinme geçmişini yönetmek istiyorum, böylece uçbirim tarayıcı geri ve ileri düğmelerini kullanabilir.

Bunu yapmanın, tasarım deseninin, kütüphanenin vb. Temiz bir yolu var mı?

Answer 1

Sen kullanıcı bir renk seçmelisiniz bir sayfa olduğunu varsayalım sağlar Örneğin Ajax geçmişini

işlemek için RSH kullanabilirsiniz. Ardından, seçilen renk XmlHttpRequest kullanılarak sunucuya gönderilir.

Şimdi geri ve ileri gezinme düğmelerine basıldığında önceki seçimi geri yüklemek istiyoruz.

Kod Örneği

Fasulye:

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

} 

Görünüm: Bir renk registerHistoryPoint kullanıcı tıklama çağrılır Şimdi

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

. Bu, geri ve ileri düğmelerine basıldığında çekirdeğe iletilecek olan historyData'u kaydeder.

örn.

• Kullanıcı Sarı seçeneğini belirleyin.
• Sarı kayıtlı.
• Kullanıcı Mavi'yi seçin.
• Mavi kayıtlı.
• Kullanıcı arkaya tıklayın.
• Sarı geri yüklendi.
• Kullanıcıyı ileri tıklatın.
• Mavi geri yüklendi.