Integração
Componente Maker 3 que integra bibliotecas de frameworks terceiros (como jQuery, Bootstrap, etc) à formulários Maker, sendo possível transportar códigos prontos ou desenvolver do zero. Confira as funcionalidades do mesmo:
O componente Integração conta com as seguintes funcionalidades:
- Suporte à HTML e CSS nativos;
- Suporte à responsividade;
- Importação de bibliotecas através de endereço CDN;
- Reconhecimento automático de botões e âncoras com associação de Id;
- Associação de fluxos Maker à elementos HTML através de eventos DOM;
- Pré-visualização em tela;
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 | "Digite o CPF do cliente" |
| 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 | "Tabela de Consumidores" |
| Descrição | Aplicada a todos os componentes exceto para os componentes Árvore, Grade, Moldura, Imagem e para o objeto formulário - É a legenda que aparece sobre o componente para identificar (resumidamente) qual a sua função. Observação: Ao selecionar um determinado campo o Maker irá sugerir uma descrição obtida no dicionários de dados, caso o usuário deseje deixar o campo da descrição em branco basta apagá-lo e clicar fora do componente. | Letras | "Insira aqui a idade do consumidor" |
Propriedades específicas do componente Integração:
| Propriedade | Descrição | Tipo | Exemplo |
|---|---|---|---|
| Abrir como página | Quando essa propriedade é Não, ele desenha o HTML dentro da div do componente. Quando Sim, ele cria um arquivo HTML, CSS e JS pros códigos, e cria um IFRAME. | Lógico | Sim |
| Posicionamento | Define se o componente aparecerá em sua posição natural, em uma posição relativa ou ocupará toda a área de exibição. | Lista | Área |
| Alinhamento Vertical | Define se o componente deverá se alinhar ao topo, centro ou rodapé da área de exibição. | Lista | Nenhum |
| Alinhamento Horizontal | Define se o componente deverá se alinhar à esquerda, ao centro ou à direita da área de exibição. | Lista | Nenhum |
Para configurar o componente, utilize a propriedade "Estrutura" do mesmo:
- Na propriedade estrutura, uma tela de edição do componente Integração é aberta, onde na mesma é possivel a configuração de toda estrutura.
Segue imagens de um componente já configurado.
- HTML
Aba onde será inserido o conteúdo HTML do componente desejado, é recomendável que se insira apenas o conteúdo dentro do "body do documento, pois o cabeçalho é tratado automaticamente pelo Integração
- CSS.
Aba onde será inserido o conteúdo CSS do componente.
- Java Script.
Aba onde se insere o código JavaScript do componente, ao utilizar códigos de frameworks de terceiros, deve-se importar a biblioteca na tela seguinte para o devido funcionamento.
- Bibliotecas.
Aqui serão inseridas as bibliotecas para framework JavaScript e CSS, deve ser passado o endereço CDN da biblioteca, o mesmo deve ser passado com o prefixo completo do endereço (http://).
- Eventos.
Nesta aba é possível vincular eventos Maker à elementos específicos do HTML inserido. Para ser possível vincular os eventos, estes elementos (tags) devem possuir um ID, no caso de tags "button" e "a", caso não possuam ID, serão adicionados automaticamente pelo Integração. Os fluxos serão executados por eventos DOM pre-definidos no componente, deve-se ficar atento às restrições de eventos para certos tipos de elemento. Poderá também ser passado parâmetros (em forma de Constante) para os fluxos, desde que esses sejam feitos para recebê-los.
Exemplo de Frameworks suportados pelo componente.
- jQuery
- Bootstrap 3
- Angular JS
- React JS, entre outros.