Hi Gregor,
Thanks for the detailed response I will give this a try today.
As I read this I thought of a couple questions.
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?
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.
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.
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 sets. But this comes at a heavy
>> >> > > price in terms of performance since it all has to be meticulously
>> >> > > drawn in HTML bit by teeny bit. They may look very pretty, but your
>> >> > > users will soon tire of that if they have to wait seconds for the app
>> >> > > to respond every time they click a button.
>>
>> >> > > I would revisit your UI design strategy and assumptions. IMO you do
>> >> > > not need to slavishly follow windows idioms to write a good business
>> >> > > application UI in GWT - and GWT apps work like greased lightning if
>> >> > > you don't. You just need to think out of the box and play to
>> >> > > javacript/
>> >> > > DHTML and the browser's strengths rather than fight against the grain
>> >> > > of how they work.
>>
>> >> > > Another thing to consider is that most everyone knows the difference
>> >> > > between a desktop app and a web app - they use both every day - so
>> >> > > they are comfortable with both styles. The more windows style idioms
>> >> > > you put in a GWT application the more signals you are giving the user
>> >> > > that "This app works like a desktop app" so you find yourself on a
>> >> > > slippery slope of having to make *everything* emulate the desktop
>> >> > > style to meet that expectation. Very expensive to write and
>> >> > > performance sapping.
>>
>> >> > > On the other hand your users might equally say "Ah ha, this app works
>> >> > > like a web app. It works really fast too. Cool". Ask yourself why
>> >> > > Google didn't copy Outlook when they designed GMail's UI.
>>
>> >> > > regards
>> >> > > gregor
>>
>> >> > > On Dec 7, 3:25 am, "Ian Bambury" <[EMAIL PROTECTED]> wrote:
>> >> > >> Desktop apps are styled by the OS to fit the look and feel. You don't
>> >> > get
>> >> > >> many desktop app designers. Some, but not many. No one asks for VB
>> >> > >> and
>> >> > >> PhotoShop.
>> >> > >> People don't expect web sites to look exactly like a Mac. Especially
>> >> > >> not
>> >> > on
>> >> > >> a Windows machine.
>>
>> >> > >> HTML doesn't come with a standard (or any) look. Nor does JavaScript.
>> >> > And
>> >> > >> GWT is HTML and JavaScript.
>>
>> >> > >> And no-one wants their web site to look exactly like someone else's.
>>
>> >> > >> Sorry, but I think you are going to have to let your creative flair
>> >> > loose.
>> >> > >> You might even get to like it.
>>
>> >> > >> Ian
>>
>> >> > >>http://examples.roughian.com
>>
>> >> > >> 2008/12/7 David Hoffer <[EMAIL PROTECTED]>
>>
>> >> > >> > Well I'm new to GWT and I don't know CSS.
>>
>> >> > >> > What I would like is CSS for the standard GWT widgets & panels that
>> >> > >> > would give some some standard look (such as a Windows platform
>> >> > >> > look).
>> >> > >> > I applied one of the standard GWT themes and it helped some,
>> >> > >> > especially menus but buttons, trees, etc look quite bad.
>>
>> >> > >> > As another example, I would like DialogBox panels to have a
>> >> > >> > frame/window around them; currently there is no frame so they don't
>> >> > >> > don't even look like a modal frame with a caption bar that you can
>> >> > >> > drag around, etc. Essentially I would like the GUI to look like a
>> >> > >> > Windows or Mac application. With this look I can begin to show the
>> >> > >> > application to gain acceptance of GWT, with the current look they
>> >> > >> > are
>> >> > >> > not likely to be impressed.
>>
>> >> > >> > I would have thought someone would have created standard CSS for
>> >> > >> > this.
>> >> > >> > Perhaps I don't understand how CSS works in GWT.
>>
>> >> > >> > -Dave
>>
>> >> > >> > On Sat, Dec 6, 2008 at 6:56 PM, Arthur Kalmenson <
>> >> > [EMAIL PROTECTED]>
>> >> > >> > wrote:
>>
>> >> > >> > > What do you mean provide simple information? The standard theme
>> >> > gives
>> >> > >> > > you some basic GWT themes while you work through your
>> >> > >> > > application.
>> >> > The
>> >> > >> > > CSS class for each widget is available in the Javadoc.
>>
>> >> > >> > > --
>> >> > >> > > Arthur Kalmenson
>>
>> >> > >> > > On Thu, Dec 4, 2008 at 10:50 AM, dhoffer <[EMAIL PROTECTED]>
>> >> > wrote:
>>
>> >> > >> > >> I'm coming from a Java background and new to GWT and I don't
>> >> > >> > >> know
>> >> > >> > >> CSS. Is there some sample/basic CSS available I can use until
>> >> > >> > >> I am
>> >> > >> > >> able to get up-to-speed on CSS?
>>
>> >> > >> > >> I am using <inherits
>> >> > >> > >> name='com.google.gwt.user.theme.standard.Standard'/> in my xml
>> >> > >> > >> file
>> >> > >> > >> but that only seems to provide very basic style information.
>>
>> >> > >> > >> Does someone have some standard/simple CSS available for
>> >> > >> > >> standard
>> >> > GWT
>> >> > >> > >> widgets/panels?
>>
>> >> > >> > >> -Dave
> >
>
--~--~---------~--~----~------------~-------~--~----~
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-Web-Toolkit@googlegroups.com
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
-~----------~----~----~----~------~----~------~--~---
