De Wikipedia, la enciclopedia libre
Saltar a navegación Saltar a búsqueda
Para otros usos, consulte QML (desambiguación) .
QML
ParadigmaMulti-paradigma : declarativo , reactivo , scripting
DesarrolladorProyecto Qt
Apareció por primera vez2009 ; Hace 12 años ( 2009 )
Lanzamiento estable
5.15.0 [1] / 26 de mayo de 2020 ; hace 11 meses ( 2020-05-26 )
Disciplina de mecanografíadinámico , fuerte
Sitio webqt-project .org / doc / qt-5 / qmlapplications .html
Influenciado por
XAML , [2] JSON , JavaScript , Qt
Influenciado
Qt , anillo [3]
QML
Extensión de nombre de archivo
.qml
Tipo de medio de Internettexto / x-qml
Desarrollado porProyecto Qt
Tipo de formatoLenguaje de escritura
Sitio webqt-project .org / doc / qt-5 / qmlapplications .html

QML ( Qt Modeling Language [4] ) es un lenguaje de marcado de interfaz de usuario . Es un lenguaje declarativo (similar a CSS y JSON ) para diseñar aplicaciones centradas en la interfaz de usuario. El código JavaScript en línea maneja aspectos imperativos. Está asociado con Qt Quick , el kit de creación de UI desarrollado originalmente por Nokia dentro del marco Qt . Qt Quick se utiliza para aplicaciones móviles donde la entrada táctil, las animaciones fluidas y la experiencia del usuario son cruciales. QML también se usa con Qt3D [5]para describir una escena 3D y una metodología de renderización de "gráficos de fotogramas". Un documento QML describe un árbol de objetos jerárquico. Los módulos QML [6] enviados con Qt incluyen bloques de construcción gráficos primitivos (por ejemplo, Rectangle, Image), componentes de modelado (por ejemplo, FolderListModel, XmlListModel), componentes de comportamiento (por ejemplo, TapHandler, DragHandler, State, Transition, Animation) y más complejos controles (por ejemplo, botón, control deslizante, cajón, menú). Estos elementos se pueden combinar para construir componentes que varían en complejidad, desde simples botones y controles deslizantes hasta programas completos habilitados para Internet.

Los elementos QML se pueden aumentar con JavaScript estándar tanto en línea como a través de archivos .js incluidos. Los elementos también pueden integrarse y ampliarse sin problemas mediante componentes C ++ utilizando el marco Qt.

QML es el idioma; su tiempo de ejecución de JavaScript es el motor V4 personalizado, [7] desde Qt 5.2; [8] y Qt Quick es el gráfico de escena 2D y el marco de la interfaz de usuario basado en él. Todos estos son parte del módulo Qt Declarative, mientras que la tecnología ya no se llama Qt Declarative.

El código QML y JavaScript se puede compilar en binarios nativos de C ++ con Qt Quick Compiler. [9] Alternativamente, existe un formato de archivo de caché QML [10] que almacena una versión compilada de QML de forma dinámica para un inicio más rápido la próxima vez que se ejecute.

Adopción [ editar ]

  • KDE Plasma 4 [11] y KDE Plasma 5 a través de Plasma-framework
  • Liri OS
  • Administrador de pantalla de escritorio simple
  • dispositivo de tableta reMarkable [12] [13]
  • Unity2D [14]
  • Pez vela OS [15] [16] [17]
  • BlackBerry 10 [18]
  • MeeGo [19] [20]
  • Maemo [21]
  • Tizen [22]
  • Mer [23] [24] [25]
  • Teléfono Ubuntu [26]
  • Lumina (entorno de escritorio) [27]
  • Muchas aplicaciones de código abierto

Sintaxis, semántica [ editar ]

Sintaxis básica [ editar ]

Ejemplo:

 importar  QtQuick  2.9  // importar desde Qt 5.9 Rectángulo  {  id: lienzo  ancho:  250  alto:  200  color:  "azul" Imagen  {  id: logo  source:  "pics / logo.png"  anchors.centerIn:  parent  x:  canvas . altura  /  5  }  }

Los objetos se especifican por su tipo, seguidos de un par de llaves. Los tipos de objetos siempre comienzan con mayúscula. En el ejemplo anterior, hay dos objetos, un rectángulo; y su hijo, una Imagen. Entre llaves, se puede especificar información sobre el objeto, como sus propiedades. Las propiedades se especifican como propiedad: valor. En el ejemplo anterior, podemos ver que la imagen tiene una propiedad llamada fuente, a la que se le ha asignado el valor pics/logo.png. La propiedad y su valor están separados por dos puntos.

La propiedad id

A cada objeto se le puede dar una propiedad única especial llamada id. La asignación de una identificación permite que otros objetos y secuencias de comandos hagan referencia al objeto. El primer elemento del rectángulo abajo tiene un id, myRect. El segundo elemento Rectangle define su propio ancho haciendo referencia a myRect.width, lo que significa que tendrá el mismo valor de ancho que el primer elemento Rectangle.

 Elemento  {  Rectángulo  {  id: myRect  ancho:  120  alto:  100  }  Rectángulo  {  ancho:  myRect . ancho  alto:  200  }  }

