© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB
18 июня 2018 г. 8:03

Qml and JavaScript

Разбираю пример по поводу разницы между qml и javascript

Text {
id: label
x: 24; y: 24
// custom counter property for space presses
property int spacePresses: 0
text: "Space pressed: " + spacePresses + " times"
// (1) handler for text changes
onTextChanged: console.log("text changed to:", text)
// need focus to receive key events
focus: true
// (2) handler with some JS
Keys.onSpacePressed: {
increment()
}
// clear the text on escape
Keys.onEscapePressed: {
label.text = ''
}
// (3) a JS function
function increment() {
spacePresses = spacePresses + 1
}
}


The difference between the QML : (binding) and the JavaScript = (assignment) is, that the binding is a
contract and keeps true over the lifetime of the binding, whereas the JavaScript assignment (=) is a one time value
assignment. The lifetime of a binding ends, when a new binding is set to the property or even when a JavaScript
value is assigned is to the property. For example a key handler setting the text property to an empty string would
destroy our increment display:

Keys.onEscapePressed: {
label.text = ''
}
В принципе понятно, что командой
label.text = ''
мы уничтожили биндинг для label. Но когда я немного подправил

Keys.onEscapePressed: {
label.text = "Space pressed: " + spacePresses + " times"
}
- то есть по сути по ESC я присваиваю полю label - то же самое что и было в text. Однако я не получил того же самого результата. У меня на экране инкремент отображается только по нажатию ESC. То есть биндинг повесился на метод, а не на объект.  Можете пояснить почему?



и как мне тогда через JS переинициализировать объект в том же виде?

Можно через states сделать.


    Text {
        id: label
        x: 24; y: 24
        // custom counter property for space presses
        property int spacePresses: 0
        text: "Space pressed: " + spacePresses + " times"
        // (1) handler for text changes
        onTextChanged: console.log("text changed to:", text)
        // need focus to receive key events
        focus: true
        // (2) handler with some JS
        Keys.onSpacePressed: {
        increment()
        }

        states: [
            State {
                name: "onEsc"
                PropertyChanges {
                    target: label
                    text: ""
                }
            },
            State {
                name: "onReleased"
                PropertyChanges {
                    target: label
                    text: "Space pressed: " + spacePresses + " times"
                }
            }
        ]

        // clear the text on escape
        Keys.onEscapePressed: {
            state = "onEsc"
        }

        Keys.onReleased: {
            state = "onReleased"
        }

        // (3) a JS function
        function increment() {
        spacePresses = spacePresses + 1
        }
    }

По идее, я так думаю, в раздел State{} можно прописать when, к которому привязать кнопки, но я не нашёл, как это правильно сделать.

Да тут главное принцип понятен. Спасибо. Я теперь понял почему во всех примерах применяют именно state - PropertyChanges .

Опять же, ни кто не мешает всё это проделывать непосредственно в JS в Keys.onReleased и Keys.onEscapePressed, но, на сколько я понимаю, чем меньше JS в QML коде, тем лучше. Меньше проблем при отладке большого кол-ва кода возникает. Да и Qt Creator легче ошибки отлавливает.

В том то и дело что просто в JS так нельзя

Если использовать state -

onReleased - не нужен

вот так все работает


   Text {
                id: label
                x: 24; y: 24
                // custom counter property for space presses
                property int spacePresses: 0
                text: "Space pressed: " + spacePresses + " times"
                // (1) handler for text changes
                onTextChanged: console.log("text changed to:", text)
                // need focus to receive key events
                focus: true
                // (2) handler with some JS
                Keys.onSpacePressed: {
                increment()
                }

                states: [
                    State {
                        name: "onEsc"
                        PropertyChanges {
                            target: label
                            text: "Space pressed: " + spacePresses + " times"
                        }
                    }
                ]

                // clear the text on escape
                Keys.onEscapePressed: {
                    state = "onEsc"
                }

                // (3) a JS function
                function increment() {
                spacePresses = spacePresses + 1
                }
            }
Я так понимаю что в этом случае биндинг не слетает

Ответы

Только авторизованные пользователи могут отвечать на форуме.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
24 сентября 2018 г. 17:42
edorofeeva

C++ - Тест 001. Первая программа и типы данных

  • Результат 100баллов,
  • Очки рейтинга10
24 сентября 2018 г. 17:37
edorofeeva

C++ - Тест 001. Первая программа и типы данных

  • Результат 66баллов,
  • Очки рейтинга-1
23 сентября 2018 г. 14:38
No Names

C++ - Тест 001. Первая программа и типы данных

  • Результат 60баллов,
  • Очки рейтинга-1
Последние комментарии
24 сентября 2018 г. 15:09
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

А вот здесь у меня есть пример использования supervisor. https://evileg.com/ru/post/3/ Вся статья вам там не интересна, интересен только шаг с настройкой supervisor. Он получается ...
24 сентября 2018 г. 15:00
avovana

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Не могли бы дать ссылку на пример? Какое-то рабочее использование. Т.е. у меня есть Qt Gui App, которое я бы хотел запускать при старте системы и в случае, если оно грохнется. Если о чем Вы го...
24 сентября 2018 г. 14:55
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Если честно, то я не уверен, что это вообще можно реализовать через *.desktop файл. Я сделал предположение на основе того, что вы сказали про *.desktop и рестарт. Все варианты, котор...
24 сентября 2018 г. 14:47
avovana

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Просто сейчас правлю сам файл example.desktop. Пытаюсь понять какую пару key=value мне нужно дописать.
24 сентября 2018 г. 14:42
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Ну я имел ввиду, что дописать в коде вот сюда то, о чём вы говорили про рестарт QString autorunContent("[Desktop Entry]\n" "Type=Application\n" ...
Сейчас обсуждают на форуме
24 сентября 2018 г. 16:47
Евгений_Канусовский@1981

Чтение файлов в python

Добрый вечер Евгений и форумчане! Столкнулся с проблемой чтения файлов в python: файлы с обычным текстом в формате las и txt читаются, например: ~Version information VERS.          ...
24 сентября 2018 г. 13:29
Евгений Легоцкой

Трансляция видео с помощью VLC по RTP

Добрый день! Я не сталкивался, но предположу, что нужно настроить Input Codec в VLC. В настройках есть секция Input Codec, возможно, что там установлено низкое разрешение. ...
21 сентября 2018 г. 8:25
Евгений Легоцкой

Прокси-модель, содержащая на 1 столбец больше, чем модель-источник.

Попробуйте ещё PySide 2 - это официально поддерживаемый пакет привязок Python к Qt, возможно, что там не будет таких проблем.
20 сентября 2018 г. 20:06
Евгений Легоцкой

Qt Installer Framework

Добрый день. Зачем собирать Qt Installer Framework-то из исходников? Я ещё понимаю Qt собирают из исходников статически (хотя тоже считаю по большей части бесполезной тратой времени),...
Присоединяйтесь к нам в социальных сетях