Как я могу включить кнопку, где я нахожусь из компонента шагов в Primefaces? - PullRequest
Новая
       23

Как я могу включить кнопку, где я нахожусь из компонента шагов в Primefaces?

1 голос
/ 15 мая 2019

Несколько недель назад я начал свою стажировку в новой компании, и они работают с Primefaces для использования Java EE . Я не слишком много знаю о Java или Primefaces, поэтому я немного растерялся (как и с моим английским).

Они просят меня сделать шаговый компонент , но компонент не работает так, как они хотят. Им нужно, чтобы компонент не отключал кнопку, на которой вы находитесь, когда вы нажимаете на следующий шаг, я имею в виду, что если вы находитесь на шаге 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, вам нужно сделать шаг раньше).

1 Ответ

0 голосов
/ 21 мая 2019

У меня есть решение, но с использованием 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 .

После этого я записываю переменную JAVA из bean , которая будет добавлена ​​один за другим при переходе к следующему шагу. Так как у нас это есть, вы можете сделать простое «если» (я использую его вложенным).

Наконец, вы можете установить атрибуты, которые вы хотите для элемента. Я установил href и событие click (, два из которых являются важными , потому что элементы 'steps' заменяют href на # , а событие click - на false Если вы не пропустили этот шаг, с этими изменениями вы можете теперь щелкнуть по шагу, которым вы являетесь в данный момент, или пришли снова, если вы переходите к шагу предыдущих шагов), и придать стиль курсору, чтобы он выглядел как вы. по ссылке.

...