search

emberjs-addons / sproutcore-ui

(Ember Only) A library for building rich, complex user-interfaces on top of Ember
www.sproutcoreui.com
115 stars 3 forks source link

Themes and Visual Customization (suggestion) #1

Open guilhermeaiolfi opened 13 years ago

guilhermeaiolfi commented 13 years ago

Hi,

I didn't know exactly where to write it. Hopefully it's a good place so other can comment and suggest other things related.

One thing that I have never liked about ExtJS and Sproutcore is that all themes share the same DOM structure. I mean, for a light and a complex theme the same DOM elements are created. The same number of elements. The whole DOM hierarchy needed is hard coded in the widget itself.

Even thought the theme has no radius borders, for example, those divs are there in case you need them for more complex themes. That makes even simplest theme perform as slow as the more complex one.

That's something that people at qooxdoo (www.qooxdoo.org) have understand and created a very cleaver solution IMO. I had the chance to develop one theme for the framework and notice how things work there. I hope you consider something alike for sproutcore.

The whole idea is described here: http://manual.qooxdoo.org/1.4.x/pages/gui_toolkit/ui_theming.html

If you have any time please take a look and tell me what you think.

Any doubts please ask.

jtaby commented 13 years ago

SproutCore 1.x had a concept of "Render Delegates" which are objects the view delegates rendering to. Those RenderDelegates were tied to the theme so that when the theme changes, you can change how a view is rendered.

We want to port over the same concept to SproutCore 2.0. The way we're thinking of doing that is by making templates tied to a theme in SproutCore UI. That is, by changing the theme property on a given view, it will use a different template (if said theme has a custom template).

It seems to me that what you're proposing is similar. Please let me know if you're trying to cover a case we're not thinking of.

guilhermeaiolfi commented 13 years ago

I don't know if you read the qooxdoo theming text I mentioned. And I don't know if "Render Delegates" does that too. But decorations in qooxdoo (how the frame around a widget will be rendered) is defined in a programmatic manner. Each decoration is a class. It's not static as it is in templates.

The big advantage I can see is the ability to detect browser's features support at runtime and use the best DOM structure for each scenario.

For example, if a rounded decoration is going to be render in a browser with support for CSS "radius-border" it uses just one div and set the radius-border property in it. If the browser doesn't support it, it creates as many divs is needed and organized them to simulate the rounded borders.

guilhermeaiolfi commented 13 years ago

Is it clear the advantage that it could bring to sproutcore 2.0?

rriveras commented 13 years ago

@guilhermeaiolfi Browsing the repo, I find this https://github.com/sproutcore/sproutcore-ui/blob/master/documentation/theming.md Maybe that answered your question. In my opinion, that cover a lot of my customization needs. You can customize the css or override the way you want to render a particular component or view using a custom handlebar template (aka html).

Regards

guilhermeaiolfi commented 13 years ago

yeah, I had read that. But I don't think that the last feature I mentioned is covered in that design (different output depending on the browser). That's just one of the features that I can think would be cool. There is more features described in the theming docs I linked that would turn sproutcore theming system more powerful.

rriveras commented 13 years ago

You're totally right. I get the idea. And yes, apparently there's no browser's feature detection. However, you can always use something like modernizr. Of course, it's not the same, but give you a nice start.

guilhermeaiolfi commented 13 years ago

More in the subject: http://t.co/8eRTTAm

The most relevant part: "The Split DOM feature in Ext JS 4 gives the ability to render different markup based on browser capability / version."

Now there are at least three frameworks that do that: qooxdoo, ExtJS, APF (it can use conditions in their theme metadata). I expect others to follow. Maybe cappuccino does that to, but I have never had the chance to look it in details.

Since sproutcore-ui is in its infancy, we would be better considering it now rather than have to change it later on.