Quản lý lùi lại và chuyển tiếp trong Richfaces

Question

Tôi đang sử dụng thư viện thành phần RichFaces và tôi muốn quản lý lịch sử điều hướng Ajax, do đó người dùng cuối có thể sử dụng các nút quay lại và tiến trình của trình duyệt.

Có cách nào sạch sẽ để làm điều đó, mẫu thiết kế, thư viện, v.v. không?

Answer 1

Bạn có thể sử dụng để xử lý RSH lịch sử Ajax

Ví dụ như cho phép giả định rằng bạn có một trang mà người dùng nên chọn một màu. Sau đó, màu được chọn sẽ được đăng lên máy chủ bằng XmlHttpRequest.

Bây giờ, chúng tôi muốn khôi phục lựa chọn trước đó khi nhấn nút điều hướng quay lại và tiến.

Mã số Ví dụ

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

} 

Xem:

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

Bây giờ khi bấm vào người dùng trên một màu registerHistoryPoint được gọi. Điều này sẽ đăng ký historyData sẽ được chuyển tới bean khi nhấn nút quay lại và tiến.

ví dụ:

• Người dùng chọn Vàng.
• Vàng được đăng ký.
• Người dùng chọn Xanh lam.
• Màu xanh được đăng ký.
• Người dùng nhấp vào trở lại.
• Vàng được khôi phục.
• Nhấp chuột của người dùng chuyển tiếp.
• Màu xanh được khôi phục.