Tenga en cuenta que una identificación debe comenzar con una letra minúscula o un guión bajo y no puede contener caracteres que no sean letras, dígitos y guiones bajos.

Vinculaciones de propiedad [ editar ]

Un enlace de propiedad especifica el valor de una propiedad de forma declarativa. El valor de la propiedad se actualiza automáticamente si las otras propiedades o valores de datos cambian, siguiendo el paradigma de programación reactiva .

Los enlaces de propiedad se crean implícitamente en QML siempre que a una propiedad se le asigna una expresión de JavaScript. El siguiente QML usa dos enlaces de propiedad para conectar el tamaño del rectángulo al de otherItem.

 Rectángulo  {  ancho:  otroItem . ancho  alto:  otro artículo . altura  }

QML amplía un motor JavaScript compatible con los estándares, por lo que cualquier expresión JavaScript válida se puede utilizar como un enlace de propiedad. Los enlaces pueden acceder a las propiedades de los objetos, realizar llamadas a funciones e incluso utilizar objetos JavaScript integrados como Date y Math.

Ejemplo:

 Rectángulo  {  función  calculateMyHeight ()  {  return  Math . max ( otherItem . altura ,  thirdItem . altura );  }  anchors.centerIn:  parent  width:  Math . min ( otherItem . width ,  10 )  height:  calculateMyHeight ()  color:  width  >  10  ?  "azul"  :  "rojo"  }

Estados [ editar ]

Los estados son un mecanismo para combinar cambios en las propiedades en una unidad semántica. Por ejemplo, un botón tiene un estado presionado y no presionado, una aplicación de libreta de direcciones podría tener un estado de solo lectura y uno de edición para los contactos. Cada elemento tiene un estado base "implícito". Todos los demás estados se describen enumerando las propiedades y valores de aquellos elementos que difieren del estado base.

Ejemplo: en el estado predeterminado, myRect se coloca en 0,0. En el estado "movido", se coloca en 50,50. Al hacer clic dentro del área del mouse, el estado cambia del estado predeterminado al estado "movido", moviendo así el rectángulo.

 importar  QtQuick  2.0 Item  {  id: myItem  width:  200 ;  altura:  200 Rectángulo  {  id: myRect  ancho:  100 ;  height:  100  color:  "red"  }  estados:  [  State  {  name:  "movido"  PropertyChanges  {  target:  myRect  x:  50  y:  50  }  }  ]  MouseArea  {  anchors.fill:  parent  onClicked:  myItem . estado  =  'movido'  }  }

Los cambios de estado se pueden animar usando Transiciones.

Por ejemplo, agregar este código al elemento Item anterior anima la transición al estado "movido":

 transiciones:  [  Transición  {  de:  "*"  a:  "movida"  NumberAnimation  {  propiedades:  "x, y" ;  duración:  500  }  }  ]

Animación [ editar ]

Las animaciones en QML se realizan animando las propiedades de los objetos. Las propiedades de tipo real, int, color, rect, point, size y vector3d se pueden animar.

QML admite tres formas principales de animación: animación de propiedad básica, transiciones y comportamientos de propiedad.

La forma más simple de animación es PropertyAnimation, que puede animar todos los tipos de propiedades enumerados anteriormente. Se puede especificar una animación de propiedad como fuente de valor utilizando la sintaxis de animación en propiedad. Esto es especialmente útil para repetir animaciones.

El siguiente ejemplo crea un efecto de rebote:

 Rectángulo  {  id: rect  ancho:  120 ;  altura:  200 Imagen  {  id: img  fuente:  "pics / qt.png"  x:  60  -  img . ancho / 2  y:  0 SequentialAnimation  en  y  {  bucles:  Animación . Animación de números infinitos  { a: 200 - img . altura ; easing.type: Facilitación . OutBounce ; duración: 2000 } PauseAnimation { duración: 1000 } NumberAnimation { to: 0 ; easing.type: Facilitación . OutQuad ; duración: 1000 } } } }

Integración Qt / C ++ [ editar ]

El uso de QML no requiere conocimientos de Qt / C ++ para su uso, pero se puede ampliar fácilmente a través de Qt. [28] [29] Cualquier clase de C ++ derivada de QObject se puede registrar fácilmente como un tipo que luego se puede instanciar en QML.

Conceptos familiares [ editar ]

QML proporciona acceso directo a los siguientes conceptos de Qt:

  • Señales de QObject: pueden activar devoluciones de llamada en JavaScript
  • Ranuras de QObject: disponibles como funciones para llamar en JavaScript
  • Propiedades de QObject: disponibles como variables en JavaScript y para enlaces
  • QWindow - Window crea una escena QML en una ventana
  • Q * Model: se utiliza directamente en la vinculación de datos (p. Ej., QAbstractItemModel) [30] [31] [32]

