Campo de firma

www.altova.com Expandir/Contraer todos Imprimir este apartado Página anterior Subir un nivel Página siguiente

Inicio >  Controles y eventos de control > Controles >

Campo de firma

Los controles Campo de firma sirven para almacenar la firma del usuario final en forma de archivo gráfico. Por ejemplo, imagine que diseña una solución para servicios de mensajería donde debe utilizarse una firma para confirmar el acuse de recibo. Cuando el usuario firme en el campo de firma, la firma se escribe en una imagen codificada en base64 y se guarda en un nodo de la fuente de página. Cuando se guarde la fuente de página, los datos de la imagen base64 se guardan en el nodo designado para ello.

 

A continuación puede ver las propiedades predeterminadas de las imágenes de las firmas. El color de fondo será el color inverso del color de fondo de la página. El color de la firma propiamente dicha es el color de fondo de la página. El ancho de la imagen es menor que las dimensiones de la pantalla del dispositivo. El alto de la imagen es la mitad de su ancho. Estos valores se calculan por medio de expresiones XPath tal y como se explica más abajo en la tabla, que también incluye las propiedades que puede utilizar para personalizar la configuración.

 

Propiedad de la firma

Valor predeterminado

Personalizar valor con la propiedad del control...

Color de la firma

$MT_PageBackgroundColor

Color del texto

Color de fondo de la firma

mt-invert-color ($MT_PageBackgroundColor)

Color de fondo

Ancho de la imagen de la firma

min ($MT_CanvasX, $MT_CanvasY)

Creación de firma: ancho

Alto de la imagen de la firma

min ($MT_CanvasX, $MT_CanvasY) div 2

Creación de firma: alto

 

Esta es la configuración básica que necesita de un campo de firma:

 

un enlace con la fuente de la página, es decir, el nodo de la fuente de página donde se debe almacenar los datos de la imagen de la firma. Arrastre un nodo de la fuente de página hasta el control para crear/modificar el enlace con la fuente de página. Elimine el enlace con la fuente de página para borrar la asociación (ver notas más abajo).
las propiedades Creación de firma: ancho y Creación de firma: alto, que especifican las dimensiones de la imagen que se creará.
las propiedades Color del texto y Color de fondo, que especifican el color del texto y el color de fondo de la firma.
alguna acción Guardar que guarde los datos de la imagen de la firma en la fuente de página. Hasta que no se ejecuta dicha acción los datos solamente se almacenan en la estructura XML temporal.

 

 

Haga clic para expandir/contraerNotas
Cuando el control se asocia con un nodo de la fuente de datos (vínculo con la fuente de página), al pasar el cursor por el control (en la vista Diseño de páginas) aparece el nodo asociado.
Todos los vínculos con fuentes de página de la estructura de fuentes de página aparecen en negrita. Los nodos de la estructura que no son vínculos de fuente de página no están en negrita.
Al pasar el cursor por el vínculo con la fuente de página en la estructura del diseño aparece información sobre el control asociado.
Para eliminar una asociación con el nodo de la fuente de datos (y por tanto los datos del control) haga clic con el botón derecho en el control (en la vista Diseño de páginas) y haga clic en Eliminar vínculo con la fuente de la página.
Para restaurar un estilo o una propiedad (en el panel Estilos y propiedades), seleccione el estilo/la propiedad y haga clic en Restaurar en la barra de herramientas del panel.
Los valores de varias propiedades se pueden configurar usando expresiones XPath. Así podrá utilizar valores dinámicos, es decir, valores calculados o tomados de los nodos de la fuente de datos en tiempo de ejecución. Para crear una expresión XPath, haga clic en el botón Editar XPath de la barra de herramientas del panel Estilos y propiedades.
Para editar la expresión XPath de un estilo o de una propiedad (en el panel Estilos y propiedades), seleccione el estilo/la propiedad y haga clic en el botón Editar XPath de la barra de herramientas del panel.
Para copiar un control y pegarlo en otra ubicación del diseño, pulse Ctrl mientras arrastra el control hasta su nueva posición.
Para asignar propiedades a un control, defina clases para el control (con la propiedad Clase CSS del explorador) y después asigne reglas a las clases en un archivo CSS externo (que se elije en el cuadro de diálogo Configuración del explorador).
Las propiedades CSS de los controles se pueden definir en el panel Estilos y propiedades y en archivos CSS externos, pero las que se definan en el panel Estilos y propiedades tienen prioridad.

 

Permitir al usuario editar una firma

