1 Reply Latest reply on Mar 4, 2018 1:55 PM by William Siqueira

    How to wrap static DOM elements

    Jens K. Schødt Newbie

      Hi,

      I have elements in a todo list that I load as plain static html (not inserted by gwt). I have the same elements as errai template elements so the users can insert new elements dynamically to the list. Is there a way to wrap the static elements by gwt so the user can delete/edit the static elements just like the elements inserted by gwt. Something like TodoTemplateElement.wrap(domElement)?

       

      Thanks, J

        • 1. Re: How to wrap static DOM elements
          William Siqueira Newbie

          Hi,

           

          I don't know if it answers your question, but I see that errai devs are moving to use elemental2. So you can inject HTML elements in your template java class. Here's an example.

           

          The template:

           

          <div class="list-group-item" data-field="evento">
          <div class="list-group-item-text">
          <div class="item-info">
          <h4 data-field="nome">Nome Evento</h4>
          <small><em data-field="descricao">Descricao</em></small>
          </div>
          </div>
          </div>
          

           

           

          The Java code:

           

          import javax.inject.Inject;
          import javax.inject.Named;
          import org.jboss.errai.databinding.client.api.DataBinder;
          import org.jboss.errai.ui.client.local.api.IsElement;
          import org.jboss.errai.ui.shared.api.annotations.AutoBound;
          import org.jboss.errai.ui.shared.api.annotations.Bound;
          import org.jboss.errai.ui.shared.api.annotations.DataField;
          import org.jboss.errai.ui.shared.api.annotations.Templated;
          import org.jugvale.cfp.model.impl.Evento;
          import com.google.gwt.user.client.TakesValue;
          import elemental2.dom.HTMLElement;
          import elemental2.dom.HTMLHeadingElement;
          
          
          @Templated("/web/EventoWidget.html#evento")
          public class EventoWidget implements TakesValue<Evento>, IsElement {
          
          
          @Inject
          @AutoBound
          DataBinder<Evento> eventoBinder;
          
          
          @Bound
          @Inject
          @DataField
          @Named("h4")
          HTMLHeadingElement nome;
          
          @Bound
          @Inject
          @DataField
          @Named("em")
          HTMLElement descricao;
          
          
          @Override
          public void setValue(Evento evento) {
          this.eventoBinder.setModel(evento);
          }
          
          
          @Override
          public Evento getValue() {
          return eventoBinder.getModel();
          }
          
          
          }
          

           

          If you want to make a list of "Evento" then you can use ListComponent. If you want to inject more HTML inject the root element (like a div) and add HTML to it.