El lenguaje QML usa una sintaxis similar a JSON y permite que varias expresiones y métodos se definan como funciones de JavaScript. También permite a los usuarios importar archivos JavaScript y usar las funciones proporcionadas por estas importaciones.
Esto permite a los desarrolladores y diseñadores usar su conocimiento de JavaScript para desarrollar rápidamente interfaces de usuario y lógica de aplicación.
Expresión de JavaScript
QML tiene una integración profunda de JavaScript y permite que los manejadores de señal y los métodos se definan en JavaScript. Otra función central de QML es la capacidad de utilizar el enlace de propiedades para especificar y fortalecer la relación entre las propiedades del objeto, que también se define mediante JavaScript.
Para obtener más información sobre el uso de expresiones de JavaScript en QML, consulte la página de documentación titulada Expresiones de JavaScript en la documentación de QML.
JavaScript en enlace de propiedad
En el siguiente ejemplo, el rectángulo de atributo de color depende de la propiedad presionada TapHandler. Use expresiones condicionales para describir esta relación:
import QtQuick 2.12
Rectangle {
id: colorbutton
width: 200; altura: 80;
color: inputHandler.pressed? "steelblue": "lightsteelblue"
TapHandler {
id: inputHandler
}
}
De hecho, puede usar cualquier expresión de JavaScript en una definición de enlace de propiedad (no importa cuán compleja sea), siempre que el resultado de la expresión sea un valor que pueda asignar su tipo a la propiedad. Esto incluye efectos secundarios. Sin embargo, no se recomienda utilizar enlaces complejos y efectos secundarios, ya que reducirán el rendimiento, la legibilidad y la facilidad de mantenimiento del código.
Hay dos formas de definir enlaces de propiedades: la más común es la inicialización de propiedades en el ejemplo anterior. El segundo método (también un método raro) es asignar la función devuelta desde la función Qt.binding () al atributo del código JavaScript imperativo, como se muestra a continuación:
import QtQuick 2.12
Rectangle {
id: colorbutton
width: 200; altura: 80;
color: "rojo"
TapHandler {
id: inputHandler
}
Component.onCompleted: {
color = Qt.binding (function () {return inputHandler.pressed? "steelblue": "lightsteelblue"});
}
}
Para obtener más información sobre cómo definir enlaces de atributos, consulte la documentación de enlace de atributos; para conocer las diferencias entre el enlace y la asignación de valores, consulte la documentación sobre asignación de atributos y enlace de atributos.
JavaScript en el controlador de señal
Los tipos de objetos QML pueden emitir señales en respuesta a la ocurrencia de ciertos eventos. Estas señales pueden procesarse mediante funciones del programa de procesamiento de señales, que el cliente puede definir para implementar una lógica de programa personalizada.
Suponga que el botón representado por el tipo Rectángulo tiene TapHandler y etiquetas de texto. TapHandler transmite su señal de tap cuando el usuario presiona el botón. El cliente puede usar expresiones de JavaScript onTapped para reaccionar a las señales en el controlador. El motor QML ejecuta estas expresiones JavaScript definidas en el controlador según sea necesario. Por lo general, los manejadores de señales están vinculados a expresiones de JavaScript para iniciar otros eventos o asignar valores de propiedad.
import
Rectángulo QtQuick 2.12 {
id:
ancho del botón : 200; altura: 80; color: "lightsteelblue"
TapHandler {
id: inputHandler
onTapped: {
// expresión arbitraria de JavaScript
console.log ("Tapped!")
}
}
Text {
id: label
anchors.centerIn: parent
text: inputHandler.pressed? "¡Presionado!" : "¡Presione aquí!"
}
}
Para obtener información más detallada sobre señales y manejadores de señales, consulte los siguientes temas:
Sistema de eventos de señal y manejador
Propiedades del objeto QML
JavaScript en función independiente
La lógica del programa también se puede definir en las funciones de JavaScript. Estas funciones se pueden definir en línea en el documento QML (como método personalizado) o externamente en el archivo JavaScript importado.
JavaScript en métodos personalizados
Los métodos personalizados se pueden definir en documentos QML y se pueden llamar desde manejadores de señales, enlaces de atributos o funciones en otros objetos QML. Estos métodos a menudo se denominan funciones JavaScript en línea porque su implementación se incluye en la definición de tipo de objeto QML (documento QML), no en un archivo JavaScript externo.
Ejemplos de métodos personalizados en línea son los siguientes:
import QtQuick 2.12
Item {
function fibonacci (n) {
var arr = [0, 1];
for (var i = 2; i <n + 1; i ++)
arr.push (arr [i-2] + arr [i- 1]);
return arr;
}
TapHandler {
onTapped: console.log (fibonacci (10))
}
}
Siempre que TapHandler envíe una señal girada, ejecutará la función fibonacci.
Nota: El método personalizado definido en línea en el documento QML está expuesto a otros objetos, por lo que la función en línea en el objeto raíz en el componente QML puede ser llamada por el programa de llamada fuera del componente. Si no desea hacer esto, puede agregar el método a un objeto no root, o es mejor escribirlo en un archivo JavaScript externo.
Para obtener más información sobre el uso de JavaScript para definir métodos personalizados en QML, consulte la documentación de propiedades de objetos QML.
Funciones definidas en archivos JavaScript
Es mejor separar la lógica trivial del programa en un archivo JavaScript separado. Puede importar el archivo a QML utilizando sentencias de importación como los módulos QML.
Por ejemplo, fibonacci () puede mover el método en el ejemplo anterior a un archivo externo llamado fib.js y acceder a él de la siguiente manera:
import QtQuick 2.12
import "fib.js" como
elemento de MathFunctions {
TapHandler {
onTapped: console.log (MathFunctions.fibonacci (10))
}
}
Para obtener más información sobre cómo cargar archivos JavaScript externos en QML, lea acerca de QML Importar recursos de JavaScript.
Conecte señales a funciones de JavaScript
El tipo de objeto QML que emite la señal también proporciona un controlador de señal predeterminado para su señal, como se describe en la sección anterior. Sin embargo, a veces el cliente quiere activar la función definida en el objeto QML cuando otro objeto QML señala. Tales situaciones pueden manejarse a través de conexiones de señal.
Al llamar al método connect () de la señal y pasar la función de JavaScript como parámetro, puede conectar la señal emitida por el objeto QML a la función de JavaScript. Por ejemplo, el siguiente código conecta la señal girada de TapHandler a jsFunction () en script.js:
import QtQuick 2.12
import "script.js" como
elemento MyScript {
id:
ancho del elemento : 200; altura: 200
TapHandler {
id: inputHandler
}
Component.onCompleted: {
inputHandler.tapped.connect (MyScript.jsFunction)
}
}
//
función script.js jsFunction () {
console.log ("¡Llamada función JavaScript!")
}
En jsFunction () cada vez que se emite la señal girada llamada TapHandler.
Para obtener más información, consulte Conexión de señales a métodos y señales.
JavaScript en el código de inicio de la aplicación
A veces es necesario ejecutar algún código de comando cuando se inicia la aplicación (o la instancia del componente). Aunque es fácil incluir el script de inicio como un código global en un archivo de script externo, esto puede estar severamente restringido porque el entorno QML puede no estar completamente establecido. Por ejemplo, algunos objetos pueden no haber sido creados, o algunos enlaces de atributos pueden no haberse establecido. Para conocer las restricciones exactas sobre el código de script global, consulte Restricciones del entorno de JavaScript.
Cuando se completa la creación de instancias del objeto QML, emitirá una señal adicional de Component.completed. Después de crear una instancia del objeto, Component.onCompleted ejecutará el código JavaScript en el controlador correspondiente. Por lo tanto, el mejor lugar para escribir el código de inicio de la aplicación es en el controlador del objeto Object.onCompleted de nivel superior, porque este objeto se emite cuando Component.completed establece completamente el entorno QML.
Por ejemplo:
import
Rectángulo QtQuick 2.0 {
function startupFunction () {
// ... código de inicio
}
Component.onCompleted: startupFunction ();
} Cualquier objeto en el archivo QML (incluidos los objetos anidados y las instancias de componentes QML anidados) puede usar este atributo adicional. Si se ejecutan varios controladores onCompleted () al inicio, se ejecutarán secuencialmente en un orden indefinido.
De manera similar, antes de que cada objeto sea destruido, el Componente emite la señal de destrucción ().
Recursos de JavaScript
La lógica de la aplicación definida en la función de JavaScript se puede dividir en archivos de JavaScript separados, llamados recursos de JavaScript. Hay varios tipos diferentes de recursos de JavaScript, que tienen semánticas diferentes.
Para obtener más información sobre cómo definir recursos de JavaScript para QML, consulte la página de documentación titulada Definición de recursos de JavaScript en QML.
Importar JavaScript
Los documentos QML pueden importar recursos de JavaScript, y los recursos de JavaScript pueden importar otros recursos de JavaScript y módulos QML. Esto permite a los desarrolladores de aplicaciones proporcionar lógica de aplicaciones en archivos modulares e independientes.
Para obtener más información sobre cómo importar recursos de JavaScript y cómo usar las funciones que proporcionan, consulte la página de documentación titulada "Importar recursos de JavaScript".
Entorno de host de JavaScript
El entorno JavaScript proporcionado por el motor QML es diferente del entorno JavaScript proporcionado por el navegador web. Se aplican ciertas restricciones al código que se ejecuta en el entorno, y el motor QML proporciona varios objetos en el contexto raíz con los que los desarrolladores de JavaScript pueden no estar familiarizados.
Estas limitaciones y extensiones están documentadas en la descripción del entorno de host de JavaScript proporcionado por el motor QML.
