Re: Help Needed: Implementing Responsive Mobile Layout in GWT project

If your page is blank then you have a logic issue in your code. Of course you can replace complete UI based on conditions / events.

Instead of using window resize events you can use media query events (would be way more performant) but in the end the result is the same: You receive some form of notification, you check the desired layout and then remove the current UI and install the new UI.

> Uncaught (in promise) The message port closed before a response was received. deps.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

This error is not really related to GWT. These kind of errors usually appear when you use a background worker and communicate via postMessage. "deps.js" is some dependency of your application and not part of GWT. So looks like a misconfiguration if the file cannot be found. I don't think this error has anything to do with style.ensureInjected().

-- J.

divyanshu kumar schrieb am Donnerstag, 19. Juni 2025 um 16:24:35 UTC+2:

I think there might be a misunderstanding. What I'm actually trying to do is build a completely new mobile interface from scratch that inherits all the functionality of the desktop version. For that I'll need to configure the main entry class so that whenever the window width drops below 768 px, it automatically switches to the mobile interface.

On Thu, Jun 19, 2025, 19:45 Neil Aggarwal <ne...@propfinancing.com> wrote:

You don't do it in GWT.  You do it in CSS.

https://www.w3schools.com/html/html_responsive.asp

 

Thank you,

 Neil

 

--

Neil Aggarwal, (972) 834-1565, http://www.propfinancing.com

We offer 30 year loans on single family houses!

 

From: google-we...@googlegroups.com <google-we...@googlegroups.com> On Behalf Of divyanshu kumar
Sent: Thursday, June 19, 2025 7:21 AM
To: GWT Users <google-we...@googlegroups.com>
Subject: Help Needed: Implementing Responsive Mobile Layout in GWT project

 

Hi GWT Community,

I'm currently working in a GWT project and I need some guidance on implementing a mobile layout switch when the browser width crosses 768 px. Here's what I've done so far, the problem I'm seeing, and what I'd love your feedback on:

---

1. What I'm trying to achieve

• Default (desktop) layout: when window.innerWidth ≥ 768 px, load the classic or neo/modern (DESKTOP Interface name) interface.
• Mobile layout: when window.innerWidth < 768 px, load a custom mobile UI that I've created.

2. My approach

1. Detect resize: I added a Window.addResizeHandler after UI initialization.
2. Determine layout: In determineLayout(), I check Window.getClientWidth() against 768 px, returning "mobile", "modern", or "classic".
3. Dynamic update: If the layout string changes, I call updateLayout(newLayout) to swap CSS class names, re‑create images (ImagesMobile vs. ImagesNeo vs. Images), and reset the uiFactory. Finally I call style.ensureInjected().

3. What's going wrong

• After I shrink the window below 768 px, the entire screen goes blank.
• In the browser console I see:

Uncaught (in promise) The message port closed before a response was received. deps.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

• My mentor has traced it to style.ensureInjected() inside updateLayout(), and suspects something's null/not defined in my Resources.Style for mobile.
• suggested that calling updateLayout on resize may not be safe and that a full reload upon crossing the threshold might be more reliable, but I'm not sure how best to implement that in App Inventor's bootstrapping flow.

4. code Snippets Link:

https://codefile.io/f/O9e6Ytek6m

  5. My questions

1. Is dynamic layout swapping via updateLayout fundamentally flawed in GWT?
2. Would a full page/module reload on crossing the 768 px boundary be a better pattern? If so, how can I safely re‑invoke the same bootstrapping logic without a user‑visible flicker or losing application state?
3. If dynamic swapping can work, what might I be overlooking in my Resources.Style or UiStyleFactoryMobile definitions that could lead to ensureInjected() failing?
4. Any pointers on best practices for responsive design in large GWT apps like App Inventor would be hugely appreciated.

Thank you in advance for any advice or examples you can share!

--
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-tool...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/23d3e8fb-5bb8-4b72-9b4a-0c4a922ed15fn%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-tool...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/2c449991ab992f772f2e8cf3924ee830%40mail.gmail.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/dd695d98-5c95-4b7f-9ef1-b6399228e742n%40googlegroups.com.