Hi David, I do agree with you that for the initial prototyping and maybe initial production releases it would be nice to have some polished CSS. However, I think that in general it's a much better use of resources to get a graphics designer to come up with the L & F and layout of your application. You might also find the following GWT blog posting on L & F an interesting read: http://googlewebtoolkit.blogspot.com/2008/12/gwt-no-need-to-shortchange-your-style.html
-- Arthur Kalmenson On Tue, Dec 9, 2008 at 9:40 AM, David Hoffer <[email protected]> wrote: > Hi Arther, > > Your comments are well taken. Since I have heard this before we have > used pure GWT. > > However, at this point however, I do think GWT missed it a bit here > because most Java programmers do not know CSS, at least not well, and > you cannot use GWT without knowing CSS. This fact, I think drives > some to these other frameworks. > > I think an ideal situation would be for GWT (or someone) to create a > mechanism to get a standard L&F with GWT without knowing CSS; sort of > like what you can do with Swing. Although just like Swing you should > be able to customized this L&F via some mechanism and in the case of > GWT CSS is fine. It seems GWT did start to go in this direction with > the GWT themes but they aren't extensive enough. > > -Dave > > On Tue, Dec 9, 2008 at 7:31 AM, Arthur Kalmenson <[email protected]> > wrote: >> >> Hello David and tomato, >> >> I highly recommend you stay as far away from Ext-GWT, SmartGWT and >> GWT-ext as you can. Gregor said it best, while they might look shiny, >> they are as slow as molasses and a huge PITA to work with. Once you >> start using them, you fall into their overly complex and inconsistent >> event models, you completely forgo most of GWT since these libraries >> can't work with GWT widgets, and give up the simplicity and high >> quality you come to expect from GWT. I say this from experience. >> >> -- >> Arthur Kalmenson >> >> >> >> On Mon, Dec 8, 2008 at 9:38 AM, Miles T. <[email protected]> wrote: >>> >>> 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 [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 -~----------~----~----~----~------~----~------~--~---