La firma del usuario final se crea en forma de imagen en un nodo de la fuente de la página, de modo que el usuario final solamente puede añadir datos a un dibujo de firma que ya esté empezado. Si fuera necesario editar la imagen (si, por ejemplo, el usuario no está conforme con la firma dibujada), entonces los datos de la imagen deben eliminarse del nodo (o el nodo debe eliminarse) y el usuario final debe volver a dibujar la firma. La manera más sencilla de implementar esta característica es crear un control Botón que permita eliminar el nodo. A continuación explicamos cómo:

 

1.Cree un botón junto al control Campo de firma (imagen siguiente).
2.Añada la acción Eliminar nodo como evento AlHacerClic del botón y defina el nodo de la fuente de página de la firma como el nodo que se debe eliminar.

Haga clic para expandir/contraer

3.Utilice el simulador para ver si el botón funciona correctamente. Por ejemplo, en la simulación de la imagen anterior, la firma se dibuja y los datos de la imagen se guardan en el nodo Signature.
4.La imagen siguiente se tomó después de que se hiciera clic en el botón. Observe que el nodo se eliminó y el campo de firma aparece en blanco.

Haga clic para expandir/contraer

5.Si la firma se vuelve a dibujar en el campo de firma, entonces se vuelve a crear el nodo Signature con los datos de la imagen de la nueva firma.

 

 

Nota:si lo prefiere, también puede configurar la acción del botón para que actualice el nodo de la fuente de página de la firma con una cadena vacía (consulte el apartado sobre la acción Actualizar nodo). Esto quitaría los datos de la imagen del nodo y borraría el contenido del campo de firma, pero el nodo propiamente dicho no se eliminará.

 

Eventos del control Campo de firma

No hay ningún evento asociado al control Campo de firma.

 

Propiedades del control Campo de firma

Las propiedades del control se pueden editar y consultar en el panel Estilos y propiedades y se describen en este apartado por orden de aparición en el panel.

 

Click to expand/collapseNombre

Se utiliza para hacer referencia al control desde otras partes de la página o del proyecto. Haga doble clic dentro del campo de valor para editar esta propiedad.

 

Haga clic para expandir/contraerVisible

Una expresión XPath que debe dar como resultado true() o false(). Si da como resultado false(), entonces el control no estará visible. Si la expresión da como resultado true() o devuelve algún otro valor, entonces el control estará visible. El valor predeterminado es true(). Haga doble clic en el campo de valor o clic en el botón XPath para escribir o editar la expresión XPath. Esta propiedad se puede usar para presentar en pantalla un objeto visible dependiendo de si la expresión XPath da como resultado true(). Es decir, la presentación en pantalla del objeto se puede configurar de forma dinámica, según el contenido o la estructura de los datos.

 

Nota:  para más información sobre la visibilidad de columnas/filas distribuidas consulte la sección Propiedades de tabla.

 

Nota:  la variable $MTControlValue no se puede usar para evaluar la propiedad Visible. Si la utiliza se producirá un error de validación.

 

Haga clic para expandir/contraerHabilitado/Editable

El control se habilita o se puede editar dependiendo del valor de esta propiedad: true (habilitado) o false (deshabilitado). El valor se puede introducir directamente (seleccionándolo en el cuadro combinado o haciendo doble clic en el campo de valor e introduciendo el valor deseado). El valor también puede ser una expresión XPath que dé como resultado true o false. Por lo general la expresión XPath de esta propiedad comprobará la presencia o el valor de un nodo. Si la expresión da como resultado true, el control se habilitará.

 

Haga clic para expandir/contraerColor del texto

Define el color del texto del control cuando éste está habilitado. El color se puede seleccionar de varias formas:

 

