[solved] Reacting on property changes

lycis

Hi all,

I am currently implementing a UI prototype with QML and I want to implement some kind of menu bar in pure QML/Javascript. The MenuBar component should be designed to provide an easy interface to use, so we figured out that it would be nice to implement a property that defines the orientation (top, left, right, bottom) of the menu.

What I want to do is this: The user of the MenuBar sets a property like orientation to 'top' and the MenuBar component automatically positions it self on the top border of the parent component. I know how to do the positioning, but is there any way to react on the change of property in either pure QML or JavaScript?

For a better understanding a short pseudo-code sample with the designated use of MenuBar:

@
import QtQuick 1.1
import "BasicComponents"

Rectangle {
width: 800
height: 800

MenuBar{
    orientation: top // component will automatically align it self
    
    MenuItem{
        ...
    }
}

}
@

sierdzio

All properties automatically define onPropertyNameChanged slots, that can be used to react to value changes. Corresponding signal is propertyNameChanged. Of course, you have to substitute "PropertyName" with the property that you wish to handle.

So, in your example, you can add:
@
import QtQuick 1.1
import "BasicComponents"

Rectangle {
width: 800
height: 800

MenuBar{
    orientation: top // component will automatically align it self

    onOrientationChanged: {
            // JS code
    }
   
    MenuItem{
        ...
    }
}

}
@

Is that more or less what you meant, or did I misunderstand?

andre

One way would be to use conditionals in your property bindings, another would be to let the property change drive a state that you can use to modify other properties.

lycis

Thanks sierdzio! Exactly what I was looking for. I never thought that the answer would be that easy :)

sierdzio

Always a pleasure. Happy coding! :D