Richfaces

Question

में वापस और आगे प्रबंधित करें मैं RichFaces घटक लाइब्रेरी का उपयोग कर रहा हूं और मैं अजाक्स नेविगेशन का इतिहास प्रबंधित करना चाहता हूं, इसलिए एंडुसर ब्राउज़र का बैक और अग्रेषित बटन का उपयोग कर सकता है।

क्या ऐसा करने के लिए कोई साफ तरीका है, डिज़ाइन पैटर्न, लाइब्रेरी इत्यादि?

Answer 1

आप अजाक्स इतिहास

उदाहरण के लिए संभाल करने के लिए मान की सुविधा देता है कि आप एक पृष्ठ जहाँ उपयोगकर्ता एक रंग का चयन करना चाहिए कि RSH उपयोग कर सकते हैं। फिर, चयनित रंग XmlHttpRequest का उपयोग कर सर्वर पर पोस्ट किया गया है।

अब हम पिछले चयन को पुनर्स्थापित करना चाहते हैं जब पीछे और आगे नेविगेशन बटन दबाए जाएं।

कोड उदाहरण

बीन:

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

} 

दृश्य:

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

अब जब एक रंग registerHistoryPoint पर उपयोगकर्ता क्लिक शुरू हो जाती है। यह historyData पंजीकृत करेगा जो बैक और आगे बटन दबाए जाने पर बीन को पारित किया जाएगा।

उदा।

• उपयोगकर्ता पीला चुनें।
• पीला पंजीकृत है।
• उपयोगकर्ता का चयन करें नीला।
• ब्लू पंजीकृत है।
• उपयोगकर्ता पीछे क्लिक करें।
• पीला बहाल किया गया है।
• उपयोगकर्ता आगे क्लिक करें।
• ब्लू बहाल किया गया है।