बैकएंड प्रोसेसिंग पर प्रगति बार प्राइमफेस

Question

अगर कोई मुझे प्रगति पट्टी और AJAX बैक-एंड प्रोसेसिंग के बारे में कुछ संकेत दे सकता है तो मैं इसकी सराहना करता हूं।

स्पष्ट करने के लिए क्या मैं निम्नलिखित की जरूरत है विवरण हैं:

मैं बैक-एंड पर कुछ प्रसंस्करण करने के लिए एक आदेश बटन है। मैं एक प्रगति पट्टी दिखाना चाहूंगा जो बैकिंग बीन बैक-एंड निर्देशों को संसाधित करने पर 100% तक पहुंच जाए। मैंने कई धागे पर देखा लेकिन कोई किस्मत नहीं। उनमें से ज्यादातर ने ठोस नमूना नहीं दिखाया कि यह कैसे करें। नीचे मेरी कोड का एक टुकड़ा है:

</h:panelGrid> 
<p:commandButton id="btn" value="DoSomeAction" 
styleClass="ui-priority-primary" update="panel" 
onclick="PF('pbAjax').start();PF('startButton1').disable();" 
widgetVar="startButton1" 
actionListener="#{actionBean.DoSomeAction}" /> 

<p:progressBar widgetVar="pbAjax" ajax="true" 
value="#{progressBean.progress}" labelTemplate="{value}%" 
styleClass="animated"> 
<p:ajax event="complete" listener="#{progressBean.onComplete}" 
update="growl" oncomplete="startButton2.enable()" /> 
</p:progressBar> 
</p:panel> 

यह प्रगति ब्रीन के लिए कोड है:

@ManagedBean(name="progressBean") 
public class ProgressBean implements Serializable { 

    private Integer progress; 

    public Integer getProgress() { 
    if(progress == null) 
     progress = 0; 
    else { 
     progress = progress + (int)(Math.random() * 35);  
     if(progress > 100) 
     progress = 100; 
    } 

    return progress; 
    } 

    public void setProgress(Integer progress) { 
    this.progress = progress; 
    } 

    public void onComplete() { 
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed")); 
    } 

    public void cancel() { 
    progress = null; 
    } 
} 

इस कोड का परिणाम है सिर्फ एक खाली प्रगति बार और कुछ भी नहीं हो सकता है जब मैं पर क्लिक करें मेरा बटन अग्रिम धन्यवाद।

Answer 1

यदि मैं आपको दो बीन्स के बाद से बस अपने नमूना कोड के माध्यम से चलता हूं तो मुझे आसान होगा और मुझे उनके बीच बातचीत नहीं पता है। आप इसे अपने आप लागू करने के लिए इसका उपयोग कर सकते हैं।

<p:commandButton>

<p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton1.disable();" widgetVar="startButton1" /> 

यहां कुछ भी प्रभावशाली। आपके पास commandButtonwidgetVar="startButton1" के साथ है। जब आप उस पर क्लिक करते हैं, onclickcommandButton में आता है और अक्षम करता है। यह pbAjax.start() (<p:progressBar> के माध्यम से widgetVar = "pbAjax.start()") के माध्यम से शुरू करने के लिए <p:progressBar> पर भी संकेत करता है।

<p:progressBar>

<p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%"> 
    <p:ajax event="complete" listener="#{progressBean.onComplete}" 
      update="growl" oncomplete="startButton1.enable()"/> 
</p:progressBar> 

<p:progressBar> बस #{progressBean.progress} बुला प्रगति अपडेट करने रखेंगे। जब प्रगति 100%<p:ajax> तक पहुंच जाती है और #{progressBean.onComplete} पर कॉल करती है। <p:commandButton> पुनः सक्षम हो गए और <p:growl> अपडेट हो गए। ध्यान दें कि मैं PF(...) का उपयोग कैसे नहीं कर रहा हूं। ईमानदार होने के लिए, मुझे यकीन नहीं है कि इससे कोई फर्क पड़ता है, मैंने परीक्षण नहीं किया।

नोट

में अपने <p:progressBar> आप oncomplete="startButton2.enable() है। यह startButton1.enable() होना चाहिए क्योंकि आपके widgetVar आपके <p:commandButton> के लिए मान startButton1 है।

