Inicio > Algo nuevo por descubrir > Introducción a QML – Primer ejemplo II

Introducción a QML – Primer ejemplo II

Viernes, 25 de febrero de 2011

Continuamos con nuestro ejemplo… ahora nos centramos en los editores para la entrada de datos.

Control de edición básico

Creamos un nuevo fichero LineInput.qml que permitirá introducir una línea de texto. Como cuestiones nuevas añadimos la posibilidad de fijar los valores a varias propiedades en la misma línea mediante el separador punto y coma.

Creamos un TextInput (Texto de entrada de una sola línea)

Fijamos el color de la selección de texto mediante selectionColor: “green”

y ponemos el foco en el control de edición focus: true

 

image thumb62 Introducción a QML – Primer ejemplo II

El resultado, un control de edición bastante resultón:

image thumb63 Introducción a QML – Primer ejemplo II

Control de visualización multi-línea

Ahora hacemos lo propio con un control de edición multi-línea (TextSelection.qml).

Valdrá para visualizar un texto en formato HTML.

image thumb64 Introducción a QML – Primer ejemplo II

Nada que decir que no sepamos ya.

Fin del ejercicio

Ahora juntaremos todo en un formulario de 800×480 (Resolución pensada en Maemo). Este formulario contendrá los cinco controles formado un posible interface para una futura aplicación algo más compleja.

image thumb65 Introducción a QML – Primer ejemplo II

 

Como resultado obtenemos este vistoso formulario

image thumb66 Introducción a QML – Primer ejemplo II

Como veis el resultado es sencillo de implementar. La potencia y dinamismo en la generación de interfaces de usuario es genial.

En los próximos posts resolveremos otras problemáticas más avanzadas respecto a QML. No te los pierdas

Algo nuevo por descubrir , ,

Imprimelo! Imprimelo! | Imprimelo! Guardalo como PDF!

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votes, average: 4,00 out of 5)
Loading ... Loading ...

  1. Sin comentarios aún.
  1. Sin trackbacks aún.