where to place css file and image file?

[tong123123]

Currently, I place css file under war directory and images file under war/images directory.
but if I want to use ClientBundle, seems these file need place under src directory? if yes, how to modify the build.xml?

[tong123123]

According to the developer guide
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects#DevGuideDirectoriesPackageConventions

Standard Directory and Package Layout

In the war directory, place any static resources (such as the host page, style sheets, or images).

I follow this structure, but then how to refer the image in Resources file in client package?
@Source("../../../war/Images/xxx.png)
prompt Resource file xxx.png is missing!!
and also how to refer the css?

[Thad]

I've done this two ways. The first, on a project before UiBinder (and before ClientBundle, but back fitted), I put the CSS file in src/com/corp/app/public and my images in src/com/corp/app/public/images. In my images client bundles would be entries like

    @Source ("com/corp/app/public/images/16x16/ZoomOut.png")
    public ImageResource zoomOut();

In the app I'm writing now with UiBuilder, the CSS file is in src/com/corp/newapp/client and the EntryPoint file NewApp.java contains

    interface GlobalResources extends ClientBundle {
        @NotStrict
        @Source("NewApp.css")
        CssResource css();
    }

I don't have ClientBundles of images. The images are in src/com/corp/newapp/client/ui and are referenced as sprites in my *.ui.xml files.

[tong123123]

In my images client bundles would be entries like

where is your client bundles (java file) places? Also, if place the css file and image file under public folder, after compile, where will it be placed?

[Joseph Lust]

For CssResource and ImageResource users, I find this the most robust way to place these files:

*com.myPackage.moduleA.resources (put resource interfaces here)

*com.myPackage.moduleA.resources.images (put image files here)

*com.myPackage.moduleA.resources.css (put css files here) 

The real payoff here is that:

1. Each module is self contained with all its css/images. Try pulling a module's resources of out a public folder shared by 10 modules.
2. You can more easily use this module in a different GWT project.
3. Since you're not using a public folder, only the used selectors/images get compiled into your output war. Saves a lot of time/bytes.

You might ask "What images used in multiple modules?" In our apps we have a "common" module with these parts.

Hope that helps.

Sincerely,

Joseph

[tong123123]

I try the easier method but fail, I place the css file in com.ha.als.public folder and after compile, the css file is placed in war\WEB-INF\classes\public,
then I comment the hostpage html
<!-- link type="text/css" rel="stylesheet" href="ALS.css"> -->
and add the following in gwt.xml
<stylesheet src="als.css"/>

all these is followed the developer guide

https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects

 

Relative vs. Absolute URL

If an absolute URL is specified in the src attribute, that URL will be used verbatim. However, if a non-absolute URL is used (for example, "foo.css"), the module's base URL is prepended to the resource name. This is identical to constructing an absolute URL using GWT.getModuleBaseURL() + "foo.css" in client code. This is useful when the target resource is from the module's public path.

why will it fail?!!
and from the console, I found the getModuleBaseURL return http://127.0.0.1:7001/ALS/ALS

[tong123123]

I even try add
<public path='public'/>
in ALS.gwt.xml although the developer guide said it is by default, but the result is still the css placed under "war\WEB-INF\classes\public"!!

• <public path="path" /> : Each occurrence of the <public> tag adds a package to the public path by combining the package in which the module XML is found with the specified path to identify the root of a public path entry. Any file appearing in this package or any of its subpackages will be treated as a publicly-accessible resource. The <public> element supports pattern-based filtering to allow fine-grained control over which resources get copied into the output directory during a GWT compile.

If no <public> element is defined in a module XML file, the public subpackage is implicitly added to the public path as if <public path="public"> had been found in the XML. This default helps keep module XML compact for standard project layouts.

[tong123123]

fixed finally.

I try the easier method but fail, I place the css file in com.ha.als.public folder and after compile, the css file is placed in war\WEB-INF\classes\public,

my brain think I placed the css file in  com.ha.als.public folder but really I just wrongly placed it under src\public folder!! after I change it to placed to src\com\ha\als\public
and in the .gwt.xml, I write
<stylesheet src=ALS.css"/>

everything is fine, the css can be loaded as expected.
I just still don't know why the getModuleBaseURL is http://127.0.0.1/ALS/ALS but not http://127.0.0.1/ALS, but I have created another thread for this question.

Thanks.

[tong123123]

and for more information, after compile, the css is placed in \war\ALS\ALS.css, not under WEB-INF\classes......