Implementation of Behavior on

Currently the implementation of Behavior is written as special case in generator code.

Behavior on {
}

However, this make it impossible to implement component like(Binding on x) in qml, instead I should

Binding {
  target: parent;
  property: "x";
  when: btn.pressed;
  value: 100;
}

It would be handy to add syntax sugar. When XX on x {} syntax, it dynamically bind parent to target and x to property and those two cannot be changed.

This is only my opinion, I still has ways to workaround though.

by the way, what do you think "supporting multiple properties at once"

Behavior on x,y,z {
  Animation { duration: 1000; }
}

this is really good suggestions, thank you!
I'll update you after I add them

my pleasure, actually I am pretty glad when I found this project is very active.

I found this project is very active.

Many people use it on daily basis, even though there's not much activity here

Behavior on [property list] is perfectly fine now, consider the following example:

Item {
	anchors.fill: context;

	Rectangle {
		id: r1;
		border.width: 1;
		border.color: "black";
		color: "#0000";
		width: 10;
		height: 10;
	}

	Rectangle {
		id: r2;
		border.width: 1;
		border.color: "black";
		color: "#0000";
		width: 10;
		height: 10;
	}
	Timer {
		running: true;
		repeat: true;
		interval: 1000;
		onTriggered: {
			r1.x = r1.x !== 100? 100: 0;
			r2.y = r2.y !== 100? 100: 0;
		}
	}

	Behavior on r1.x, r2.y {
		Animation { duration: 200; }
	}
}

context.onWidthChanged fixed in cca410b

@whoozle

Thanks! What about conditional binding? What is the preferred way to achieve this in pureqml?

@whoozle
This is related to another issue
#164

accidentally closed wrong one, sorry :)

I think that generalising on statement is the best way of doing this, but I'm not sure if it could be done soon. After initial generic on support I have to implement Binding itself

Binding has been implemented in e946e99

consider the following example:

Item {
	anchors.fill: parent;
	Rectangle {
		id: rect;
		width: 100;
		height: 100;
		color: 'red';
		HoverMixin {
			id: hover;
			cursor: 'pointer';
			onValueChanged: { log("hover", value); }
		}
		Binding
		{
			target: rect;
			property: 'effects.invert';
			value: true;
			when: hover.value;
			delayed: true;
		}
	}
}

All original properties are supported, including path in property, e.g. 'effects.invert'

BIG thanks for officially implementing this.

@tim37021

@tim37021 np, it was not hard at all :)

Navigation Menu

Repository navigation

Implementation of Behavior on #166

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Implementation of Behavior on #166

Description

Activity

whoozle commented on Dec 2, 2019

tim37021 commented on Dec 2, 2019

whoozle commented on Dec 2, 2019

whoozle commented on Dec 2, 2019

whoozle commented on Dec 2, 2019

tim37021 commented on Dec 2, 2019

whoozle commented on Dec 2, 2019

whoozle commented on Dec 2, 2019

whoozle commented on Dec 6, 2019

tim37021 commented on Dec 8, 2019

whoozle commented on Dec 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions