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.
