What I'm seeing here is that this approach appears to support styling
specified through element attributes only, i.e. styling of the form
<Duh styles="dsfsdf"/>
One of the nice things about CSS is its support for other kinds of
selectors like type selectors, class selectors, id selectors, descendant
selectors, etc. Then there's inheritence and cascading, which I haven't
touched yet. It seems like defining the syntax and behavior for these
kinds of features within the current or proposed JSON-oriented syntax
would simultaneously stray from the simplicity of JSON while creating more
proprietary syntax.
I don't see an impedance mismatch between CSS and WTKX (or BXML as it is
in pivot 2). There are some bridges to build because each has defined
some similar concepts in sightly different ways. I wrote code to support
CSS's approach to font and padding specifications, but that's just a
matter of syntax---the underlying models are the same. My experience from
using what I've built thus far is that a CSS syntax works quite well. I
will continue to update the list as my experience grows and as I implement
new features.
Cheers,
Michael
On Sat, 10 Jul 2010, Greg Brown wrote:
With all the thoughts going on around styling (people have implemented CSS-like
styling and WPF-like styling/triggers), what is the pivot core team's thoughts
on 2.0 and what the objectives are?
My primary objectives for improving styling support in Pivot 2.0 included
making it easier to apply externally defined styles and possibly supporting
dynamic, automatic updates to those styles. Both of these objectives have now
been met. In addition to the previous means for applying styles:
Programmatically:
myComponent.getStyles().put("color", "#ffffff");
Declaratively via attribute value:
<Label styles="{color:'#ffffff'}"/>
Declaratively via external file:
<Label styles="@label_styles.json"/>
Declaratively via XML element:
<Label>
<styles color="#ffffff"/>
</Label>
Pivot 2.0 now includes support for defining styles using an external JSON-based
stylesheet:
<bxml:include bxml:id="myStyles" src="my_styles.json"/>
<Label styles="$myStyles.labelStyles"/>
It would also be possible define external styles using CSS syntax, if someone
is interested in writing a parser for it:
<bxml:include bxml:id="myStyles" src="my_styles.css"/>
As I mentioned earlier, this would basically amount to reading the CSS data
into the same data structure that is output by the JSON serializer.
Additionally, using namespace binding, dynamic style changes can now be
automatically applied:
<Label>
<styles color="${myStyles.labelStyles.color}"/>
</Label>
Whenever the "myStyles.labelStyles.color" value changes, the label's color will
automatically change to reflect the new value (as will any other styles or properties bound to that
value). This is demonstrated by the following example (selecting a value from the color picker
automatically updates the associated label's text as well as its "color" style):
http://ixnay.biz/pivot-demos/namespace-binding.html
The work Michael has been doing is interesting, though I still think there is an
"impedance mismatch" between the actual CSS specification and how styles work
in Pivot. I would personally rather see some effort focused on writing a CSS serializer
that works within the existing styling framework, as described above.
We've seen that we can implement advanced styling approaches (and more) without
changing core pivot at all, but what does this add up to? It seems that alot of
this work is really about easier theming and L&F customization.
Yup, that is exactly what it is about. It simply aims to make it a bit easier for
designers to apply their own L&F customizations to a Pivot app.
