Styling in Smart GWT

[curiousgally]

Isomorphic,

As you are aware, we have been evaluating SmartGWT for quite some time. We were happy with the features so recommended this product to be used for upcoming project. Our UI styling team is currently looking if SmartGWT could be styled to adhere to the UI guidelines our company has across products using various technologies. They have come up with the initial analysis as below:

My initial though is nearly every component will be challenging. It's not impossible but everything is images for the most part and the generated code contains a lot of inline styles which makes it very hard to override with just a css file. A simple button for example requires 21 different image slices and even then it will be hard to match more than just color as the sizes in many cases are hard coded. This will mean things like border radius and padding will be nearly impossible to match the Guggenheim standard.

My high-level impression is this will be a rather time consuming effort to just get close with the final result likely not matching the standard exactly in most (if not all) cases. The generative nature of this framework just result in a lot of properties that can’t be overridden and when they can it will need to be done mainly with images. I will continue to look at the different components but a quick glance at the images directory of any of the skins files included in the examples shows that it will be a very tedious process, especially considering there is no source files so every slice will need to be modified separately.

Can you clear some of the doubts our UI design team has. This would help our company to adopt SmartGWT across various products if it can answer their questions regarding styling. Will put up more questions as and when we get updates from our UI team.


Thanks.

[Isomorphic]

Most of these impressions are basically wrong. From basic misconceptions such as believing sizes to be hardcoded, it looks like this person just looked at the rendered components and media files, and never read the actual docs in the QuickStart Guide, and also did not read the Skinning Guide.

That's where to start to look into this (hence we call it the QuickStart guide, right?).

As far as sliced media/media for buttons, if a degraded appearance is acceptable for IE, you can start from the Simplicity skin, which uses CSS3 settings to create rounded buttons on non-IE platforms. Otherwise, you need that many images to create stretchable, multi-state buttons for IE - this is just a web browser reality, not specific to our product.