s: adımlar ancak tüm üzerinde tıklayın etkinleştirmek

Question

aşağıda gibi etiketi <p:steps> kullanarak primefaces adımlar var adımları:

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

Ve sonuç şu şekildedir: Ben 1. adımı tıklayabilirsiniz

ama adım 3 ve 4 değil. Tüm adımlar için tıklamayı nasıl etkinleştirebilirim?

Answer 1

Vay, bu güzel bir soru!

Mevcut API ile bunu başarmak için pek çok şey denedim, ancak mevcut seçeneklerimizle mümkün görünmüyor gibi görünüyor.

Ben Adımlar bileşen için özel bir oluşturucusunu yazdığı bu çözmek için: Aşağıdaki kodu çoğu

PrimeFaces en GitHub aynıdır. Bu sorunu çözmek için birkaç şeyi değiştirdim.

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

Ardından, faces-config.xml dosyasında bu yeni dönüştürücü kaydedilmeye:

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

sizin CustomStepsRenderer paket konuma YOUR_PACKAGE değiştirmek unutmayın. Bundan sonra

, sadece build/yeniden dağıtmak Başvurunuzu ve her şey iyi çalışması gerekir:

Answer 2

Eh, p:steps ve p:wizard temsil veya süreç simplication için tek bir form (adım adım) birden adımlarını yönetmek için bir iş akışı içinde adım (lar) gösterir ve eğer birbirlerine alternatif olarak kullanılabilir PrimeFaces bileşen paketi bileşenleridir Kullanımı doğru şekilde anlamak (gereksinime bağlı olarak).

p:steps bileşenini kullanmak için, bir sonraki adımın yalnızca geçerli adım tamamen işlendiğinde ve gerekli verilerin toplandığında görüntüleneceğinden emin olmalısınız. Ödeme işleminin son adım olduğu ve yalnızca sepetinizdeki herhangi bir öğeniz varsa ve diğer bilgileri sağladıysa (varsa) görünecek olan çevrimiçi alışveriş sürecini varsayın.

Yukarıdaki senaryo, p:wizard bileşenini kullanarak da uygulanabilir. Yalnızca geçerli adımın işlendiği yerde, geçerli adım geçerlilikleri geçerse, kısmen ve sonraki adım görüntülenir. Ancak, p:wizard bileşeni, sihirbaz akışını denetleyerek, özel eylem işleyicileriyle önceki özel & düğmelerinin oluşturulmasını ve sonraki adımları görüntülemek için onaylamanın atlanmasını sağlayarak varsayılan davranışını geçersiz kılacak bir fizibiliteye sahiptir.