Card

O Card é um componente bastante versátil que pode ser utilizado para exibir informações diversas, como lista de produtos, informações, etc., tornando a interação com os dados em tela mais objetiva e detalhista, sendo possível organizar cada card de acordo com a necessidade do usuário.

Possui um cabeçalho, utilizado como título do componente, um corpo para inserir informações mais detalhadas, um título do corpo e um rodapé. Suporta a utilização de imagens, formatação de texto e alinhamento, eventos de clique e preenchimento de informações e execução de fluxo associado ao componente.

O preenchimento de dados no Card pode ocorrer através da função Card - Preencher, na qual deve ser passado o componente no primeiro parâmetro e os demais dados de cabeçalho, título do corpo, texto do corpo, rodapé e/ou imagem, sendo estes parâmetros opcionais, exceto o primeiro (componente). O componente suporta também a criação de múltiplos cards, cujo preenchimento é feito através de registros retornados através de consulta definida pelo usuário.

Imagem 1 - Interface do componente carregado no Webrun.

Imagem 2 - Interface do componente carregado no Webrun.

Propriedades em comum:

Propriedade	Descrição	Tipo	Exemplo
Altura	Define a altura do componente	Inteiro	250
Código	Informa o código gerado pelo Maker ao qual o componente/formulário foi associado. De forma geral, não interfere nas características do componente.	Inteiro	5
Container	Informa em qual container o componente irá ser inserido.	Indefinido	-
Dica	Armazena uma dica para o componente, o qual se torna acessível no modo de inserção ou alteração.	Letras	"Clique para conhecer melhor"
Habilitado	Torna o componente possível ser editado ou manipulado.	Lógico	Sim
PosiçãoX e PosiçãoY	O "X" determina a posição do componente em relação à esquerda do formulário, e o "Y" em relação ao topo.	Inteiro	100
Tabulação	Indica a ordem de tabulação do componente em relação aos outros que compõem a aba do formulário na qual está posto. Essa ordem pode ser observada quando o usuário altera o estado do formulário/grade para o modo de inclusão ou edição e navega entre os componentes/campos usando a tecla Tab.	Inteiro	2
Tabular	Selecionando a opção Sim, quando o usuário estiver navegando entre os componentes, como foi descrito no item anterior, o componente receberá foco (observada a ordem de tabulação).	Lógico	Sim
Tamanho	Aplicado a todos - determina a largura do componente ou formulário.	Inteiro	100
Visível	Aplicada a todos os componentes, com exceção da Moldura e do objeto formulário - Selecionando a opção Sim, o componente aparece no formulário.	Lógico	Sim
Nome	Aplicada a todos os componentes e para o objeto formulário - apresenta o nome do componente. O Maker sugere um nome diferente dos nomes dos componentes existentes no formulário para evitar que mais de um componente possua o mesmo nome.	Letras	"Card"

Propriedades específicas do componente Card:

