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

From my experience the most drastic changes when reducing the screen size happen at the top level of the application which defines the general layout. For example imagine you have a desktop application and its basic layout (I like to call it shell) contains a header, two left side bars, one right sidebar, a footer, a content area and then a main menu with three levels of hierarchy and a secondary menu. This structure will change heavily when moving to mobile. Here you likely need Java code and separate views/logic to produce a new mobile friendly shell of that application. You can use the Orientation API to read and get notified about screen orientation, you can use the Media Query API to get notified about screen size changes and you can use both to execute Java code reacting to these changes and to modify the shell of the application. For example your primary and secondary menu are merged in a tree like menu and is hidden behind a burger icon. Or your side panels are now hidden by default and can be revealed using a touch swipe gesture from left to right or right to left.

Once that is done the actual content of each section of the app will usually change less dramatically. CSS media queries are usually enough (there might be some exceptions here and there, e.g. if you have to split a complex screen into multiple steps of screens).

It helps tremendously if you first do sketches on paper how the mobile app should look like and how interaction with that mobile app should look like. This gives you a better picture about the things you can reuse and adapt using media queries and which things require more work. 

Lastly you have to decide what better fits your needs:

- Do you switch from desktop to mobile to desktop within a single browser? Then media queries + events are better because you do not have to reload the page. However the app will be larger in general because it contains both the desktop and mobile code. Using GWT code splitting feature can help here. At the end the code will be cached once downloaded until you update the app to a new release.

- Do you have separate mobile and desktop devices and each should have its own fixed view and will never switch to the other layout? Then two applications (+ a shared library) might make more sense because each application is a bit smaller as it only contains the code required for that screen size. However code in the shared library will likely contain CSS media queries so it will never be a 100% separation, at least within CSS.

-- J.

divyanshu kumar schrieb am Sonntag, 30. März 2025 um 13:34:37 UTC+2:

This is the problem I faced for a GWT application. I need the best approach to solve this:

The challenge is that the current design approach requires a complete page refresh when switching between UI layouts (for example, from a desktop view to a mobile view). This process means multiple server trips, which can be slow and use extra data—especially on mobile devices.

On Sun, Mar 30, 2025, 16:52 divyanshu kumar <kumardiv...@gmail.com> wrote:

I only want the best approach on how can we implement this feature...

Currently the issue is when user change the interface from mobile layout to desktop it will took multiple visit to sever which will be expensive...

On Fri, Mar 28, 2025, 23:25 Neil Aggarwal <ne...@propfinancing.com> wrote:

This may be a big change, but why not make it a browser-based app?  Then desktop, mobile, etc. are all able to use it without needing to download and install anything.

On Thursday, March 20, 2025 at 4:38:21 AM UTC-5 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-tool...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/76a45ad6-48e2-4a88-8966-c5d0ba985ac2n%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-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/551a8f3d-3a03-4d06-bcfe-af066caefef3n%40googlegroups.com.