1 Reply Latest reply on Oct 23, 2017 9:33 AM by Max Barkley

    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?

        • 1. Re: Dynamic menu
          Max Barkley Expert

          Hi Marcial,

           

          Your main problem is that you need to use Errai's dependency injection to get instances of your item, otherwise the templating never happens. To dynamically get instances, you have two options: inject a ManagedInstance<Item> or use the Errai bean manager.

           

          I suspect you will then run into problems from trying to attach Widgets as children of HTML Elements. In order for Widget events to work propertly, a Widget needs to be "attached" within the Widget hierarchy, which doesn't happen you append it's underlying element. Here is a utility you can use to do this properly.