Help Wanted: New Ace Theme and Renderers
Two features of the next SproutCore are finally ready to be worked on (by those aside from me): Ace 2.0 and Renderers. They are in SproutCore’s master branch, ready for you to hack on.
Ace 2.0 (demo here) is the new SproutCore theme. Unfortunately, it is unfinished. Doubly unfortunately, there are a lot of things to theme. So, help would be much appreciated.
It is easy to contribute artwork: fork SproutCore (the theme is in themes/sc_ace), create a PSD, drag in elements from existing PSDs (to ensure styles remain consistent), do your thing, submit a pull request.
If you don’t need to change the DOM for a control, then it is also easy to actually theme the control: in your fork, just create a CSS file in a properly named folder, put in some @view() and sprite() magic (see the other CSS files, or Colin’s excellent write-up on Chance), run Chance, and Boom! It is themed. Submit a pull request. For your convenience, Chance is actually in the Ace theme folder (under the chance directory); assuming you have RMagick installed (the toughest part), you can run “chance/chance.rb ace.light” to generate the theme.
But, there is a slight complication. Some controls’ current DOM is, shall we say, not appropriate for the new theme. Why? Well, let’s take ButtonView as an example: old Ace’s ButtonView was structured like this: <a><span><label>(Text)</label</span></a>. This means that the different slices overlapped each other. Okay, well, that’s fine in some circumstances.
It is not fine for Ace, which uses images with semitransparent parts, such as borders. When the slices overlap, they’d look awful. Unfortunately, we can’t easily change the DOM in the view itself, as that would risk breaking other themes (including the original Ace).
The solution is Renderers. Renderers are objects that handle rendering for views, but which are not defined in the views themselves; instead, they are defined in the themes. Using this method, current themes could use the default renderer, but Ace 2.0 could override with a different renderer. What’s even better is that further themes could override with their own renderers for spectacular results. In short, DOM can now be custom.
But there is a catch here as well: the controls have to be converted to use renderers. So far, there are only a few: button, control, panel, and title. All controls should eventually be converted to use renderers. For some, it is not very urgent: CheckboxView, for instance, works fine with the new theme and the current DOM. It should still be converted, but it is not necessary for the completion of Ace 2.0.
Others are a bit more immediately required: SegmentedView, for example, needs conversion (I am working on this, but if someone wants to beat me to it, they should feel free).
Any assistance you can provide with Ace 2.0 or converting controls to renderers (even only the default empty_theme renderers) would be greatly appreciated.
For more information:
