Thank you so much for your guidance! I now have a much clearer idea of what I need to do to accomplish this task.
On Thu, 20 Mar 2025 at 15:49, Jens <[email protected]> wrote: > For responsive design you should use CSS media queries in CSS for the most > part. However there are cases in which you want to use a totally different > component and in that case you can use JavaScript to listen for media query > events (see > https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and > modify the UI via code instead of CSS. To use it you would need to use > elemental2 library which makes Browser APIs accessible via Java API. > > Then your desktop application probably only uses ClickEvents. You have to > keep in mind that mobile browsers have a 300ms delay between touching the > device and firing a click event. The reason is that the device needs to > wait if the user might want to do a zoom, swipe, whatever gesture. So if > your mobile application should feel snappy and responsive you would need to > tell the browser via a HTML meta tag that zooming the page is not allowed. > Alternatively add click event handlers and touch event handlers in your > code or switch to pointer events (not provided by GWT out of the box but > you can define your own event classes for pointer events). > > In the past (maybe even today) some might have used an advanced GWT > technique and provide a dedicated GWT permutation for mobile. In that case > you need to define a new configuration property, some code to detect mobile > via JS and write a desktop/mobile value into that property and then GWT > will compile an additional set of permutations and in your code it is like > having a second entrypoint which only starts for mobile. But I think that > solution is only useful if the mobile application is very different than > the desktop application and you want a clear separation in code. > > Code reusability highly depends on the concrete situation. If you can use > media queries and CSS adjustment then you do not duplicate anything, things > are just rearranged in the UI. If CSS adjustments are not enough and you > need a dedicated mobile component then it might be possible to let it > implement the same interface as the desktop component and you can share > logic in a common presenter/controller class. > > > -- J. > > > divyanshu kumar schrieb am Donnerstag, 20. März 2025 um 10:38:21 UTC+1: > >> 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 [email protected]. > To view this discussion visit > https://groups.google.com/d/msgid/google-web-toolkit/adcdeb1c-1be3-44c0-8452-014908c0b4c7n%40googlegroups.com > <https://groups.google.com/d/msgid/google-web-toolkit/adcdeb1c-1be3-44c0-8452-014908c0b4c7n%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/CACUggdzAUwXBqPuivK9E2HcoqAKAi4SHWgQ8etiaRamvBB_BZQ%40mail.gmail.com.
