En otro artículo vimos cómo crear nuestra primera app para Android con Qt. En este veremos cómo agregar un menú de edición a nuestros campos de texto (onPressAndHold en Qt para Android), una característica que no debe faltar para facilitar la interacción del usuario con el software que escribimos.
Como ya dije tomaremos como base el ejemplo llamado Test1, así que si no lo tienes lo puedes crear siguiendo las instrucciones del enlace que está al inicio.
- Abrimos el proyecto test1 con QtCreator.
- Encontramos y abrimos el archivo Page1Form.ui.qml que está dentro de Resources. Se abrirá en vista de diseño, para cambiar a la vista de código hacemos clic en Edit que se encuentra a la izquierda.
- Agregamos el código a partir de la línea 7 dentro del TextField que nos brindará las opciones básicas de Copiar, Cortar y Pegar. Finalmente nos quedará así:
[pastacode lang=”javascript” manual=”4.%09TextField%20%7B%0A5.%09%20%20%20%20%20%20id%3AtextField1%0A6.%09%20%20%20%20%20%20placeholderText%3AqsTr(%22TextField%22)%0A7.%09%20%20%20%20%20%20selectByMouse%3Atrue%0A8.%09%20%20%20%20%20%20persistentSelection%3Atrue%0A9.%09%0A10.%09%20%20%20%20%20%20Menu%20%7B%0A11.%09%20%20%20%20%20%20%20%20%20%20%20d%3AeditMenu%0A12.%09%20%20%20%20%20%20%20%20%20%20%20width%3A80%0A13.%09%20%20%20%20%20%20%20%20%20%20%20x%3AtextField1.x%20%2B%2020%0A14.%09%20%20%20%20%20%20%20%20%20%20%20y%3AtextField1.y%20%2B%20textField1.height%0A15.%09%0A16.%09%20%20%20%20%20%20%20%20%20%20%20MenuItem%20%7B%0A17.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%22CORTAR%22%0A18.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font.pixelSize%3A12%0A19.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A30%0A20.%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20enabled%3AtextField1.selectedText%20!%3D%3D%20%22%22%20%3F%20true%20%3A%20false%0A21.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onTriggered%3A%7B%20textField1.cut()%20%7D%0A22.%09%20%20%20%20%20%20%20%20%20%20%20%7D%0A23.%09%0A24.%09%20%20%20%20%20%20%20%20%20%20%20MenuItem%20%7B%0A25.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%22COPIAR%22%0A26.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font.pixelSize%3A12%0A27.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A30%0A28.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20enabled%3AtextField1.selectedText%20!%3D%3D%20%22%22%20%3F%20true%20%3A%20false%0A29.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onTriggered%3A%7B%20textField1.copy()%20%7D%0A30.%09%20%20%20%20%20%20%20%20%20%20%20%7D%0A31.%09%0A32.%09%20%20%20%20%20%20%20%20%20%20%20MenuItem%20%7B%0A33.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%22PEGAR%22%0A34.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font.pixelSize%3A12%0A35.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A30%0A36.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20enabled%3AtextField1.canPaste%0A37.%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onTriggered%3A%7B%20textField1.paste()%20%7D%0A38.%09%20%20%20%20%20%20%20%20%20%20%20%7D%0A39.%09%20%20%20%20%20%20%7D%0A40.%09%0A41.%09%20%20%20%20%20%20onPressAndHold%3A%7B%20editMenu.open()%20%7D%0A42.%09%7D%0A” message=”” highlight=”” provider=”manual”/]
A continuación, explicaré las partes más importantes del código que hemos añadido. En la línea 7 ponemos selectByMouse en true para poder seleccionar el texto dentro del control. En la línea 8 ponemos persistentSelection en true para que el TextField mantenga el texto seleccionado incluso después de perder el foco. Si desea comprender mejor, lo animo a cambiar el valor de estos campos y chequear el comportamiento de la app. A partir de la línea 10 declaramos el menú con las opciones de edición, el código es muy intuitivo, solo resaltar que en cada MenuItem el valor del campo enabled (habilitado o no, por ejemplo, línea 20) cambia dependiendo de, para copiar y cortar, si existe texto seleccionado y para pegar si existe texto en el portapapeles. Finalmente, en la línea 41 mostramos el menú al producirse el evento onPressAndHold. Para probar la nueva funcionalidad, compilamos y ejecutamos el proyecto y ponemos el dedo sobre el campo de texto y esperamos que se muestre el menú como se ve en la imagen:
Saludos!!!