alternate color in different rows

[Peter_Chea]

Antun, I am trying to alternate backgroud color in different rows. The example below should produce first row yellow, second row blue and third row yellow. However, the second row is black. Is there something wrong with my syntax.


<simplelayout2 axis="y">
<attribute name="bgcolor" value="yellow"/>
<attribute name="altbgcolor" value="blue"/>
</simplelayout2>


<canvas debug="true" width="750">

<dataset name="test">
<flight>
<departure> 6:20 San Francisco</departure>
<arrival>7:37am Los angels</arrival>
<airline>American Airlines Flight 1905</airline>
<travelTime>1hr 25min</travelTime>
<price>141</price>
</flight>
<flight>
<departure> 7:20 San Francisco</departure>
<arrival>8:37am Los angels</arrival>
<airline>American Airlines Flight 1905</airline>
<travelTime>1hr 25min</travelTime>
<price>180</price>
</flight>
<flight>
<departure> 7:20 San Francisco</departure>
<arrival>8:37am Los angels</arrival>
<airline>American Airlines Flight 1905</airline>
<travelTime>1hr 25min</travelTime>
<price>180</price>
</flight>
</dataset>

<class name="copyLayout" extends="layout" >
<attribute name="axis" value="y" onset="this.setAxis( axis )"
type="string" />
<attribute name="spacing" value="0"
onset="this.spacing = spacing;
if( this.subviews.length ) this.update()"/>
<attribute name="copyFrom" type="expression"/>

<method name="setAxis" args="a" >
this.axis = a;
this.sizeAxis = a == "x" ? "width" : "height"
</method>

<method name="addSubview" args="newsub">
this.updateDelegate.register( newsub, "on" + this.sizeAxis);
super.addSubview( newsub );
</method>
<method name="update">
<![CDATA[
if ( this.locked ) return;
var l = this.subviews.length;
if(copyFrom.subviews.length < l)
{
l = copyFrom.subviews.length;
}
var c = 0;

for(var i=0; i < l; i++) {
var src = copyFrom.subviews[ i ];
var dst = this.subviews[ i ];
dst.setAttribute(this.axis, src.getAttribute(this.axis));
dst.setAttribute(this.sizeAxis, src.getAttribute(this.sizeAxis));
}

]]>
</method>
</class>

<class name="simplelayout2" extends="layout" >
<attribute name="axis" value="y" onset="this.setAxis( axis ); debug.write('axis' + axis);"
type="string" />
<attribute name="spacing" value="0"
onset="this.spacing = spacing;
if( this.subviews.length ) this.update()"/>
<attribute name="altbgcolor" type="string"
onset="this.altbgcolor = altbgcolor; debug.write('set altbgcolor:' + altbgcolor);"/>
<method name="setAxis" args="a" >
this.axis = a;
this.sizeAxis = a == "x" ? "width" : "height"
</method>

<method name="addSubview" args="newsub">
this.updateDelegate.register( newsub, "on" + this.sizeAxis);
if ( ! this.locked &amp;&amp; this.subviews.length ){
var s= this.subviews[ this.subviews.length-1 ];
var p = s.getAttribute( this.axis ) +
s.getAttribute( this.sizeAxis );
if ( this.subviews.length ){
p += this.spacing;
}
newsub.setAttribute( this.axis , p ) ;

}
super.addSubview( newsub );
</method>
<method name="update">
<![CDATA[
if ( this.locked ) return;
var l = this.subviews.length;
var c = 0;

for(var i=0; i < l; i++) {
var s = this.subviews[i];
if(i % 2)
{
debug.write("altcolor:" + this.altbgcolor);
s.setAttribute("bgcolor", this.altbgcolor);
}
else
{
debug.write("normalcolor:" +this.bgcolor);
s.setAttribute("bgcolor", this.bgcolor);
}
s.setAttribute( this.axis , c );
//trace("setAttribute after= " + this.axis);
c += this.spacing + s.getAttribute( this.sizeAxis ) ;
}

]]>
</method>
</class>

<view name="header" initstage="early" bgcolor="#aaaaaa">
<text width="120" name="departureBtn">Depature</text>
<text width="120" name="arrivalBtn">Arrival</text>
<text width="120" name="airlineBtn"> Airline</text>
<text width="120" name="trvaleTimeBtn">Travel Time/# Stop</text>
<text width="120" name="priceBtn">Price</text>
<simplelayout axis="x" spacing="10"/>
</view>

<view name="view1" datapath="test:/flight" initstage="early">
<text datapath="departure/text()"/>
<text datapath="arrival/text()"/>
<text datapath="airline/text()"/>
<text datapath="travelTime/text()"/>
<text datapath="price/text()"/>

<copyLayout axis="x">
<attribute name="copyFrom" init="canvas.header" />
</copyLayout>
</view>

<simplelayout2 axis="y">
<attribute name="bgcolor" value="yellow"/>
<attribute name="altbgcolor" value="blue"/>

</simplelayout2>
</canvas>

[antun]

While you can write:


<view bgcolor="red" />


... you can't set the color to the string 'red' at runtime (i.e. in script). You have to use hex notation:


setAttribute( 'color', 0xff0000 );


Take care,

Antun