On Friday, June 7, 2013 9:39:58 AM UTC-4, Ed wrote: > The gwt dev developer roughly implements the styles, shows/gives it to the > designer and the designer uses some kind of tool/browser-plugin to make > changes and report the changes back to the developer... But how ??.. > > In my opinion, this is the worst possible workflow. There is no such thing as "roughly implements styles" if you know web design. The process *starts* with the designer creating all styles: overall layout, standard panel sizes, standard margins and paddings, font sizes, heights and width of input elements, etc. Only after that a developer should start building the views.
For example, I use 24px as the basic grid unit. So I have a medium panel which is 240px wide (10 units), and a large panel which is 504px wide (21units, which means it fits two medium panels with a 1 unit gap between them). All other widgets are set to fit one of these standard panels. All my panels, used for layouts, have a padding of 0 at the top and 24px on the other three sides; and all headers or field labels have a top margin of 24px. All inputs are reset to have the same height. Now, when I need to build a view, I simply choose the panel of the appropriate size, and throw headers, labels and various inputs in it in the right order: and suddenly I have a beautiful form where everything is perfectly aligned. There is no need to apply any styles to the widgets within the panel, or to set any sizes: my CSS file does all the work, and it does it consistently throughout the entire application. And I almost never have to test changes and new features in different browsers: there are a lot of cross-browser quirks (like the height of a <select> element or the width of a scrollbar), but a good designer should know how to take care of them in the same single CSS file. I do not use CssResources. I tried, but I found them to be more or less useless. CSS is built around inheritance. With the correct design process, the same styles are applied across the entire app. Even in those rare cases when a widget does have unique styles (e.g. DatePicker), I don't see a point in creating a separate file for them: it's much harder to ensure consistency in styles when styles are defined in a dozen files across the app. I believe this approach is the most time efficient. A good designer can create a complete CSS file for an app within a few days, and the developers don't have to think about styles - they only decide which widgets to use and in what order. You will be amazed to see how more productive your developers become if you give them a professionally built theme and teach them how to use it. With a good theme it takes me less time to build a working view in GWT, then to draw the same view in Photoshop - and I am very good with Photoshop. Unfortunately, this custom CSS file will clash with the GWT's standard theme, and a good designer will go crazy fighting with it. Standard GWT themes are not pretty, and more importantly, they are not consistent. For example, if you use a standard CellTable or DataGrid, headers are off by 2px from column's content. This is not a mistake per se - these 2px are used for a border within a cell and change color with the row/cell selection, but a good designer would have adjusted paddings within the <th> element to compensate for these 2px. There are many other examples. To summarize, there is only one viable option: hire a very good designer. If your designer is exceptionally good, he or she can build you a custom theme for the entire app in pure GWT. Sometimes you need two people - an "artist" to create a pretty design and a web designer who can build a good quality CSS that efficiently implements this pretty design. Otherwise, use a component library like Sencha or GWT-Bootstrap, which greatly reduces the amount of work your designer needs to do. Andrei -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
