2017-08-11 12 views
5

मैं टैग <p:steps> का उपयोग कर नीचे की तरह primefaces चरणों है:p: चरणों लेकिन सभी पर क्लिक करने के लिए सक्षम कदम

<p:steps activeIndex="3" styleClass="custom" readonly="false" style="padding: 20px;"> 
    <p:menuitem value="step 1." actionListener="#{masterController.menuSales(preferencesController)}" update="mainPanel"/> 
    <p:menuitem value="step 2." actionListener="#{masterController.menuCustomer(preferencesController)}" update="mainPanel"/> 
    <p:menuitem value="step 3." actionListener="#{masterController.menuItem(preferencesController)}" update="mainPanel"/> 
    <p:menuitem value="step 4"/> 
</p:steps> 

और परिणाम इस तरह है:

enter image description here

मैं चरण 1 क्लिक कर सकते हैं लेकिन चरण 3 और 4 नहीं। 4. मैं सभी चरणों के लिए क्लिक कैसे सक्षम कर सकता हूं?

+0

आप 'का उपयोग कर पी लागू करने के लिए कोशिश कर रहे हैं: steps'? –

+0

उपयोगकर्ता को यह जानने के लिए कि ट्यूटोरियल को पूरा करने के लिए उसे क्या कदम उठाना चाहिए, लेकिन उपयोगकर्ता मुख्य मेनू –

+1

से लिंक पर क्लिक करने के बजाय अगले/पिछड़े चरण पर कदम क्लिक कर सकता है जैसे कि आप काम करना चाहते हैं p: tabView इसके बजाय। आपने शायद पी चुना है: कॉस्मेटिक कारणों के लिए कदम, जो बीमार सलाह दी जाती है। –

उत्तर

4

वाह, यह एक अच्छा सवाल है!

मैंने वर्तमान एपीआई के साथ इसे पूरा करने के लिए कई चीजों की कोशिश की है, लेकिन ऐसा लगता है कि हमारे वर्तमान विकल्पों के साथ यह संभव नहीं है।

इसे सुलझाने के लिए मैं कदम घटक के लिए एक कस्टम रेंडरर लिखा है:

नीचे कोड के अधिकांश PrimeFaces के GitHub से ही है। मैंने इस विशिष्ट समस्या को हल करने के लिए कुछ चीजें बदल दी हैं।

import java.io.IOException; 
import java.util.ArrayList; 
import java.util.LinkedHashMap; 
import java.util.List; 
import java.util.Map; 
import javax.faces.FacesException; 
import javax.faces.component.UIComponent; 
import javax.faces.context.FacesContext; 
import javax.faces.context.ResponseWriter; 
import org.primefaces.component.api.AjaxSource; 
import org.primefaces.component.api.UIOutcomeTarget; 
import org.primefaces.component.steps.Steps; 
import org.primefaces.component.steps.StepsRenderer; 
import org.primefaces.model.menu.MenuItem; 
import org.primefaces.util.ComponentTraversalUtils; 

