2 Replies Latest reply on Jun 6, 2018 1:04 AM by Daniel Korbel

    Dynamic menu

    Marcial Atiénzar Navarro Newbie

      Hello,

       

      I'm new on Errai. I'm trying to get an idea of how to work with UI.

       

      My first approach it's to create a dynamic menu with page navigation.

       

      I've create two classes Menu and Item:

       

      Captura de pantalla 2017-10-22 a las 2.20.51.png

       

      Menu.java

       

      @Templated
      public class Menu extends Composite {
      
          @Inject
          @DataField
          private UListElement menu;
      
      
          /**
           * Añadimos un item al menú
           * @param item
           */
          public void addItem(Item item){
              menu.appendChild(item.getElement());
          }
          
      }
      

       

      Menu.html

       

      <ul class="navbar-nav mr-auto" data-field="menu">
      </ul>
      

       

      Item.java

       

      @Templated
      public class Item<T extends PageNavigation> extends Composite {
      
      
          @Inject
          @DataField
          TransitionAnchor<T> transitionTo;
      
      
          public void setLabel(String label) {
              transitionTo.setHTML(label);
          }
      }
      

       

      Item.html

       

      <li class="nav-item">
         <a class="nav-link" data-field="transitionTo"></a>
      </li>
      

       

       

      This code is used in NavBar.java

       

      @ApplicationScoped
      @Templated("main.html#navbar")
      @Page( role = DefaultPage.class)
      public class NavBar extends Composite {
      
      
          @Inject
          @DataField
          private Menu navlist;
      
      
          @PostConstruct
          public void init() {
      
              Item planEstrategico = new Item<Plan>();
              Item proyectos = new Item<Plan>();
              Item temasPendientes = new Item<Plan>();
              Item proximasReuniones = new Item<Plan>();
      
              planEstrategico.setLabel("Plan estratégico");
              proyectos.setLabel("Proyectos");
              temasPendientes.setLabel("Temas pendientes");
              proximasReuniones.setLabel("Próximas reuniones");
      
              navlist.addItem(planEstrategico);
              navlist.addItem(proyectos);
              navlist.addItem(temasPendientes);
              navlist.addItem(proximasReuniones);
          }
      
      }
      

       

       

      When I run this code it crashes on NavBar.java when setting label of item (planEstrategico.setLabel("Plan estratégico");)

       

      Is ti possible to dynamic doing things like this?