Guias

Geral

O controle de guia permite dividir as informações em seu aplicativo por guias. O comportamento do controle de guia difere dependendo do modo selecionado: Estático ou Dinâmico.

Guias estáticas

Ao adicionar o controle Guia, ele exibe três guias por padrão (Guia 1, Guia 2, Guia 3). A expansão de cada guia dentro do controle expõe as seguintes propriedades:

• Nome da guia— O nome de exibição da guia.
• Página — A página Apps a ser importada dentro desta guia.
• Oculto — se verdadeiro, oculta o controle no tempo de execução.
• Desabilitado — se verdadeiro, desabilita o controle no tempo de execução.

As seguintes propriedades aplicam-se a todo o controle da Guia.

• Adicionar nova guia—Adicione nova guia aos seus dados clicando no ícone mais "+".
• Índice de guias ativas—Navegue até uma guia específica usando essa propriedade. O índice é iniciado em 0. Por exemplo, se você tiver quatro guias consecutivas chamadas "Tab1", "Tab2", "Tab3" e "Tab4", "Tab1" tem o índice 0, "Tab2" tem o índice 1, "Tab3" tem o índice 2 e "Tab4" tem o índice 3.
• Oculto— Se verdadeiro, oculta o controle no tempo de execução.
• Desabilitado— Se verdadeiro, desabilita o controle no tempo de execução.

Guias dinâmicas

As guias dinâmicas são geradas no runtime a partir de uma origem de dados de lista. Para usar essa funcionalidade, selecione o modo Dinâmico para suas guias. Isso é útil quando o número de guias que você precisa varia e depende dos itens em uma lista.

Você pode configurar as seguintes propriedades:

• Origem da lista— A origem dos itens a serem exibidos como guias. Os tipos de dados válidos incluem matrizes de String, Integer ou DateTime, DataTable ou matrizes de um Objeto.
• Coluna— Quando a origem da lista for do tipo DataTable ou de uma matriz de um Object, selecione a coluna específica (para tipos de dados DataTable) ou a propriedade específica (para matrizes de objeto).
• Origem da página— A página do aplicativo a ser usada em todas as guias dinâmicas.
• Índice de guias ativas—Navegue até uma guia específica usando essa propriedade. O índice é iniciado em 0. Por exemplo, se você tiver quatro guias consecutivas chamadas "Tab1", "Tab2", "Tab3" e "Tab4", "Tab1" tem o índice 0, "Tab2" tem o índice 1, "Tab3" tem o índice 2 e "Tab4" tem o índice 3.

Por exemplo, você pode usar guias dinâmicas com entidades do Data Service, da seguinte forma:

• A propriedade Origem da lista para as guias dinâmicas é uma entidade no Data Service, por exemplo, "Departamento":

  Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

• A propriedade Coluna para as guias dinâmicas é um campo da entidade Data Service selecionada, por exemplo, "Nome".
  Observação: no runtime, você vê tantas guias quanto o número de registros no campo de entidade selecionado. O controle é limitado a exibir 50 registros de sua entidade. Se você tiver mais de 50 registros, os primeiros 50 serão exibidos.
• Para Origem da página, você pode configurar uma página para exibir uma tabela que se atualiza com base na guia selecionada.

No runtime, as guias que você vê são os registros no campo Nome da entidade Departamento. Alternar entre abas atualiza o conteúdo na tabela.

Events

• Valor alterado— Configure o que deve acontecer quando o valor for alterado.

Estilo

• Alinhamento de controle— Por padrão, ela é definida como Esticar. Um alinhamento diferente pode ser definido.

  Observação: o alinhamento depende do layout selecionado para o pai (Vertical vs Horizontal).
• Estilo—O estilo das guias ativas e inativas:
  • Padrão—As guias têm o estilo das guias de navegador clássico.
  • Compilados— As abas são arredondadas em ambas as extremidades, lembrando um formato de comprimido.
  • Cor da guia— A cor do texto para guias inativas.
  • Cor da guia ativa— A cor do texto para guias ativas.
  • Fundo da aba— A cor de fundo para abas de comprimidos inativas.
  • Plano de fundo da guia ativa— A cor de fundo para guias de comprimidos ativas.
  • Guias grandes— Se selecionado, as guias são ampliadas.

