Velocity powered by Wavelink

Edición de elementos de la pantalla

Después de capturar las pantallas del host e importarlas, edite los elementos de la pantalla para que se visualicen como usted quiere.

Por defecto, Velocity aplica el formato predictivo.Puede editar el formato predictivo o reemplazarlo con la modernización rápida y CSS personalizadas.Este tema describe los elementos de la pantalla y explica cómo editar el formato predictivo.Para obtener información sobre cómo personalizar las pantallas con la modernización rápida, consulte Uso de la modernización rápida.

Cada pantalla modernizada consta de múltiples elementos, incluidos el texto de las teclas, los campos del cursor, las etiquetas de datos, los campos, los encabezados y los elementos de menú.

Ver un vídeo relacionado (3:16)

Unos pocos conceptos que deberá comprender antes de empezar a editar pantallas:

•Pantallas predictivas y de plantilla. Después de importar las pantallas a la consola de Velocity, las pantallas negras y verdes se traducen automáticamente para obtener una apariencia más cercana al móvil.Estas pantallas están etiquetadas como "Predictivas", que significa que no se han hecho cambios manuales y que está sujeta al motor de presentación HTML y CSS integrado en Velocity y sus estilos universales.Cuando se hacen cambios a la pantalla, se convierte en una "Plantilla" con nombre, con estilos y formateo único en esa página.Para importar pantallas al proyecto y así editar el estilo de los elementos de la pantalla, consulte Importar pantallas.

•Temas. Los elementos de una pantalla se pueden editar pantalla a pantalla, lo que quiere decir que los cambios que se hacen en un elemento de una pantalla no se aplicarán a todos los elementos de tipo similar.O, mediante el uso de temas, puede crear estilos de formateo para cada tipo de elemento que se aplicará en todas las pantallas.Si se cambia el tema global del proyecto, no se cambia el estado "Predictivo" de la pantalla a "Plantilla". Para obtener más información sobre los temas, consulte Configurar Ajustes del proyecto.

Los temas que se ajustan en la pestaña Tema se reemplazan cuando se editan elementos individuales en la pestaña Pantallas.

•Texto de tecla y zonas de cursor. Con el texto de las teclas, se puede crear una plantilla de pantalla en la que se basarán los cambios de reformateo.Si otras pantallas contienen el texto de clave seleccionado, esa pantalla se reformateará según el estilo que se aplique en la pantalla en la que esté actualmente ubicado el texto clave.También se pueden crear zonas de cursor que establezcan múltiples reglas de plantillas en una única pantalla que cambie la plantilla a medida que los usuarios se desplacen de un campo a otro.

•Etiquetas. Para ayudar con la agrupación de pantallas similares o para localizar más fácilmente una pantalla específica, se pueden utilizar etiquetas para describir el contenido de una pantalla.Puede agregar etiquetas manualmente haciendo clic en el espacio que hay a la derecha del número de la pantalla.Agregue las palabras de etiquetas relevantes, separadas por comas.No se pueden incluir símbolos en las etiquetas.

•Distribución. Coloque los elementos dentro de una misma extensión para que se visualicen juntos.Por ejemplo, coloque una extensión en la etiqueta de datos del nombre de usuario y el campo de texto del nombre de usuario para que aparezcan juntos.

•Tablas. Estructure el diseño de los elementos en filas y columnas agregando una tabla a la pantalla reformateada.Cuando se crea una tabla, ésta consta de celdas contenedoras vacías a las que se pueden arrastrar y soltar elementos.Esto es especialmente útil para presentar múltiples elementos como etiquetas y campos de datos o incluso múltiples elementos de menú.

Cuando se edita una pantalla, puede hacer clic en el botón Vista previa en la parte inferior de la interfaz para abrir un diálogo que muestre la apariencia que tendría la pantalla para los usuarios clientes.

