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 <n...@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-web-toolkit@googlegroups.com < > google-web-toolkit@googlegroups.com> *On Behalf Of *divyanshu kumar > *Sent:* Thursday, June 19, 2025 7:21 AM > *To:* GWT Users <google-web-toolkit@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-toolkit+unsubscr...@googlegroups.com. > 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 google-web-toolkit+unsubscr...@googlegroups.com. > 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 google-web-toolkit+unsubscr...@googlegroups.com. To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/CACUggdwDiRk6UVphSoxcdY2B-npK6m0L0nd47gDc_A8qytsCjw%40mail.gmail.com.
