As propriedades dos componentes visuais do Cronapp podem vir de atributos HTML, directivas Angular ou do próprio Cronapp e elas podem variar conforme o componente visual selecionado. Além disso, caso a propriedade desejada não se encontre na paleta, é possível adicioná-la através da propriedade "Nova propriedade" (acesse Componentes visuais para mais detalhes sobre como adicionar um propriedade), mas elas precisam ser interpretadas pelo navegador corretamente.

Editor de campos

O editor de campos é uma janela presente em toda as propriedades dos componentes visuais, ela permite informar um valor para alimentar a propriedade selecionada. A janela nos é apresentada todas as vezes que clicamos no botão "..." das propriedades Título ou Conteúdo (Figura 1.1) ou no ícone Editar Expressão (destaque da figura 1). O ícone Editar Expressão é exibido ao posicionar o cursor do mouse sobre uma propriedade.

Open

Open

1. Texto: conteúdo a ser exibido no campo de texto, não é possível formatar o texto.

2. Texto Rico: conteúdo a ser exibido no campo de texto, porém, é possível formatar o texto.

3. Expressão: possui um campo de texto para adicionar comandos manualmente comandos Javascript (high-code).

4. Campo de Tela: permite selecionar um campo da tela ou um atributo ativo da fonte de dados, por exemplo: Aluno.active.nome ou rowData.nome.

5. Bloco de Programação: permite selecionar uma função de bloco de programação (cliente ou servidor) criado no projeto para retornar algo que alimentará o campo.

6. Funções: permite selecionar um bloco de programação sem a necessidade de criar uma função de bloco de programação.

7. Tipo: define o tipo do dado que será inserido no campo de texto, podendo ser numérico, moeda, texto, inteiro, decimal, entre outros.

8. Máscara: aplica uma máscara no campo de texto, pra mais informações sobre a propriedade Máscara, acesse a documentação Formatação de máscaras na camada cliente.

Aba Texto

Inclui um texto simples nas propriedades título e conteúdo dos componentes. Não é possível fazer formatações de texto.

Open

Aba Texto Rico

A funcionalidade Texto Rico funciona de forma semelhante ao Texto (figura 1.2), porém, através dela podemos formatar o conteúdo da forma que quisermos, inserindo tabelas, aumentando a fonte, mudando a cor do texto, etc. A figura 1.3 apresenta a janela Texto Rico e suas propriedades. Ao final da edição do texto rico, o seu conteúdo será convertido para HTML. Abaixo destacamos alguns elementos do painel do Texto Rico.

Open

1. Corretor Ortográfico: funcionalidade que faz a verificação ortográfica do texto para localizar e corrigir eventuais erros tipográficos.

2. Inserir/Editar Âncora: insere ou edita uma âncora no texto.

3. Inserir Caractere Especial: insere um caractere especial no texto, como por exemplo: "@", "!", "#", "$", entre outros.

4. Código-Fonte: exibe a estrutura em HTML do texto

5. Remover Formatação: remove a formatação de uma área selecionada, podendo ser palavra, frase, parágrafo ou o texto inteiro.

6. Citação: transforma o parágrafo selecionado em uma citação.

Corretor Ortográfico

O corretor ortográfico por padrão está desabilitado, clique no ícone ABC e selecione a opção Habilitar correção ortográfica durante a digitação, após isso as outras opções do corretor ficarão disponíveis para uso. Uma dessas opções é a possibilidade de ajustar o corretor para outros idiomas. Importante, o corretor ortográfico não funciona da mesma forma que um tradutor, não adianta selecionar todo o texto e mudar a opção de idioma, ele corrige apenas palavra por palavra.

Open

Abas da janela do corretor ortográfico:

• Opções: esta aba apresenta opções que o corretor deve ignorar durante a correção, são elas:

  • Ignorar palavras com maiúsculas e minúsculas misturadas;

  • Ignorar palavras maiúsculas;

  • Ignorar nomes de domínio;

  • Ignorar palavras com números.

• Idiomas: apresenta opções de gramática em diversas línguas para ser aplicada ao conteúdo do texto.