Propriedade	Descrição	Tipo	Exemplo
Editável	Quando a propriedade Consulta SQL está ativa, esta propriedade permite habilitar um card inicial com um botão cuja função é adicionar as informações do novo card.	Lógico	Sim
Formulário	Quando a propriedade Consulta SQL esta ativa, esta propriedade define qual o formulário que será aberto para inserir um novo card no conjunto de cards. Caso não exista formulário selecionado, utilizará um modal padrão para inserção de cards dinamicamente no banco de dados.	Lista	"Formulário Dados"
Fonte de Dados	Condutor de dados para a propriedade Consulta SQL.	-	-
Consulta SQL	Esta propriedade permite que o usuário crie um conjunto de cards, cujos dados de preenchimento são vindos do banco de dados, de acordo com a consulta estabelecida no campo.	SQL	Select crd_dados.crd_dad_id, crd_dados.crd_dad_titulo, crd_dados.crd_dad_bodytitle, crd_dados.crd_dad_textbody, crd_dados.crd_dad_bodytitle, crd_dados.crd_dad_footer, crd_dados.crd_dad_image
Campo ID	Esta propriedade representa o campo-chave (identificador único) selecionado durante a configuração da propriedade Consulta SQL, o qual identifica a tabela que se contém os dados que serão preenchido no card.	inteiro	crd_dad_id
Campo Título	Seleciona o campo que contém o Título do Card na consulta SQL.	Letras	crd_dad_titulo
Campo Título do Corpo	Seleciona o campo que contém o Título do Corpo do Card na consulta SQL.	Letras	crd_dad_bodytitle
Campo Texto do Corpo	Seleciona o campo que contém o Texto do Corpo do Card na consulta SQL.	Letras	crd_dad_textbody
Campo Imagem	Seleciona o campo que contém o Rodapé do Corpo do Card na consulta SQL.	Imagem	crd_dad_image
Altura dos Cartões	Define a altura dos cards quando os dados do card vem da consulta SQL.SQL.	Inteiro	crd_dad_image
Tamanho dos Cartões	Define o Tamanho dos cards quando os dados do card vem da consulta SQL. SQL.	Inteiro	crd_dad_image
Quantidade de Colunas	Define a quantidade de colunas em quando os dados do card vem da consulta SQL. SQL.	Inteiro	crd_dad_image
Alinhamento do Texto	Alinha todos os textos do componente segundo o valor dessa propriedade.	Lista	Esquerda
Cor de fundo	Permite a definição de uma cor de fundo para o componente.	cor	Cor Automática do Componente
Estilo Bootstrap	Lista de estilos pré-definidos de acordo com a documentação do Bootstrap.	Lista	Transparente
Exibição da Imagem	Configura a forma como a imagem é apresentada no componente. Selecionando a opção: Preencher: A imagem mantém sua proporção e preenche a dimensão dada. A imagem será cortada para caber Ajutar: A imagem mantém sua proporção, mas é redimensionada para caber dentro da dimensão especificada Estender: Este é o padrão. A imagem é redimensionada para preencher a dimensão especificada. Se necessário, a imagem será esticada ou comprimida para caber.	Lista	Preencher
Posição da Imagem	Define a posição da imagem no componente.	Lista	Esquerda
Fonte	Define estilos de formatação dos textos do componente.	Fonte	MS Sans Serif,8,0000,clWindowText
Estilo (CSS)	Estilo CSS que será aplicado no componente.	Letras
Título	Define o texto do cabeçalho do componente quando não há consulta SQL.	Letras	"Estamos no Instagram"
Título do Corpo	Define o título do corpo do componente quando não há consulta SQL.	Letras	"Fique por dentro"
Texto do Corpo	Define o texto do corpo do componente quando não há consulta SQL.	Letras	https://www.instagram.com/softwellsolutions
Texto do Rodapé	Define o texto do rodapé do componente quando não há consulta SQL.	Letra	"Clique no Card"
Imagem	Permite a seleção de uma imagem da Galeria de Imagens para exibição. A imagem a ser selecionada deve existir na Galeria de Imagens. Para vincular uma imagem, selecione a imagem (a imagem ficará com a borda laranjada) e clique no botão Selecionar (imagens podem ser gravadas no Maker pela opção Galeria de Imagens do menu Projeto). Para desvincular uma imagem do formulário, clique no botão Nenhum.	Imagem	imagem.png
URL Imagem do Card	Utilizada para apresentar uma imagem contida em qualquer site, bastando para isso que o usuário informe o endereço no qual ela pode ser encontrada.	Letras	https://manual.softwell.com.br/w.png

Observações:

1. A propriedade Consulta SQL ativa o modo de múltiplos cards;

   a. Não Editável:

   Imagem 3 - Interface do componente carregado no Webrun não editável.

   b. Editável:

   Imagem 4 - Interface do componente carregado no Webrun editável.

2. Se a propriedade Cor de Fundo for definida a propriedade Estilo Bootstrap é ignorada;

3. Para utilizar a propriedade Estilo Bootstrap, a propriedade Cor de Fundo deve estar com o valor “Cor Automática do Componente”;

4. Se a propriedade URL Imagem do Card for definida a propriedade Imagem do Card é ignorada;

5. Os elementos do card (título, rodapé etc) só serão criados se o conteúdo for definido.

6. As propriedades Editável e Formulário dependem da propriedade Consulta SQL, ou seja, caso a propriedade Consulta SQL não seja definida, as propriedades Editável e Formulário não terão qualquer efeito;

7. A propriedade Estilo CSS deve ser utilizada para formatações mais específicas do componente;

8. É possível utilizar HTML nos campos do card do tipo Letras. Como no exemplo abaixo:

Imagem 5 - Interface do componente carregado com HTML.

9. É possivel preencher o card utilizando a função "Criar lista a partir dos Elementos" em um fluxo vinculado ao evento Ao Preencher. Como pode ser visto no fluxo criado abaixo:

Gif 1 - Interface de fluxo no Maker Studio.

Imagem 6 - Interface do componente utilizando ao preencher.

10. Tamanho mínimo para que todos elementos do card apareçam: a. Com imagem na Esquerda ou Direita: tamanho 150 por 120 de Altura; b. Com imagem em Acima ou Abaixo ocupando 50% do card: tamanho 353 por 329 de Altura; c. Sem imagem: tamanho 169 por 113 de Altura;

    

    Imagem 7 - Interface do componente com altura modificada.

    

    Imagem 8 - Interface do componente com largura modificada.

11. Quantidade de Colunas:

    1. Quando definida: Haverá o número de cartões em uma linha e será equivalente a definição da propriedade. Além disso, a sua altura e largura se comportará com base nas propriedades abaixo:

       1. Quando não definida a Altura dos Cartões, o cartão terá sua altura de acordo ao tamanho máximo do componente;
       2. O Tamanho dos Cartões será proporcional ao numero de colunas aplicada ao Componente.  

       Imagem 9 e 10 - Interface do componente definindo quantidade de colunas.

    2. Não definida: Todos os cartões ficarão na mesma linha e sua altura e largura se comportará com base nas propriedades abaixo:

       1. A Altura dos Cartões será de acordo ao tamanho máximo do componente.
       2. Quando não definida o Tamanho dos Cartões, o cartão terá seu tamanho de acordo o seu conteúdo.

Imagem 11 e 12 - Interface do componente sem definição de quantidade das colunas.

Eventos do componente Card:

Evento	Descrição	Parâmetro Automático
Ao clicar	O evento é executado ao usuário clicar no componente.	*Parâmetos passados de acordo com a propriedade "Parâmetros de entrada do fluxo"
Ao Preencher	O evento é executado quando o card é preenchido	*Parâmetos passados de acordo com a propriedade "Parâmetros de entrada do fluxo"

Função Específica do Componente Card:

• Card - Preencher Card: Preenche os campos do componente Card de acordo com os parâmetros fornecidos.

  É importante seguir a ordem dos parâmetros para que a função tenha o resultado esperado. Conforme exemplo abaixo:

  

Imagem 13 - Interface do componente definindo quantidade de colunas.

• Card - Anexar Evento ao Componente: irá associar um evento no padrão W3C (DOM Events Specification) ao componente Card através do fluxo, caso este esteja associado. É necessário passar como parâmetros o componente em questão, o nome do evento, o fluxo e seus parâmetros (caso existam), conforme a descrição abaixo:

  1. Componente;
  2. Evento;
  3. Fluxo;
  4. Parâmetros;

  Observações:

  1. Os parâmetros 2 ao 6 são opcionais;
  2. Caso o parâmetro seja nulo o item não será criado no Card;
  3. Caso seja passado um valor vazio, o item não será alterado;
  4. Nos parâmetros 2, 3 e 4;
  5. Caso o evento passado seja "onclick", o cursor será modificado para pointer, caso contrário, não será modificado;
  6. Caso o valor do evento seja nulo ou vazio, por padrão, será atribuído o evento "onclick";
  • Propriedades e Eventos em comum aos Objetos