# Migrar componentes QML1 a QML2

**URL:** <https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511>\
**Category:** Velneo\
**Created:** [22 Junio, 2017 23:16 UTC](https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511 "2017-06-22T23:16:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pepesempere](https://avatars.discourse-cdn.com/v4/letter/p/dec6dc/32.png) [@pepesempere](https://foros.velneo.com/u/pepesempere)\
**Post date:** [22 Junio, 2017 23:16 UTC](https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511/1 "2017-06-22T23:16:18Z")

</div>

Buenas noches al foro , a ver si alguien me puede ayudar.

Estoy migrando los componentes QML1 A QML2 de mis aplicaciones para poder actualizarme a la versión 7.21.  
El problema que tengo es que por ejemplo, en un formulario QML en el que mostraba un reloj analógico, al cambiar el “import QtQuick 1.1” por “import QTQuick 2.4”, el formulario aparece en blanco y no muestra nada.

Le he dado mis vueltas y no se a que puede ser debido.  
Lo curioso es que el código QML funciona perfectamente en el probador QML de los ejercicios de Paco Satué.

Alguna idea?  
El código es el siguiente:

Gracias de antemano.

import QtQuick 2.4

// Uso de ficheros en formato vectorial SVG  
// Adaptación del ejemplo [https://github.com/elpuri/qml-swiss-railways-clock-svg](https://github.com/elpuri/qml-swiss-railways-clock-svg)

// Se ha utiizado el reloj svg de [http://codepen.io/jaredkhan/pen/Elrsx](http://codepen.io/jaredkhan/pen/Elrsx)

Item {  
id: clock;  
anchors.fill: parent;  
anchors.margins: 30;

```
property real hours: 0;
property real minutes: 0;
property real seconds: 0;
property real escala: clockFace.width / 400;
// El reloj se adapta al contenedor conservando la proporción ancho/alto
property bool mas_alto: width &lt; height;

Rectangle {
	anchors.fill: parent;
	color: "WhiteSmoke"
}

Image {
	// Reloj
	id: clockFace;
	smooth: true
	width: mas_alto ? parent.width : parent.height;
	height: width;
	source: "qml_svg/reloj_fondo.svg";
	anchors.centerIn: parent;

	Image {
		// Horas
		source: "qml_svg/reloj_horas.svg";
		smooth: true;
		width: parent.width;
		height: width;
		transform: Rotation {
			origin.x: ((clock.mas_alto ? width : height) / 2) + (5 * escala);
			origin.y: ((clock.mas_alto ? width : height) / 2) - (10 * escala);
			angle: (clock.hours * 30) + (minutes * 0.5);
			Behavior on angle {
				SpringAnimation { spring: 2;damping: 0.2;modulus: 360 }
			}
		}
	}
	Image {
		// Minutos
		source: "qml_svg/reloj_minutos.svg";
		smooth: true;
		width: parent.width;
		height: width;
		transform: Rotation {
			origin.x: ((clock.mas_alto ? width : height) / 2) + (4 * escala);
			origin.y: ((clock.mas_alto ? width : height) / 2) - (12 * escala);
			angle: (clock.minutes * 6) + (6 / (60 / clock.seconds));
			Behavior on angle {
				SpringAnimation { spring: 2;damping: 0.2;modulus: 360 }
			}
		}
	}
	Image {
		// Segundos
		source: "qml_svg/reloj_segundos.svg";
		smooth: true;
		width: parent.width;
		height: width;
		transform: Rotation {
			origin.x: ((clock.mas_alto ? width : height) / 2) + (4.5 * escala);
			origin.y: ((clock.mas_alto ? width : height) / 2) - (10.5 * escala);
			angle: clock.seconds * 6;
			Behavior on angle {
				SpringAnimation { spring: 2;damping: 0.2;modulus: 360 }
			}
		}
	}
}

Timer {
   // Actualización del reloj
	id: lahora
	interval: 1000;
	running: false;
	// A false permite visualizar la animación inicial de las agujas
	triggeredOnStart: false;
	repeat: true;
	onTriggered: {
		// mostrarMensaje(segundos.height)
		var d = new Date();
		clock.hours = d.getHours();
		clock.minutes = d.getMinutes();
		clock.seconds = d.getSeconds();
	}
}

Component.onCompleted: {
	// mostrarMensaje("Ancho: " + clockFace.width + "\n" + "Alto: " + clockFace.height);
	lahora.start();
}

```

}

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [23 Junio, 2017 09:13 UTC](https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511/2 "2017-06-23T09:13:47Z")

</div>

Hola Jose.

En QML2 de Velneo 21 puedes usar **import QtQuick 2.6** que corresponde a la Release Qt 5.6.

Para visualizar el reloj SVG tienes que darle dimensiones al elemento principal **Item**.

- Quita la líneas “anchors.fill: parent;” y “anchors.margins: 30;”
- Añade la línea “width: 120; height: width;”
- Revisa la propiedad _source_ de los elementos _Image_.
- En el formulario QML de Velneo puedes poner la propiedad _Redimensionamiento_ a _Expandir/Contraer_.

Pruébalo.  
Saludos  
Paco Satué

---

<div class="post-metadata">

**Author:** ![pepesempere](https://avatars.discourse-cdn.com/v4/letter/p/dec6dc/32.png) [@pepesempere](https://foros.velneo.com/u/pepesempere)\
**Post date:** [23 Junio, 2017 15:36 UTC](https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511/3 "2017-06-23T15:36:42Z")

</div>

Muchas gracias Paco. Solucionado!!

---

<div class="post-metadata">

**Author:** ![robertocofiex](https://avatars.discourse-cdn.com/v4/letter/r/9de0a6/32.png) [@robertocofiex](https://foros.velneo.com/u/robertocofiex)\
**Post date:** [4 Agosto, 2017 06:07 UTC](https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511/4 "2017-08-04T06:07:36Z")

</div>

Hola a mi me da error “el modulo QtQuick no está instalado”

he cambiado en el QML

import QtQuick 1.0

por

import QtQuick 2.6

y sigue sin funcionar.

Alguna sugerencia???

---

<div class="post-metadata">

**Author:** ![aztecmexico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/aztecmexico/32/3498_2.png) [@aztecmexico](https://foros.velneo.com/u/aztecmexico)\
**Post date:** [7 Agosto, 2017 04:54 UTC](https://foros.velneo.com/t/migrar-componentes-qml1-a-qml2/9511/5 "2017-08-07T04:54:13Z")

</div>

Buen día robertocofiex,

No basta con cambiar solo el import, de la versión 1.0 a la 2.6 tambien cambia la estructura del código, muchas cosas desaparecen y hay nuevas, lo malo que es difícil encontrar qué cosas son las que cambian, como las estructuras y la forma de definir el Item ya dentro del código.

Te tendrás que echar un clavado a la documentación de QT y ver si hay algún documento que indique los cambios principales entre versiones.

Saludos.