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

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)

On Saturday, September 14, 2013 1:20:40 PM UTC-4, Ed wrote:

@Jens: thanks for sharing your thoughts and  inspiration.

On Sat, Sep 14, 2013 at 4:43 PM, Jens <jens.ne...@gmail.com> wrote:

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.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@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.