HowTo's on Custom Skins / Styles?

[ttubbs]

We are finding that the most time consuming part of working with SmartClient is customizing the look and feel. We've read about safe skinning, and think we have an understanding of the framework's basic concepts. Our problem is trying to find all the information we need to actually make the changes in a timely fashion. Would you please provide guidance and/or insight into the following concerns?

- In YUI, if you want to know about skinning a widget, you can get all that information consolidated in a single/few pages focused just on the skinning. All the css class names are defined, code snippets needed, etc. How can we find the same consolidated information per widget with SmartClient?

- On any given widget, how can we determine what can be styled via css, and what requires setting of attributes in JavaScript.

- Perhaps related to the above question, how can we determine which styles are externalized (thus can be set in css files) and which ones are inlined by the framwork?

- Is it possible to make all styling available in css files? How? Does this require a special skin to make this happen? Does this special skin exist?

- It seems to us, in order to get as complete a picture of the options available to us, we must snoop through each of the load_skin.js files to see what attributes and properties have been used. We have no way to determine if that is the complete list of available options though.

Besides our own struggles to provide the base product, much of the basis of these questions is also driven by the need to provide a way for client rebranding of our products. Perhaps you have insight you can give in general on this topic when the base product is done with SmartClient.

Thanks,
TT

[Isomorphic]

From some of your questions, it sounds like you haven't read the Skinning Guide, which explains how to discover style- and image-related properties for components. Be sure to also read the related AutoChild discussion.

You can't do all styling via CSS because there's not enough consistent cross-platform CSS behavior to do some of the things we allow. However you can use a very low images skin - Fleet is currently the lowest.

How best to provide skinning facilities is a big topic, not really something to cover in the forums.

[ttubbs]

Thanks for the response. Not what we were looking for, but not unexpected either.

FWIW, we've read the links you've provided. We just take issue with the discovery process. It would be much friendlier to have a guide/cheatsheet similar to YUI. As a developer I can go on a seek and find mission if I must, but this doesn't really work for the client trying to rebrand the product we've developed.

I'll pass this info. along and let the powers that be determine if we need to pursue this with a different avenue.

[Isomorphic]

It's hardly a "seek and find mission" to be told to go the reference for a component and type in "style"!

If you're referring to the advice of how you find out the class of a live component from the Watch Tab, consider that final applications almost always uses various subclasses and composite components. If you are trying to understand how to skin a particular part of a composite component consisting of various subclasses of the base components, reference for the base components is next to worthless unless you have a way to figure out how the base components are related to what you're skinning.

In a nutshell, this is practical advice for real-world use.

[ttubbs]

My experience with styling has been a seek and find mission so far. It may be a lack of experience on my part, or a composite component problem. For sake of argument, we can assume this is so. I really don't care about those details. What I care about is how easy it is to discover/learn/gain this experience so I can style my app.

Maybe some specifics will help clarify. I was tasked with adding custom styling to the tab control, and struggled with this a bit to get the desired outcome. Following your suggestion here, I went to your website and searched for TabSet. On the Instance API tab for the TabSet component I typed "style" into the filter box. The result is a message that says "No items to show." So doing a bit of seek and find, I discover the TabBar AutoChild. Load up the TabBar APIs and type in "style". Same result - "No items to show."

In order to get the angled end cap design that was asked for on the tabs, I ended up making use of the memberOverlap property. IIRC, this property is not used in the Enterprise skin - our base skin and the load_skin.js file where we start snooping to do our discovery. To find what I was looking for, I ran the TabSet examples on your site switching themes until I found one that looked like it was doing what I wanted. I believe it was TreeFrog that got me close, and when I went snooping through its load_skin.js I found this property in use for the Tabs. Searching the reference on your site for "memberOverlap" I get two hits, both in Layout.

Even after having completed this task and know the final answer, I don't see how we would discover that memberOverlap is the solution using the reference site.

We've spent some time working with Calendar as well. If you type "style" in there, you do get some hits on this one. One of those is "selectedCellStyle", but this apparently doesn't apply in all cases. See our previous post: http://forums.smartclient.com/showthread.php?t=7284

We really are not finding it as easy as you are making sound like it should be.

[Isomorphic]

The skinning guide does tell you to look for AutoChildren and style properties, so this seems like a somewhat long story for ordinary document navigation.

memberOverlap is a Layout property that TabBar inherits. There are several other Layout properties that can be used for skinning purposes or other purposes. There are perhaps 100 Canvas-level properties that apply to all components. Presenting all of this information at once in any fashion seems like a blizzard of information. In your fantasy of how skinning reference is supposed to work, what process would have led you to discover "memberOverlap"?

[ttubbs]

Typing "style" into the filter box for TabSet, TabBar, ToolStrip and Layout do not result in any hits. Typing "style" in for Canvas shows 4 (not 100). And, memberOverlap isn't one of them.

Well, the "stack of cards" appearance mentioned on the memberOverlap property reference isn't an uncommon feature of the tabs in a tab set (even some of your skins do it). I don't get why a page on how to skin the tab control containing a blurb that says something like:

For arranging the tabs, including a stacked look, see the following properties:
- memberOverlap
- and the 15 other properties I've never needed before now so don't even know they exist, what they are named, or how to easily find them w/o reading the API list for every object in the derivation chain and all the reference material for the ones that sound promising. How is this not a seek and find mission?

[Isomorphic]

There are around 100 different properties on Canvas that might apply to skinning. They are not named style, because, like memberOverlap, they aren't styles.

The first hit for a search for "overlap" is Layout.memberOverlap. As with search in general, you should try a few possible terms, and we try to put each possible term a user might try into the doc, so search hits it.

It's very easy to say that whatever property you happen to be looking for should have been right there in an overview document, in practice, this would lead to putting every property in the overview document, and everything would be hard to find once again.

[ttubbs]

I understand what you're saying, and can sympathize with that. Still, can't blame a guy for wishing for something to make things easier. I'm sure you'd get a lot of mileage out of per component styling cheatsheets if you could find a way to do so.

Truthfully "overlap" didn't occur to me. I initially thought there was some sort of end cap image trick going on, and I got very close to the desired solution using cap images. I guess I got stuck looking at things form that angle, so a different approach didn't occur to me. After spinning the wheels there for too long, I went looking at code in skin files and found what I needed that way. We are looking forward to the day when we too can just say 'Well of course it's memberOverlap!'. But, we aren't there yet.

I get 'it is what it is' at this point, and have what I need to take back to the bosses on this. Thanks for talking it out with me.

TT