Don't use two "<control>" nodes but two "<property>" nodes in the same "<control>" node.

 

So instead of : 

 

<control>

<name>ViewRoot</name>

<property mode="concat">

<name>styleClass</name>

<value>#{javascript:(context.getUserAgent().isIE() ? 'ie' + context.getUserAgent().getBrowserVersionNumber().toString().split('.')[0] + ' ': '')}</value>

</property>

</control>

<name>ViewRoot</name>

<property mode="concat">

<name>styleClass</name>

<value>claro</value>

</property>

 

 

use : 

 

<control>

<name>ViewRoot</name>

<property mode="concat">

<name>styleClass</name>

<value>#{javascript:(context.getUserAgent().isIE() ? 'ie' + context.getUserAgent().getBrowserVersionNumber().toString().split('.')[0] + ' ': '')}</value>

</property>

<property mode="concat">

<name>styleClass</name>

<value>claro</value>

</property>

 

 It's two separate themes where I reference the control, so I can't have one control-node.

 

 

In theme "A" I compute the IE-version and sets a class on the BODY-tagg.

 

Theme "B" inherits theme "A" and sets another class on the BODY-tagg.

 

 

The application uses theme "B". 

 

The class from theme "A" is overwritten with the values from theme "B". 

 

Thanks! 

 

 

/J 

 OK - Solved!

 

 

This is somewhat of a hack, so brace yourself... ;-) 

 

 

Turns out that you can't append values for the same property of a control. This is a bummer and, in my humble opinion, takes a big bite out of the purpose of inheritance with themes.

 

 

So, hack it! 

 

 I discovered that if the extending theme has the same control and setting the same property any SSJS in the original theme for that same property is never executed. Hence the proof that you can't append...

 

But we can use another property to calculate our SSJS and store it in i scopedVariable for later retrieval in our extending theme, but what property?

Every time you use inline styling a kitten dies! So the style-property should always be empty - the perfect candidate!

 

boilerplate.theme: 

</control>

 

For IE9 it would store "ie9" in the requestScope isIE variable. (I'm only interested in major release number of the browser)

 

 

In the extending theme: 

 

</control> 

 

So, again, for IE9 the class of the BODY-tag would read: body class="ie9 claro" 

For Chrome: body class=" claro" 

 

 

Case closed! 

 

 

/J