Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 02

Desarrollo de
Interfaces
Técnico Superior en
Desarrollo de Aplicaciones
Multiplataforma
© Centro para la Cultura y el Conocimiento, S.A.
ISBN-13: 978-84-7157-397-1
ISBN-10: 84-7157-397-0
E-m06-22
Printed in Spain
Queda rigurosamente prohibida, sin autori-

zación escrita de los titulares del "copyright"
bajo las sanciones establecidas en las leyes, la
reproducción parcial o total de esta obra por
cualquier medio o procedimiento, comprendi-
dos la reprografía y el tratamiento informático
y la distribución de ejemplares de ella median-
te alquiler o préstamos públicos.
2
XML.
a partir de
Generación
documentos
de interfaces
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA 29

Módulo | Desarrollo de Interfaces
Sumario
1. Introducción a la generación de interfaces a partir de documentos XML.............. 31
2. Diseño de interfaces estáticas o interfaces dinámicas............................................ 32
3. Lenguajes de descripción de interfaces basados en XML.
Ámbito de aplicación. Elementos, etiquetas, atributos y valores........................... 33
4. Herramientas libres y propietarias para la creación
de interfaces de usuario multiplataforma................................................................ 40
5. Paletas y vistas........................................................................................................... 41
6. Controles, propiedades............................................................................................. 42
7. Componentes contenedores de controles............................................................... 44
8. Ubicación, tamaño y alineamiento de controles..................................................... 45
9. Eventos, controladores. Secuencia de los eventos................................................. 47
10. Edición del documento XML................................................................................... 49
11. Generación de código para diferentes plataformas.............................................. 50
30
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Objetivos
▶ Conocer las diferencias entre interfaces estáticas y dinámicas.
▶ Identificar los lenguajes de descripción de interfaces basadas en XML.
▶ Conocer herramientas libres y propietarias para crear interfaces.
▶ Saber trabajar sobre documentos XML.

1. Introducción a la generación
de interfaces a partir de
documentos XML
En esta unidad estudiaremos cómo podemos crear interfaces de usuario partiendo de los
documentos XML.
Conoceremos las diferencias entre interfaces dinámicas y estáticas y cómo podemos trabajar
con cada una de ellas.
También veremos qué herramientas ya existentes podemos utilizar para tratar con este tipo de
interfaces, tanto de código abierto como propietarias.
31
2. Diseño de interfaces
estáticas o interfaces
dinámicas
El diseño de interfaces gráficas de usuario siempre ha sido generado de manera estática por
desarrolladores y diseñadores.
Normalmente se crea el contenido visual y el diseño de la interfaz gráfica a partir de formularios

que contendrán controles y componentes, como los DataGrids, PictureBox u otros controles de
ActiveX.
A estas acciones se les conoce como diseño estático de una interfaz gráfica, que, una vez en-
tregado al usuario, tendrá el mismo aspecto que el diseñado.
La creación de este diseño estático se realizará mediante los diferentes IDEs existentes en el
mercado.
El diseño dinámico de una interfaz gráfica de usuario consiste en crear dichas interfaces en
tiempo de ejecución, con lo que nos debemos centrar en la programación de la lógica del soft-
32
ware y no tanto en el diseño estático de las interfaces.
Este diseño dinámico se podrá desarrollar tanto en un servidor como a partir de documentos
XML que se hayan generado previamente.
3. Lenguajes de descripción
de interfaces basados en
XML. Ámbito de aplicación.
Elementos, etiquetas,
atributos y valores
La generación de interfaces de usuario haciendo uso de lenguajes basados en XML permite
construir dichas interfaces con descripciones de alto nivel para los distintos aspectos de la
interfaz como su estructura y su comportamiento.
De esta manera y partiendo de esa descripción, se puede crear de forma automatizada la

interfaz de usuario final.
Mediante este proceso podremos centrarnos en las necesidades del usuario, ya que no se
depende de las directrices de ningún lenguaje sino de las consideraciones concretas de cada
contexto.
Para obtener el código necesario para generar la interfaz de la aplicación necesitaremos “ma-
33
pear” dicha interfaz. Este proceso de mapeado depende del lenguaje concreto que se esté
usando.
A continuación veremos los detalles de los lenguajes para mapear las interfaces basadas en

XML.
3.1. XAML
XAML (eXtensible Application Markup Language) es un lenguaje de marcas usado para la crea-
ción de interfaces en el framework .NET de Microsoft.
Con XAML se pueden crear aplicaciones de tipo RIA (Rich Interface Applications) compuestas
por gran cantidad de material gráfico, lo que permite generar interfaces con alto valor visual.
XAML está formado por elementos XML que se usan para representar los componentes gráficos
más importantes. También permite la distribución de los paneles en la interfaz y gestionar los
manejadores de eventos.
Para programar con XAML se puede usar cualquier editor de texto o el entorno de desarrollo
gráfico contenido en la herramienta Microsoft Expression Blend.
Hay que tener en cuenta que el código resultante solo hace referencia al aspecto visual sin
añadir funcionalidades complejas.
Una característica interesante de XAML es que los cálculos se almacenan en un archivo inde-
pendiente con lo que desarrolladores y diseñadores pueden trabajar por separado y en para-
lelo.
El proceso de mapeado en XAML se realiza en tiempo de ejecución. Todos los elementos de la

interfaz se asocian a objetos pertenecientes al framework .NET, los atributos se conectan a las
propiedades de estos objetos para integrarlos en la aplicación y cada uno de los elementos de
XAML tienen relación con clases de .NET.
Ejemplo
Un ejemplo básico de XAML podría ser el siguiente:
<Page xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.micrsoft.com/winfx/2006/xaml” x:Class=”SampleSpace.SamplePa-
ge”>
<Button Click=”Accion_de_Click”>Pincha aquí</Button>
</Page>
Nota:
Puedes consultar más información sobre XAML en su página oficial:

34
http://msdn.microsoft.com/es-es/library/ms752059.aspx
3.2. XUL
XUL (eXtensible User Interface Language) es un lenguaje de marcas basado en XML que permite
crear interfaces complejas de usuario.
Además de los elementos típicos de los formularios también podremos usar otros más comple-
jos como barras de herramientas, menús o teclas de acceso directo.
Este lenguaje está indicado para desarrollar aplicaciones en red. Los documentos generados
se podrán visualizar en navegadores como Mozilla o Netscape.
Una característica importante es que con XUL podremos desarrollar complementos para Mozilla.
En cuanto al proceso de mapeado, todo documento XUL se interpreta para visualizar su con-
tenido. En la renderización del contenido se tienen en cuenta la definición de los elementos y
las hojas de estilo.
XUL es muy similar a HTML. Utiliza hojas de estilo para configurar el aspecto y Javascript para
implementar funcionalidades y gestionar cómo se comportan sus elementos.
Ejemplo
Vemos a continuación un ejemplo básico de formulario preparado para mostrar los datos de
un archivo XML:
<?xml version=”1.0”?>
<?xml-stylesheet href=”chrome://global/skin/global.css” type=”text/css”?>
<dialog id=” id-formulario” title=”Ejemplo XUL”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”
buttons=”accept,cancel”
buttonlabelcancel=”Cancelar”
buttonlabelaccept=”Aceptar”
ondialogaccept=”return doOK();”
ondialogcancel=”return doCancel();”>
<dialogheader title=”Options” description=”My preferences”/>

<label value=”Nombre”/>
<textbox />
35
<label value=”Email”/>
<textbox />

<label value=”Fecha nacimiento”/>
<textbox />
<groupbox>
<caption label=”Sexo”/>
<radiogroup>
<radio label=”Hombre”/>
<radio label=”Mujer” selected=”true”/>
</radiogroup>
</groupbox>
</dialog>
Cada página XUL necesita una etiqueta tipo <window> o <dialog>, las cuales se usan para al-
macenar los componentes que forman la interfaz a desarrollar.
Dentro de esta etiqueta se utilizan tres atributos:
▶ id: es una referencia única que apunta a esa etiqueta en XML. Este atributo es esencial
para poder comunicarse con etiquetas y actualizar con cambios e información.
▶ title: segunda etiqueta “title” contiene el texto que se mostrará en la barra de título
cuando lanzamos el archivo XUL en la ventana correspondiente.
▶ xmlns: especifica el espacio de nombres de la etiqueta dialog en la que se basará el