En modo de Vista previa, puede introducir un área de visionado (la relación del aspecto de pantalla que no incluyen el teclado), acercar o alejar (para usarlo solo durante el desarrollo de la pantalla), e introduzca la densidad de resolución de pantalla (normalmente 1, 1.5, 2, 3 o 4) para el tipo de dispositivo que se esté utilizando. Los ajustes de tamaño y densidad de la vista se guardan con el proyecto y se pueden visualizar desde Detalles de la sesión en el dispositivo Cliente.

Para obtener una vista previa de múltiples pantallas en el modo Vista previa, puede pasar por las pestañas haciendo clic en las flechas arriba/abajo del teclado.

Lista de pantallas

Después de importar la captura de pantalla, las pantallas se muestran en la lista de pantallas en el orden en el que el Cliente las capturó.Además, esta lista muestra etiquetas asociadas y la plantilla aplicada.Cambie el orden de las pantallas arrastrando y soltando el número de pantallas de la lista.

Utilice la barra de búsqueda para filtrar la lista de pantallas por etiquetas, texto de pantalla o nombre de pantalla.

•Se pueden utilizar operadores lógicos como + y - para incluir o excluir cosas desde una búsqueda.Por ejemplo: +rojo -verde

•Utilice ^ para buscar texto en la pantalla verde.Por ejemplo:^qty

•Utilice @ para buscar nombres de plantillas.Por ejemplo:@T9

•Utilice # para buscar etiquetas.Por ejemplo:#menu

•Utilice " " en una frase literal.Por ejemplo:"orden de recogida"

•Utilice ? para realizar una búsqueda con un carácter asterisco. Por ejemplo:wil?

•Utilice * para realizar una búsqueda con varios un caracteres asterisco. Por ejemplo:Qty\:*

•Utilice \ frente a los siguientes caracteres si desea buscarlos:

+ - & | ! ( ) { } [ ] ^ " ~ * ? : \ / @ #

Por ejemplo: \#inicio de sesión

Puede eliminar pantallas duplicadas desde la captura de pantalla importada, haciendo clic en el botón Eliminar duplicados en la parte inferior de la lista de pantallas.Velocity detecta automáticamente las pantallas duplicadas.La duplicación se basa en que todos los caracteres y elementos de una pantalla sean los mismos, así como que las zonas del cursor se ubiquen en las mismas posiciones.Después de hacer clic en Eliminar duplicados, aparecerá un diálogo con una lista de duplicados de pantalla detectados en una lista así como una indicación para completar la eliminación.Esta opción está disponible para proyectos de TE.

Pantallas importadas

Las pantallas originales negras y verdes que se han capturado del cliente se muestran en esta columna.Todos los campos de texto de aquí se identifican y se representan con el motor de HTML y CSS integrado de Velocity.

Mientras que la mayoría de acciones de Velocity se realizan desde la Pantalla reformateada y las columnas de elementos de pantallas, se pueden realizar funciones desde aquí, como hacer coincidir plantillas, agregar zonas de cursor y crear elementos nuevos.

Para agregar correspondencia de plantillas de texto de teclas

Para agregar zonas de cursor

Para agregar un elemento

Pantalla reformateada

Esta columna muestra la pantalla importada en la que se ha aplicado el motor de presentación HTML y CSS integrado.Las pantallas negra y verde de la columna Pantalla importada ahora son campos móviles, etiquetas y botones.Se puede seleccionar cada elemento y editar las propiedades desde Columna de elementos de la pantalla.

Plantilla

Asigna un nombre a la plantilla cuando se realizan cambios a una pantalla.Todas las pantallas con la misma plantilla muestran el mismo nombre de plantilla.Si se altera una pantalla con la misma plantilla, se crea una nueva plantilla para evitar realizar cambios en otras pantallas.

