Esoteric Framework

Introducing expressions and bindings

Abstract

In this tutorial you'll learn how to use expressions and how to bind data.

Introduction

Sometimes it is useful to have attributes which depend on the value of other attributes. That's precisely what bindings and expressions are for. They allow you to define attributes such that their values are a function of other attributes. And best of all, they automatically get updated if the values they refer to are changed. To declare an expression, the attribute must start with { and end with }.

Accessing properties of the same element

You can refer to properties of the same element using the this keyword. The following example ensures that the height of the rectangle is the same as its width.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x333333">
			<Rectangle width="100" height="{this.width}" />
		</SolidFill>
	</Shape>
</Application>

Result

Accessing properties of the root element

You can refer to properties of the root element using the root keyword. The root element of an application is its Application element. It has two useful properties, applicationHeight and applicationWidth, which respectively contain the width and the height of the application. The following example uses those properties to draw a rectangle that covers the entire area of the application.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x333333">
			<Rectangle width="{root.applicationWidth}" height="{root.applicationHeight}" />
		</SolidFill>
	</Shape>
</Application>

Result

Accessing properties of the parent element

Similarly, you can access properties of the parent element using the parent keyword. The following example produces the same results as the previous one.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x333333">
			<Rectangle width="{parent.parent.parent.applicationWidth}" height="{parent.parent.parent.applicationHeight}" />
		</SolidFill>
	</Shape>
</Application>

Result

Accessing properties of any element

You can access the properties of any element by using the getElementById() function of the root element. It requires one parameter, which is the ID of the element. You must first specify the id attribute of the element. The following example creates two rectangles, the second having the same dimensions as the first one.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x333333">
			<Rectangle id="firstRectangle" width="100" height="100" />
			<Rectangle x="150" width="{root.getElementById('firstRectangle').width}" height="{root.getElementById('firstRectangle').height}" />
		</SolidFill>
	</Shape>
</Application>

Result

Using operators

By using operators, you can create more complex bindings. The following example creates two rectangles, but the second is twice as big as the first one.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x333333">
			<Rectangle id="firstRectangle" width="100" height="100" />
			<Rectangle x="150" width="{root.getElementById('firstRectangle').width * 2}" height="{root.getElementById('firstRectangle').height * 2}" />
		</SolidFill>
	</Shape>
</Application>

Result

Using mathematical functions

You can use the Math object to use mathematical functions. The following example creates two rectangles with dimensions chosen randomly between 0.0 and 100.0.

Source Code

<Application>
	<Shape>
		<SolidFill color="0x333333">
			<Rectangle id="firstRectangle" width="{Math.random() * 100}" height="{Math.random() * 100}" />
			<Rectangle x="150" width="{Math.random() * 100}" height="{Math.random() * 100}" />
		</SolidFill>
	</Shape>
</Application>

Result

Conclusion

In this tutorial you've learned how to bind data using complex expressions. The benefits will become more apparent in later tutorials.