Gwt HTML File with CSS

use custom css with gwt

This worked for me, I am not going to vote for my own answer, only if it is verified by other people that this solution also works for them.

It actually is fairly simple to achieve in 2 simple steps.

Step 1.
put your stylesheet (css) file in your webapp folder

Step 2.
Add the following line to your gwt.xml file:

<stylesheet src='/yourstylesheetname.css' />

NOTE: put this line between the last inherit decleration and your entry point decleration.

EXTRA:
My gwt.xml source:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
    <inherits name="com.google.gwt.resources.Resources" />

    <stylesheet src='/customsheet.css' />

    <entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>

    <servlet path="/AuthenticationImpl" class="com.company.lorum.gwt.server.implementations.AuthenticationServiceImpl" />
    <servlet path="/GeneralImpl" class="com.company.lorum.gwt.server.implementations.GeneralServiceImpl" />
    <servlet path="/ProjectImpl" class="com.company.lorum.gwt.server.implementations.ProjectServiceImpl" />
</module>

Project tree

java     __ com __ company __ lorum __ gwt __ client __ **
                                           __ server __ **
                                           __ shared __ **
                                           __ Lorum.gwt.xml
resources__ **
webapp   __ WebFiles __ **
         __ WEB-INF  __ **
         __ Home.html
         __ mystylesheet.css

Changes to the CSS and HTML files in webapp directory not being picked up by SuperDevMode

GWT compiles .java (input) files to javascript.
So if you only modify a css file there is no need to recompile to js.
However, when creating the war file, files in public dir may be updated.

GWT Html file with CSS

The answer lies in the way that GWT operates. Since GWT only has one page load per module load the inlined caching doesn't really come into play.

If you just want the answer: inlined CSS reduces the number of TCP/IP connections that are needed to load all of the files that compose your project. This can be non-trivial given that you may have multiple CSS files, high latency, and other network conditions. In my line of work (state government) you aren't always guaranteed a "fat pipe".

GWT (or at least the gwt-incubator) has a mechanism for combining the optimization of inline CSS with the separation of information and layout.

Enter the ImmutableResources and StyleInjector. These two things (combined) lead to a way to load Immutable (after compile time) resources.

To use these, first download the gwt-incubator. Then add the required libraries to your module.gwt.xml

<!-- immutable resources and injecting styles -->
<inherits name="com.google.gwt.libideas.ImmutableResources" />
<inherits name="com.google.gwt.libideas.StyleInjector" />

Once that is done, create the CSS files as code resources. I keep mine in the source path like "org.project.client.resources.*". You can keep these in seperate segments such as: header.css, body.css, table.css. Go crazy, really keep things as seperate as you want. Your file path should look something like "/src/org/project/client/resources/header.css".

Now, to create the CSS interface. Now, there are some rather special things you can do with this look here. But I've just gone with the basic one.

import com.google.gwt.libideas.resources.client.CssResource;

public interface Css extends CssResource {

}

Now that you have your CssResource class (and you can have different ones) you need to create an immutable resource bundle that wraps up all of your CSS files.

import com.google.gwt.core.client.GWT;
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle;

public interface ResourceBundle extends ImmutableResourceBundle {

    public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class);

    /*
     * =============================
     * CSS
     * =============================
     */

        @Resource("org/project/client/resources/header.css")
        public Css headerCss();

        @Resource("org/project/client/resources/body.css")
        public Css bodyCss();
}

This will, at compile time, create links to the immutable CSS resources. Now we need to put (insert) those CSS resources into the module somehow. This is where the StyleInjector comes in.

I put code similar to the following into my entry point's "onModuleLoad" method.

StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText());
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText());

There may be other ways to accomplish the same effect in GWT but the power of the CssResource can be leveraged for more things than what I've gone over here. For example: in one of my projects I need a small change in CSS to get IE and Firefox to render what I consider to be corretly. I have two small browser specific sections in my global.css like so:

/* fix ie floating quirk */
@if user.agent ie6 ie7 ie8 {
    #someElement {
        top: -21px;
        right: 5px;
    }
}

/* fix firefox floating quirk */
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 {
    #someElement {
        top: -14px;
    }
}

Being able to leave this logic out of my JavaScript/Java is beautiful. There's also a small optimization here because GWT will only do the injection for the browsers that need it. (Deferred binding based on browser is how a lot of things in GWT work.)

So, the mechanism that provides inline CSS also provides other benefits while maintaining the separation of CSS.

Whats not to love?

GWT - compile to html file

Try adding the following to your gwt.xml:

<add-linker name='xsiframe' />

The reason is that files loaded from the filesystem are all treated as if they came from different origins, so it's really easy to be caught by the so-called same-origin policy.

By default (using the std linker), GWT outputs *.cache.html files that are loaded in an iframe, so, being from different origins, the code in the iframe cannot talk to the HTML host page.

Using the xsiframe linker (or the now-deprecated xslinker), GWT generates *.cache.js files that are loaded using scripttags, which allows loading scripts cross-origins.

See https://developers.google.com/web-toolkit/doc/latest/FAQ_Server#What_is_the_Same_Origin_Policy,_and_how_does_it_affect_GWT?

How can i read a HTML file and display the content in GWT with its css and Javascripts

Forget everything I said, you can get the answerer here!
(Iframe not displaying some pages)

Basically: google has a mechanism to detect if it is not hosted in a iframe. This of course raises the question why they us it in their examples.....

BTW: a site like http://en.wikipedia.com works.

How can I inject a static CSS File in GWT like it is done with JS Files?

put an interface like this and import the css file into the same package

public interface MyResources extends ClientBundle {
    public static final MyResources INSTANCE = GWT.create(MyResources.class);
    @Source("dastylez.css")
    @CssResource.NotStrict
    CssResource css();
}

and in your entry point module or somewhere accessible by it put

MyResources.INSTANCE.css().ensureInjected();