Hi Ed,

the are at least two ways
a) using ClientBundles (your list is OK, you need a ClientBundle, a
CssResource and a file.css, and optionally some ImageResource)
b) using css files

I don't like to idea of changing styles when a widget has a different
ancestor. For classical text and text flow it make sense, but not for
GUI-widgets. I would expect that any widget looks the same regardless
of its placement. However, you do so for some reason.

With a) I guess you get problems with obfuscated class names. They are
probably not the same across two ClientBundles.
Try to defines the commonly used class names as @externals

With b) I would not expect problems (other than forgeting to load them
from the right places)

Stefan Bachert
http://gwtworld.de


On 24 Apr., 17:11, Ed Bras <[email protected]> wrote:
> Hi Stefan,
>
> Yep, it makes more sence.
> I am playing with it as we speak.
> At the moment I don't really understand how to include an existing component
> with his own styles.
> Suppose I have a datePicker that has his own set of styles...
> I think I need to define a DatePickerClientBundle, DatePickerCssResource and
> datepicker.css for it ? Or not.
> That's what I am playing with now, but not working yet.. (bunch of
> errors)...
>
> But then I want to use the datepicker in another place and use a nested
> selector, something like:
> .mypanel .datepicker {
>  padding: 20px    /* just an example */
>
> }
>
> So I define another ProjectClientBundle, ProjectCssResource and project.css.
> But how do I integrate this with the datepicker interfaces such that I can
> use the above styles :( ?
> I think I have to let ProjectCssResource extends DatePickerCssResource ...
> but then ?....
> Or must I use the @Import construction such that I have something like:
> .mypanel-datepicker {
>  padding: 20px    /* just an example */
>
> }
>
> The idea is (desired situation): include a widget, that has own set of
> styles, in another panel that influence the styles of the nested widget like
> shown in the above css examples.
>
> Your ideas are more then welcome.
> Ed
>
> On Sat, Apr 24, 2010 at 4:59 PM, Stefan Bachert <[email protected]>wrote:
>
> > Hi Ed,
>
> > > // The part I don't understand:...
> > > .panel .content {
> > >   padding: 10px;
> > >  }
>
> > This part is not special to GWT. This is pure CSS. This technique is
> > called "selector".
> >http://www.w3.org/TR/CSS2/selector.html
>
> > It means that a tag with with a class named "content" gets a padding
> > of 10px when it lay within a tag with a class named "panel".
> >  ".panel .content" is NOT a third class, it is just a nestling of two
> > classes
>
> > This example makes more sense if you define a padding for content
> > only, too.
>
> > .content {
> >   padding: 20px;
> > }
>
> > Then it mean, normally content gets 20px padding, but when it lays
> > within a panel (class) it gets 10px
>
> > Does this make sense to you?
>
> > Stefan Bachert
> >http://gwtworld.de
>
> > On 24 Apr., 07:01, Ed Bras <[email protected]> wrote:
> > > Hi Stefan,
>
> > > Thanks for your reaction.
> > > Let me tell you a bit more.
> > > I am starting to use styles through CssResource in my code now.
> > > I know how to use a single style, but have no idea how to use a prefixed
> > > style.
> > > Example:
> > > Suppose I have the following stylesheet:
> > > I am trying to use a style like:
>
> > > .panel  {
> > >   width: 10px;
> > >  }
>
> > > .content  {
> > >   font-size: 10;
> > >  }
>
> > > // The part I don't understand:...
> > > .panel .content {
> > >   padding: 10px;
> > >  }
>
> > > And my CssResource interface:
> > > interface MyCssResource extends CssResource {
> > >  public MyCssResource INSTANCE = GWT.create(MyCssResource.class);
>
> > >     @ClassName("panel")
> > >     String panel();
>
> > >     @ClassName("content")
> > >     String content();
>
> > > }
>
> > > So in my code I do something like this:
> > > ...
> > > SimplePanel panel = new SimplePanel();
> > > panel.setStyleName(MyCssResource.INSTANCE.panel());
>
> > > Label content = new Label("someText");
> > > content.setStyleName(MyCssResource.INSTANCE.content);
>
> > > So how is this prefixed style ".panel .content" used and obfuscated ?...
> > > Should I use the @import annoation for this ? .. and how ? :(... A bit
> > > confusing
>
> > > In the doc they use several sheets. Maybe I should use that?.. But how do
> > I
> > > link these to the client bundle :(...
>
> > > Ed
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > > To post to this group, send email to [email protected]
> > .
> > > To unsubscribe from this group, send email to
> > [email protected]<google-web-toolkit%[email protected]>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-web-toolkit?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to [email protected].
> > To unsubscribe from this group, send email to
> > [email protected]<google-web-toolkit%[email protected]>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups 
> "Google Web Toolkit" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to 
> [email protected].
> For more options, visit this group 
> athttp://groups.google.com/group/google-web-toolkit?hl=en.

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

Reply via email to