Hi David and tomato,
We also didn't (and still don't) want to write HTML or CSS for our
application (it aims to be an internal application, not a public
website). Consider using Ext GWT, SmartGWT or GWT-Ext, I guess this is
what you're looking for. These libraries provide a set of widgets and
look and feels and let you define your own. They also allow you to
devlop in a Swing-style by using standard layouts (BorderLayout,
CenterLayout,...).
We choose Ext GWT because it is a full GWT library (others are
wrapping a JS library), it provides a simple MVC layer and has more
documentation.
Regards
On 8 déc, 14:34, "David Hoffer" <[EMAIL PROTECTED]> wrote:
> 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
>
> ...
>
> plus de détails »
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
