Zulu
Zulu
Documentation
Tutorials.Declarative Behavior

Declarative behavior is a powerful feature of Zulu yet very easy to use. Essentially it can be defined as the ability to associate UI elements with predefined functions from external libraries. Let's start with a simple example: 


<?xml version="1.0"?>
<window>
    <box x="10" y="10" width="300" height="180" border="0x000000">
        <button id="b1" label="Button"/>
    </box>
</window>

Now, let's add behavior definitions: 


<?xml version="1.0"?>
<window>
    <module type="behavior" src="bhv.swf">
    </module>
    <box x="10" y="10" width="300" height="180" border="0x000000">
        <button id="b1" label="Drag Me"/>
    </box>
</window>

The <module> element is a general mechanism for loading external modules in Zulu. In our case we want a behavioral module, so we specify it in the type attribute. The src must point to a valid behavioral module. More about creating external modules in another tutorial.

The current version of Zulu enforces <module> element to be declared before the referenced object. That is the reason why we inserted the <module> block as the first child element of the window tag.

The code we just added informs Zulu engine that the specified module has to be loaded. To actually use a function defined in this module, we have to indicate its name, its target element and the event which triggers it. 


<?xml version="1.0"?>
<window>
    <module type="behavior" src="bhv.swf">
        <target id="b1" event="onmouseover">
             <function name="dragAndDrop"/>
        </target>
    </module>
    <box x="10" y="10" width="300" height="180" border="0x000000">
        <button id="b1" label="Drag Me"/>
    </box>
</window>

First we add an id attribute to our box, so we can reference it. Then we used this id in the <target> element which activates a function from the "bhv" module called dragAndDrop when the mouse is over the box. Try to drag and drop the button:

To make this example a bit more interesting and to illustrate the layered aspect of Zulu's layout, let's slightly modify our source code: 


<?xml version="1.0"?>
<window>
    <module type="behavior" src="bhv.swf">
        <target id="b1" event="onmouseover">
             <function name="dragAndDrop"/>
        </target>
    </module>
    <box x="10" y="10" width="300" height="180" border="0x000000">
        <button id="b1" label="Drag Me"/>
        <box x="50" y="25" width="200" height="150"
            bgcolor="0x000000" alpha="50"/>
    </box>
</window>

Since the grey box is declared after the button, Zulu places it on top. An interesting remark here is that the button can be moved even if it is completely covered by another element.