How to use different CSS/Code for different browsers/devices/os?

[Ed]

How can I use different CSS files, and different code for different Browsers or devices?

What I want: 

For the desktop web browser, I show all of the applications functionality with images of different resolution.

However, on a Tablet (iPad) I show the same application but with different images/resolution. 

And for the smartPhone (iPhone, Samsung S4), I show only restricted application functionality with different images/resolution (different buttons).

How can this best be done to optimal use GWT (code splitting, code minimization, etc...) ?

My thoughts: Use different Factory classes for different Browsers/devices. These factories classes will then create the required Client Bundles and Controller (to modify app code)  classes.

Then select the correct factory through GWT config files by indicating the required "user.agent" property.

Is this the way to go ? Or/And maybe use Mgwt and let it handle it (haven't used mgwt yet)... ?

Please your experience/advice?

[Jens]

I use Google Gin and switch Ginjectors based on a form factor property in my module XML so its basically the factory approach.

interface AppInjector extends Ginjector {

  App getApp();

}

@GinModule(DesktopModule.class)

interface DesktopAppInjector extends AppInjector {}

// just for illustration you can also use custom multi valued config properties of your *.gwt.xml file that contain full qualified class names of gin modules

@GinModules(value = { TabletModule.class }, properties = {"common.config", "tablet.config"})

interface TabletAppInjector extends AppInjector {}

Because you can not use GWT.create(AppInjector.class) to initialize GIN (because of the GinModule annotations being defined on sub interfaces) you need additional classes for deferred binding:

interface AppInjectorProvider {

  AppInjector get();

}

class DesktopAppInjectorProvider implements AppInjectorProvider {

  public AppInjector get() {

     return GWT.create(DesktopAppInjector.class);

  }

}

class TabletAppInjectorProvider implements AppInjectorProvider {

  public AppInjector get() {

     return GWT.create(TabletAppInjector.class);

  }

}

And finally the entry point

class AppEntryPoint implements EntryPoint {

  void onModuleLoad() {

    AppInjectorProvider injector = GWT.create(AppInjectorProvider.class);

    injector.get().getApp().start();

  }

}

With the code above I can pretty much configure everything inside gin modules. 

For high resolution images its a lot better to extend the ClientBundle mechanism. An example for retina images can be found at https://github.com/kDCYorke/RetinaImages

In general I would recommend using vector icons (e.g. "Font Awesome" or http://glyphicons.com/) so you don't need that retina image thing just for icons.

-- J.

[Ed Bras]

@Jens: thanks for sharing your thoughts and  inspiration.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/6kNfG41TVBY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

[Ashton Thomas]

I just wanted to point to these related links on conditional CSS with an example from mgwt if there is a case where GIN may not be needed but just conditionals in CSS

(Looks like your solution may need a combination of GIN config, etc - using gin to configure some king of ScriptInjector for non-css3/media queries stuff is good too)

https://github.com/dankurka/mgwt/blob/master/src/main/java/com/googlecode/mgwt/ui/client/theme/mgwt/css/buttonbar.css

(Note the use of @if with the literal("...") as well to support any non CSS2 - Again, using media queries or keyframe animations will involve a bit more or a round about hack which is probably aided by having a good GIN config setup)

http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#Conditional_CSS

Also, font-awesome is awesome. the pre built vector icons make my life a lot easier (although I wish there was a better way of using them without <i> tag.. but maybe I am missing something)

[Dominic Warzok]

Hey there is a very simple but nice Example in gwt-Demo-Apps. 

The presentation can be watched here: http://youtu.be/N1aCo5LvMf8

I use this to decide if my webapp it's on a tablet or on a normal browser.

[Ed Bras]

Thanks, I saw it a long time ago. Will look at it again.

--

[Ed Bras]

What about using frameworks like Zurb Foundation, or Twitter Bootstrap in combination with GWT?

Let these frameworks handle the Presentation (responsive/adaptive on any device) and use GWT for the business stuff: flow and backend integration?

I am currently looking it to it and these frameworks sure have some interesting features. Or does mGWt offer me these as well (response/adaptive stuff) ? (at least enough)

[Joshua Godi]

Why not try using responsive css with media queries? You can change the dimensions/background-url for the images and such.

Here is a good source for standard media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[Steve C]

1. The problem with GWT's conditional CSS is that it is evaluated once, at the time the CSS resource is processed, which means that you won't get runtime changes if the user changes the window size (or a mobile user changes the orientation).

2. The problem with media queries in the CSS is that GWT's CSS resources don't (as of the last time I looked) support them.

3. Another problem with media queries is that IE6-8- don't support them.

My solution has been to:

1 & 2: have a separate CSS resource for each media query, but without the query within it.  Instead, get the CSS string from the resource and wrap the query around it yourself, and then inject the resulting string.

3: have yet another variation of each resource, for IE6-8, where there is a marker class in front of every selector, like:

Base resource for @media (min-width: 400px) and (max-width: 639px):

.special { color: red; }

IE6-8 version:

@external .ie_400_639;
.ie_400_639 .special { color: red; }

Then, for IE6-8, use a window resize handler to manage adding the appropriate class to the html tag (and, of course, removing any outdated class). Run that when the entrypoint class loads as well.

Yeah, part 3 is a pain to manage - I ended up creating a Java tool to manually run the CSS through to create the IE versions using a horrendously complicated RegEx.

[Ed Bras]

thanks for your input.

@Steve: about this:

> 1 & 2: have a separate CSS resource for each media query, but without the query within it.  Instead, get the CSS string from the resource and 

> wrap the query around it yourself, and then inject the resulting string.

Can you please give some more insight? 

Let say you have 2 css files for MediaA and MediaB. 

How do you load these, wrap a media query around it, and inject it?

[Ashton Thomas]

Here is one example of working around CSS3 limitation for media queries:

http://pastebin.com/p2S0HKtR

So this class encapsulates all the "ensureInjected" + hacking media queries

Just call MainAppResource.injectStyles() in onModuleLoad() or somewhere

Certainly not the best example, but an example nevertheless.

[Ed Bras]

Thanks, I am just thinking if this can't be done "smarter", a bit old fashion when media queries didn't exist yet, using window.innerWidth, then select the correct Clientbundle depending on this value...... Just a thought.

Nice info: http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

--

[Ed]

Will CSS @media queries be supported in the next 2.6 release?