Re: Implementing a Mobile-Friendly Layout for a GWT Application Using UiBinder

This is the  final two approach I ended with :

 The First approach:

1. Identify Components for Adaptation:
Key components include like toolbar, palette, property editor, and blocks workspace. For mobile, consider touch-friendly designs, like collapsible panels or bottom sheets for palettes
2. Design Mobile Layouts:
Plan how each component looks on mobile. For instance, the toolbar might use a hamburger menu on mobile, while desktop shows all buttons horizontally. Consider examples like Scratch Jr, which places the block palette at the bottom in portrait mode to avoid obscuring the screen
3. Implement Using UiBinder:

```
<g:HTMLPanel>
  <ai:Toolbar ui:field="desktopToolbar" visible="true">
    <!-- Desktop toolbar items, e.g., horizontal buttons -->
  </ai:Toolbar>
  <my:MobileToolbar ui:field="mobileToolbar" visible="false">
    <!-- Mobile toolbar, e.g., hamburger menu -->
  </my:MobileToolbar>
</g:HTMLPanel>
```

using a single UiBinder file (DesignToolbar.ui.xml) with separate panels for desktop and mobile, toggling their visibility.
4. Use Java for Dynamic Switching:
The Java logic toggles visibility based on a 768px threshold (a common breakpoint for tablets vs. phones), using Window.getClientWidth(). The ResizeHandler ensures the UI adapts dynamically when the screen size changes (e.g., device rotation), all without page refreshes.
5. Apply CSS Media Queries:

 2nd approach:

1. Create a New Module:
Create .ui.xml and respective java file for e.g: DesignToolbarMobile.java, DesignToolbarMobile.ui.xml and then change the respective css file for this.
2. Add Runtime UI Selection:
Swaps only the toolbar, not the whole page. Faster and smoother!
e.g:

```
private Widget currentUI;
private final FlowPanel container = new FlowPanel();

@Override
public void onModuleLoad() {
  RootPanel.get().add(container);
  loadUI();
  Window.addResizeHandler(event -> loadUI());
}

private void loadUI() {
  int width = Window.getClientWidth();
  Widget newUI = (width < 600) ? new DesignToolbarMobile() : new DesignToolbarNeo();

  if (currentUI != newUI.getClass()) { // Only switch if different
    container.clear();
    container.add(newUI);
    currentUI = newUI;
  }
}
```

Thank you so much for your guidance.

On Friday, 21 March 2025 at 05:03:48 UTC+5:30 Craig Mitchell wrote:

Don't try to put things like CSS media queries in the <ui:style> in the ui.xml files.  In my experience, GWT doesn't understand this, and it doesn't work.  Instead, have them in a normal CSS file that you include, and that you reference via the normal "class" attribute in your ui.xml files.

On Thursday, 20 March 2025 at 8:38:21 pm UTC+11 divyanshu kumar wrote:

I'm working on a GWT application that was originally designed for desktop screens, but I now need to create a mobile-friendly layout that retains the existing functionality. As I'm relatively new to GWT and UiBinder, I'm looking for guidance on the best practices for adapting my UI for mobile devices.

My specific questions are:

• Responsive Design: What strategies or design patterns can I use within GWT to implement a responsive or adaptive layout?
• UiBinder Tips: Are there any particular tips or resources for effectively using UiBinder when designing for mobile?
• Code Reusability: How can I maintain the same functionality across both desktop and mobile versions without duplicating too much code?

Any sample code recommended libraries or links to useful tutorials would be greatly appreciated. Thanks in advance for your help!

--
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/7aae4123-9eb7-4285-98f9-c8042cd5e647n%40googlegroups.com.