Basic CSS question

[Mike Dee]

I think this is a basic CSS question. I am playing around with
styles. I notice that in standard.css that body is defined to have a
sans-serif font family.

If I change the font-family to serif, I would expect all other
elements (labels, menus, buttons, etc) to be affected. But I don't
see any change when I run my test app. I basically copied the body
class from standard.css and pasted it into my app.css. I only made
one change, which is to the font-family (from sans-serif to serif).

I would have expected to see serif used in all widgets. There are no
other mentions of "font-family" in standard.css. My (probably faulty)
understanding of CSS is that the properties set in the body would be
inherited by other elements.

MIke

[Ernesto Oltra]

Hi,

Use Firebug or Chrome Dev Tools to see the cascade of styles, because I had some hard times with that. You define the font X for body, but then GWT loads and injects the standard.css file and you have sans-serif or whatever again.

You could:

1) Load your stylesheet and inject it after GWT loads.

2) Use your own version of standard.css (it's only a css file with some images, copy it and use it)

Hope it helps,

Ernesto

[Mike Dee]

What does "injecting" mean in terms of CSS? Sounds like this may
alter the way cascading works in a typical web site/app?

[Tobias]

I am currently also struggling with that issue, see:
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/9e6d9651395c96a3/bddc3938127ba1b0

[Ernesto Oltra]

Sorry, I meant if you use the CssResource to bundle your stylesheets together with your app, it has a method ensureInjected(). The load process would be something like that:

Host page -> GWT code -> standard.css -> Your code -> Your CSS file injected

So it's easier to overwrite styles in this way.

Sample code:

public interface Resources extends ClientBundle {

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

  public interface Style extends CssResource {

    String myCssClassHere();

    String myCssClassHere2();

  }

  @ClientBundle.Source("Style.css")

  @CssResource.NotStrict // If a class is present in the css file,

  Style css();           //but not in the interface, don't

                         // return any compiler errors

  

  ImageResource blahBlah();

  // Othere resources....

}

public class MyApp implements EntryPoint {

  public void onModuleLoadSafe() {

    Resources.INSTANCE.css().ensureInjected();

  }

}

2011/9/8 Tobias <to....@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Mike Dee]

I've been playing around with this for a couple of days, to great
frustration. Can't get it to work.

I followed the example here:
http://code.google.com/p/google-web-toolkit/wiki/ClientBundle#Examples

That doesn't work either. The call to Window.Alert to print out the
css shows no text.

I also noticed a few other things.

1) I took to naming my styles with hyphens, just like in all the GWT
examples. Hyphens are not allowed.

2) The app won't start. An error message appears and the fix was to
add "@external" to the front of my styles. But WHY? Nothing I did
was any different from the GWT samples and none of them used
@external. So, I just did something for which I have no understanding
(the documentation is not helpful). I'd like to know, when is
@external not needed?

3) I am using uibinder and removed my css file from the war directory
and moved it someplace where the CssResource can access it (in the
class hierarchy). Now those styles are not being picked up. Probably
because the enjureInjected() isn't working. Or maybe ensureInjected()
doesn't work with uibinder. Haven't been able to get far enough to
determine.

I would like to see some decent documentation. It is nice to have
step by step just-do-it-this-way instructions. But when that doesn't
work, I have no idea why I am doing what I am doing. Seems like the
docs are written for those who already understand GWT, which kind of
defeats the purpose.

Mike

On Sep 8, 1:23 pm, Ernesto Oltra <ernestoka...@gmail.com> wrote:
> Sorry, I meant if you use the CssResource to bundle your stylesheets
> together with your app, it has a method ensureInjected(). The load process
> would be something like that:
>
> Host page -> GWT code -> standard.css -> Your code -> Your CSS file injected
>
> So it's easier to overwrite styles in this way.
>
> Sample code:
>
> public interface Resources extends ClientBundle {
>
>   public static final Resources INSTANCE = GWT.create(Resources.class);
>
>   public interface Style extends CssResource {
>     String myCssClassHere();
>     String myCssClassHere2();
>   }
>
>   @ClientBundle.Source("Style.css")
>   @CssResource.NotStrict // If a class is present in the css file,
>   Style css();           //but not in the interface, don't
>                          // return any compiler errors
>
>   ImageResource blahBlah();
>   // Othere resources....
>
> }
>
> public class MyApp implements EntryPoint {
>
>   public void onModuleLoadSafe() {
>     Resources.INSTANCE.css().ensureInjected();
>   }
>
> }
>

> 2011/9/8 Tobias <to.s...@gmail.com>

>
>
>
>
>
>
>
> > I am currently also struggling with that issue, see:
>

> >http://groups.google.com/group/google-web-toolkit/browse_thread/threa...

[Mike Dee]

Made progress on this. Posting here since it may be helpful to
someone else. Also additional questions.

Started from scratch. Having @CssResource.NotStrict is important.
That pretty much allowed the css to be loaded without @external.

One problem occurs if there is a css class with a hyphen in the name.
A corresponding "foo-bar()" method is not allowed in the CssResource
class as the hyphen is an illegal char in a Java method name. That was
no big deal for me, since I don't need to programatically access css
classes.