Cuando se agrega texto de tecla o se eliminan zonas de cursor, de manera que una plantilla que antes se había emparejado ya no esté emparejada, se crea una nueva plantilla.De igual manera, si realiza cambios en campos individuales, se crea una nueva plantilla.Para combinar una plantilla anterior, se deben eliminar los cambios que se agregaron anteriormente o volver a agregar las zonas de cursor.Al hacerlo, se avisa a los usuarios de los cambios y se les pide que los confirmen.Si se confirma, la plantilla original se reemplaza con la plantilla actual.Cuando se crea una plantilla nueva a partir de los cambios que se han realizado, recibe una prioridad superior a las demás plantillas.Esto significa que las plantillas modificadas siempre anulan las plantillas anteriores.

Si desea volver a la plantilla anterior, haga clic en el botón Eliminar plantilla de la pestaña Pantallas.

Los nombres de plantillas se utilizan cuando se crean ámbitos específicos para pantallas. Al crear un nombre de pantalla, puede asociar secuencias de comandos que se ejecuten sólo cuando se acceda a esta pantalla (y cualquier otra que esté compartiendo el mismo nombre de plantilla).

Se puede cambiar manualmente el nombre de la plantilla, según necesite.

El nombre de la plantilla se usa desde la pestaña Secuencias de comandos para identificar los ámbitos específicos de plantillas para una secuencia de comandos.Utilice este valor, precedido por el símbolo@ .

Agregar tabla

Agrega un elemento contenedor de tablas que le permite arrastrar elementos existentes y colocarlos unos junto a otros dentro de un contenedor con filas y columnas.Las tablas pueden incluir todo tipo de elementos.

Elementos de la pantalla

Esta columna ofrece todos los ajustes y opciones para manipular los elementos formateados.Desde aquí, puede modificar el formateo de elementos, agregar menús contextuales y crear encabezados de pantallas.Sólo debe seleccionar un elemento de la columna Pantalla reformateada y empezar a editar aquí sus propiedades.

Pantalla

Elementos

Menú contextual

Comandos de accesos directos de voz

Cuando se utiliza el cliente de Velocity con Speakeasy, viene cargado con comandos predeterminados.Para invocar estos comandos, deben incluirse en el menú contextual global o de pantalla con el valor que se lista abajo.Estos comandos no requieren gramáticas adicionales.

Subir volumen	{voice:volumeUp}
Bajar volumen	{voice:volumeDown}
Volver a decir	{voice:repeat}
Hablar más rápido	{voice:faster}
Hablar más despacio	{voice:slower}
Calibrar	{voice:calibrate}

Edición de elementos

Los elementos individuales del panel Pantalla reformateada son interactivos, lo que le permite manipular los elementos de estilo y hasta crear nuevos elementos que no se encuentren en la pantalla importada.

Para agregar un elemento de pantalla

Para editar un elemento de la pantalla

Para cambiar el orden de los elementos de la pantalla

Para crear la vista panorámica de un elemento

Para agregar una tabla

¿Le ha resultado útil este artículo?

El tema era:

Incorrecto

Incompleto

No es lo que esperaba

Otro

Información legal y de privacidad

Fondo de pantalla	Establece el color de fondo de toda la pantalla. Esto se puede ajustar por pantallas o usando temas.
Suprimir encabezado	Oculta un encabezado global en las pantallas individuales.Si se crea un encabezado a nivel de tema, es opción le permite ocultarlo en determinadas pantallas.Esta opción no se puede modificar hasta que se establezca un encabezado global.
Elemento de encabezado	Activa un elemento de encabezado que aparece en la parte superior de la pantalla.Cuando se ajusta como Activo, la aplicación le lleva a la pestaña Elementos para aplicar el estilo, ajustar el título de un encabezado o cargar una imagen de logotipo.Esto se puede ajustar por pantallas o usando temas.
Elemento del pie de página	Agrega un pie de página a la parte inferior de la pantalla.Se pueden arrastrar y soltar elementos nuevos o existentes a este elemento.El pie de página y cualquier elemento que incluya se fijan a la parte inferior de la pantalla, aunque se desplace.
Fondo del pie de página	Establece el color de fondo del elemento del pie de página. Esto sólo se puede hacer si está habilitado el Elemento del pie de página.
Eliminar plantilla	Elimina la plantilla de la pantalla seleccionada y resetea el formato de la pantalla.
Eliminar pantalla	Elimina la pantalla seleccionada del proyecto.