resto de las etiquetas que contenga.
3.3. UIML
UIML (User Interface Markup Language) se utiliza para generar interfaces independientes de la
plataforma y el lenguaje que se use.
Para generar una interfaz en UIML es necesario crear un documento XML que contenga la defi-
nición de la interfaz, utilizando los elementos de UIML y una hoja de estilos para trasladar esa
definición a la plataforma y lenguaje que queramos usar.
La ventaja principal de este lenguaje es que tan solo es necesario un único diseño de la inter-
faz con total independencia del dispositivo donde se pueda ejecutar. Esto hace que la interfaz
36
desarrollada sea compatible con futuras versiones de los dispositivos.
UIML describe una interfaz por niveles, que son los siguientes:
▶ Presentación. La presentación se entiende como la apariencia de la interfaz.

▶ Contenido. El contenido se refiere a los componentes de los que se compone la interfaz.
▶ Lógica. La lógica hace referencia a la interacción entre el usuario y la interfaz: eventos

del ratón o teclado, etc.
En UIML una interfaz de usuario se puede entender como una una jerarquía de elementos
XML. Cada uno de estos componentes (botones, cajas de texto, etiquetas...) son una entidad
XML.
A estas entidades se les conoce como elementos Part y a cada uno de ellos se les asocia un
elemento Content, que puede ser de tipo texto, imagen, etc.
Cuando definimos cómo se comportará la interfaz, podremos asociar (mapear) las partes de la
misma a los elementos correspondientes del lenguaje de desarrollo y su conexión con la lógica
de la aplicación.
Estas partes permiten separar entre ellos los elementos que componen la interfaz. De esta ma-
nera, se distinguen entre el modelado estructural, la visualización y el modelado del com-
portamiento.
Otra de las características de UIML se basa en la traducción automática al lenguaje utilizado

por el dispositivo final. Así mismo, la traducción se puede realizar tanto en el mismo dispositivo
como en un servidor de la interfaz.
Ejemplo
Se puede ver un ejemplo de UIML a continuación:
<UIML>
<HEAD>
<AUTHOR>José López Marín</AUTHOR>
<DATE>3 Junio, 2020</DATE>
</HEAD>
<APP CLASS=”App” NAME=”Dialogo”>
<GROUP CLASS=”Dialog” NAME=”Dialogo_Boton”>
<ELEM CLASS=”DialgoMessage” NAME=”Mensaje/>
<ELEM CLASS=”DialogButton” NAME=”Boton_OK”/>
</GROUP>
</APP>
<DEFINE NAME=”Boton_OK”>
<PROPERTIES>
37
<ACTION
VALUE=”Dialogo.EXISTS=false”
TRIGGER=”Selected”

/>
</PROPERTIES>
</DEFINE>
</UIML>
3.4. SVG
SVG (Scalable Vector Graphics) permite insertar gráficos dentro de una página web o un docu-
mento.
Un archivo SVG es un documento XML con etiquetas gráficas. Se puede visualizar mediante
un navegador común con un complemento o visor especial.
SVG se puede utilizar:
▶ Como una página web independiente, cargada directamente o mediante una etiqueta
de enlace.
▶ Insertado en una página HTML en la etiqueta <svg>.
▶ Incrustado con las etiquetas: img src, objeto, applet, iframe.

XML se puede traducir a SVG con una definición XSL. Esto permite que los documentos produ-
cidos por una aplicación se conviertan directamente a gráficos.
Las siguientes extensiones XML se pueden usar en documentos SVG:
▶ XLink: para referenciar.
▶ XPointer: sintaxis para hacer referencia al elemento.
▶ Hoja de estilo: diseñada por CSS 2 o XSL.
▶ DOM: incluido en SVG y compatible con DOM 2 más manejo de eventos.
Ejemplo
Un ejemplo de código en lenguaje SVG podría ser el siguiente:
<? xml version = “1.0” encoding = “utf-8”?>

<! DOCTYPE svg>
<svg width = “200px” height = “150px” xmlns = “http://www.w3.org/2000/svg”>
<g>
<text font-size = “30” x = “20” y = “65”>
¡Hola Mundo!
38
</text>
</g>
</svg>
3.5. MXML
MXML (Macromedia eXtensible Markup Language) es un lenguaje de generación de interfaces
gráficas basado en XML.
MXML también se puede utilizar para implementar la lógica y los comportamientos de las
aplicaciones de Internet. Puede contener trozos de ActionScript, tanto para crear una función
de control de eventos o para un enlace de datos.
MXML se puede usar con frecuencia con Flex Server. Sin embargo, Adobe Flash Builder IDE y Flex
SDK también pueden compilar MXML en archivos SWF sin necesidad de usar.
MXML es un estándar propietario con amplia integración en la tecnología de Adobe. No exis-

