Re: How to use different CSS/Code for different browsers/devices/os?
Will CSS @media queries be supported in the next 2.6 release? -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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.
On Tuesday, September 17, 2013 4:12:10 PM UTC-4, Joshua Godi wrote:
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/
On Saturday, September 14, 2013 8:40:46 AM UTC-5, Ed wrote:
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?
--
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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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? -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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. On Wednesday, September 18, 2013 5:24:26 PM UTC-4, Ed wrote: 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? -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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/ On Wed, Sep 18, 2013 at 11:33 PM, Ashton Thomas ash...@acrinta.com wrote: 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. On Wednesday, September 18, 2013 5:24:26 PM UTC-4, Ed wrote: 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? -- 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-toolkit+unsubscr...@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. -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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. -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
thanks.. Nice info, visit my blog guys http://globalcyber.pun.bz/jalantikus-com-download-game-pc-dan-andr.xhtml 2013/9/17, Ed Bras post2edb...@gmail.com: Thanks, I saw it a long time ago. Will look at it again. On Tue, Sep 17, 2013 at 3:27 PM, Dominic Warzok domi...@googlemail.comwrote: 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. -- 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-toolkit+unsubscr...@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. -- 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+unsubscr...@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. -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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) On Tue, Sep 17, 2013 at 5:06 PM, Ed Bras post2edb...@gmail.com wrote: Thanks, I saw it a long time ago. Will look at it again. On Tue, Sep 17, 2013 at 3:27 PM, Dominic Warzok domi...@googlemail.comwrote: 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. -- 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-toolkit+unsubscr...@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. -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
Thanks, I saw it a long time ago. Will look at it again. On Tue, Sep 17, 2013 at 3:27 PM, Dominic Warzok domi...@googlemail.comwrote: 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. -- 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-toolkit+unsubscr...@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. -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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/ On Saturday, September 14, 2013 8:40:46 AM UTC-5, Ed wrote: 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? -- 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+unsubscr...@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.
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
javascript: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+unsubscr...@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.
How to use different CSS/Code for different browsers/devices/os?
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? -- 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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
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+unsubscr...@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.
Re: How to use different CSS/Code for different browsers/devices/os?
@Jens: thanks for sharing your thoughts and inspiration.
On Sat, Sep 14, 2013 at 4:43 PM, Jens jens.nehlme...@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 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-toolkit+unsubscr...@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.
--
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+unsubscr...@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.
