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
El resultado, un control de edición bastante resultón:

image

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

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

Como resultado obtenemos este vistoso formulario

image

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

One Comment

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *