Velocity powered by Wavelink

Editando Elementos da Tela

Depois de capturar as telas do host e importá-las, edite os elementos da tela para que eles fiquem como você deseja.

Por padrão, o Velocity aplica formatação preditiva. Você pode editar a formatação preditiva ou sobrescrevê-la com rápida modernização e CSS personalizado. Este tópico descreve os elementos da tela e explica como editar a formatação preditiva. Para obter informações sobre como personalizar telas usando a modernização rápida, consulte Usando Modernização Rápida.

Cada tela modernizada consiste em vários elementos, incluindo texto de tecla, campos de cursor, rótulos de dados, campos, cabeçalhos e itens de menu.

Assista a um vídeo relacionado (3:16)

Alguns conceitos que você precisa entender antes de começar a editar as telas:

•Telas preditivas e de modelo. Depois de importar telas para o Velocity Console, as telas preto e verde são automaticamente traduzidas para uma aparência amigável para dispositivos móveis. Essas telas são rotuladas como "Preditiva", o que significa que não são afetadas por quaisquer alterações manuais e estão sujeitas ao mecanismo de renderização HTML e CSS embutido do Velocity e seus estilos universais. Quando alterações manuais são feitas em uma tela, ela é denominada "Modelo", com estilos e formatação únicos para essa página. Para importar telas para o seu projeto para editar estilos de elementos de tela individuais, consulte Importando telas.

•Temas. Os elementos em uma tela podem ser editados por tela, o que significa que as alterações feitas em um único elemento de tela não serão aplicadas a todos os elementos de um tipo similar. Ou, por meio do uso de temas, você pode criar estilos de formatação para cada tipo de elemento que é aplicado em todas as telas.Alterar o tema global para um projeto não altera o status de uma tela de "Preditiva" para "Modelo". Para obter mais informações sobre temas, consulte Configurando definições do projeto.

Os temas definidos na guia Tema serão substituídos quando os elementos individuais forem editados na guia Telas.

•Texto de tecla e zonas do cursor. Por meio do uso do texto da tecla, você pode criar um modelo de tela no qual as alterações de reformatação se baseiam. Se outras telas contiverem o texto de tecla selecionado, essa tela será reformatada automaticamente para os estilos aplicados na tela em que o texto de tecla está atualmente localizado. Você também pode criar zonas de cursor para estabelecer várias regras de modelo em uma única tela que alteram o modelo à medida que os usuários se movem de campo para campo.

•Tags. Para auxiliar no agrupamento de telas semelhantes ou para localizar mais facilmente uma tela específica, você pode usar tags para descrever o conteúdo de uma tela. Você pode adicionar tags manualmente clicando no espaço à direita do número da tela.Adicione todas as palavras de tag relevantes, separadas por uma vírgula. Não é possível incluir símbolos em uma tag.

•Abrangência. Coloque os elementos dentro de uma extensão para exibi-los juntos. Por exemplo, coloque um espaço ao redor do rótulo de dados do nome de usuário e do campo de texto do nome de usuário para que eles apareçam lado a lado.

•Tabelas. Estruturam o layout de elementos em linhas e colunas adicionando uma tabela à tela reformatada. Quando uma tabela é criada, ela consiste em células vazias, para as quais você pode arrastar e soltar elementos. Isso é especialmente útil para apresentar vários elementos, como rótulos de dados e campos, ou mesmo vários itens de menu.

Ao editar uma tela, você pode clicar no botão Visualizar, na parte inferior da IU, para abrir uma caixa de diálogo que exibe como a tela aparecerá aos usuários do Client.

No modo Visualizar, você pode inserir a área visível (proporções de tela que não incluem o teclado), ampliar ou reduzir (para uso apenas durante o desenvolvimento da tela) e inserir a densidade de resolução da tela (geralmente 1; 1,5; 2; 3; ou 4) para o tipo de dispositivo em uso. As configurações de tamanho e densidade da exibição são salvas com o projeto e podem ser visualizadas a partir dos Detalhes da Sessão no dispositivo Client.

Para visualizar várias telas no modo Visualizar, você pode navegar por elas clicando nas setas ascendente/descendente no teclado.

Lista de telas

Depois de importar uma captura de tela, as telas são mostradas na lista de tela na ordem em que foram capturadas do Client. A lista exibe tags associadas e o modelo aplicado. Reordene as telas arrastando e soltando o número da tela na lista.

Use a barra de pesquisa para filtrar a lista de telas com base nas tags, no texto da tela ou no nome da tela.

