Dynamic menu

[marcial.atienzar]

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:

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?

[mbarkley]

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.

[masterdany88]

Hey.  Did solved this? What solution did You pick?