I started out on this path to check if UiBinder would work with a
CssResource. It does. The ensureInject() seems to stick the styles
in myapp.css into the HEAD of the app's page (after standard.css).
However, GwtDesigner doesn't reflect the styles. In using a
CssResource myapp.css was moved from the WAR directory (where the
myapp.html file is) to com.mycompany.myapp.resources. I don't think
GwtDesigner knows to look there. I guess a copy of myapp.css could be
left in both places, but I'll probably forget to keep them in sync.

[Ernesto Oltra]

The documentation you have linked is for vesion < 2.0. It clearly says at the beggining:

Documentation for the GWT 2.0 release of ClientBundle can be found on the GWT Developer's Guide website.

1) I have included a hyphen example in the files

2) Have you add CssResource.NotStrict? If not, the things declared in the CSS file and not declared in the interface will be reported as errors

3) Uibinder doesn't modify ClientBundle in any way. If the file (MyCSSFile.css in this example) is not found, it's a compile error, not a runtime one.

This is a complete working example (Java imports excluded for shortness):

com/example/myapp/MyApp.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"

    "http://google-web-toolkit.googlecode.com/svn-history/r10350/trunk/distro-source/core/src/gwt-module.dtd">

<module rename-to="myapp">

  <inherits name='com.google.gwt.user.User'/>

  <entry-point class='com.example.myapp.client.MyApp'/>

</module>

com/example/myapp/client/MyCSSFile.css

body {

  background-color: red; /* only an example of changing the color */

  font: bold 20pt sans-serif;

}

.example-with-hyphens {

  font-weight: bold;

}

com/example/myapp/client/Resources.java

public interface Resources extends ClientBundle {

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

  public interface Style extends CssResource {

    @ClassName("example-with-hyphens")

    exampleWithHpyhens();

  }

  @ClientBundle.Source("MyCSSFile.css")

  @CssResource.NotStrict // If a class is present in the css file,

  Style css();           //but not in the interface, don't

                         // return any compiler errors

}

com/example/myapp/client/MyApp.java

public class MyApp implements EntryPoint {

  public void onModuleLoadSafe() {

    Resources.INSTANCE.css().ensureInjected();

    Button button = new Button("Example button");

    

    String cls = Resources.INSTANCE.css().exampleWithHyphens();

    // Now cls contains the obfuscated name

    // of .example-with-hyphens

    button.setStyleName(cls);

    RootPanel.add(button);

  }

}

2011/9/15 Mike Dee <mdichi...@gmail.com>

[Ernesto Oltra]

The CSS file must be in the same package as the ClientBundle java file. In one of my projects I have this structure:

src/com/company/app/Resources.java

resources/com/company/app/Style.css

And both folders (src & resources) are "Source folders" in my IDE

2011/9/15 Mike Dee <mdichi...@gmail.com>

[Mike Dee]

Sorry, was a way for a week. Thanks, I got this working. I started
over from scratch and it worked. Must have been something in there
that I did (while experimenting) that prevented it from working.

Mike

On Sep 15, 12:18 pm, Ernesto Oltra <ernestoka...@gmail.com> wrote:
> The documentation you have linked is for vesion < 2.0. It clearly says at
> the beggining:
>

> *Documentation for the GWT 2.0 release of
> ClientBundle<http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html>
> can
> be found on the GWT Developer's Guide website.*

>
> 1) I have included a hyphen example in the files
> 2) Have you add CssResource.NotStrict? If not, the things declared in the
> CSS file and not declared in the interface will be reported as errors
> 3) Uibinder doesn't modify ClientBundle in any way. If the file
> (MyCSSFile.css in this example) is not found, it's a compile error, not a
> runtime one.
>
> This is a complete working example (Java imports excluded for shortness):
>

> *com/example/myapp/MyApp.gwt.xml*
> *
> *

> <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"

>     "http://google-web-toolkit.googlecode.com/svn-history/r10350/trunk/dis...

> ">
> <module rename-to="myapp">
>
>   <inherits name='com.google.gwt.user.User'/>
>
>   <entry-point class='com.example.myapp.client.MyApp'/>
>
> </module>

> *
> *
> *com/example/myapp/client/MyCSSFile.css*
> *
> *

> body {
>   background-color: red; /* only an example of changing the color */
>   font: bold 20pt sans-serif;
>
> }
>
> .example-with-hyphens {
>   font-weight: bold;
>
> }
>

> *com/example/myapp/client/Resources.java*

>
> public interface Resources extends ClientBundle {
>
>   public static final Resources INSTANCE = GWT.create(Resources.class);
>
>   public interface Style extends CssResource {
>     @ClassName("example-with-hyphens")
>     exampleWithHpyhens();
>   }
>
>   @ClientBundle.Source("MyCSSFile.css")
>   @CssResource.NotStrict // If a class is present in the css file,
>   Style css();           //but not in the interface, don't
>                          // return any compiler errors
>
> }
>

> *com/example/myapp/client/MyApp.java*

>
> public class MyApp implements EntryPoint {
>
>   public void onModuleLoadSafe() {
>     Resources.INSTANCE.css().ensureInjected();
>
>     Button button = new Button("Example button");
>
>     String cls = Resources.INSTANCE.css().exampleWithHyphens();
>     // Now cls contains the obfuscated name
>     // of .example-with-hyphens
>
>     button.setStyleName(cls);
>
>     RootPanel.add(button);
>   }
>
> }
>

> 2011/9/15 Mike Dee <mdichiapp...@gmail.com>