How to wrap static DOM elements

[schoedt]

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

[williamantonio]

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.

[schoedt]

Thank you for your answer,

I know how to statically compile the template from HTML and code using eg. elemental2. This is performed at compile time. How do you connect that template to a similar DOMobject at run time?

The reason that this is nice is that you can then load the static page with all the todo elements and then when the JS is done loading you can connect the JS to the DOM elements already in the page. Otherwise you would load an empty todo list then wait for the JS to download/compile then fetch the todo (api call) and add the elements to the list. That results in some delay for the user that can be avoided the other way :-)