• Dicionários: essa opção permite adicionar novas palavras ao dicionário de uma determinada língua escolhida pelo usuário.

• Sobre: apresenta informações sobre o criador do recurso.

Inserir/Editar Âncora

Através desta funcionalidade, é possível realizar a inserção ou edição de âncoras ao logo do texto, destaque 1 da figura 1.5.

Open

Inserir Caractere Especial

Clique no item em destaque da figura 1.6 para adicionar caracteres especiais ao conteúdo do texto.

Open

Código-Fonte

Exibe a estrutura em HTML de todo o conteúdo do texto.

Open

Remover Formatação

Caso seja necessário remover a formatação de uma palavra, frase, parágrafo ou mesmo de todo o texto, selecione a área desejada e clique sobre o botão Remover Formatação, destaque 5 da figura 1.3. Confira nas figuras abaixo o texto antes e depois da opção Remover Formatação ter sido aplicada.

Open

Open

Citação

Selecione o parágrafo desejado caso queira fazer uma citação e utilize essa opção. Destaque 1 da figura 1.9. 

Open

Aba Expressão

Possui um campo de texto para adicionar comandos Javascript manualmente (high-code), ao selecionar uma ação em uma das outras abas, o comando resultante será exibido nessa área. No exemplo da figura abaixo, criamos um bloco de programação para alterar o texto de um botão, a chamada high-code dessa função é apresentada automaticamente na aba expressão.

Open

Aba Campo de tela

Exibe os campos "Valor" (ng-model) de todos os componentes da tela, bem como os campos de todas as fontes de dados presentes. Para as fontes de dados, é exibido o campo do registro ativo ou o campo correspondente à linha do atributo da fonte de dados. Dessa forma, os atributos são descritos nos formatos "<nome_fonteDados>.active.<nome_campo>" para o registro ativo e "<rowData>.<nome_campo>" para acessar o campo de uma linha específica em uma tabela ou lista de dados. No exemplo da figura abaixo, estamos atribuindo o e-mail do usuário ativo a um campo de texto. 

Open

Aba Bloco de programação 

Permite selecionar uma função de bloco de programação (cliente ou servidor) criado no projeto.

Open

1. Ícone da função: sua cor informa a função selecionada:

   • Azul: função servidor;

   • Verde: função cliente.