Haciendo clic en la paleta de colores.
Seleccionando un color en la lista desplegable del cuadro combinado.
Haciendo doble clic en el campo de valor e introduciendo un código de color (p. ej. #FF0000) o haciendo clic en el botón XPath de la barra de herramientas e introduciendo una expresión XPath para generar el código del color.

 

Nota: los controles pueden habilitarse o deshabilitarse en función del contexto. Por ejemplo, si en un formulario sobre datos personales, a la pregunta de si tiene un seguro de vida, el usuario contesta afirmativamente, entonces se pueden habilitar los campos donde debe introducir los datos sobre el seguro de vida. De lo contrario, estos campos estarán deshabilitados. Para habilitar/deshabilitar un campo, use la propiedad Habilitado/Editable del correspondiente control. Para establecer el color del texto del control cuando éste está deshabilitado use la propiedad Color del texto (Deshabilitado).

 

Haga clic para expandir/contraerColor de fondo

Define el color de fondo que tiene el objeto cuando está habilitado. El color se puede definir de varias formas:

 

haciendo clic en la paleta de colores.
seleccionando un color en la lista desplegable del cuadro combinado; para seleccionar el color de fondo del control, seleccione el elemento Color de fondo del control en el cuadro combinado.
haciendo doble clic en el campo de valor e introduciendo un código de color (p. ej. #FF0000) o haciendo clic en el botón XPath de la barra de herramientas e introduciendo una expresión XPath para generar el código del color. Para aplicar el color de fondo del control, introduzca la expresión XPath "control".

 

Nota:   para hacer que el color de fondo de la celda sea el mismo que el del control en el que se encuentra la celda, (i) seleccione Color de fondo del control en el cuadro combinado de la propiedad o (ii) introduzca la expresión XPath "control" en el campo del valor de la propiedad.

 

Nota:   los controles pueden habilitarse o deshabilitarse en función del contexto. Por ejemplo, si en un formulario sobre datos personales, a la pregunta de si tiene un seguro de vida, el usuario contesta afirmativamente, entonces se pueden habilitar los campos donde debe introducir los datos sobre el seguro de vida. De lo contrario, estos campos estarán deshabilitados. Para habilitar/deshabilitar un campo, use la propiedad Habilitado/Editable del correspondiente control. Para establecer el color de fondo que debe tener el control cuando está deshabilitado use la propiedad Color de fondo (Deshabilitado).

 

Haga clic para expandir/contraerSuavizado de contorno de imágenes

Define si se aplica el suavizado de contorno cuando se crea la imagen asociada al control. El suavizado de contorno es una técnica utilizada para eliminar bordes con aspecto escalonado de las imágenes. La propiedad puede tener el valor true o false. El valor predeterminado es false.

 

Nota: si los colores de la imagen se van a convertir más tarde, aconsejamos utilizar el valor false en esta propiedad. Esto se debe a que la información de la imagen original sobre colores para el suavizado de contorno de imágenes no se puede convertir de forma fiable en la combinación de colores de destino. En los clientes web el valor de esta propiedad se omite y siempre se utiliza suavizado de contorno de imágenes.

Haga clic para expandir/contraerCreación de firma: ancho

El número de píxeles que especifica el ancho de la imagen de la firma. Es el ancho del lienzo donde se dibuja la firma. Por ejemplo, el valor 400 asignará un ancho de 400 píxeles a la imagen de firma. Recuerde que se trata del ancho con el que se crea la imagen y no necesariamente el ancho que tendrá la imagen cuando se represente en el dispositivo móvil. El ancho de la imagen cuando se represente en el dispositivo móvil se ajustará al ancho definido en la propiedad Ancho del control. Por ejemplo, si la imagen de firma tiene un ancho de 400 píxeles y la propiedad Ancho del control tiene el valor 80%, entonces en un dispositivo con 1000 píxeles de ancho, la imagen se ajustará a un ancho de 800 píxeles (es decir, 80% del ancho del dispositivo).

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Haga clic para expandir/contraerCreación de firma: alto

El número de píxeles que especifica el alto de la imagen de la firma. Es la altura del lienzo donde se dibuja la firma. Por ejemplo, el valor 200 asignará un alto de 200 píxeles a la imagen de firma. Recuerde que se trata del alto con el que se crea la imagen y no necesariamente el alto que tendrá la imagen cuando se represente en el dispositivo móvil. El alto de la imagen cuando se represente en el dispositivo móvil se ajustará a la altura definida en la propiedad Alto del control. Por ejemplo, si la imagen de firma tiene una altura de 300 píxeles y un ancho de 400 píxeles y la propiedad Ancho del control tiene el valor 80%, entonces en un dispositivo con 1000 píxeles, la imagen se ajustará a un ancho de 800 píxeles (es decir, 80% del ancho del dispositivo) y a una altura de 600 píxeles (manteniendo la relación de aspecto de la imagen).

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Haga clic para expandir/contraerAlineación horizontal

Establece la alineación horizontal a la izquierda, en el centro o a la derecha. El valor predeterminado es center. También puede configurar el valor con una expresión XPath (lo cual permite generar el valor de forma dinámica).

 

Haga clic para expandir/contraerAncho del control

Establece el ancho del control. Seleccione un valor del cuadro combinado:

 

rellenar_principal: ajusta el ancho del control al ancho del elemento principal (por ejemplo, la celda de tabla o la página donde se incluye el control).
ajuste_automático_línea: ajusta el ancho del control al contenido. Cuando se selecciona este valor, se habilita la propiedad Ancho máximo del control.
valor porcentual: un porcentaje del ancho de la página. Seleccione un valor de la lista o escriba un valor directamente.
valor en píxeles: seleccione un valor en píxeles de la lista desplegable o escriba un valor directamente.

 

En efecto, fill_parent genera el ancho máximo, mientras que wrap_content crea el ancho mínimo.

 

El valor predeterminado para todos los controles es fill_parent, excepto para estos:

 

Image y Chart: el valor predeterminado de estos controles es wrap_content.
Geolocation Map: el valor predeterminado es el menor de los valores de $MT_CanvasX y $MT_CanvasY. Estas dos variables dinámicas dan, respectivamente, el ancho y el alto del área de visualización del dispositivo. El valor predeterminado de ambos controles es el mismo (en ambos casos, el menor de los valores de $MT_CanvasX y $MT_CanvasY), por lo que el área de visualización del control siempre será un cuadrado cuyo lado es igual a min($MT_CanvasX, $MT_CanvasY).

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Clic para expandir/contraerAncho de control máximo

Esta propiedad solamente está disponible cuando la propiedad Ancho del control del control tiene el valor ajuste_automático_línea. La propiedad Ancho de control máximo establece el ancho máximo del control. Seleccione un valor del cuadro combinado de la propiedad. Estos son los valores disponibles:

 

valor porcentual: un porcentaje del ancho de la página. Seleccione un valor de la lista desplegable o escriba un valor directamente.
valor en píxeles: seleccione un valor en píxeles de la lista desplegable o escriba un valor directamente.

 

Haga clic para expandir/contraerAlto del control

Establece el alto del control. Seleccione un valor del cuadro combinado:

 

rellenar_principal: ajusta el alto del control al elemento principal (por ejemplo, la celda de tabla o la página donde se incluye el control).
ajuste_automático_línea: ajusta el ancho del control al contenido.

 

En realidad, el valor rellenar_principal crea un alto máximo, mientras que ajuste_automático_línea crea un alto mínimo. El alto predeterminado de todos los controles es ajuste_automático_línea.

 

Haga clic para expandir/contraerMargen

Indica el margen máximo del control en relación a los objetos que lo rodean o al borde del objeto que lo contiene. Seleccione un valor en píxeles de la lista desplegable del cuadro combinado o haga doble clic en el campo del valor para escribir un valor en píxeles. La configuración definida se aplicará a los cuatro lados del control. Para definir un margen distinto para alguno de los cuatro lados, expanda la propiedad Margen para mostrar las propiedades individuales de ancho (izquierda, derecha, superior e inferior) e indique el valor deseado. Por ejemplo, si indica que el Margen es de 6px y el Margen inferior es de 12px, entonces el margen será de 6px en los lados izquierdo, derecho e inferior, y de 12px en el lado inferior.

 

Si introduce valores en píxeles para las propiedades que definen la longitud de un control, debe tener en cuenta que en dispositivos iOS estos valores se leerán como puntos del espacio de coordenadas del área de visualización. El espacio de coordenadas del área de visualización es el lienzo donde se dibujan los componentes de diseño y un punto es la unidad de longitud en este espacio (es decir, aquí los puntos no equivalen a la unidad tipográfica igual a 1/72 de una pulgada). El dispositivo iOS asigna automáticamente puntos del espacio de coordenadas del área de visualización a píxeles del espacio de coordenadas del dispositivo. Al asignar los valores de esta manera (de valores del área de visualización a valores del dispositivo) garantiza que los componentes de diseño conserven la misma relación de tamaño tanto con el lienzo como entre ellos, independientemente de la resolución del dispositivo iOS o de qué unidades se usen.

 

En MobileTogether Designer puede utilizar las variables dinámicas $MT_CanvasX y $MT_CanvasY para averiguar las dimensiones del área de visualización (lienzo de dibujo) actual y obtener así distancias relativas a esas dimensiones. Para dispositivos iOS las variables devuelven valores que se calculan de esta manera: las dimensiones en píxeles del espacio actual de coordenadas del dispositivo se convierten (usando un factor de conversión apropiado) en valores de puntos del espacio de coordenadas del área de visualización. Las variables devuelven estos valores de puntos en píxeles para utilizarlos en el diseño. Por ejemplo, si desea que una imagen sea la mitad del ancho del área de visualización, basta con asignarle un ancho en píxeles igual a $MT_CanvasX * 0.5; la expresión XPath para el ancho de esta imagen sería concat($MT_CanvasX * 0.5, 'px').

 

Clic para expandir/contraerHoja de estilos

La propiedad Hoja de estilos establece qué hoja de estilos se debe usar para el control. La lista desplegable del cuadro combinado de esta propiedad incluye todas las hojas de estilos creadas por el usuario definidas en el proyecto. Seleccione la hoja de estilos que desea usar para el control. Si lo prefiere, también puede usar una expresión XPath para seleccionar la hoja de estilos. La ventaja de usar una XPath es que la selección de la hoja de estilos puede ser condicional (véase Aplicar hojas de estilos creadas por el usuario). Para más información consulte la sección Hojas de estilos.

 

 


© 2019 Altova GmbH