Controladores de señales [ editar ]

Los manejadores de señales son devoluciones de llamada de JavaScript que permiten realizar acciones imperativas en respuesta a un evento. Por ejemplo, el elemento MouseArea tiene controladores de señales para manejar la presión, la liberación y el clic del mouse:

 MouseArea  {  onPressed:  consola . log ( "botón del mouse presionado" )  }

Todos los nombres de manejadores de señales comienzan con "on".

Herramientas de desarrollo [ editar ]

Debido a que QML y JavaScript son muy similares, casi todos los editores de código que admiten JavaScript funcionarán. Sin embargo, el soporte completo para resaltado de sintaxis , finalización de código, ayuda integrada y un editor WYSIWYG están disponibles en el IDE Qt Creator multiplataforma gratuito desde la versión 2.1 y muchos otros IDE.

El ejecutable qml se puede utilizar para ejecutar un archivo QML como un script. Si el archivo QML comienza con un shebang, se puede hacer directamente ejecutable. Sin embargo, empaquetar una aplicación para su implementación (especialmente en plataformas móviles) generalmente implica escribir un iniciador de C ++ simple y empaquetar los archivos QML necesarios como recursos.

Referencias [ editar ]

  1. ^ "Qt 5.15 liberado" .
  2. ^ "¿Qué interfaz para una aplicación moderna?" . scriptol .
  3. ^ Ring Team (5 de diciembre de 2017). "El lenguaje de programación Ring y otros lenguajes" . ring-lang.net . ring-lang .
  4. ^ "Cambios en la API declarativa de Qt | Blog de Qt" . 25 de marzo de 2014. Archivado desde el original el 25 de marzo de 2014.
  5. ^ "Descripción general de Qt 3D | Qt 3D 5.13.1" . doc.qt.io .
  6. ^ "Todos los tipos de QML | Qt 5.13" . doc.qt.io . Consultado el 7 de septiembre de 2019 .
  7. ↑ Knoll, Lars (15 de abril de 2013). "Evolución del motor QML, parte 1" . Consultado el 11 de mayo de 2018 .
  8. ^ "Novedades de Qt 5.2" . Consultado el 11 de mayo de 2018 .
  9. ^ "Compilador rápido de Qt" . Consultado el 7 de septiembre de 2019 .
  10. ^ "Implementación de aplicaciones QML | Qt 5.13" . doc.qt.io . Consultado el 7 de septiembre de 2019 .
  11. ^ "Desarrollo / Tutoriales / Plasma4 / QML / GettingStarted" . KDE TechBase . KDE.
  12. ^ Dragly, Svenn-Arne. "Desarrollo para la tableta reMarkable" . arrastradamente .
  13. ^ "Demostración QML para la tableta de papel reMarkable" . GitHub .
  14. ^ "La unidad de Ubuntu escrita en Qt / QML para" Unity Next " " . Michael Larabel.
  15. ^ "Combinando C ++ con QML en aplicaciones de Sailfish OS" .
  16. ^ "Tutorial - Codificación QML Live con Qt QmlLive" .
  17. ^ "QML a C ++ y C ++ a QML" . Jolla.
  18. ^ "Fundamentos de QML" . Mora.
  19. ^ "Introducción a QML para Meego" . Nokia.
  20. ^ "Las demostraciones de MeeGo y Qt / QML asaltan el MWC" . Gadgets de IoT.
  21. ^ "QML en N900" . maemo.org . Comunidad Maemo.
  22. ^ "Qt se lanza en Tizen con apariencia estándar" .
  23. ^ "Mer" .
  24. ^ "Wiki de Mer" .
  25. ^ "Interfaz de usuario de lápiz labial QML en MeeGo CE / Mer" . Gadgets de IoT.
  26. ^ "QML - la mejor herramienta para desbloquear su creatividad" . Ubuntu.
  27. ^ "Mirando Lumina Desktop 2.0" . TrueOS.
  28. ^ Alpert, Alan. "La historia del usuario de Qt / QML" . Imaginaciones incorregibles .
  29. ^ Alpert, Alan. "Las muchas formas de unir QML y C ++" . Qt Developer Days . Mora.
  30. ^ Dahlbom, J. "QAbstractItemModels en vistas QML" . Las piezas que faltan .
  31. ^ "Ordenar y filtrar un TableView" . The Qt Company.
  32. ^ Brad, van der Laan. "Cómo utilizar QSortFilterProxyModel de Qt" . Pensamiento imaginativo .

Enlaces externos [ editar ]

  • Documentación de referencia QML
  • Primeros pasos con QML
  • Ejemplos y tutoriales de QML
  • Blog de Qt
  • Tutorial de QML
  • Guías para desarrolladores de Qt
  • Exportando QML desde Photoshop y GIMP
  • Aplicación completa del sistema de facturación en QML - Khitomer
  • Creador de QML
  • Libro QML

How-tos [ editar ]

  • Integrando QML y C ++
  • Clases importantes de C ++ proporcionadas por el módulo Qt QML