in line:
>
> 1. Does my CSS file have to have a particular name? You say it goes
> next to the HTML file. Do I just name it the same but with css
> extension and it will be found or do I have to reference it somehow in
> my HTML/XML?
>
No, it's specified in the module HTML file.
> 2. You mentioned to look at the showcase examples to get CSS to use.
> I looked at all these yesterday and found that most do not show the
> CSS used (I think most of the widgets did but most containers did
> not). I then looked at the source code for showcase given in the GWT
> examples and it seems they are using annotations to bring in styling
> information. What's up with this? It seems there is more than one
> way to apply CSS in GWT. This makes it harder to learn how one is to
> do this.
>
Yeah, this is new style injection stuff. Afraid I'm not familiar with
it yet. I think it's really useful once you know what you are doing.
> As an example of what currently looks really bad...DialogBox and
> VerticalSplitPanel. The former has no border so it doesn't even look
> remotely like a DialogBox and VerticalSplitPanel only has a splitter
> bar...no border. So unless you really know there is a split panel you
> have no idea what you are looking at. For these examples the showcase
> shows no CSS so apparently it is using annotations to bring in
> styling. BTW, for these cases I am using the standard theme.
>
I thought DialogBox does have a border as standard? Anyway, the issue
is this. Most likely you will want to put the VSP into a container of
some sort. That container will might also contain other widgets in
possibly complicated arrangements. Now, do you style the borders for
each one individually so you end with a smooth regular border around
the whole lot (which might involve setting the right border for this
one, the top border for that one etc). Or do you only style the
internal partitions borders of the individual widgets and style the
border of the container boxes once and once only to get outer border
for all your main layout boxes in one go?
If you are just creating a few example widgets out context (i.e. not
within an overall "designed" page layout) then I can see what you are
saying. However if you take a step further and start with an outline
page layout that has a set of discreet containers to house your main
application widgets, it can make a lot of sense to work "outside in"
so to speak and get the overall layout with borders and spacings etc
you want first, then just slot the widgets into it. That way most
widgets nestle up to the layout's borders so you don't want them to
have their own, just some extra internal styling to make them look
right here and there.
And of course the killer is that if the borders/margins etc are set on
the layout outline containers, they will all probably have the same
CSS style - or just a few of them - so a few ridiculously simple CSS
edits on this style can dramatically change the way your layout looks
(and I mean dramatically). When you do this for the first time you
will suddenly get the point - the "Aha moment".
If you wanted a more business oriented look, you can use low key
narrow borders (like 1 or 2 pixels) in a soft blueish shade around the
layout containers with a little padding/margin between them with a
matching low key gradient strip image for headings etc rather than,
say, Google's house style of thick blue borders and inverse headings
But it's not mandatory. People work in different ways and have
different design requirements. if you want a border round a VSP, just
put it in CSS like I described above.
> Thanks much, I will look at your example.
> -Dave
>
> On Sun, Dec 7, 2008 at 7:57 PM, gregor <[EMAIL PROTECTED]> wrote:
>
> > Hi Dave,
>
> > 1) I think this might have something to do with debugging client
> > javascript at run time using Firebug or something - I've never used it
> > to be honest.
>
> > 2) I happen to have a simple CSS example to hand, so this might help -
> > apologies if its too simplistic....
>
> > Your module will have its own CSS file next to its HTML file in the
> > public folder.
>
> > If you check the standard theme GWT CSS for DisclosurePanel it looks
> > like this:
>
> > .gwt-DisclosurePanel {
> > }
> > .gwt-DisclosurePanel-open {
> > }
> > .gwt-DisclosurePanel-closed {
> > }
> > .gwt-DisclosurePanel .header,
> > .gwt-DisclosurePanel .header a,
> > .gwt-DisclosurePanel .header td {
> > text-decoration: none; /* Remove underline from header */
> > color: black;
> > cursor: pointer;
> > cursor: hand;
> > }
> > .gwt-DisclosurePanel .content {
> > border-left: 3px solid #e8eef7;
> > padding: 4px 0px 4px 8px;
> > margin-left: 6px;
> > }
>
> > Notice that it starts with gwt-DisclosurePanel - this is the primary
> > style name given to this widget. In the DisclosurePanel source
> > somewhere you will find setStylePrimaryStyleName("gwt-
> > DisclosurePanel"). Elsewhere in the code you will find they assign the
> > various sub-styles to individual components of DisplosurePanel using
> > add/removeStyleName(styleName) or add/removeStyleDependentName
> > (styleSuffix) corresponding to e.g.gwt-DisclosurePanel-open and e.g.
> > gwt-DisclosurePanel .header respectively (or is it the other way
> > round, it's late). So the java code switches between the -open and -
> > closed styles in response to user clicks etc, but the primary style is
> > always the same.
>
> > (This is how to go about using CSS when you design your own composite
> > widgets - follow what they do)
>
> > Now you have two choices how to proceed to start with.
>
> > 1) don't use a standard theme, but keep a copy of one of them (i.e.
> > the CSS files) handy so you can cut and paste the CSS format for each
> > widget into your own module CSS file where you can edit it how you
> > like - you just need to do each one as you need it.
> > 2) Put <inherits name='com.google.gwt.user.theme.standard.Standard'/>
> > (or chrome/dark) in your module gwt.xml file which will activate the
> > theme. Now however you are stuck with what they give you - well, no,
> > you are not......
>
> > Notice that the .gwt-DisclosurePanel .content style has got borders
> > and padding etc. Now I was happy with most of the standard theme for
> > what I was doing, but I did not want the contents of the disclosure
> > panel to be so indented - I wanted it flush with the outer border of
> > the panel. So I stuck this in my own module CSS file:
>
> > .my-DisclosurePanel {
> > }
> > .my-DisclosurePanel-open {
>
> > width: 100%;
> > height: 100%
> > }
> > .my-DisclosurePanel-closed {
>
> > }
> > .my-DisclosurePanel .header,
> > .my-DisclosurePanel .header a,
> > .my-DisclosurePanel .header td {
> > text-decoration: none; /* Remove underline from header */
> > color: black;
> > cursor: pointer;
> > cursor: hand;
> > }
> > .my-DisclosurePanel .content {
> > width: 100%;
> > height: 100%
> > /*border-left: 3px solid #e8eef7;
> > padding: 4px 0px 4px 8px;
> > margin-left: 6px;*/
>
> > }
>
> > Then in my Java class code:
>
> > private DisclosurePanel myDiscPanel = new DisclosurePanel();
> > ...
> > myDiscPanel .setStylePrimaryName("my-DisclosurePanel");
>
> > et viola the annoying indents have gone for this particular
> > DisclosurePanel, but I still have the main GWT theme running for all
> > other widgets (including any other DisclosurePanels I don't choose to
> > doctor like this) which is useful otherwise everything really does
> > look awful to start with. Notice how just changing the primary style
> > name achieves this (which is why you should design your own widgets
> > like this: it enables wholesale alterations to L&F with minimal effort
> > and it is truly amazing what you can do CSS styling when you get the
> > hang of it. It makes Swing look stupid in some respects).
>
> > It may drive you mad for a bit but I assure you there is method in
> > this madness. A good tip when you get a bit lost is to fire up the
> > showcase demo, choose an example widget that vaguely resembles what
> > you need to do and look up it's source code and CSS.
>
> > regards
> > gregor
>
> > On Dec 7, 11:05 pm, "David Hoffer" <[EMAIL PROTECTED]> wrote:
> >> Thanks for stating the obvious, I hadn't seen that web site yet.
> >> Okay, I have a couple of CSS newbie questions.
>
> >> 1. What are calls like
> >> disabledButton.ensureDebugId("cwBasicButton-disabled") for? This
> >> isn't a Java like thing.
> >> 2. Where do I paste the CSS Style code?
>
> >> Thanks!
> >> -Dave
>
> >> On Sun, Dec 7, 2008 at 10:45 AM, tomato <[EMAIL PROTECTED]> wrote:
>
> >> > Hi David,
>
> >> > I'm new too, I don't know much about GWT. I'll risk stating the
> >> > obvious here, but I think the Google sample CSS templates can maybe
> >> > get you started? They are pretty standard google looks. :)
> >> >http://gwt.google.com/samples/Showcase/Showcase.html
>
> >> > Cheers,
> >> > tomato
>
> >> > On Dec 7, 7:17 am, "Ian Bambury" <[EMAIL PROTECTED]> wrote:
> >> >> You are not really going to get what you want with any web language
> >> >> although
> >> >> some of the frameworks will let you look like all the other sites that
> >> >> use
> >> >> that framework, and the 'instant web site' and 'web site in a box'
> >> >> applications will let you choose from a number of themes.
>
> >> >> Desktop apps have a look and feel because they are extending the OS and
> >> >> for
> >> >> a long time you had no choice as to what they looked like, you could
> >> >> only
> >> >> move stuff around the window - even the widgets were/are standard like
> >> >> the
> >> >> file-picker in VB et al. There's more freedom in the web, but the price
> >> >> is
> >> >> that you have to do a bit of work.
>
> >> >> GWT *does* let you 'just use Java'. You are picking a very specific use
> >> >> of
> >> >> Java and saying you can't use it like that. Like complaining that you
> >> >> can't
> >> >> use a pencil for sketching because it doesn't draw circles properly
> >> >> like it
> >> >> does when it's in a compass :-)
>
> >> >> GWT aims to let you write Java and get JavaScript - it does that. It
> >> >> doesn't
> >> >> claim to have you write Java and get CSS or images.
>
> >> >> Ian
>
> >> >>http://examples.roughian.com
>
> >> >> 2008/12/7 David Hoffer <[EMAIL PROTECTED]>
>
> >> >> > Hi Gregor,
>
> >> >> > Thanks for the reply. I don't disagree with what you say, I'm sure I
> >> >> > do need to learn CSS and specifically how GWT makes use of it.
>
> >> >> > However I do want to point out that I think Google missed it a little
> >> >> > in this area. The fundamental selling point of GWT for us at least is
> >> >> > that we can stay with our well known programing language/technique
> >> >> > (Java) and write a high quality web app as well. Actually in our case
> >> >> > we are taking it one step further our app is implemented in both Swing
> >> >> > and GWT. The Swing & GWT UI layers are as thin as possible, all the
> >> >> > business logic is shared between both implementations. You can think
> >> >> > of our app as a pure MVC app where the M & C are shared and only the
> >> >> > view is separate code.
>
> >> >> > However since GWT did not let us set the L&L in Java code its not
> >> >> > really true that you can just use Java. Perhaps there are reasons for
> >> >> > this I will understand when I learn CSS but I would have preferred
> >> >> > that GWT provide some satisfactory L&L right out of the box and also
> >> >> > allow developers to write specialized CSS.
>
> >> >> > You are right that web apps don't typically behave like platform apps
> >> >> > (Windows, Mac), I was only using those as examples. The simple GWT
> >> >> > style could be something else.
>
> >> >> > I will check out Ian's web site and see if I can get up to speed on
> >> >> > CSS
> >> >> > quickly.
>
> >> >> > -Dave
>
> >> >> > On Sun, Dec 7, 2008 at 6:32 AM, gregor <[EMAIL PROTECTED]>
> >> >> > wrote:
>
> >> >> > > Hi Dave,
>
> >> >> > > I think you really need to get to grips with CSS, the HTML box model
> >> >> > > and learn to use GIMP/Photoshop to work effectively with GWT - or
> >> >> > > hire
> >> >> > > a graphic designer to get you off the ground. As Ian says, you get
> >> >> > > the
> >> >> > > L&F for free in Swing, SWT or .NET, but you don't in javascript/HTML
>
> >> >> > > JS libraries with GWT wrappers like the Ext family and SmartGWT
> >> >> > > offer
> >> >> > > out of the box windows L&F and widget
>
> ...
>
> read more »
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