2. Função selecionada: informações da função selecionada, possui a seguinte sintaxe:
   <Arquivo>:<Função>( [ <Parâmetro N>  ) : <Retorno>

   • Arquivo: informa o nome do arquivo Java ou JavaScript onde está a função selecionada;

   • Função: informa o nome da função selecionada;

   • Parâmetro: exibe os parâmetros que são recebidos pela função;

   • Retorno: informa se a função possui retorno.

3. Seleção do bloco de programação: Abre a janela que lista os blocos de programação existentes.

4. Novo arquivo: permite criar arquivo blockly enquanto não existir função selecionada.

5. Atualizar: verifica e atualiza alterações na função selecionada.

6. Limpar: limpa a seleção feita.

7. Lista de parâmetros: exibe todos os parâmetros recebidos pela função selecionada, possui 3 colunas:

   • Nome: nome do parâmetro;

   • Valor do campo: exibe os tipos do parâmetro

     • valores estáticos: Texto, Numérico, Data e hora, Hora, Lógico;

     • valores dinâmicos:  Expressão, funciona da mesma forma que a aba Campos da Tela, com a adição da opção NULL. Aceita expressões do tipo  "vars.input9682+vars.input2561"

   • Conteúdo: conteúdo a ser inserido com base no valor do campo.

8. Atualizar: atualiza a lista de funções.

9. Novo arquivo Servidor: mesmo recurso do item 4, porém este só permite criar arquivo blockly do tipo servidor.

10. Novo arquivo Cliente: mesmo recurso do item 4, porém este só permite criar arquivo blockly do tipo cliente.

11. Lista de funções: exibe os arquivos de bloco de programação, ao expandir um arquivo é possível visualizar todas as funções, seus parâmetros e se possui retorno.

12. Editor blockly: abre uma janela para editar o arquivo de bloco selecionado.

Aba Função

Quando usamos a aba Bloco de Programação, precisamos criar uma função dentro do arquivo blockly para depois chamá-la no componente, fundamental para funções mais complexas. Porém, ações que necessitem de um único bloco de programação, como Exibir componente, Abrir url, Alterar valor do campo e outros, podem ser chamados diretamente pela aba Funções, não sendo necessário criar uma função blockly para chamar esse bloco.

A aba Funções só lista os blocos do tipo cliente e são exatamente os mesmos blocos das funções de bloco de programação, ou seja, possuem os mesmos nomes e parâmetros. Ao selecionar um bloco, seus atributos são listados abaixo (item 4 da figura 1.13) para definir o que será passado, podendo ser um valor estático ou expressão.

Open

1. Função selecionada: informações da função selecionada, possui a seguinte sintaxe.

2. Seleção do bloco de programação: abre a janela que lista os blocos de programação existentes.

3. Limpar: limpa a seleção feita.

4. Lista de parâmetros: exibe todos os parâmetros recebidos pela função selecionada, possui 3 colunas:

   • Nome: nome do parâmetro.

   • Valor do campo: exibe os tipos do parâmetro

     • valores estáticos: Texto, Numérico, Data e hora, Hora, Lógico;

     • valores dinâmicos: expressão, funciona da mesma forma que a aba Campos da Tela, com a adição da opção NULL. Aceita expressões do tipo  "vars.input9682 + vars.input2561".

   • Conteúdo: conteúdo a ser inserido com base no valor do campo.

5. Lista de funções: exibe uma lista com todos os blocos de programação do tipo cliente.

6. Parâmetros: exibe os parâmetros de cada função.

7. Visualizador: exibe o nome e os atributos da função selecionada.

Atributos HTML

Ação do formulário

formaction

Atributo que específica onde deve ser enviado os dados do formulário quando ele é enviado. Funciona somente quando o componente é do tipo submit.

Valor: URL.

OBS: Esse atributo sobreescreve o atributo action.

Ação

action

Atributo que específica onde deve ser enviado os dados do formulário quando ele é enviado.

Valor: URL.

accesskey

accesskey

Atributo que específica uma tecla de atalho, que deve ser somente um caractere, para focar no componente quando a mesma é pressionada.

Valor: caractere (m, d, e, etc.).

OBS: os comandos para focar no componente vária conforme o tipo de navegador e sistema operacional.

Aceita

accept

Atributo que específica quais tipos de arquivo o usuário deve adicionar na caixa de diálogo. Funciona somente quando o componente é um input com o tipo file.

Valor: extensão do arquivo (.png, .pdf, etc.), audio/*, video/*, image/* ou tipo de media.

OBS: O /* após o nome informa que ele aceita qualquer extensão de arquivo.

Aceita conjunto de caracteres

accept-charset

Atributo com valor do pré-definido, ele especifica qual codificação do caractere será usada ao enviar um formulário.

Valor: UTF-8 ou ISO-8859-1.

Alinhamento

align

Atributo com valor pré-definido, ele faz o alinhamento do conteúdo da célula conforme o valor informado.

Valor: left, center, right, justify ou char.

OBS: atributo se encontra depreciado. Hoje em dia, ele é usado pelo CSS.

allowfullscreen

allowfullscreen

Atributo com valor do tipo booleano, ele determina se o preenchimento total da tela será ativado ou não.

Valor: true ou false.

OBS: funciona somente quando o componente é um iframe.

Altura

height

Atributo com valor numérico, ele especifica a altura do componente imagem em pixels.

Valor: numérico.

Alvo

target

Atributo com valores pré-definidos, ele especifica o local onde será exibido a resposta que é recebida após enviar um formulário.

Valor: _blank, _self, _parent, _top ou frame (informando o nome do frame).

Apenas leitura

readonly

Propriedade do tipo booleano, ele desabilita a edição do componente, tornando-o somente para leitura. Se aplica exclusivamente a componentes do tipo "Entrada de texto" e "Área de texto", dessa forma, para adicionar essa propriedade é necessário selecionar o componente, desagrupá-lo (ícone cadeado na barra de opções) e acessar os subcomponentes input ou textarea.

Valor: true ou false.

aria-label

aria-label

Atributo do tipo texto, ele especifica um texto para o componente atual.

Valor: string.

OBS: ele é um atributo para acessibilidade.

Arrastável

draggable

Atributo do tipo booleano, ele especifica que o componente pode ser arrastado ou não.

Valor: true ou false.

OBS: atributo utilizado em operações de arraste e solte.

Auto completar

autocomplete

Atributo do tipo booleano, ele especifica se o elemento pode completar automaticamente ou não um texto.

Valor: on ou off.

Baixar

download

Atributo que específica que o que contém no atributo href será baixado ao invés de ser redirecionado.

Valor: (opcional) nome para o arquivo que será baixado.

Borda

border

Atributo que específica o tamanho da borda que ficará ao redor da imagem.

Valor: numérico.

OBS: atributo se encontra depreciado. Hoje em dia, ele é usado pelo CSS.

Cabeçalho

headers

Atributo do tipo texto, ele especifica uma ou mais células do tipo cabeçalho no qual uma célula da tabela está relacionada através de seus IDs.

Valor: identificadores (ids) do cabeçalho da tabela.

Checador gramatical

spell-check

Atributo do tipo booleano, ele especifica se o componente irá fazer a checagem gramatical do conteúdo inserido.

Valor: true ou false.

OBS: só é valido para campos de input (exceto quando o tipo é password), áreas de texto e componentes editáveis.

Conteúdo editável

contenteditable

Atributo do tipo booleano, ele informa se o componente é editável ou não.

Valor: true ou false.

Cor de fundo

bgcolor

Atributo com valor do tipo texto, ele define a cor de fundo do componente.

Valor: #0000FF (em hexadecimal), rgb(0,0,255) (em RGB), ou blue (nome da cor). 

Desabilitado

disabled

Atributo do tipo booleano, ele é usado para desabilitar o componente.

Valor: disabled.

Direção

dir

Atributo com valores pré-definidos, ele especifica a direção do texto no componente.

Valor: ltr (da esquerda para direita), rtl (da direita para esquerda) ou auto (automático).

É mapa?

ismap

Atributo do tipo booleano, ele especifica se a imagem possui áreas clicáveis. Se sim, será enviada as coordenadas do ponto clicado através da URL na forma de uma query string.

Valor: ismap.

Envolver

wrap

Atributo com valores pré-definidos, ele especifica como um conteúdo do componente área de texto deve ser embrulhado quando o componente é enviado em um formulário.

Escondido

hidden

Atributo do tipo booleano, ele é usado para esconder o componente.

Valor: hidden.

OBS: o componente também é escondido no editor, então clique no ícone para exibir elementos ocultos para que o mesmo seja visível novamente.

Escopo

scope

Atributo com valores pré-definidos, ele especifica se a célula de cabeçalho é para uma coluna ou uma linha (ou para um grupo de colunas ou de linhas) de uma tabela.

Valor: col (coluna), row (linha), colgroup (grupo de colunas) ou rowgroup (grupo de linhas).

Estilo customizado de media

media

Atributo com valores pré-definidos, ele especifica qual media ou dispositivo que o documento utilizado será otimizado. É utilizado em componentes de link.

OBS: é mais utilizado em arquivos CSS.

Estilos

style

Atributo usado para estilizar o componente.

Valor: atributo de estilização e seu valor (ex.: color: blue).

OBS: É recomendo fazer a estilização de componentes através de arquivos CSS.

Focar automaticamente

autofocus

Atributo do tipo booleano, ele especifica que o componente será focado assim que a página for carregada.

Valor: autofocus.

Forma

shape

Atributo com valores pré-definidos, ele especifica a forma da área que será clicada.

Valor: default (marca a região total), rect (marca uma região retangular), circle (marca uma região circular) e poly (marca uma região polígona).