Skip to content

Commit

Permalink
Fix language issues
Browse files Browse the repository at this point in the history
  • Loading branch information
mitchcurtis committed Sep 15, 2021
1 parent 418be2e commit f81c63e
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions docs/ch05-fluid/states-transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

Often parts of a user interface can be described in states. A state defines a set of property changes and can be triggered by a certain condition.

Additional these state switches can have a transition attached which defines how these changes should be animated or any additional actions shall be applied. Actions can also be applied when a state is entered.
Additionally, these state switches can have a transition attached which defines how these changes should be animated or any additional actions that shall be applied. Actions can also be applied when a state is entered.

## States

You define states in QML with the `State` element, which needs to be bound to the `states` array of any item element.

A state is identified through a state name and consist, in its simplest form, of a series of property changes on elements. The default state is defined by the initial properties of the element and is named `""` (the empty string).
A state is identified through a state name, and in its simplest form, consists of a series of property changes on elements. The default state is defined by the initial properties of the element and is named `""` (an empty string).

```qml
Item {
Expand All @@ -26,7 +26,7 @@ Item {
}
```

A state is changed by assigning a new state name to the `state` property of the element with the states defined.
A state is changed by assigning a new state name to the `state` property of the element in which the states are defined.

::: tip Control states using when
Another way to control states is using the `when` property of the `State` element. The `when` property can be set to an expression that evaluates to true when the state should be applied.
Expand All @@ -53,9 +53,9 @@ For example, a traffic light might have two signaling lights. The upper one sign

![](./assets/trafficlight_states.png)

When the system is switched on it goes automatically into the stop mode as the default state. The stop state changes the `light1` to red and `light2` to black (off).
When the system is switched on, it automatically goes into the stop mode as the default state. The stop state changes `light1` to red and `light2` to black (off).

An external event can now trigger a state switch to the `"go"` state. In the go state, we change the color properties from `light1` to black (off) and `light2` to green to indicate the passers may walk now.
An external event can now trigger a state switch to the `"go"` state. In the go state, we change the color properties from `light1` to black (off) and `light2` to green to indicate the pedestrians may now cross.

To realize this scenario we start sketching our user interface for the 2 lights. For simplicity, we use 2 rectangles with the radius set to the half of the width (and the width is the same as the height, which means it’s a square).

Expand All @@ -79,7 +79,7 @@ Rectangle {
}
```

As defined in the state chart we want to have two states one the `"go"` state and the other the `"stop"` state, where each of them changes the traffic lights respective to red or green. We set the `state` property to `stop` to ensure the initial state of our traffic light is the `stop` state.
As defined in the state chart we want to have two states: one being the `"go"` state and the other the `"stop"` state, where each of them changes the traffic light's respective color to red or green. We set the `state` property to `stop` to ensure the initial state of our traffic light is the `stop` state.

::: tip Initial state
We could have achieved the same effect with only a `"go"` state and no explicit `"stop"` state by setting the color of `light1` to red and the color of `light2` to black. The initial state `""` defined by the initial property values would then act as the `"stop"` state.
Expand Down Expand Up @@ -116,20 +116,20 @@ MouseArea {
![](./assets/trafficlight_ui.png)


We are now able to successfully change the state of the traffic lamp. To make the UI more appealing and look natural we should add some transitions with animation effects. A transition can be triggered by a state change.
We are now able to successfully change the state of the traffic lamp. To make the UI more appealing and natural, we should add some transitions with animation effects. A transition can be triggered by a state change.

::: tip Using scripting
It’s possible to create a similar logic using scripting instead of QML states. Developers can easily fall into the trap of writing more a JavaScript program than a QML program.
It’s possible to create similar logic using scripting instead of QML states. However, QML is a better language than JavaScript for describing user interfaces. Where possible, aim to write declarative code instead of imperative code.
:::


## Transitions

A series of transitions can be added to every item. A transition is executed by a state change.

You can define on which state change a particular transition can be applied using the `from:` and `to:` properties. These two properties act like a filter when the filter is true the transition will be applied. You can also use the wild-cast\*” which means “any state”.
You can define on which state change a particular transition can be applied using the `from:` and `to:` properties. These two properties act like a filter: when the filter is true the transition will be applied. You can also use the wildcard\*, which means “any state”.

For example `from:"\*"; to:"\*"` means from any state to any other state and is the default value for `from` and `to`, which means the transition is applied to every state switch.
For example, `from: "*"; to: "*"` means "from any state to any other state", and is the default value for `from` and `to`. This means the transition will be applied to every state switch.

For this example, we would like to animate the color changes when switching state from “go” to “stop”. For the other reversed state change (“stop” to “go”) we want to keep an immediate color change and don’t apply a transition.

Expand All @@ -146,7 +146,7 @@ transitions: [
]
```

You can change the state though clicking the UI. The state is applied immediately and will also change the state while a transition is running. So try to click the UI while the state is in the transition from “stop” to “go”. You will see the change will happen immediately.
You can change the state though clicking the UI. The state is applied immediately and will also change the state while a transition is running. So, try to click the UI while the state is in the transition from “stop” to “go”. You will see the change will happen immediately.


![](./assets/trafficlight_transition.png)
Expand All @@ -155,7 +155,7 @@ You could play around with this UI by, for example, scaling the inactive light d

For this, you would need to add another property change for scaling to the states and also handle the animation for the scaling property in the transition.

Another option would be to add an “attention” state where the lights are blinking yellow. For this, you would need to add a sequential animation to the transition for one second going to yellow (“to” property of the animation and one sec going to “black”).
Another option would be to add an “attention” state where the lights are blinking yellow. For this, you would need to add a sequential animation to the transition for one second going to yellow (“to” property of the animation and one second going to “black”).

Maybe you would also want to change the easing curve to make it more visually appealing.

0 comments on commit f81c63e

Please sign in to comment.