passing an object through tag attribute

[Peter_Chea]

I am trying to create a layout that copy from another layout. However, I am unsure of how to pass an object through tag attribute.
<copyLayout axis="x" copyFrom="canvas.header"/>



<canvas debug="true">

<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>
</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>

<view name="header">
<button width="90" name="departureBtn">Depature</button>
<button width="90" name="arrivalBtn">Arrival</button>
<button width="90" name="airlineBtn"> Airline</button>
<button width="120" name="trvaleTimeBtn">Travel Time/# Stop</button>
<button width="90" name="priceBtn">Price</button>
<simplelayout axis="x"/>
</view>

<view name="view1" datapath="test:/flight">
<text datapath="departure/text()"/>
<text datapath="arrival/text()"/>
<text datapath="airline/text()"/>
<text datapath="travelTime/text()"/>
<text datapath="price/text()"/>
<copyLayout axis="x" copyFrom="canvas.header"/>

</view>
<simplelayout axis="y"/>
</canvas>

[antun]

I'm not sure I understand what effect you're trying to copy here:

Are you trying to copy the effect of the layout, or duplicate the views from the original layout?

-Antun

[Peter_Chea]

I am try to find a generic way of aligning the value columns to the header columns similar to that of the table tag.

<table>
<tr>
<td>header1</td>
<td>header2</td>
<td>header3</td>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
</tr>
</table>

[antun]

I see what you mean. We had that issue with contacts. What we did there was to have the width of the replicated views constrained to the column headings. Something like:


<view name="headings">
<simplelayout axis="x" />
<columnHeading id="head1" width="30" />
<columnHeading id="head2" width="100" />
<columnHeading id="head3" width="175" />
</view>
<view name="rows" datapath="...">
<cell width="head1.width" />
<cell width="head2.width" />
<cell width="head3.width" />
</view>


But I do understand your point. It would be useful for headings to be able to copy from one layout to another. I'll look into it.

-Antun

[antun]

Actually, I sussed it:


<canvas debug="true">

<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>
</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>

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

<view name="view1" datapath="test:/flight">
<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>

<simplelayout axis="y"/>
</canvas>


1) To pass a reference to the the header view to the instance of the layout, you have to use the more verbose way of declaring an attribute using the <attribute> tag, with the init attribute. The init attribute means it will get set at init time (in red above).

2) Once I did that there was a problem with the instantiation order. The header view was getting created after the replicated rows were positioned. To fix this problem I added an initstage="early" attribute to the headers view (green).

Great idea by the way!!!!

-Antun

[Peter_Chea]

Thanks antun, that is exactly what I needed.