प्रदर्शित होने पर modalPanel आलसी प्रतिपादन

Question

प्रेरणा: मैं पृष्ठ के आकार को कम करने के लिए कम करना चाहता हूं, इसलिए मैंने सोचा कि मोडलपैनल्स पर आलसी प्रतिपादन मदद करेगा। विचार मॉडलल को प्रस्तुत करना है जब उपयोगकर्ता इसे प्रदर्शित करने वाले लिंक पर क्लिक करता है।

मैं इसे प्रदर्शित करने के लिए लिंक पर क्लिक करके rich:modalPanel पर आलसी प्रस्तुत करना चाहता हूं।

modalPanel संहिता, एक a4j:outputPanel

<a4j:outputPanel id="a4jPanel"> 
    <rich:modalPanel id="panel" rendered="#{bean.renderPanel}"> 
     <!-- here modalPanel things --> 
    </rich:modalPanel> 
</a4j:outputPanel> 

समर्थन सेम संहिता (सत्र दायरा) के अंदर लिपटे:

public boolean isRenderPanel() { 
    return renderPanel; //default value is false; 
    } 

    public void setRenderPanel(boolean value){ 
      this.renderPanel=value; 
    } 

    public setRenderFalse(){ 
      this.setRenderPanel(false); 
    } 

संहिता इस एक तरह से प्राप्त करने के लिए मैंने पाया पृष्ठ जहां इसे बुलाया जाता है:

<a4j:form> 
<a4j:jsFunction name="setRenderFalse" action="#{user.setRenderFalse}"/> 
<a4j:commandLink value="render and show" oncomplete="Richfaces.showModalPanel('panel');setRenderFalse();" reRender="a4jPanel"> 
<f:setPropertyActionListener target="#{user.renderPanel}" value="true" /> 
</a4j:commandLink> 
</a4j:form> 

समस्याएं:

• modalPanel (मैं कभी नहीं समझा क्यों) एक a4j:outputPanel अंदर लिपटे होने के लिए क्योंकि reRendering सीधे modalPanel काम नहीं करता है की जरूरत है।

• इसे प्रस्तुत करने के बाद, रेंडर मान को झूठी (सेट बीन सत्र स्कॉप्ड) सेट करने के लिए एक अतिरिक्त अनुरोध की आवश्यकता है। अन्यथा यदि हम पृष्ठ को फिर से लोड करते हैं तो कोई आलसी प्रतिपादन नहीं होगा क्योंकि मान true पर सेट किया गया था।

• समर्थन सेम एक संपत्ति को संभालने के लिए प्रत्येक modalPanel के लिए राज्य रखने के लिए है, हालांकि इस संपत्ति true पर सेट किया जाता है जब भी लिंक पर क्लिक किया और false पर सेट होता अनुरोध समाप्त हो गया है है। मैंने जेएस चर के साथ rendered स्थिति रखने की कोशिश की है, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है (पृष्ठ को लोड होने के बाद वे पढ़े जाते हैं और कभी नहीं)।

ऐसा करने के लिए कोई और शानदार तरीका?

Answer 1

आपके प्रश्न के बारे में एक अच्छा समाधान है। पोस्टबैक और एक्सएचटीएमएल के जोड़े को पहचानने का एक तरीका है।

<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:c="http://java.sun.com/jstl/core" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 

</ui:composition> 

modal.xhtml एक खाली सामग्री के लिए - -

सबसे पहले हम एक सेम पोस्टबैक के संकेत

public class HelperBean { 

    public boolean isPostback() { 
     FacesContext context = FacesContext.getCurrentInstance(); 
     return context.getRenderKit().getResponseStateManager().isPostback(context); 
    } 

} 

empty.xhtml साथ में मदद मिलेगी की जरूरत मोडल परिभाषा

लपेटकर के लिए

<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:c="http://java.sun.com/jstl/core" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 

    <rich:modalPanel id="myLazyModal"> 
     <h:outputText value="Modal Content"/> 
    </rich:modalPanel> 
</ui:composition> 

आलसी मॉडल।एक्सएचटीएमएल - ऊपर xhtmls के शामिल किए जाने से निपटने के लिए

<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:c="http://java.sun.com/jstl/core" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 

    <a4j:include id="lazyModal" layout="block" 
     viewId="#{helperBean.postback ? 'modal.xhtml' : 'empty.xhtml'}"/> 
</ui:composition> 

अंत का उपयोग यह

<h:form id="frmTest"> 
     <a4j:include id="lazyModalContainer" layout="block" viewId="lazyModal.xhtml"/> 
     <a4j:commandButton id="btnSubmit" value="Submit" reRender="lazyModalContainer" 
      oncomplete="Richfaces.showModalPanel('myLazyModal');"/> 
    </h:form> 

अब, जब पेज लोड empty.xhtml तक btnSubmit क्लिक किया जाता है शामिल किया जाएगा।

---

समस्याओं आप का उल्लेख (1) के बारे में:

गाया विशेषता के साथ

पुन: प्रतिपादन घटकों थोड़ा आकर्षक है। जब प्रस्तुत अभिव्यक्ति का मूल्यांकन किया जाता है तो झूठी कोई मार्कअप क्लाइंट को वापस नहीं भेजा जाता है। इसलिए, पुनर्विक्रेता विशेषता के लिए किसी भी प्रस्तुत घटक की आईडी की आपूर्ति कभी भी काम नहीं करेगी क्योंकि क्लाइंट साइड (डीओएम) पर ऐसी कोई आईडी नहीं है।

Answer 2

मुझे लगता है कि आपको मोडल पैनल का अलग एक्सएचटीएमएल (फेसलेट) बनाना चाहिए और यूई का उपयोग करना चाहिए: लिंक में शामिल करें और लिंक की तुलना में बूलियन संपत्ति की आवश्यकता नहीं है।

enter code here : <ui:include src="modalPanel path">, <a4j:commandLink id="abclink" oncomplete="#{rich:component('yourPanelname')}.show()" reRender="yourPanelForm"/> 

Answer 3

एक और समाधान जेएसएफ घटक पेड़ में प्रोग्रामेटिक रूप से अपने मॉडेलपनेल की रेंडर विशेषता सेट करना है। तो अगर आप प्रत्येक modalPanel के लिए राज्य को रखने के लिए एक अतिरिक्त समर्थन सेम एक संपत्ति को संभालने के लिए है जो की जरूरत है wont't:

प्रबंधित बीन:

public void togglePanel(ActionEvent event) { 
    UIComponent component = event.getComponent(); 
    String forId = (String) component.getAttributes().get("for"); 

    FacesContext currentInstance = FacesContext.getCurrentInstance(); 
    UIComponent findComponent = ComponentFinder.findComponent(currentInstance.getViewRoot(), forId); 
    findComponent.setRendered(!findComponent.isRendered()); 
} 

दृश्य:

ओपन पैनल:

<a4j:commandLink actionListener="#{myBean.togglePanel}" value="Open"> 
<f:attribute name="for" value="targetPanelId" /> 

बंद पैनल:

<a4j:commandLink id="closePanel" actionListener="#{myBean.togglePanel}" value="someLabel"> 
<f:attribute name="for" value="targetPanelId" /> 

modalpanel: include`:

<a4j:outputPanel ajaxRendered="true"> 
     <rich:modalPanel id="targetPanelId" width="800" height="500" rendered="false" showWhenRendered="true">