public class CustomStepsRenderer extends StepsRenderer { 

@Override 
protected void encodeItem(FacesContext context, Steps steps, MenuItem item, int activeIndex, int index) throws IOException { 
    ResponseWriter writer = context.getResponseWriter(); 
    String itemClass; 

    if (steps.isReadonly()) { 
     itemClass = (index == activeIndex) ? Steps.ACTIVE_ITEM_CLASS : Steps.INACTIVE_ITEM_CLASS; 
    } else { 
     if (index == activeIndex) { 
      itemClass = Steps.ACTIVE_ITEM_CLASS; 
     } 
     else { 
      itemClass = Steps.VISITED_ITEM_CLASS; 
     } 
    } 

    String containerStyle = item.getContainerStyle(); 
    String containerStyleClass = item.getContainerStyleClass(); 

    if (containerStyleClass != null) { 
     itemClass = itemClass + " " + containerStyleClass; 
    } 

    //header container 
    writer.startElement("li", null); 
    writer.writeAttribute("class", itemClass, null); 
    writer.writeAttribute("role", "tab", null); 
    if (containerStyle != null) { 
     writer.writeAttribute("style", containerStyle, null); 
    } 

    encodeMenuItem(context, steps, item, activeIndex, index); 

    writer.endElement("li"); 
} 

@Override 
protected void encodeMenuItem(FacesContext context, Steps steps, MenuItem menuitem, int activeIndex, int index) throws IOException {   
    ResponseWriter writer = context.getResponseWriter(); 
    String title = menuitem.getTitle(); 
    String style = menuitem.getStyle(); 
    String styleClass = this.getLinkStyleClass(menuitem); 

    writer.startElement("a", null); 
    writer.writeAttribute("tabindex", "-1", null); 
    if (shouldRenderId(menuitem)) { 
     writer.writeAttribute("id", menuitem.getClientId(), null); 
    } 
    if (title != null) { 
     writer.writeAttribute("title", title, null); 
    } 

    writer.writeAttribute("class", styleClass, null); 

    if (style != null) { 
     writer.writeAttribute("style", style, null); 
    } 

    if (steps.isReadonly() || menuitem.isDisabled()) { 
     writer.writeAttribute("href", "#", null); 
     writer.writeAttribute("onclick", "return false;", null); 
    } else { 
     String onclick = menuitem.getOnclick(); 

     //GET 
     if (menuitem.getUrl() != null || menuitem.getOutcome() != null) { 
      String targetURL = getTargetURL(context, (UIOutcomeTarget) menuitem); 
      writer.writeAttribute("href", targetURL, null); 

      if (menuitem.getTarget() != null) { 
       writer.writeAttribute("target", menuitem.getTarget(), null); 
      } 
     } //POST 
     else { 
      writer.writeAttribute("href", "#", null); 

      UIComponent form = ComponentTraversalUtils.closestForm(context, steps); 
      if (form == null) { 
       throw new FacesException("MenuItem must be inside a form element"); 
      } 

      String command; 
      if (menuitem.isDynamic()) { 
       String menuClientId = steps.getClientId(context); 
       Map<String, List<String>> params = menuitem.getParams(); 
       if (params == null) { 
        params = new LinkedHashMap<String, List<String>>(); 
       } 
       List<String> idParams = new ArrayList<String>(); 
       idParams.add(menuitem.getId()); 
       params.put(menuClientId + "_menuid", idParams); 

       command = menuitem.isAjax() 
         ? buildAjaxRequest(context, steps, (AjaxSource) menuitem, form, params) 
         : buildNonAjaxRequest(context, steps, form, menuClientId, params, true); 
      } else { 
       command = menuitem.isAjax() 
         ? buildAjaxRequest(context, (AjaxSource) menuitem, form) 
         : buildNonAjaxRequest(context, ((UIComponent) menuitem), form, ((UIComponent) menuitem).getClientId(context), true); 
      } 

      onclick = (onclick == null) ? command : onclick + ";" + command; 
     } 

     if (onclick != null) { 
      writer.writeAttribute("onclick", onclick, null); 
     } 
    } 

    writer.startElement("span", steps); 
    writer.writeAttribute("class", Steps.STEP_NUMBER_CLASS, null); 
    writer.writeText((index + 1), null); 
    writer.endElement("span"); 

    Object value = menuitem.getValue(); 
    if (value != null) { 
     writer.startElement("span", steps); 
     writer.writeAttribute("class", Steps.STEP_TITLE_CLASS, null); 
     writer.writeText(value, null); 
     writer.endElement("span"); 
    } 

    writer.endElement("a"); 
} 

फिर, अपने faces-config.xml फ़ाइल में इस नए रेंडरर रजिस्टर:

<render-kit> 
     <renderer> 
      <component-family>org.primefaces.component</component-family> 
      <renderer-type>org.primefaces.component.StepsRenderer</renderer-type> 
      <renderer-class>YOUR_PACKAGE.CustomStepsRenderer</renderer-class> 
     </renderer> 
    </render-kit> 

मत भूलना अपने CustomStepsRenderer पैकेज स्थान पर YOUR_PACKAGE बदलने के लिए।

उसके बाद, बस निर्माण/पुनः तैनात अपने आवेदन और सब कुछ ठीक काम करना चाहिए:

enter image description here

+1

आपके उत्तर के लिए धन्यवाद –

2

खैर, p:steps और p:wizard PrimeFaces घटक कमरे में घटक है कि प्रतिनिधित्व करते हैं या एक कार्यप्रवाह में कदम (रों) से संकेत मिलता है प्रक्रिया simplication के लिए एक फार्म (चरण दर चरण) के कई चरणों के प्रबंधन के लिए और अगर आप दूसरे शब्दों में किया जा सकता है उपयोग को सही ढंग से समझें (आवश्यकता के आधार पर)।

p:steps घटक का उपयोग करने के लिए, आपको यह सुनिश्चित करना चाहिए कि अगला चरण केवल तभी प्रदर्शित किया जाएगा जब वर्तमान चरण पूरी तरह संसाधित हो और आवश्यक डेटा एकत्र हो जाए। ऑनलाइन खरीदारी की प्रक्रिया मानें, जहां भुगतान प्रक्रिया अंतिम चरण है और यह तब दिखाई देगा जब आपके और आपके कार्ट में कोई आइटम हो और अन्य जानकारी (यदि कोई हो) प्रदान की हो।

उपरोक्त परिदृश्य को p:wizard घटक का उपयोग करके भी कार्यान्वित किया जा सकता है। जहां वर्तमान चरण केवल आंशिक रूप से संसाधित किया जाता है और वर्तमान चरण मान्य होने पर अगला चरण प्रदर्शित होता है। हालांकि, p:wizard घटक में विज़ार्ड प्रवाह को नियंत्रित करके, कस्टम पिछले & कस्टम बटन हैंडलर के साथ अगले बटन और अगले चरणों को देखने के लिए सत्यापन को छोड़कर इसके डिफ़ॉल्ट व्यवहार को ओवरराइड करने की व्यवहार्यता है।

संबंधित मुद्दे