• Borda— A borda do controle. Você pode configurar a Espessura, a Cor e o Raio da borda.

• Fonte— Os atributos de fonte para o texto da guia, como família, tamanho ou cor da fonte. Por padrão, o controle herda a família de fontes do contêiner pai imediato, que é indicado pela palavra-chave “herdado”.

• Margem— A margem do controle. Por padrão, uma margem de 4px é definida. As propriedades Top/Bottom e Left/Right são combinadas. Para definir valores diferentes e separados para as margens Superior, Inferior, Esquerda e Direita , selecione o botão Vincular no lado direito da seção Margem .

• Tamanho— A largura e a altura do controle. Por padrão, o tamanho é definido como auto. Para definir valores mínimos ou máximos, selecione os três pontos (*). Se o tamanho do controle for menor que as opções, será exibida uma barra de rolagem.

Keyboard Shortcuts

Para melhorar a acessibilidade, você pode usar os seguintes atalhos de teclado na lista de guias da guia Geral no painel de configuração:

• Teclas das setas Para cima e Para baixo para alterar a guia selecionada.
• Alt+ tecla da setaPara cima para mover a guia selecionada para cima.
• Alt+ tecla da setaPara baixo para movimentar a guia selecionada para baixo.

Exemplo: navegar até a próxima guia

Este exemplo mostra como navegar até a próxima guia de um controle Guias.

1. Em seu aplicativo, adicione um controle Guias e torne ele Estático. Ele criou automaticamente 3 guias: "Guia 1", Guia 2" e "Guia 3".
2. Adicione duas novas páginas e um controle de Botão em cada uma.Nomeie os botões de "Guia 1 -> Avançar" e "Guia 2 -> Avançar", respectivamente.
3. Para a "Guia 1", no campo Origem da página, faça referência à página adicionada anteriormente, que tem o botão "Guia 1 -> Avançar".
4. Para a "Guia 2", no campo Origem da página, faça referência à página adicionada anteriormente, que tem o botão "Guia 2-> Avançar". Seu aplicativo deve ser parecido com a seguinte imagem:
   
5. Crie uma regra para cada controle de Botão. A regra instrui o aplicativo a navegar até a próxima guia quando você clicar no botão.
6. Crie uma variável de aplicativo do tipo Int32 e nomeie-a "var_tab_index".
7. Selecione o controle Guias, e atribua a variável var_tab_indexao campo Índice de guias ativas.
   
8. Selecione a página principal que contém o controle Guias, navegue até a guia Eventos e crie uma regra para o evento Carregado.
   1. Adicione a regra Definir valor e configure-a da seguinte maneira:
      • Item a ser definido — var_tab_index
      • Valor — 0, que é o índice da Guia 1.
9. Selecione a página que contém o controle de Botão chamado "Guia 1-> Avançar", navegue até a guia Eventos e crie uma regra para o evento Clicado em.
   1. Adicione a regra Definir valor e configure-a da seguinte maneira:
      • Item a ser definido — var_tab_index
      • Valor — 1, que é o índice da Guia 2.
10. Selecione a página que contém o controle de Botão chamado "Guia 2-> Avançar", navegue até a guia Eventos e crie uma regra para o evento Clicado em.
    1. Adicione a regra Definir valor e configure-a da seguinte maneira:
       • Item a ser definido — var_tab_index
       • Valor — 2, que é o índice da Guia 3.

Ao visualizar seu aplicativo, clicar no botão em "Guia 1" leva você até "Guia 2" e assim por diante.

Propriedades VB

Propriedade do VB	Tipo de dados	Description
ActiveTabIndex	Número inteiro	Índice da guia ativa no momento.
ActiveTabName	String	Nome da guia ativa no momento.
Hidden	Booleano	Se verdadeiro, oculta o controle no tempo de execução.
Disabled	Booleano	Se verdadeiro, desabilita o controle no tempo de execução.