GWT Widgets and Elemental

Jonathan Fischer

unread,

Sep 5, 2017, 7:16:56 PM9/5/17

to GWT Users

I want/need to start porting my application away from GWT widgets, and for various reasons I'd like to start with the top-most shell of the application. Is it possible to lay out the basics of an application with Elemental, and then attach GWT widgets at some point within?

E.g., can I do this sort of thing?

<body>
  <div>My navigation goes here</div>
  <div>I want to use this as my root panel for Widgets</div>
</body>

Ignacio Baca Moreno-Torres

unread,

Sep 6, 2017, 3:04:45 AM9/6/17

to GWT Users

IMO stop using widgets is too difficult and it just forces you to actually not use ANY widget with is super-annoying bc there are some widgets that are still pretty useful. If you use widgets, the whole hierarchy should be widget aware to make the widget work properly (you can handle the lifecycle manually but it is... "even worst"). But, you can use widgets just as a component architecture, and use elements inside this components intensively, even you can use native events directly instead of gwt unified events (this has some risks!). This project is developing the whole APP trying to avoid widgets (https://github.com/hal/hal.next) or at least using elements intensively (using elemental2 and the user-friendly utility elemento), so you can really get inspired and get a good conclusion on how to progressively reduce widget dependency in your app. I have been also experimenting with widgets alternatives or widgets(less usage)-elemental(more usage) alternatives but I haven't concluded anything... (https://github.com/ibaca/rxtodo-gwt/blob/widgets/src/main/java/todo/client/ApplicationElement.java).

FYI Harald Pehl (https://github.com/hpehl) was already talked about this widget-to-something in the past https://www.youtube.com/watch?v=0cI2w-zrFbk and he is going to talk again in this edition so be aware! (http://www.gwtcon.org/).

Uhm... and yep, you can create HTML and use widgets only in some parts of the HTML, this is automatically handled in UIBinder and the actual code that handles this situation is the HTMLPanel. I have an experimental Elemento specific version of HTMLPanel (https://github.com/ibaca/rxtodo-gwt/blob/widgets/src/main/java/todo/client/ElementoHtmlPanel.java). I just copied the required code from HTMLPanel to allow to add widgets in the internal native elements hiearchy.

salk31

unread,

Sep 6, 2017, 5:45:41 AM9/6/17

to GWT Users

+1

Harald Pehl

unread,

Sep 6, 2017, 8:41:13 AM9/6/17

to GWT Users

@Ignacio Thanks for the kind words about HAL.next

If you have more questions about HAL.next or Elemento, feel free to get in touch either here or at Gitter:

- https://gitter.im/hal/elemento

- https://gitter.im/gwtproject/gwt

Or maybe we can have a chat at GWTCon 2017 in Florence :-)

Jonathan Fischer

unread,

Sep 6, 2017, 12:30:27 PM9/6/17

to GWT Users

IMO stop using widgets is too difficult and it just forces you to actually not use ANY widget

I totally agree, but I have a ~111,000 line application that's built on widgets that I want to get ready for a post-widget GWT. :)

If you have more questions about HAL.next or Elemento, feel free to get in touch either here or at Gitter:

Elemento's the route I'm already hoping to go. I've thrown together a quick minimal test to see whether Widgets and Elemental2 stuff can live side by side, and everything renders, but events don't seem like they get plumbed through to GWT widgets if I don't attach to the RootPanel:

public class ElementoWidgetTest implements EntryPoint
{
 @Override
 public void onModuleLoad()
 {
  // This is Allen Sauer's GWT logging thing
  Log.info("Hello world.");

  Document.get().getBody().removeAllChildren();

  // Quick and dirty bootstrap navbar
  HTMLElement navbar = nav().css("navbar navbar-inverse navbar-fixed-top").add(
    div().css("container-fluid")).asElement();
  
  navbar.addEventListener("click", (evt) -> {
   Log.info("Clicked on the navbar!");
  });

  // Trying to attach GWT widgets to the dom without RootPanel/RootLayoutPanel
  FlowPanel panel = new FlowPanel();
  panel.getElement().getStyle().setPaddingTop(70, Style.Unit.PX);
  Button button = new Button();
  button.setText("Hi, I'm a button.");
  
  // I've attached a click handler here, but I never see the log statements. Seems
  // like events don't get plumbed through to widgets if I'm not using RootPanel
  button.addClickHandler(event -> Log.info("Button clicked"));
  panel.add(button);

  Elements.body().add(navbar);
  Elements.body().add(Elements.asElement(panel));
 }
}

I see logging entries from clicking on the <nav> element I added, but the GWT Button doesn't respond.

Jonathan Fischer

unread,

Sep 6, 2017, 12:44:47 PM9/6/17

to GWT Users

Aha! Brandon Donnelson on Gitter helped me out: I didn't know about RootPanel.get("id"). I can add a div with a known id to the page and attach Widgets to it via RootPanel.get("known-id").add(..). Events get plumbed through, everything seems to work.

Reply all

Reply to author

Forward