Question

我有使用标记<p:steps>的主要步骤，如下所示：

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

结果是这样的：

我可以点击第1步，但不能点击步骤3和4.如何启用所有步骤的点击？

Answer 1

哇，这是一个很好的问题！

我已经尝试使用当前的API来完成它，但看起来我们当前的选项是不可能的。

为了解决这个问题，我为Steps组件编写了一个自定义渲染器：

以下大部分代码与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>

不要忘记将YOUR_PACKAGE更改为CustomStepsRenderer软件包位置。

之后，只需构建/重新部署您的应用程序，一切都应该正常工作：

Answer 2

嗯，p:steps和p:wizard是PrimeFaces组件套件中的组件，用于表示或指示工作流中的步骤，以便为流程简化管理单个表单的多个步骤（一步一步）如果您正确理解使用情况（根据要求），可以互换使用。

对于使用p:steps组件，您应确保仅在完全处理当前步骤并收集所需数据时才显示下一步骤。假设在线购物的过程，其中付款处理是最后一步，当且仅当您在购物车中有任何商品并且提供了其他信息（如果有的话）时才会出现。

也可以使用p:wizard组件实现上述方案。如果当前步骤通过验证，则仅部分处理当前步骤并显示下一步骤。但是，p:wizard组件有可能通过控制向导流来覆盖它的默认行为，呈现自定义的先前＆amp;带有自定义操作处理程序的下一个按钮以及跳过验证以查看后续步骤。

Answer 3

菜单：我可能会稍后回答您的问题，但是我会发布它，以便如果其他角色遇到相同的问题，可能对他们有用。

我使用 JavaScript 作为解决方案，所以可能不是您需要的解决方案：

// That is your code. I added ids to capture them with the DOM.
<p:steps activeIndex="3" styleClass="custom" readonly="false" style="padding: 20px;">
   <p:menuitem value="step 1." actionListener="#{masterController.menuSales(preferencesController)}" update="mainPanel" id="step1"/>
   <p:menuitem value="step 2." actionListener="#{masterController.menuCustomer(preferencesController)}" update="mainPanel" id="step2"/>
   <p:menuitem value="step 3." actionListener="#{masterController.menuItem(preferencesController)}" update="mainPanel" id="step3"/>
   <p:menuitem value="step 4" id="step4"/>
</p:steps>

// Now we can make the script
<script>
  // First of all, we will capture all the steps with the DOM (you can also work with jQuery, but I will post the solution with DOM in case you do not have your code prepared to jQuery)
  var step1 = document.getElementById("menuform:step1");
  var step2 = document.getElementById("menuform:step2");
  var step3 = document.getElementById("menuform:step3");
  var step4 = document.getElementById("menuform:step4");

  // Then, we are going to set the attributes href and onclick, and give them some style to make the elements look like proper links
  step1.setAttribute("href", "[url]");
  step1.setAttribute("onclick", true);
  step1.style.cursor = "pointer";

  step2.setAttribute("href", "[url]");
  step2.setAttribute("onclick", true);
  step2.style.cursor = "pointer";

  step3.setAttribute("href", "[url]");
  step3.setAttribute("onclick", true);
  step4.style.cursor = "pointer";

  step4.setAttribute("href", "[url]");
  step4.setAttribute("onclick", true);
  step4.style.cursor = "pointer";
</script>

更改 href 和 onclick （单击事件）很重要，因为元素“ 步骤”会同时更改它们，就像这样当您使用控制台检查代码时，它看起来像： -href =“＃” -onclick =“ return false;”

p：步骤但是单击所有步骤

3 个答案: