Alterando um Ícone Dinamicamente¶

Os ícones normalmente são estáticos e imutáveis, mas às vezes você precisará mostrar um ícone diferente com base nos dados. Por exemplo, em uma página que mostra as pessoas que foram convidadas para um evento, você pode mostrar um ícone de polegar para baixo ou polegar para cima para indicar se elas estão participando ou não. Abaixo estão exemplos de como você pode implementar um ícone dinâmico em seu aplicativo.

Para os fins deste documento, nos referimos aos ícones nomeados usando a biblioteca de ícones Font Awesome. O Vinyl vem com Font Awesome. Para ver uma lista dos ícones nomeados disponíveis, consulte fontawesome.com.

Controle de Ícone¶

O tipo de controle Icon permite que você passe o nome CSS de um ícone (como times-circle-o) e o procura na biblioteca de ícones para exibi-lo. Não é possível adicionar à biblioteca de ícones.

Se você tiver apenas 1 ou 2 ícones, provavelmente poderá inserir um IIF declaração em seu objeto de negócios e permitir que ele determine qual ícone exibir. Por exemplo, se você quiser indicar a presença em um evento, você terá algo como IIF(Status = Accept, 'thumbs-up', 'thumbs-down'). Este cenário funciona bem quando você tem apenas algumas opções para escolher, mas ficará complicado à medida que você precisar acomodar mais opções. Para nosso exemplo, você também pode mostrar um ícone de ponto de interrogação se a pessoa ainda não aceitou ou recusou o convite.

No caso acima você precisará fazer um arquivo maior e mais complicado IIF instrução para acomodar o terceiro estado ou você pode alterar seu modelo de dados para incluir uma coluna que armazene o ícone. As etapas abaixo orientarão você no caso em que você altera seu modelo de dados.

Para continuar com o exemplo acima, você precisará criar um Status tabela com colunas para StatusID, Status, e Icon.
Certifique-se de inserir informações, incluindo os títulos dos ícones, no Status tabela para cada status. Por exemplo: Sim, Não, Talvez
Em seguida, crie um Business Object que se una ao Status mesa. O nosso se chama Funcionário (Status). Nós vamos trazer o Icon coluna do Status mesa para uso.
Para usar essas informações em seu aplicativo, certifique-se de que seu painel esteja construído no objeto recém-criado. Crie um controle chamado Status como um tipo de controle de lista usando Status (Lista) StatusID e Status para exibir as opções.

Usar uma coluna é quase sempre superior a uma instrução IIF, porque uma instrução IIF exigirá que você implemente uma nova lógica quando tiver um novo estado para contabilizar, mas se tiver uma coluna em uma tabela de status, você poderá permitir um usuário para configurar os ícones usados.

GUID do URL Relativo da Imagem¶

O IIF A instrução usada para instruir qual ícone exibir pode fazer referência ao GUID do URL relativo da imagem. Para obter o valor GUID da imagem, visualize a imagem em Vinyl e copie o valor do campo URL relativa que aparece após .../image/. Este valor agora pode ser usado no IIF declaração em conformidade.

Exemplo de GUID de URL relativo de imagem

Exemplo de instrução IIF referenciando imagem GUID de URL relativo

Controle de Lista¶

O controle List normalmente é usado para exibir uma lista de valores de texto, mas também pode exibir uma imagem junto com o texto ou apenas a própria imagem. Ao configurar o controle Lista, você simplesmente precisa ir para Atributos Adicionais e selecionar a coluna que armazena seu ImageID como o valor Icon. Usar o propósito de imagem de 'Ícone' permitirá efetivamente que você tenha ícones dinâmicos. Como um desenvolvedor pode adicionar imagens à biblioteca de imagens de um aplicativo, esse método para um 'ícone' dinâmico é um pouco mais robusto do que usar o controle Icon.

Para utilizar um List Control para ícones dinâmicos, você precisa ter uma coluna para armazenar seu ImageID na tabela que fornece os valores da List. Dessa forma, você pode vincular cada um dos valores da lista a uma imagem específica na coleção do seu aplicativo. Da mesma forma que você extrai um valor de título de um objeto de lista para exibi-lo como texto na lista, você também extrai um ImageID do objeto de lista para exibir essa imagem junto com o texto.