•Use operadores lógicos como + e - para incluir ou excluir itens de uma pesquisa. Por exemplo: +vermelho -verde

•Use ^ para pesquisar texto na tela verde. Por exemplo: ^qtd

•Use @ para pesquisar nomes de modelos. Por exemplo: @T9

•Use # para pesquisar tags.Por exemplo: #menu

•Use " " em torno de uma frase literal. Por exemplo: "coletar pedido"

•Use ? para executar uma pesquisa de caractere curinga único. Por exemplo: wil?

•Use * para realizar uma pesquisa com vários caracteres curingas.Por exemplo: Qtd\:*

•Use \ na frente dos seguintes caracteres se desejar procurá-los:

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

Por exemplo: \#login

Você pode excluir as telas duplicadas de uma captura de tela importada clicando no botão Remover Duplicatas na parte inferior da lista de telas. O Velocity detecta automaticamente quais telas estão duplicadas. A duplicação se dá quando todas as características e elementos de uma tela são iguais e as zonas de cursor estão localizadas nas mesmas posições. Depois de clicar em Remover Duplicatas, será exibida uma caixa de diálogo com o número de duplicatas detectadas na lista e um aviso para concluir a exclusão. Esta opção está disponível para projetos TE

Tela importada

As telas originais em preto e verde capturadas da tela do Client serão exibidas nesta coluna.Todos os campos de texto aqui são identificados e renderizados usando o mecanismo HTML e CSS embutido do Velocity.

Apesar de a maioria das ações no Velocity ser realizada na Tela reformatada e nas colunas Elemento de tela, você ainda pode realizar funções aqui como corresponder modelos, adicionar zonas de cursos e criar novos elementos.

Para adicionar texto de tecla para correspondência de modelos

Para adicionar zonas de cursor

Para adicionar um elemento

Tela reformatada

Esta coluna mostra a tela importada com o mecanismo de renderização HTML e CSS embutido aplicado. As telas preta e verde na coluna Tela importada agora tem campos, rótulos e botões que se adaptam a dispositivos móveis.Você pode selecionar cada elemento e editar suas propriedades na coluna Elementos de tela.

Modelo

Atribui um nome ao modelo quando as alterações são feitas em uma tela. Todas as telas com o mesmo modelo exibem o mesmo nome de modelo. Se outra tela com o mesmo modelo for alterada, um novo modelo será criado para evitar alterações em outras telas.

Quando o texto de tecla for adicionado ou as zonas do cursor forem removidas, e isso fizer com que um modelo anteriormente pareado não corresponda mais, um novo modelo será criado. Da mesma forma, se você executar qualquer alteração em campos individuais, isso criará um novo modelo. Para corresponder a um modelo anterior, as alterações adicionadas anteriormente devem ser removidas ou as zonas de cursor adicionadas novamente. Ao fazê-lo, os usuários são alertados sobre a alteração e solicitados a confirmar. Se confirmado, o modelo original será substituído pelo modelo atual. Quando você cria um novo modelo de alterações feitas, ele recebe uma prioridade maior sobre outros modelos. O que isso significa é que os modelos alterados sempre anularão os modelos anteriores.

Se você deseja retornar ao modelo anterior, clique no botão Excluir modelo na guia Telas.

Os nomes dos modelos são usados ao criar escopos específicos da tela. Ao criar um nome de tela, você pode associar scripts que são executados somente quando esta tela (e qualquer outra compartilhando o mesmo nome de modelo) for acessada.

Você pode alterar manualmente o nome do modelo conforme necessário.

O nome do modelo é usado na guia Scripts para identificar os escopos específicos do modelo para um script. Use o valor aqui, precedido pelo símbolo @.

Adicionar tabela

Adiciona um elemento de recipiente de tabela que permite arrastar elementos existentes e colocá-los lado a lado dentro de um contêiner com linhas e colunas. As tabelas podem incluir todos os tipos de elementos.

Elementos de tela

Esta coluna oferece todas as configurações e opções para manipular elementos reformatados. A partir daqui, você pode alterar a formatação dos elementos, adicionar itens do menu de contexto e criar banners de tela. Basta selecionar um elemento na coluna Tela reformatada e começar editar as propriedades dele aqui.

Tela

Elementos

Menu de contexto

Comandos de atalhos de voz

Ao usar o Velocity Client com Speakeasy, ele vem pré-carregado com comandos-padrão. Para invocar esses comandos, eles devem ser incluídos no menu de contexto global ou na tela com o valor listado abaixo. Esses comandos não requerem arquivos de gramática adicionais.

Aumentar volume	{voice:volumeUp}
Diminuir volume	{voice:volumeDown}
Repetir	{voice:repeat}
Falar mais rápido	{voice:faster}
Falar mais devagar	{voice:slower}
Calibrar	{voice:calibrate}

Editando elementos

Elementos individuais no painel Tela reformatada são interativos, permitindo que você manipule os elementos de estilo ou mesmo crie novos elementos que ainda não estão presentes na tela importada.

Para adicionar um elemento de tela

Para editar um elemento de tela

Para alterar a ordem dos elementos da tela

Para criar elementos de abrangência

Para adicionar uma tabela

Este artigo foi útil?

O tópico era:

Impreciso

Incompleto

Não o que eu esperava

Outro

Privacidade e Legal

Plano de fundo da tela	Define a cor de plano de fundo de toda a tela.Isso pode ser definido em uma tela por tela ou usando temas.
Suprimir banner	Oculta um banner global na tela individual. Se um banner for criado no nível do tema, esta opção permite ocultá-lo nas telas selecionadas. Até que um banner global seja definido, esta opção não poderá ser alterada.
Elemento de banner	Ativa um elemento de banner que aparece na parte superior da tela. Quando configurado como Não, o aplicativo navegará até a guia Elementos para aplicar estilo, definir um título de banner ou fazer o upload de uma imagem de logotipo. Isso pode ser definido em uma tela por tela ou usando temas.
Elemento de rodapé	Adiciona um rodapé à parte inferior da tela. Você pode arrastar e soltar elementos novos ou existentes nesse elemento. O rodapé e quaisquer elementos incluídos dentro dele são fixados na parte inferior da tela, mesmo durante a rolagem.
Plano de fundo do rodapé	Define a cor do plano de fundo do elemento de rodapé.Isso só pode ser feito se o Elemento de rodapé estiver habilitado.
Excluir modelo	Remove o modelo da tela selecionada e redefine a formatação da tela.
Excluir tela	Remove a tela selecionada do seu projeto.

Propriedades da tabela
Linhas	Define o número total de linhas contidas na tabela. Por padrão, ele é definido como 2. Reduzir o número de linhas em uma tabela não exclui nenhum elemento localizado nas células que estão sendo excluídas. Esses elementos são removidos da tabela e colocados abaixo.
Colunas	Define o número total de colunas contidas na tabela. Por padrão, ele é definido como 2. Reduzir o número de colunas em uma tabela não exclui nenhum elemento localizado nas células que estão sendo excluídas. Esses elementos são removidos da tabela e colocados abaixo.
Largura	Define o quanto da tela que a tabela ocupa horizontalmente. Por padrão, ele é definido como 100%. A tabela sempre será alinhada à esquerda.
Cor do plano de fundo	Define a cor do plano de fundo deste elemento.Isso pode ser definido na tabela ou no nível do tema.
Cor alternativa da linha	Define a cor de plano de fundo de cada linha alternada na tabela, começando com a segunda linha. Isso pode ser definido na tabela ou no nível do tema.
Dinâmico	Permite tratar uma tabela como dinâmica, com campos selecionáveis.A ativação desta opção oferece acesso às opções Comando Navegar para cima, Comando Navegar para baixo e Selecionar comando . As linhas selecionadas são distinguidas das outras para alertar os usuários que a linha está sendo usada.
Comando Navegar para cima	Envia um valor de pressionamento de tecla para navegar para cima na linha dentro de uma tabela dinâmica.
Comando Navegar para baixo	Envia um valor de pressionamento de tecla para navegar para baixo na linha dentro de uma tabela dinâmica.
Selecionar comando	Envia um valor de pressionamento de tecla para selecionar o campo atual para inserir dados em uma tabela dinâmica.
Propriedade do elemento
Tipo de elemento	Especifica o tipo ou a classe de um elemento. Quando um tema é definido, elementos do mesmo tipo estão sujeitos aos mesmos estilos. Você só pode editar os tipos de elementos tela a tela. Os tipos de elementos disponíveis incluem: •Cabeçalho. Título de texto que identifica a tela atualmente ativa. Um cabeçalho não pode ser adicionado aos elementos abrangidos. •Rótulo de dados. Texto estático de subcabeçalho que é usado para rotular campos. Este elemento permite que você altere o rótulo para uma tela reformatada, mas ele não alterará a versão em preto e verde deste rótulo. •Valor de dados. Texto estático de subcabeçalho que é usado para rotular campos. O texto para este valor não pode ser alterado. •Campo. Campos de texto vazios nos quais os usuários finais podem inserir texto manualmente. •Item de menu. Botões que possibilitam a navegação de usuários finais em diferentes telas. Um item de menu não pode ser adicionado aos elementos abrangidos. •Botão. Botões que possibilitam a navegação de usuários finais em diferentes telas. Estes são semelhantes aos itens de menu, mas são formatados para exibição em telas. Eles não podem ser adicionados aos elementos e rodapés abrangidos. Cada elemento possui seus próprios estilos padrão associados, conforme definido pela formatação preditiva do Velocity. Para obter mais informações, consulte Formatação preditiva.
Remover\Remover tudo	•Ao selecionar Remover, você remove o elemento de tela selecionado da tela reformatada. Ao selecionar Remover tudo, você remove todos os elementos da tela reformatada. Para adicionar um elemento de tela, veja as etapas abaixo. Isso não pode ser definido no nível do tema.
Propriedades do banner
Título	Criar um elemento de cabeçalho que aparece na parte superior da tela. O texto inserido aqui aparecerá dentro desse elemento. Quando uma imagem também for carregada, o texto neste campo aparecerá à direita da imagem do logotipo. Esta opção só aparece quando Elemento do banner estiver habilitado.
Imagem	Carrega uma imagem de logotipo e coloca-a na parte superior de cada tela. As imagens não devem ser mais largas de 100 pixels ou mais altas que 60 pixels.Esta opção só aparecerá quando o Elemento do banner estiver habilitado.Se desejar adicionar uma imagem em outro lugar que não no banner, crie um elemento de imagem e estilize-o a partir das Propriedades de elementos.
Propriedades da fonte
Negrito	Negrita o texto de elementos.Por padrão, ela não está selecionada.
Itálico	Coloca em itálico o texto de elementos.Por padrão, ela não está selecionada.
Sublinhado	Sublinha o texto de elementos.Por padrão, ela não está selecionada.
Alinhamento	Determina se o texto fica à direita, à esquerda ou ao centro.
Tamanho	Define o tamanho do texto da fonte do elemento. Isso pode ser ajustado de 10 para 20 pontos. O valor-padrão depende do tipo de elemento selecionado.
Família	Especifica a família de fontes para ser usada no elemento. Quando um tema estiver configurado, os elementos do mesmo tipo usam os estilos da mesma família de fontes. •Serif •Sans-serif •Monospace
Cor do plano de fundo	Define a cor do plano de fundo deste elemento.
Cor da Fonte	Define a cor do texto visível para este elemento.
Texto	O texto que aparece para esse elemento na tela reformatada. Esta configuração não substitui nenhum texto para as telas pretas e verdes padrão. Isso não pode ser definido no nível do tema.
Comando	Associa o pressionar de uma tecla específica a um item de menu. Quando selecionado, o comportamento associado a esse pressionamento de tecla será enviado para o perfil de host.Por exemplo, no servidor de demonstração, o comando para um item de menu pode ser o número `3`. Quando enviado, o usuário navegará para a próxima tela. Isso não pode ser definido no nível do tema. Os comandos aceitos incluem as seguintes teclas pressionadas: •`F1` a `F24` •`CTRL- [letra única, maiúsculas e minúsculas]` •Valores hex de código de tecla (p. ex., `{hex:E03B}` para `F1`), sem uma `\` ou `0x` precedendo o valor hex. •Macros (por exemplo: `{hex:E050}{hex:E04D}{pause}{Enter}` para "baixo", "direita", uma pausa de 250 milissegundos e, então, pressione "Enter" ) Para obter uma lista de todos os valores hexadecimais suportados, consulte Códigos e comandos de teclado.
Propriedades da imagem
Alinhamento	Alinha a imagem dentro do elemento pai.
Cor do plano de fundo	Uma cor de plano de fundo que é exibida se a imagem tiver transparência.
URL	O URL da imagem, incluindo o nome do arquivo e a extensão. O caminho para o URL pode usar 3 formatos: •res://velocity/resources/ um caminho para um recurso associado a um projeto. •file:/// um caminho para um arquivo armazenado em algum lugar no dispositivo. Observe que isso usa um barra inclinada extra. •http:// um caminho para um arquivo armazenado em um servidor remoto que pode ser acessado usando http. Existem 3 tipos de variáveis que você pode usar no URL da imagem: •Uma variável de componente usa o texto exato da tela original, no formato de {component:the Component ID}. Por exemplo: res://velocity/resources/{component:added_636511066245633526}.jpg usa o texto encontrado no componente como o nome da imagem, seja qual for o texto para cada página. •Uma variável de tela especifica a linha, a coluna e o comprimento do texto no formato de {screen:row,column:length}. Por exemplo: http://172.27.0.21/warehouse/images/{screen:4,1:12}.png usaria 12 caracteres a partir da linha 4 coluna 1 na tela atual como o nome do arquivo. •Uma variável de script que retorna uma sequência de texto, no formato de {script:function()}. Por exemplo: file:///{script:FindImage()} usa o caminho e o nome do arquivo retornados pelo script FindImage. As variáveis podem ser usadas para o nome do arquivo ou para outras partes do URL, e você pode usar várias variáveis no URL, se necessário.
ID do componente	O ID do componente associado ao elemento da imagem.
Propriedades do teclado
Exibir teclado	Define o comportamento do pop-up do teclado quando um elemento de Campo for selecionado. Isso não pode ser definido no nível do tema. •Exibir. O teclado aparecerá automaticamente ao usar a tecla Tab para chegar ao campo. •Ocultar. Se o teclado estiver ativo, ele será automaticamente ocultado ao usar a tecla Tab para chegar ao campo. •Desabilitar. Os teclados personalizados e padrão não podem ser usados ao usar a tecla Tab para chegar ao campo.
Teclado em retrato	Define o teclado personalizado padrão a ser usado quando uma tela está sendo exibida no modo retrato. Isso não pode ser definido no nível do tema. Se for deixado em branco, o teclado-padrão personalizado será usado, que é o teclado mais alto listado no Painel Teclados da tela Teclados.
Teclado em paisagem	Define o teclado personalizado padrão a ser usado quando uma tela está sendo exibida no modo paisagem. Isso não pode ser definido no nível do tema. Se for deixado em branco, o teclado-padrão personalizado será usado, que é o teclado mais alto listado no Painel Teclados da tela Teclados.
ID do componente	Especifica o identificador de campo. Este campo não pode ser alterado e é automaticamente atribuído após a criação do elemento. A finalidade desse valor é para servir de referência em scripts que afetam campos específicos.
ID do escopo	Especifica o escopo da tela e do campo. Isso não pode ser alterado e é automaticamente atribuído após a criação do elemento. O valor aqui consiste no nome do modelo e na ID do componente, separados por dois pontos e precedidos pelo símbolo `@`.Você deve copiar e colar este valor de campo ao definir um escopo específico do campo na guia Scripts.

Adicionar novo	Adiciona um novo item de menu de contexto, permitindo que você especifique um Título de item de menu e Comando de atalho. Os itens de menu não podem ser adicionados ao nível do tema.
Adicionar voz	Habilita capacidades de texto para fala e fala para texto para esse item de menu. Além disso, isso adiciona o campo Frase correspondente, o qual requer uma macro de voz no Comando de atalho para concluir uma ação de voz específica.
Item de menu global	Especifica o item do menu como específico da tela ou global. Se configurado como Ligado, o item de menu aparece no menu de contexto de todas as telas.Se configurado como Desligado, o item de menu aparece apenas no menu de contexto da tela atual.
Itens de menu	Cria e edita itens de menu para o menu de contexto. Nesta seção, você pode configurar as seguintes configurações: •Título do item de menu. O texto que aparece como rótulo para um item de menu de contexto. •Comando de atalho. Associa o pressionar de uma tecla específica a um item de menu. Para ver exemplos dos comandos aceitos, consulte Códigos e comandos de teclado. •Remover. Excluir o item de menu selecionado. •Concluído. Aplica as alterações no menu de contexto, que são visíveis no painel Tela reformatada.
Habilitado por voz	Habilita o uso de frases ativadas por voz para acessar as funções do menu de contexto. Isso torna visível o campo Frase correspondente.
Frase correspondente	Define o comando de voz para ativar o item do menu. Qualquer frase pode ser inserida aqui, desde que o Client possa pronunciá-la. Frases correspondentes só podem ser criadas para itens de menu de contexto. Quando essa frase correspondente for detectada, ele executará automaticamente qualquer macro, texto ou script atribuído ao campo Comando de atalho.