Notes on Attributes

[antun]

If you've only ever used attributes in a tag (e.g. width="50" below), you will be interested to hear that there are other ways of declaring them.


<canvas>
<view name="myRedView" bgcolor="red" width="50" height="50" />
</canvas>


Another, more verbose way is to use the <attribute> tag, as a sibling of the view we are affecting. The example below does exactly the same thing as the example above:


<canvas>
<view name="myRedView" bgcolor="red" height="50">
<attribute name="width" value="50" type="number" />
</view>
</canvas>


Now if you're familiar with classes in LZX this should be familiar - in fact the above code is similar to the syntax for creating custom attributes. The <attribute> tag is also used for more specific control over attributes. The value attribute sets the value of that attribute once (to a fixed value) and does not update it. If you needed to set a value of an attribute to a relative value once, and leave it so, you could use the init attribute:


<canvas>
<simplelayout axis="y" spacing="10" />
<view name="myBlueView" bgcolor="blue" width="200">
<view name="myRedView" bgcolor="red" height="50">
<attribute name="width" init="parent.width / 2" type="number" />
</view>
</view>

<button onclick="canvas.myBlueView.setWidth( 400 )">
Make blue button bigger
</button>
</canvas>


Alternatively you could use the constraint attribute to constrain it to it's parent:


<canvas>
<simplelayout axis="y" spacing="10" />
<view name="myBlueView" bgcolor="blue" width="200">
<view name="myRedView" bgcolor="red" height="50">
<attribute name="width" constraint="parent.width / 2"
type="number" />
</view>
</view>

<button onclick="canvas.myBlueView.setWidth( 400 )">
Make blue button bigger
</button>
</canvas>


Of course in this case, this is just like saying:


width="parent.width / 2"


... but it allows for more complicated constraints, and allows you to constrain attributes where otherwise it wouldn't be possible.

There is also the onset attribute of the <attribute> tag. This only works in classes. Instead of actually setting the value, it behaves like a function, with a variable the name of the attribute:


<canvas debug="true">
<simplelayout axis="y" spacing="10" />
<class name="myClass" bgcolor="red" width="25" height="25">
<attribute name="myColor" type="string"
onset="this.setMyColor( myColor )" />
<method name="setMyColor" args="colorString">
if ( colorString == 'blue' ) {
this.setBGColor( 0x0000ff );
} else if ( colorString == 'green' ) {
this.setBGColor( 0x00ff00 );
}
</method>
</class>

<myClass name="myView" />

<button onclick="canvas.myView.setAttribute( 'myColor', 'blue' )">
Set color to blue
</button>
<button onclick="canvas.myView.setAttribute( 'myColor', 'green' )">
Set color to green
</button>
</canvas>


If you've tried to set the bgcolor attribute of a view, you'll know that you have to use the hex (0xff0000) notation, as opposed to the convenient string ('blue') syntax that's permissable in tags. In the above case, the class we've defined has a myColor attribute with an onset event handler. What that event handler does is call a method, passing it the argument it was set to. The myColor attribute never actually gets set.

Enjoy!