ten traductores capaces de convertir un documento MXML a otro idioma de interfaz de usuario,
como UIML, XUL, XForms, XAML o SVG.
Pero existen complementos de terceros para Flex Builder que son capaces de generar un re-
sultado que no sea un archivo SWF a partir de aplicaciones Flex, por ejemplo, aplicaciones
móviles nativas.
Ejemplo
Un ejemplo básico de MXML sería el siguiente:
<?xml version=”1.0” encoding=”utf-8”?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute” backgroundGradientColors=”[#000055, #444333]”>
<mx:Label text=”Hola Mundo!” verticalCenter=”0” horizontalCenter=”0” fontSize=”40” letterS-
pacing=”1”>
<mx:filters>
<mx:GlowFilter color=”#ffffee”/>
</mx:filters>
</mx:Label>
</mx:Application>
39
4. Herramientas libres y
propietarias para la
creación de interfaces de
usuario multiplataforma
Todas las herramientas para la creación de interfaces tienen en común que usan un sistema de
ventanas que permiten dividir la pantalla en diferentes regiones rectangulares, siendo la parte
central el conjunto de herramientas o toolkit.
Este toolkit suele contener los objetos gráficos más usados como menús, botones, etiquetas,
barras de scroll, y campos para entrada de texto que compondrán la interfaz.
El sistema de ventanas contiene métodos para dibujar figuras en la pantalla y se usa como
medio para gestionar las acciones del usuario.
Una vez diseñada la interfaz, se le añade la funcionalidad deseada a los diferentes elementos
mediante procedimientos definidos por el propio desarrollador.
40
Como paso final, se conecta la interfaz con la aplicación destino de diferentes maneras:
▶ En un entorno común, como puede ser un IDE.

▶ Si los lenguajes de la interfaz y el final son diferentes, como las tecnologías basadas en
XML, se necesita un proceso que traduzca los elementos XML a elementos que entienda
la plataforma final.
A continuación podemos listar varios ejemplos de herramientas, tanto libres como de pago,
para la creación de interfaces de usuario multiplataforma:
▶ Herramientas libres:
• Glade.
• QT Designer.
▶ Herramientas propietarias:
• Flex de Adobe.
• Expression Blend de Microsoft.
Nota:
En los siguientes apartados vamos a profundizar en el funcionamiento de la herramienta libre

QT Designer.
También puedes consultar más información sobre la herramienta QT Designer en el siguiente

enlace:
https://doc.qt.io/qt-5/qtdesigner-manual.html
5. Paletas y vistas
QT Designer ofrece un entorno de trabajo muy similar a otros IDEs para interfaces gráficas,
donde podemos encontrar los elementos básicos para generarlas.
En QT Designer existen diferentes paletas y vistas para generar elementos y componentes de las
interfaces gráficas. A continuación, se detallan las más importantes:
▶ Barra de menú. Con la barra de menú se pueden realizar todas las acciones básicas
para la gestión de formularios y utilizar herramientas como el portapapeles.
También proporciona acceso a la ayuda general del programa y se puede acceder a las
paletas de herramientas y vistas que se están usando en ese momento.
▶ Paleta de propiedades. Contiene atajos para las acciones comunes que se utilizan al
editar un formulario o vista determinada, en concreto ciertas propiedades modificables
de los objetos que se están utilizando.
▶ Cuadro o vista de widgets. En este cuadro están accesibles los distintos widgets y dise-
ños comunes que se pueden utilizar para diseñar nuevos componentes.
Estos se suelen agrupar en categorías que permiten conocer sus usos o sus caracterís-
ticas.
▶ Vista actual. Contiene el elemento o elementos con los que se está trabajando actual-
41
mente.
▶ Componentes de la

ventana principal:
1. Barra de menú.
2. Cuadro o vista de
widgets.
3. Vista del elemento
actual.
4. Paleta de
propiedades.
6. Controles, propiedades
En QT Designer encontramos los siguientes controles:
▶ Controles de botones. Qt Quick Controls ofrece una selección de controles de tipo bo-
tón para casos de uso específicos.
▶ Indicadores. Qt Quick Controls ofrece una selección de controles similares a indicado-

res para casos de uso específicos, por ejemplo:
• Indicador de ocupado.
• Indicador de página.
• Barra de progreso.
▶ Selectores. Qt Quick Controls ofrece un conjunto de controles similares a selectores
para casos de uso específicos. Son los siguientes:
• Controles deslizantes.
• Dial.
• Cuadro giratorio.
• Cuadro combinado.
42
• Vaso.
▶ Barra de pestañas. La barra de pestañas nos proporciona un tipo de navegación basa-
do en diferentes pestañas. En estas pestañas, los usuarios de la aplicación pueden tener
acceso a diferentes vistas o subtareas.
Una barra de pestañas se usa comúnmente como encabezado o pie de página de una
ventana de aplicación.
▶ Barra de herramientas. La barra de herramientas contiene opciones de acción y con-

trol para interactuar con el contexto de toda la aplicación, como por ejemplo botones de
navegación o campos de búsqueda.
Una barra de herramientas se usa frecuentemente tanto como encabezado o como pie
de la página en una ventana de la aplicación. Para ello se puede seleccionar la posición
de la barra de herramientas en el campo “Posición”.
A continuación, se muestra el detalle de la vista que contiene los controles utilizados en QT

Designer:
▶ Vista de los controles
disponibles en QT
Designer.
43
En QT Designer existe una vista o paleta especial para la
modificación de las propiedades de los elementos de los
que se componen las interfaces gráficas.

Las propiedades de los elementos permiten controlar
diferentes aspectos como el tamaño, la posición, colores,
entre otros, de cualquier componente del diseño de in-
terfaz con el que se esté trabajando.
El tipo de propiedades disponibles dependerá de cada

uno de los elementos que pueden conformar las inter-
faces.
Se muestra a continuación el detalle concreto de esta vis-

ta en QT Designer:
▶ Detalle de las
Nota: propiedades de
un elemento
Puedes consultar más información sobre los controles de QT Designer en este enlace: formulario en QT
Designer.
https://doc.qt.io/qtdesignstudio/quick-controls.html
7. Componentes contenedores
de controles
En el desarrollo de interfaces los componentes no están aislados los unos de los otros sino que
se pueden agrupar y pueden interactuar entre ellos.
La forma más común de agrupar estos componentes es a través de los contenedores. Como su
nombre indica, estos elementos contienen y permiten organizar los diferentes elementos que
conforman una interfaz.
Un contenedor se puede entender como una clase de tipo colección usada para gestionar y
administrar cómo interaccionan los componentes entre sí y con el exterior.
Es conveniente resaltar que los contenedores también son componentes y que, por lo tanto,
se pueden colocar dentro de otros contenedores.
En el caso concreto de QT Design Studio, existen componentes preestablecidos que se pue-
den usar en su interfaz de usuario (IU). Para ello, es necesario generar diferentes instancias de
aquellos que se vayan a utilizar en nuestros diseños.
Estos componentes se pueden utilizar para la representación de diferentes elementos como
texto, formas o imágenes sencillas.
44
En algunos diseños de interfaces será necesario utilizar controles más completos y con funcio-
nalidades más complejas como los cuadros de selección o controles deslizantes.
QT Design Studio también ofrece una librería con multitud de componentes, tanto en 2D como
3D, para poder añadirla a las interfaces de usuario que se estén creando.
En el caso de querer construir componentes a medida, es posible establecer las propiedades

que se desee accediendo a las instancias de componentes ya existentes, combinando a conti-
nuación las que se consideren oportunas.
Para la definición de componentes en QT Design Studio se hace uso de archivos con extensio-
nes ui.qml o .qml.
Simplemente se trata de añadir en el interior de estos archivos la información de un componen-
te concreto, como, por ejemplo, componentes Button. En este caso específico donde se quiere
crear un objeto de tipo botón, se puede generar un archivo con el nombre Button.ui.qml.
En el archivo ui.qml se puede controlar el aspecto visual de los componentes que se utilizan en
una interfaz de usuario.
Para la creación de nuevos archivos de componentes, una técnica recomendada es usar asis-
tentes que ofrecen plantillas ya preestablecidas.
Nota:
Puedes consultar más detalles sobre los componentes ya existentes en QT Designer, tanto en
2D como en 3D, en el siguiente enlace:
https://doc.qt.io/qtdesignstudio/quick-preset-components.html#3d-components
8. Ubicación, tamaño y
alineamiento de controles
8.1. Ubicación
La posición de un componente en una interfaz de usuario puede ser absoluta o relativa a
otros componentes.
Los componentes visuales existen en una ubicación concreta dentro del sistema de coordena-
das de la pantalla en un momento dado.
Las coordenadas x e y de un componente visual son relativas a las de su padre visual, teniendo
la esquina superior izquierda la coordenada (0, 0).
En Propiedades > Diseño, se pueden establecer anclas y márgenes para componentes.
Para establecer los anclajes de un componen-
45
te, haremos clic en los botones de anclaje.
Se pueden combinar los anclajes superior

/ inferior, izquierdo / derecho y horizontal /

vertical para anclar componentes en las es-
quinas del componente principal o centrarlos
horizontal o verticalmente dentro del mismo.
Por motivos de rendimiento, solo podemos

anclar un componente a sus hermanos y a su
padre directo. De manera predeterminada, un
componente está anclado a su padre cuando
usa los botones de anclaje. El campo Target
nos permite anclar el componente seleccio-
nado a un hermano suyo. ▶ Anclajes y márgenes
de los componentes.
Para gestionar la cantidad de espacio vacío entre los componentes podemos usar los márge-
nes.
Recuerda:
Debemos tener en cuenta que los márgenes solo tienen significado para los anclajes y no
tienen ningún efecto cuando se utilizan diseños o posicionamiento absoluto.
8.2. Alinear y distribuir componentes

Cuando trabajamos con un grupo de componentes, se pueden seleccionar para alinearlos y
distribuirlos de manera uniforme.
Estas funciones no se pueden aplicar a componentes anclados ya que las posiciones de estos
componentes son fijas. Por razones de escalabilidad, se puede anclar los componentes alinea-
dos y distribuidos cuando su diseño esté preparado.
▶ Alineando y
distribuyendo
componentes.
46
En el campo Alignment seleccionamos los botones para alinear los bordes izquierdo / dere-
cho o superior / inferior de un grupo de componentes con el más alejado del centro del grupo.
Por ejemplo, al alinear a la izquierda, los componentes se alinean con el componente más a la
izquierda.
También podemos alinear los centros horizontales / verticales de los componentes, o ambos.
En el campo Align to podemos elegir entre alinear los componentes con respecto a la selec-
ción, el componente raíz o un componente clave que seleccionamos en el campo Key object
(Objeto clave). El componente clave debe formar parte de la selección.
Por otra parte, podemos distribuir los componentes o el espacio entre ellos. Si los compo-
nentes o el espaciado no se pueden distribuir a valores de píxeles iguales sin terminar con la
mitad de píxeles, recibirá una notificación.
También existe la opción para que Qt Design Studio distribuya los componentes o el espaciado
utilizando los valores más cercanos posibles o modificar su diseño para que los componentes
y el espaciado se puedan distribuir perfectamente.
Al distribuir componentes, seleccionamos los botones en el campo Distribute objects (Distri-

buir objetos) para determinar si la distancia entre los componentes se calcula a partir de sus
bordes izquierdo / derecho o superior / inferior o su centro horizontal / vertical.
Al distribuir el espaciado, seleccionamos los botones en el campo Distribute spacing (Distri-

buir espaciado) para determinar si se distribuye uniformemente dentro de un área objetivo o
en distancias específicas, calculadas a partir de un punto de partida.
Podemos seleccionar la orientación en la que los componentes se distribuyen uniformemente

dentro del área de destino: horizontalmente a lo largo del eje x o verticalmente a lo largo del eje y.
9. Eventos, controladores.
Secuencia de los eventos
Los eventos son la respuesta a posibles acciones sobre los elementos de una interfaz de usua-
rio, como hacer clic en un botón o desplegar un menú.
En el caso particular de QT Designer, los eventos utilizan la clase abstracta propia de QT llama-
da QEvent, que permite crear objetos para manejar estos eventos.
Al igual que otros tipos de eventos, con esta clase se puede gestionar las cosas que suceden
en una aplicación.
Otra particularidad de QEvent es que también permite conocer el posible resultado de una
acción producida de manera externa a la aplicación pero que necesita ser conocida para que
la interfaz la pueda manejar.
Aunque existen muchos tipos de eventos, en QT se pueden manejar los siguientes:
▶ Resize. Permiten modificar los tamaños de ventanas y elementos existentes en una in-
terfaz, así como saber y gestionar cambios en las dimensiones de los diferentes widgets.
47
▶ Paint. Permiten gestionar posibles ocultaciones o recortes que suceden cuando dos o
más widgets se superponen y la interfaz necesita repintar los elementos.
▶ Mouse. Utilizados para gestionar los eventos relacionados con el ratón, como los clic,
doble clic, clic en botón derecho, arrastrar elementos, entre otros.

▶ Key. Usados para gestionar las entradas a través del teclado, es decir, cuando se pulsan
las teclas.
▶ Close. Gestionan las acciones de cierres de elementos de la interfaz, normalmente cuan-

do el usuario hace clic en la “X” de las ventanas.
Al existir varios tipos de eventos diferentes, cada vez que ocurre un evento se hace necesario
utilizar un controlador de eventos.
La función principal de estos controladores es gestionar cada uno de los tipos de eventos
que pueden ocurrir en la interfaz, enviando una respuesta para dar a conocer si el evento se
acepta o se ignora.
Cómo se gestionan los eventos

Cuando ocurre un evento, QT de manera automática crea un objeto de tipo evento mediante
una instancia de QEvent y lo entrega, a través de una llamada a la función event(), a una ins-
tancia particular de QObject (o a cualquiera de sus subclases).
Ciertos tipos de eventos, como QMouseEvent y QKeyEvent, se producen en el sistema de ven-

tanas.
Otros, como el caso de QTimerEvent, pueden provenir de otras fuentes distintas. Incluso exis-
ten otros eventos que tienen su origen en la propia aplicación.
Será misión de los controladores de eventos poder distinguirlos y transmitir las acciones
correctas dependiendo del tipo de evento que se produzca.
Nota:
Puedes consultar más detalles sobre eventos en QT Design en el siguiente enlace:
https://doc.qt.io/qt-5/eventsandfilters.html
48
10. Edición del documento XML
Para la edición del lenguaje XML no es necesaria ninguna herramienta especial.
Una aplicación tan sencilla como Edit en MSDOS o el bloc de notas en entornos Windows permi-
ten la visualización y edición del documento XML.
Otras herramientas añaden el reconocimiento de las etiquetas XML que se utilizan, permitien-
do un desarrollo más sencillo y agradable.
Algunos IDEs permitirán este reconocimiento y también indican si la sintaxis es la correcta o

mostrar cómo queda el resultado del código una vez interpretado o ejecutado, en función del
lenguaje de programación utilizado.
Otra característica que permite un mejor tratamiento del código, es sangrar hacia la derecha
aquellas etiquetas que forman parte de un mismo nivel jerárquico.
Gracias a este sencillo proceso y al hecho de poder agruparlas, ayudará mucho a la compren-
sión del código.
Otra alternativa para editar documentos XML es hacerlo a partir de código generado por herra-
mientas específicas, como MonoDevelop o Glade.
49
Glade es una herramienta libre que ayuda a la creación de interfaces gráficas de usuario. Este
proceso se lleva cabo generando archivos en formato XML y no a través de código.

Una vez que se ha diseñado la interfaz, se puede generar el código correspondiente en XML,
pudiendo éste editarse para conseguir modificaciones concretas en el diseño.
A continuación, se muestra el aspecto general de la herramienta Glade donde se pueden obser-

var las partes en que se compone su interfaz:
▶ Elementos
de la
interfaz de
Glade.
11. Generación de código para

diferentes plataformas
El objetivo de la generación de interfaces utilizando XML se centra en los datos que interesan
del sistema como contenido y no en su aspecto visual.
De esta manera, podemos generar la información necesaria que usará cualquier lenguaje de
programación para consumir esta información.
La técnica de crear aplicaciones orientada a los datos basándose en la estructura de estos da-
tos se conoce como data driven y es precisamente lo que se hace a partir de un documento
XML.
Los pasos a seguir son los siguientes:
▶ Establecer una relación entre la interfaz a desarrollar y la estructura de los datos que
tenemos almacenados en el servidor de base de datos.
▶ Transformar esta información en controles gráficos para que sean cargados y visualiza-
dos por la aplicación o en el navegador.
50
▶ Una vez que la interfaz de usuario sea visible, tener la posibilidad de interactuar con
estos controles y enviar la información introducida desde el navegador en la base de
datos o donde sea necesario.
A partir de obtener el documento XML que recoge la información que queremos usar y que
servirá como base para la creación de la interfaz, podremos usarlo en diferentes plataformas
o lenguajes de programación para que se pueda desarrollar de manera independiente a los
requisitos de cada entorno.
www.cursosccc.com

Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 02

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 02

Cargado por

Copyright:

Formatos disponibles

Desarrollo de

Queda rigurosamente prohibida, sin autori-

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA 29

▶ Identificar los lenguajes de descripción de interfaces basadas en XML.

▶ Conocer herramientas libres y propietarias para crear interfaces.

▶ Saber trabajar sobre documentos XML.

Normalmente se crea el contenido visual y el diseño de la interfaz gráfica a partir de formularios

ware y no tanto en el diseño estático de las interfaces.

De esta manera y partiendo de esa descripción, se puede crear de forma automatizada la

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

El proceso de mapeado en XAML se realiza en tiempo de ejecución. Todos los elementos de la

Un ejemplo básico de XAML podría ser el siguiente:

Puedes consultar más información sobre XAML en su página oficial:

<dialogheader title=”Options” description=”My preferences”/>

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

Dentro de esta etiqueta se utilizan tres atributos:

▶ xmlns: especifica el espacio de nombres de la etiqueta dialog en la que se basará el

desarrollada sea compatible con futuras versiones de los dispositivos.

▶ Presentación. La presentación se entiende como la apariencia de la interfaz.

▶ Contenido. El contenido se refiere a los componentes de los que se compone la interfaz.

▶ Lógica. La lógica hace referencia a la interacción entre el usuario y la interfaz: eventos

Otra de las características de UIML se basa en la traducción automática al lenguaje utilizado

Se puede ver un ejemplo de UIML a continuación:

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

SVG se puede utilizar:

▶ Insertado en una página HTML en la etiqueta <svg>.

▶ Incrustado con las etiquetas: img src, objeto, applet, iframe.

Las siguientes extensiones XML se pueden usar en documentos SVG:

▶ XLink: para referenciar.

▶ XPointer: sintaxis para hacer referencia al elemento.

▶ Hoja de estilo: diseñada por CSS 2 o XSL.

▶ DOM: incluido en SVG y compatible con DOM 2 más manejo de eventos.

Un ejemplo de código en lenguaje SVG podría ser el siguiente:

<? xml version = “1.0” encoding = “utf-8”?>

MXML es un estándar propietario con amplia integración en la tecnología de Adobe. No exis-

Un ejemplo básico de MXML sería el siguiente:

<?xml version=”1.0” encoding=”utf-8”?>

▶ En un entorno común, como puede ser un IDE.

En los siguientes apartados vamos a profundizar en el funcionamiento de la herramienta libre

También puedes consultar más información sobre la herramienta QT Designer en el siguiente

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

▶ Indicadores. Qt Quick Controls ofrece una selección de controles similares a indicado-

acceso a diferentes vistas o subtareas.

▶ Barra de herramientas. La barra de herramientas contiene opciones de acción y con-

A continuación, se muestra el detalle de la vista que contiene los controles utilizados en QT

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

El tipo de propiedades disponibles dependerá de cada

Se muestra a continuación el detalle concreto de esta vis-

En el caso de querer construir componentes a medida, es posible establecer las propiedades

En Propiedades > Diseño, se pueden establecer anclas y márgenes para componentes.

Para establecer los anclajes de un componen-

Se pueden combinar los anclajes superior

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

Por motivos de rendimiento, solo podemos

8.2. Alinear y distribuir componentes

Al distribuir componentes, seleccionamos los botones en el campo Distribute objects (Distri-

Al distribuir el espaciado, seleccionamos los botones en el campo Distribute spacing (Distri-

Podemos seleccionar la orientación en la que los componentes se distribuyen uniformemente

Aunque existen muchos tipos de eventos, en QT se pueden manejar los siguientes:

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

▶ Close. Gestionan las acciones de cierres de elementos de la interfaz, normalmente cuan-

Cómo se gestionan los eventos

Ciertos tipos de eventos, como QMouseEvent y QKeyEvent, se producen en el sistema de ven-

Puedes consultar más detalles sobre eventos en QT Design en el siguiente enlace: