Re: Mixing Elemental2 with GWT Widgets

Thanks Gerard, I'll check out Elemento.

Elemental2 is a little lacking on strongly typing events.  Eg: Adding this code:

myElement.addEventListener(BrowserEvents.MOUSEDOWN, event -> {
  MouseEvent mouseEvent = Js.cast(event);
  ...
});

I could mess up on the event name, or the typecast, and I wouldn't know until runtime.

And unless you read the JS docs, it's not obvious what event name, maps to what event object.

Having something that strongly types all the events, so it was obvious and stops you messing up, would be great.

On Thursday, 31 July 2025 at 11:17:54 pm UTC+10 Gerard Keiser wrote:

Elemento has event more event types, if you need: https://hal-console.gitbook.io/elemento/event-handlers

On Thursday, July 31, 2025 at 4:45:19 AM UTC-5 Jens wrote:

btw:  With addEventListener, we have to use hard coded strings for the event name.  Eg: 

img.addEventListener("load", e -> doStuff());

Or are there event name constants we can use somewhere?

GWT has com.google.gwt.dom.client.BrowserEvents but it is not a complete list.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/094cfcd2-209d-4537-9d69-6d7218576b53n%40googlegroups.com.

Re: Mixing Elemental2 with GWT Widgets

Elemento has event more event types, if you need: https://hal-console.gitbook.io/elemento/event-handlers

On Thursday, July 31, 2025 at 4:45:19 AM UTC-5 Jens wrote:

btw:  With addEventListener, we have to use hard coded strings for the event name.  Eg: 

img.addEventListener("load", e -> doStuff());

Or are there event name constants we can use somewhere?

GWT has com.google.gwt.dom.client.BrowserEvents but it is not a complete list.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/e19614db-729d-43f7-aaf8-ec7668ae8df6n%40googlegroups.com.

Re: Mixing Elemental2 with GWT Widgets

Thanks for sharing!

On Thu, Jul 31, 2025 at 6:56 AM Craig Mitchell <mail@craig-mitchell.com> wrote:

My OCD has been satisfied.  🙂  Thanks again Jens.

public static void loadImage(String imgBase64, Consumer<HTMLImageElement> loaded) {
  HTMLImageElement img = (HTMLImageElement)DomGlobal.document.createElement(ImageElement.TAG);

  img.addEventListener(BrowserEvents.LOAD, e -> loaded.accept(img));
  img.addEventListener(BrowserEvents.ERROR, e -> DomGlobal.console.error("Failed to load image."));
  img.src = imgBase64;
}

On Thursday, 31 July 2025 at 7:45:19 pm UTC+10 Jens wrote:

btw:  With addEventListener, we have to use hard coded strings for the event name.  Eg: 

img.addEventListener("load", e -> doStuff());

Or are there event name constants we can use somewhere?

GWT has com.google.gwt.dom.client.BrowserEvents but it is not a complete list.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/261f0865-534c-49e6-afdb-5e4f60e377acn%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/CA%2BkiFsfPFPXypbjoTu1grVhaRxU-AFC9Bu7fPV05GC8HktaqdA%40mail.gmail.com.

Re: Mixing Elemental2 with GWT Widgets

My OCD has been satisfied.  🙂  Thanks again Jens.

public static void loadImage(String imgBase64, Consumer<HTMLImageElement> loaded) {
  HTMLImageElement img = (HTMLImageElement)DomGlobal.document.createElement(ImageElement.TAG);

  img.addEventListener(BrowserEvents.LOAD, e -> loaded.accept(img));
  img.addEventListener(BrowserEvents.ERROR, e -> DomGlobal.console.error("Failed to load image."));
  img.src = imgBase64;
}

On Thursday, 31 July 2025 at 7:45:19 pm UTC+10 Jens wrote:

btw:  With addEventListener, we have to use hard coded strings for the event name.  Eg: 

img.addEventListener("load", e -> doStuff());

Or are there event name constants we can use somewhere?

GWT has com.google.gwt.dom.client.BrowserEvents but it is not a complete list.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/261f0865-534c-49e6-afdb-5e4f60e377acn%40googlegroups.com.

Re: Mixing Elemental2 with GWT Widgets

btw:  With addEventListener, we have to use hard coded strings for the event name.  Eg: 

img.addEventListener("load", e -> doStuff());

Or are there event name constants we can use somewhere?

GWT has com.google.gwt.dom.client.BrowserEvents but it is not a complete list.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/e0922888-e638-489f-a3c7-b5ac308dc6a1n%40googlegroups.com.

Re: Mixing Elemental2 with GWT Widgets

btw:  With addEventListener, we have to use hard coded strings for the event name.  Eg: 

img.addEventListener("load", e -> doStuff());

Or are there event name constants we can use somewhere?

On Thursday, 31 July 2025 at 7:29:07 pm UTC+10 Craig Mitchell wrote:

Excellent  explanations.  Makes sense.  Thanks Jens.

On Thursday, 31 July 2025 at 7:25:56 pm UTC+10 Jens wrote:

What I don't understand is why onload and onerror need a return value?  I just return null as I've no clue what the return value should be.

Because these on<Event> properties and their functions are defined that way. For example in the old days you could return false in an onclick function to suppress the click default action of the browser. These days it is recommended to always use addEventListener() instead of these event properties and to suppress the default action you call event.preventDefault().

Also in JS a function basically always have some return value, e.g.

function() {

  return;

  return undefined;

  // no return statement at all

}

is all the same and returns undefined. That is why Promises in elemental2 also feel a bit clunky compared to JS. Promises allow you to return a new Promise/thenable in your success/catch callback methods so elemental2 has to define a return type for these callback functions. If you do not want to return a Promise/thenable in JS then you simply do not write a return statement but in Java you now have to write return null.

-- J. 

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/db240757-819a-440d-bd31-d7518c953309n%40googlegroups.com.

Re: Mixing Elemental2 with GWT Widgets

Excellent  explanations.  Makes sense.  Thanks Jens.

On Thursday, 31 July 2025 at 7:25:56 pm UTC+10 Jens wrote:

What I don't understand is why onload and onerror need a return value?  I just return null as I've no clue what the return value should be.

Because these on<Event> properties and their functions are defined that way. For example in the old days you could return false in an onclick function to suppress the click default action of the browser. These days it is recommended to always use addEventListener() instead of these event properties and to suppress the default action you call event.preventDefault().

Also in JS a function basically always have some return value, e.g.

function() {

  return;

  return undefined;

  // no return statement at all

}

is all the same and returns undefined. That is why Promises in elemental2 also feel a bit clunky compared to JS. Promises allow you to return a new Promise/thenable in your success/catch callback methods so elemental2 has to define a return type for these callback functions. If you do not want to return a Promise/thenable in JS then you simply do not write a return statement but in Java you now have to write return null.

-- J. 

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/5637485f-905b-488f-b8ab-68ea568a1d8bn%40googlegroups.com.