इसके अलावा, ध्यान दें कि मैंने styleClass="animated" का उपयोग नहीं किया है। इसके साथ, आपको ब्लू बार दिखने वाला ब्लेंड मिलेगा। यदि आप इसका उपयोग करना चाहते हैं तो आपको कुछ अतिरिक्त कदम उठाने की आवश्यकता है। आपका कोड देखकर, ऐसा लगता है कि आप इसे प्राइमफेस शोकेस से सीधे ले जा रहे हैं, इसलिए मैं उनकी संपत्ति का भी उपयोग करूंगा।

का उपयोग styleClass="animated"

पहले, आप अपने webapp फ़ोल्डर (Netbeans के लिए Web Pages) में एक फ़ोल्डर resources कहा जाता है बनाने के लिए जा रहे हैं। फिर css नामक फ़ोल्डर बनाएं और style.css नामक स्टाइलशीट में जोड़ें। निर्देशिका संरचना इस तरह होगी: resources/css/style.css। style.css में आपको इस नियम को परिभाषित करने होंगे। (चिंता न करें अगर यह उलझन में है, तो मेरे पास पूरा कोड होगा)।

.animated .ui-progressbar-value { 
    background-image: url("#{resource['images/pbar-ani.gif']}"); 
} 

तो फिर तुम resources के तहत एक images फ़ोल्डर बनाने और उस फ़ोल्डर (resources/images/pbar-ani.gif) में छवि pbar-ani.gif जगह जा रहे हैं। नीचे छवि।

सुनिश्चित करें कि आप <h:head> में <h:outputStylesheet name='css/style.css' /> है और <p:progressBar> में styleClass="animated" जोड़े हैं।

महत्वपूर्ण!

यदि आप प्राइमफ़ेस 3.5 का उपयोग कर रहे हैं, तो मैं छवि प्रदर्शित नहीं करूंगा (जिसमें आप styleClass का उपयोग नहीं कर रहे हैं)। आप Firebug को बारीकी से देखें तो आपको निम्न त्रुटि

Uncaught TypeError: Object #<Object> has no method 'easeInOutCirc' 

इस के लिए One workaround I found बस डमी <p:dialog> उपयोग करने के लिए है देखेंगे।

यही है।

progressBar के बारे में developer's guide के माध्यम से आप अधिक जानकारी प्राप्त कर सकते हैं।

यदि आप सोच रहे हैं कि मुझे कैसे पता चलेगा कि छवि कहां प्राप्त करें आपको शोकेस डाउनलोड करना होगा। आप यह article to find out how to download the showcase पढ़ सकते हैं। मेरी राय में, जब आप वास्तव में शोकेस कोड का उपयोग करना चाहते हैं, तो यह बेहतर होगा कि आप बस डेमो डाउनलोड करें। अक्सर समय या तो मैं पूरी तस्वीर नहीं देख रहा हूं या शोकेस में कोड में कुछ गलतियां हैं

वैसे भी नमूना कोड वादा किया गया है। मैं शोकेस से उसी ProgressBean का उपयोग कर रहा हूं (आपके जैसा ही)। ध्यान रखें कि प्रगति पट्टी को अपडेट करने के लिए आपको ProgressBean के साथ आपकी ऑब्जेक्ट कैसे इंटरैक्ट करता है, इस तर्क के साथ आपको तर्क देना होगा।

सारांश

<h:head> 
    <h:outputStylesheet name='css/style.css' /> 
</h:head> 
<h:body> 
    <h:form > 
     <p:growl id="growl" /> 
     <h3>Advanced Ajax ProgressBar</h3> 
     <p:commandButton value="Start" type="button" onclick="pbAjax.start(); 
       startButton1.disable();" widgetVar="startButton1" /> 
     <br /><br /> 
     <p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%" styleClass="animated"> 
      <p:ajax event="complete" listener="#{progressBean.onComplete}" 
        update="growl" oncomplete="startButton1.enable()"/> 
     </p:progressBar> 
     <p:dialog></p:dialog><!-- For PrimeFaces 3.5 --> 
    </h:form> 
</h:body> 

और याद अपने निर्देशिका

resources/css/style.css

resources/images/pbar-ani.gif