GWT pattern for handling mobile browsers - gwt

I am working on a GWT app that needs to serve a different layout to mobile device users. I can easily determine if a user is using a mobile browser; however, I'm not sure about the best pattern for handling them.
I am currently using the MVP pattern - would it be best to simply pass a browser-specific view to the Presenter or is there a more appropriate method?

You could set up GWT to detect the web browser used, as described in this question. Then, via Deferred Binding, let the compiler "slip" the correct view into place for the, say, mobilesafari user agent. That way, you won't have to litter your Java code with browser detection, etc.

The way I've done it is to have different GWT modules (with their own entrypoint, Gin modules, even different CssResources) and then on the myapp.html page you just have to check out what browser is requesting the content and based on it (javascript checks) the appropriate module
<script src="myapp/myapp.nocache.js"/>
or
<script src="mymobileapp/mymobileapp.nocache.js"/>
is loaded.
If you are working with GIN and an MVP framework (gwt-platform is my platform of choice) you can then reuse the code that was already written for the presenters and only implement different views.

Related

Build a GWT app that can handle both classic web and mobile clients

We have a GWT application specifically designed to handle mobile clients and built with MGWT.
Now, we need to build a frontend for classical web clients, probably building it with GWT-Bootstrap and I'm wondering what's the best solution to achieve this.
How should we proceed with modules, gwt.xml configuration, client type detection, etc ...
What are your suggestions ?
Check this question for how to tell what platform the user is on.
Beyond that, GWT uses only HTML and Javascript, so unlike Flash applications, it actually works fine on mobile devices too; most events (such as clicks) are translated by the browser, so a touch becomes a click, you don't need a separate handler or anything.
Basically what I would suggest is you have a single GWT regardless of platform, and only for certain Widgets, add separate options for Mobile and Desktop, as necessary.
I don't know the architecture of your app and if you use the MVP pattern but GWTP with its Form-factors feature allows you to share almost all of your business logic (your presenters) across the different platforms. You have just to write the view depending on the platform you want to support.

GWT direct link to a part of an App

in standard "page-based" webapps, it´s quite easy to implemet direct links to several pages, f.e, an url abc.com/app/customer/4711 which directs the user directly to the page diplaying customer 4711.
Is there a way to reproduce a similar behaviour in an GWT-App?
Tnk Mica
You can use Activities and Places design pattern. It provides easy access to any "place" within the app:
https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces
Every once in a while this question is being asked in one form or another and I think misconception exists about what GWT is best suited for.
GWT is an amazing set of tools for creating web applications: JavaScript multi-screen user interfaces which run in modern web browsers, load as a single web page and generally don't need full page reloads or page switching for their operation.
Navigation between screens happens in response to triggered events (for example, a user pressing a button, a timer firing or server-side state changing). The data needed to be presented is acquired asynchronously via XHRs (again without web page reloading).
GWT provides an elaborate framework for all of the above - Activities & Places for navigation, as Andrei mentioned, GWT-RPC and RequestFactory for data acquisition and exchange, and much much more to make advanced and highly-structured web apps which leverage the processing power of modern machines and capabilities of modern browsers.

GWT - Create something like MobileWebApp using GWTP

I am trying to create an application which will have different views for mobile, desktop and tablet. It is on the lines of MobileWebApp sample from GWT. I am looking at GWT MVP tutorial and have a basic app working.
I was thinking if I should use GWTP and if there would be any advantages of using GWTP instead of GWT MVP(activities and places)
Also, any ideas how different views would bind to the same presenter. There might be differences in what features are available on mobile view and desktop view.
I have done something like this, although at a time before Activities and Places. So back then I've written the MVP framework myself. I placed all the common code, such as Presenters, TransferObjects and Utilities in a separate GWT module. Then each UI became a separate project as well, holding it's View classes and UiBinder stuff, inheriting from the common module. So actually each UI project is a complete GWT application. The GWT applications have to be deployed under different context, thus have different URLs. You then need some smart JavaScript on your welcome page to redirect a visitor depending on there device.
I don't think you can solve this in one GWT app. Or you'd have to come up with a really really clever solution using Deferred Binding (probably it's replacement functionality) and the Linker subsystem.
You can create different views in for a presenter in gwtp. GWTP makes it easier to handle such a scenario. There is an open-source Customer Experience framework which has a sample to create a mobilewebapp using GWTP. You can check it out here- http://code.google.com/p/gwt-cx/

The Output page(Response page) of my Application, will given by JSP only.... Then what is the use of GWT at client side

I want to develop a Web Application by combining Spring Framework, GWT, Servlets, JSP........
I plan to develop Server side using Spring,Servlet ,JSP....
And for Client side, GWT....
The Output page(Response page) of my Application, will given by JSP only....
Then what is the use of GWT at client side....
please clear my doubt....
Read the following
1) AJAX - http://en.wikipedia.org/wiki/Ajax_(programming)
2) RIA - http://en.wikipedia.org/wiki/Rich_Internet_application
3) GWT - http://en.wikipedia.org/wiki/Google_Web_Toolkit
The problem with using purely jsp to create a web application is that each user interaction typically requires the entire page to be reloaded. Depending on what you're doing this approach is considered outdated. GWT is built on top of javascript and xhttp requests, allowing user interactions to affect only relevant portions of the page. This generally results in a faster and smoother user experience.
If you have already decided that you want to use JSP, then you don't need GWT. Although you could use it to create custom dynamic components and embed them on your page. Or to create a part of your application where you find JSP not sufficient (which would be probably a part that should be more 'dynamic' and would require a lot of javascript).
http://code.google.com/webtoolkit/overview.html#how

What is the best way of making a mobile version of a site in asp.net MVC2?

I've been thinking about this recently and I don't know a really nice and tidy way of creating a mobile version of an existing or new MVC2 website/app.
I think the easiest way would be to just use a different stylesheet depending on whether a mobile was detected but sometime you need to change the view content too if you have massive inline images everywhere or for other reasons.
What is a good approach for this? Is there a way of theming fairly easily in MVC2?
Well MVC is just your server-side technology, what you should ask to yourself is "what is the best practice to create a mobile web site, regardless of the server side tech".
In my opinion, creating a well-formed and semantic (x)html is the first step. As you say, the most logical thing to do is create different style sheets for different media types, and you're right.
As for the problems you mention, like inline images, consider this: are those images content or presentation?
In the first case, they should be present even in the mobile version.
In the latter, they are defined in the style sheet, so you can simply avoid them in the mobile css.
The only exception I can think of is when you want to provide different functionality on mobile, or if you're forced to, i.e. on pages that rely heavily on JS and those scripts wouldn't run on mobile browsers. In this case, you might want to create different versions of those pages and serve the appropriate version based on the user agent.
Check the source code for NerdDrinner. They've implementated a MobileCapableWebFormViewEngine class which inherits from base WebFormViewEngine class. The MobileCapableWebFormViewEngine uses the HTTPContext to decide which View to render in the client. This'll make more sense when you see the source code