Propiedades de la tabla
Filas	Establece el número total de filas que contiene la tabla.De manera predeterminada, se ajusta como 2. Si se reduce el número de filas de una tabla, no se elimina ningún elemento ubicado en las celdas que se eliminan.Estos elementos se eliminan de la tabla y se colocan debajo.
Columnas	Establece el número total de columnas que contiene la tabla.De manera predeterminada, se ajusta como 2. Si se reduce el número de columnas de una tabla, no se elimina ningún elemento ubicado en las celdas que se eliminan.Estos elementos se eliminan de la tabla y se colocan debajo.
Ancho	Define la cantidad de la pantalla que ocupa la tabla en horizontal.De manera predeterminada, se ajusta como 100%. La tabla siempre se justifica a la izquierda.
Color de fondo	Establece el color de fondo de este elemento. Esto se puede ajustar en la tabla o en el nivel de temas.
Color de fila alterno	Ajusta el color de fondo de cada fila de la tabla, empezando por la segunda fila.Esto se puede ajustar en la tabla o en el nivel de temas.
Dinámico	Le permite tratar una tabla como dinámica con los campos seleccionables.Si activa esta opción, tendrá acceso a las opciones Comando navegar hacia arriba, Comando navegar hacia abajo y Seleccionar comando. Las filas seleccionadas se distinguen de las otras para avisar a los usuarios de las filas que se estén utilizando.
Comando Navegar hacia arriba	Envía un valor de pulsación para desplazarse hacia arriba en una fila de una tabla dinámica.
Comando Navegar hacia abajo	Envía un valor de pulsación para desplazarse hacia abajo en una fila de una tabla dinámica.
Seleccionar comando	Envía un valor de pulsación para seleccionar el campo actual para introducir datos en una tabla dinámica.
Propiedades del elemento
Tipo de elemento	Especifica el tipo o clase de elemento.Cuando se establece un tema, los elementos del mismo tipo están sujetos al mismo estilo.Sólo se pueden editar tipos de elementos por pantallas. Los tipos de elementos disponibles incluyen: •Encabezado. El texto de los encabezados que identifica la pantalla que está activa actualmente.No se puede agregar un encabezado a elementos panorámicos. •Etiqueta de datos. El texto del subtítulo estático que se utiliza para etiquetar los campos. Este elemento le permite cambiar la etiqueta de una pantalla reformateada, pero no modificará la versión negra y verde de esta etiqueta. •Valor de datos. El texto del subtítulo estático que se utiliza para etiquetar los campos. El texto para este valor no se puede modificar. •Campo. Campos de texto vacíos en los que los usuarios finales pueden introducir texto manualmente. •Elemento de menú. Botones que navegan los usuarios finales en diferentes pantallas. No se puede agregar un elemento de menú a elementos panorámicos. •Botón. Botones que navegan los usuarios finales en diferentes pantallas. Son similares a los Elementos de menú, pero se formatean para mostrarse en pantallas.Estos se pueden agregar a elementos panorámicos y a pies de página. Cada elemento tiene sus propios estilos predeterminados asociados, que vienen establecidos por el formateo predictivo de Velocity. Para obtener más información, consulte Formateo predictivo.
Eliminar\Eliminar todo	•Si selecciona Eliminar, se elimina el elemento de pantalla seleccionado de la pantalla preformateada.Si selecciona Eliminar todo, se eliminan todos los elementos de la pantalla preformateada.Para agregar un elemento de pantalla, consulte los pasos siguientes.Esto no se puede ajustar en el nivel de temas.
Propiedades del banner
Título	Crea un elemento de encabezado que aparece en la parte superior de cada pantalla.El texto que se introduzca aquí aparecerá dentro del elemento.Cuando se carga también una imagen, el texto de este campo aparece a la derecha de la imagen del logotipo.Esta opción sólo aparece cuando se habilita Elemento báner.
Imagen	Carga una imagen de logotipo y la coloca en la parte superior de cada pantalla.Las imágenes no pueden superar los 100 píxeles de ancho ni los 60 de alto.Esta opción sólo aparece cuando se habilita Elemento báner.Si desea agregar una imagen en algún lugar que no sea el banner, cree un elemento de imagen y utilice el diseño de las Propiedades del elemento.
Propiedades de fuente
Negrita	Pone el texto en negrita.Por defecto, no está seleccionado.
Cursiva	Pone el texto en cursiva.Por defecto, no está seleccionado.
ç	Subraya el texto del elemento.Por defecto, no está seleccionado.
Alineación	Determina si el texto se alinea a la derecha, la izquierda o se centra.
Tamaño	Ajusta el tamaño del texto de la fuente del elemento.Esto se puede ajustar de 10 a 20 puntos.El valor predeterminado depende del tipo de elemento seleccionado.
Familia	Especifica la familia de fuentes que se utilizan para el elemento.Cuando se establece un tema, los elementos del mismo tipo utilizan el mismo estilo de letra. •Serif •Sans-serif •Monospace
Color de fondo	Establece el color de fondo de este elemento.
Color de fuente	Ajusta el color del texto visible de este elemento.
Texto	El texto que aparece para este elemento en la pantalla reformateada.Este ajuste no reemplaza el texto de las pantallas negras y verdes estándar.Esto no se puede ajustar en el nivel de temas.
Comando	Asocia una pulsación de tecla específica con un elemento del menú. Cuando se selecciona, el comportamiento asociado con esa pulsación se envía al perfil del host.Por ejemplo, en el servidor de prueba, el comando de un elemento de menú puede ser el número `3`. Cuando se envía, el usuario accede a la pantalla siguiente.Esto no se puede ajustar en el nivel de temas. Entre los comandos aceptados se incluyen las pulsaciones de teclas siguientes: •`F1` a `F24` •`CTRL-[una letra, mayúscula o minúscula]` •Valores hexadecimales Keycode (por ejemplo, `{hex:E03B}`para `F1`), sin una `\` o con `0x` antes del valor hexadecimal •Macros (por ejemplo: `{hex:E050}{hex:E04D}{pause}{Enter}` para "abajo," "derecha," una pausa de 250 milisegundos y luego pulsaciones de "Intro") Para obtener una lista de valores hexadecimales aceptados, consulte Códigos de teclado y Comandos.
Propiedades de la imagen
Alineación	Alinea la imagen dentro del elemento principal.
Color de fondo	Color de fondo que se muestra si la imagen es transparente.
URL	La URL de la imagen, incluido el nombre del archivo y la extensión.La ruta a la URL puede utilizar 3 formatos: •res://velocity/resources/ Una ruta a un recurso asociado con el proyecto. •file:/// Una ruta a un archivo almacenado en algún lugar del dispositivo.Tenga en cuenta que esto utiliza una barra lateral adicional. •http:// Una ruta a un archivo almacenado en un servidor remoto al que se puede acceder utilizando http. Hay 3 tipos de variables que puede utilizar en la URL de la imagen: •Una variable componente utiliza el texto exacto de la pantalla original, en formato {componente:la ID del componente}. Por ejemplo: res://velocity/resources/{component:added_636511066245633526}.jpg utiliza el texto que se encuentra en el componente como el nombre de la imagen, independientemente del texto de cada página. •Una variable de pantalla especifica la fila, la columna y la longitud del texto en formato {pantalla:fila,columna:longitud}. Por ejemplo: http://172.27.0.21/warehouse/images/{screen:4,1:12}.png utilizaría 12 caracteres empezando en la línea 4 columna 1 de la pantalla actual como nombre del archivo. •Una variable de secuencia que devuelve una secuencia de texto, en formato {secuencia:función()}. Por ejemplo: file:///{secuencia:FindImage()} utiliza la ruta y el nombre de archivo que devolvió el FindImage de la secuencia. Las variables se pueden utilizar para el nombre del archivo o para otras partes de la URL, y, en caso necesario, puede utilizar varias variables en la URL.
Id. de componente	La ID del componente asociada con el elemento de la imagen.
Propiedades del teclado
Mostrar teclado	Ajusta el comportamiento para que emerja el teclado cuando se selecciona un elemento del campo.Esto no se puede ajustar en el nivel de temas. •Mostrar. El teclado aparece automáticamente cuando se usa el tabulador para acceder al campo. •Ocultar. Si el teclado está activo, automáticamente se oculta cuando se usa el tabulador para acceder al campo. •Deshabilitar. Ni los teclados personalizados ni los predeterminados se pueden utilizar cuando se usa el tabulador hasta el campo.
Teclado vertical	Ajusta el teclado personalizado predeterminado que se utilizará cuando una pantalla se muestre en modo vertical.Esto no se puede ajustar en el nivel de temas. Si se deja en blanco, se utiliza el teclado personalizado predeterminado, que es el teclado que aparece más arriba en la lista del Panel Teclados de la pantalla de Teclados.
Teclado horizontal	Ajusta el teclado personalizado predeterminado que se utilizará cuando una pantalla se muestre en modo horizontal.Esto no se puede ajustar en el nivel de temas. Si se deja en blanco, se utiliza el teclado personalizado predeterminado, que es el teclado que aparece más arriba en la lista del Panel Teclados de la pantalla de Teclados.
Id. de componente	Especifica el identificador del campo.Este campo no se puede modificar y se asigna automáticamente tras la creación del elemento.El objetivo de este valor es de referencia en secuencias de comandos que afectan a campos específicos.
Id. de ámbito	Especifica el ámbito de pantalla y de campo.Esto no se puede modificar y se asigna inmediatamente tras la creación del elemento. El valor aquí consta de un nombre de plantilla y una ID de componente, separados por dos puntos y precedido por el símbolo `@`. Debe copiar y pegar el valor de este campo cuando ajuste un ámbito específico desde la pestaña Secuencias de comandos.

Agregar nuevo	Agrega un nuevo elemento de menú contextual, lo que le permite especificar un Título del elemento de menú y un Comando de acceso directo. Los elementos del menú no se pueden agregar a nivel de tema.
Agregar voz	Habilita las capacidades texto a voz y voz a texto para el elemento del menú.Además, esto agrega el campo Frase coincidente, que requiere una macro de voz en Comandos de acceso directo para completar una acción de voz específica.
Elemento de menú global	Especifica el elemento del menú como específico de una pantalla o global.Si se ajusta como Activado, el elemento del menú aparece en el menú contextual de todas las pantallas.Si se ajusta como Desactivado, el elemento del menú aparece sólo en el menú contextual de la pantalla actual.
Elementos del menú	Crea y edita elementos de menú para el menú contextual. Desde esta sección puede configurar los ajustes siguientes: •Título del elemento del menú. El texto que aparece como etiqueta para un elemento del menú contextual. •Comando de acceso directo. Asocia una pulsación de tecla específica con un elemento del menú. Para ejemplos de comandos aceptados, consulte Códigos de teclado y Comandos. •Eliminar. Elimina el elemento del menú seleccionado. •Heno. Aplica los cambios al menú contextual, que son visibles en el panel Pantalla reformateada.
Voz habilitada	Habilita el uso de frases activadas por voz para acceder a las funciones del menú contextual.Esto hace visible el campo Frase coincidente.
Frase correspondiente	Establece el comando de voz para que active el elemento del menú.Aquí se puede introducir cualquier frase, siempre que el cliente la pueda pronunciar.Las frases coincidentes sólo se pueden crear para los elementos de menú contextuales. Cuando se detecta una frase que coincida, automáticamente se ejecuta cualquier macro, texto o secuencia de comandos que tenga asignada en el campo Comandos de acceso directo.