Several ways to inject CSS in GWT
There are several ways in GWT to include CSS into you code:
- via *.gwt.xml using
- <stylesheet src="my.css"/>
- via your container.html using
- <link href="my.css" rel="stylesheet">
- <style>/* my CSS */</style>
- <style>@import url("my.css");</style>
- via *.ui.xml using
- <ui:style>/* my CSS */</ui:style>
- <ui:style>@import url("my.css");</ui:style>
- <ui:style src="my.css"/>
- in this case your CSS is checked for validity, so you can't use some CSS3 yet
- <ui:style import="my.project.CSSResource">
- whereby my.project.CSSResource has to be annotated with @Shared
- via the @Source annotation using [in this case your CSS is checked for validity, so you can't use CSS3 yet]
- @Source("my.css") MyCSS myCSS(); within an interface called (in this case) My that extends ClientBundle with a nested interface called (in this case) MyCSS that extends CssResource
If you know other ways to insert CSS into a GWT app, I'd appreciate if you share them writing a comment!
Hello,
ReplyDeletethank you for the nice overview - I will bookmark it as reference. Injecting existing CSS into GWT is of static nature. When dynamic behavior is needed, I use also the programatic approach: myUiObject.getElement().getStyle().*
Cheers
Daniel