Dynamics constraints depending on differents views

[Erol]

Hi,
I want to make dynamics constraints depending on differents views and texts attributes.
I made the program bellow.

<canvas debug="true">

<script>
var mv = new Array();
var mt = new Array();
var count = 0;
</script>

<class name="myview" extends="view">
<button text="${this.id}" onclick="count=1; idv1.setAttribute('y', 30)"/>
</class>

<class name="mytext" extends="text">
<method event="oninit">

var prop = "y";
var cfunc = function() {
this.setAttribute( "y", idv0.height+idv1.y + 22 );
}
var dep = [idv0, "height", idv1, "y"];
this.applyConstraint(prop, cfunc, dep);

</method>
</class>

<class name="mytext2" extends="text">
<method event="oninit">

var prop = "x";
var cfunc = function() {
this.setAttribute( "x", idt1.y + 22 );
}
var dep = [idt1, "y"];
this.applyConstraint(prop, cfunc, dep);

</method>
</class>

<view id="bouton" bgcolor="#666699" x="500" y="30"
height="50" width="125">
<text fgcolor="#FFFFFF"
x="5" y="5" >Wish List</text>
<button text="My button"
onclick="count=1; idv0.setAttribute('height', 100)"/>

</view>

<view name="central" x="30" y="60" oninit="proceed()">
<method name="proceed">
Debug.write("on est dans procedd");
mv[count] = new myview(central, {id: 'idv' + count});
count++;
Debug.write("count " + count);

mv[count] = new myview(central, {y: 100, id: 'idv' + count});
mt[count] = new mytext(central, {y: 50, text: "firstText", id: 'idt' + count});
count++;
mv[count] = new myview(central, {x:100, id: 'idv' + count});
mt[count] = new mytext2(central, {x:100, y: 50, text: "SecondText", id: 'idt' + count});

</method>
</view>

</canvas>

It works but I want to generalize it like :

<class name="mytext" extends="text">
<attribute name="id1" type=.../>
<attribute name="id2" type=.../>
<method event="oninit">
var prop = "y";
var cfunc = function() {
this.setAttribute( "y", id1.height+id2.y + 22 );
}
var dep = [id1, "height", id2, "y"];
this.applyConstraint(prop, cfunc, dep);
</method>
</class>

<class name="mytext2" extends="text">
<attribute name="id1" type=.../>
<method event="oninit">
var prop = "x";
var cfunc = function() {
this.setAttribute( "x", id1.y + 22 );
}
var dep = [id1, "y"];
this.applyConstraint(prop, cfunc, dep);
</method>
</class>

with a call using the Arrays like :
mt[count] = new mytext(central, {x:100, y: 50, text: "SecondText", id: 'idt' + count, id1: mt[x].id, id2: mt[x2].id});
mt[count] = new mytext2(central, {x:100, y: 50, text: "SecondText", id: 'idt' + count, id1: mt[x].id});

Or somethings like this...

Can any one help me to overcome this?

Thanks,
Erol

[senshi]

You don't need to use "applyConstraint" in this case, what about a solution like this one:


<canvas debug="true" >

<class name="toptext" extends="text" >
<attribute name="refview" value="null" type="expression" />
<attribute name="spacing" value="5" type="number" />

<attribute name="x" value="${this.refview ? this.refview.x + (this.refview.width / 2) - (this.width / 2) : 0}" />
<attribute name="y" value="${this.refview ? this.refview.y - this.spacing - this.height : 0}" />
</class>

<class name="bottomtext" extends="text" >
<attribute name="refview" value="null" type="expression" />
<attribute name="spacing" value="5" type="number" />

<attribute name="x" value="${this.refview ? this.refview.x + (this.refview.width / 2) - (this.width / 2) : 0}" />
<attribute name="y" value="${this.refview ? this.refview.y + this.refview.height + this.spacing : 0}" />
</class>


<class name="testview" extends="view" width="150" height="150" bgcolor="0x77ffff">
<dragstate name="dragger" />

<view name="main" x="${this.parent.height*.2}" y="${this.parent.height*.2}" width="60%" height="60%" bgcolor="red"
onmousedown="this.classroot.dragger.apply()" onmouseup="this.classroot.dragger.remove()" />

<toptext refview="$once{this.classroot.main}" text="I'm on top" />
<bottomtext refview="$once{this.classroot.main}" text="I'm below" />
</class>


<testview />

</canvas>

[Erol]

many thanks to Senshi, his code help a lot as usual.

I just modifie to have something dynamic like this :

<canvas debug="true">

<script>
var mv = new Array();
var mt = new Array();
var count = 0;
</script>

<class name="myview" extends="view">
<button text="${this.id}" onclick="count=1; idv1.setAttribute('y', 30)"/>
</class>

<class name="mytext" extends="text">
<attribute name="refview1" value="null" type="expression" />
<attribute name="refview2" value="null" type="expression" />
<method event="oninit">

var prop = "y";
var cfunc = function() {
this.setAttribute( "y", refview1.height+refview2.y + 22 );
}
var dep = [refview1, "height", refview2, "y"];
this.applyConstraint(prop, cfunc, dep);

</method>
</class>

<class name="mytext2" extends="text">
<attribute name="refview" value="null" type="expression" />
<method event="oninit">

var prop = "x";
var cfunc = function() {
this.setAttribute( "x", refview.y + 22 );
}
var dep = [refview, "y"];
this.applyConstraint(prop, cfunc, dep);

</method>
</class>

Thanks a lot,

Erol