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 <[email protected]> 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:* [email protected] <[email protected]> *On >> Behalf Of *divyanshu kumar >> *Sent:* Thursday, June 19, 2025 7:21 AM >> *To:* GWT Users <[email protected]> >> *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 [email protected]. >> To view this discussion visit >> https://groups.google.com/d/msgid/google-web-toolkit/23d3e8fb-5bb8-4b72-9b4a-0c4a922ed15fn%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-web-toolkit/23d3e8fb-5bb8-4b72-9b4a-0c4a922ed15fn%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> >> -- >> 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 [email protected]. >> > To view this discussion visit >> https://groups.google.com/d/msgid/google-web-toolkit/2c449991ab992f772f2e8cf3924ee830%40mail.gmail.com >> >> <https://groups.google.com/d/msgid/google-web-toolkit/2c449991ab992f772f2e8cf3924ee830%40mail.gmail.com?utm_medium=email&utm_source=footer> >> . >> > -- 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 [email protected]. To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/dd695d98-5c95-4b7f-9ef1-b6399228e742n%40googlegroups.com.
