如何启用 Primefaces 中步骤组件所在的按钮？

Question

几周前，我开始与一家新公司实习，他们正在与 Primefaces 合作以使用 Java EE。我对 Java 或 Primefaces 不太了解，所以我有点迷茫（就像我的英语一样）。

他们要求我制作一个 step 组件，但该组件无法按他们的意愿工作。他们需要组件在您单击下一步时不要禁用您所在的按钮，我的意思是，如果您处于第 4 步，他们希望让它启用，即使您向后退。

我尝试使其工作，将 readonly 属性更改为 false，使用一些带有一些变量的 JavaScript 来启用链接（但这会使我的项目崩溃），使用我用来更改颜色的 Java EE 变量.ui-step-number 但不适用于链接...

<p:steps widgetVar="steps" id="steps" readonly="false" activeIndex="#{actemplate.seccionRenovacion}" style="border: none; height: auto; width: 100%; font-weight: bold;">                                                                
    <p:menuitem id="menu_step1" class="menuItemRenewal" value="#{texto['ac_menu_step1']}" style="color:  #{actemplate.pasoRenovacion gt 1 ? 'green;' : ''}"/>
    <p:menuitem id="menu_step2" class="menuItemRenewal" value="#{texto['ac_menu_step2']}" outcome="tratamientos" style="color:  #{actemplate.pasoRenovacion gt 2 ? 'green;' : ''}"/>                                    
    <p:menuitem id="menu_step3" class="menuItemRenewal" value="#{texto['ac_menu_step3']}" outcome="personal" style="color:  #{actemplate.pasoRenovacion gt 3 ? 'green;' : ''}"/>
    <p:menuitem id="menu_step4" class="menuItemRenewal" value="#{texto['ac_menu_step4']}" outcome="encargados" style="color:  #{actemplate.pasoRenovacion gt 4 ? 'green;' : ''}"/>
    <p:menuitem id="menu_step5" class="menuItemRenewal" value="#{texto['ac_menu_step5']}" outcome="sitios_web" style="color:  #{actemplate.pasoRenovacion gt 5 ? 'green;' : ''}"/>                                         
</p:steps>

---

进入下一步时，可以点击之前的步骤，但是当你的页面发生变化时，你不能直接进入你正在工作的页面（如果你在第3页并转到第1页，不能直接再到第3页，需要再做之前的步骤）。

Answer 1

我有解决方案，但是使用 JavaScript，我不知道如何使它适用于 JAVA，但我会在这里发布，所以如果其他人有同样的问题，我希望它会也适用于您的代码。

<script>        
  var item1 = document.getElementById("menuform:menu_step1");
  var item2 = document.getElementById("menuform:menu_step2");
  var item3 = document.getElementById("menuform:menu_step3");
  var item4 = document.getElementById("menuform:menu_step4");
  var item5 = document.getElementById("menuform:menu_step5");

  // Step 1
  if(#{actemplate.pasoRenovacion} >= 1){
    item1.setAttribute("href", "mi_entidad.xhtml");
    item1.setAttribute("onclick", true);
    item1.style.cursor = "pointer";

    // Step 2
    if(#{actemplate.pasoRenovacion} >= 2){
      item2.setAttribute("href", "tratamientos.xhtml");
      item2.setAttribute("onclick", true);
      item2.style.cursor = "pointer";

      // Step 3
      if(#{actemplate.pasoRenovacion} >= 3){
        item3.setAttribute("href", "personal.xhtml");
        item3.setAttribute("onclick", true);
        item3.style.cursor = "pointer";

        // Step 4
        if(#{actemplate.pasoRenovacion} >= 4){
          item4.setAttribute("href", "encargados.xhtml");
          item4.setAttribute("onclick", true);
          item4.style.cursor = "pointer";

          // Step 5
          if(#{actemplate.pasoRenovacion} >= 5){
            item5.setAttribute("href", "sitios_web.xhtml");
            item5.setAttribute("onclick", true);
            item5.style.cursor = "pointer";          
          }
        }
      }
    }
  }
</script>

首先，我用对象“steps”的所有元素创建了一个变量。它也必须与 JQuery 一起使用，但公司没有实现它，所以我使用 DOM。

之后，我从 bean 中捕获了一个 JAVA 变量，当您进入下一步时，将一一添加。既然我们有这个，你可以做一个简单的'if'（我用它嵌套）。

最后，您可以为元素设置所需的属性。我设置了 href 和 click 事件（这两个很重要，因为 'steps' 元素将 href 更改为 #，而 click 事件更改为 false，当您没有通过该步骤时，您现在可以单击当前所在的步骤，或者如果您转到前面的步骤，则再次进入），并为光标赋予样式，看起来就像您通过链接一样。