Skip to end of metadata
Go to start of metadata

Como visto anteriormente, o Editor visual do CronApp apresenta componentes que facilitarão ainda mais o desenvolvimento do front end das suas aplicações. Todos os elementos são adicionados ao serem arrastados para tela no modo visualização. A seguir veremos como utilizar cada componente presente no editor:

File upload

Com esse elemento você consegue receber arquivos para enviar para a sua aplicação (Figura 1), ao clicar no elemento ele apresentará os seguintes atributos (Figura 2):

Type: é o atributo que configura a caixa de texto para se transformar no tipo file upload.

Name: serve para  configurar uma identificação para localizar no código o arquivo recebido.

New propety: serve para atribuir uma nova propriedade ao elemento.



 Figura 1 - Elemento File upload


 


 Figura 2- Atributos do elemento file upload 

Imagem

Com esse elemento você poderá adicionar imagens na sua aplicação (Figura 13). Você deverá configurar a sua imagem especificando os seguintes atributos (Figura 4):

Src: serve para selecionar a imagem que será exibida. Ao clicar no botão, ele apresentará toda as imagens do projeto (Figura 5). As imagens que serão usadas deverão estar dentro do projeto e dentro da pasta "webapp" para que a imagem seja identificada.

Class: é a janela que contém as classes CSS.

width e height: serve para selecionar a largura e a altura da imagem em píxel.

New propety: serve para atribuir uma nova propriedade ao elemento.

 


 Figura 3 - Elemento Imagem


 Figura 4 - Atributos imagem

 

 

 

 Figura 5 - Selecionando uma imagem do projeto

Esse elemento permitirá que você referencie páginas e links externos da sua aplicação (Figura 6). No menu de configurações (que pode ser acessado clicando no elemento) são apresentados os seguintes atributos (Figura 7):

Href: com ele você pode referenciar uma página da sua aplicação ou um link externo (Figura 8).

Class: é a janela que contém as classes CSS.

Target: serve para selecionar a ação do link, as opções disponíveis são "mesma janela", "mesma janela", "janela pai" e "top".

Content: contém o texto que aparecerá no link, você pode editar conforme desejado.

New propety: serve para atribuir uma nova propriedade ao elemento.


 

 Figura 6 - Componente Link

 

  

 Figura 7 - Atributos do elemento link

 

 

  

 Figura 8 - Atribuindo uma página ao link

Navbar

Ao adicionar esse elemento você terá um menu de topo na sua página (Figura 9). Clicando no elemento, será possível localizar a barra de itens (Figura 10), clicando em "+" será adicionado um novo item e clicando na lixeira o item será removido. Selecionando uma parte do elemento, outras funções aparecerão no menu de propriedades (Figura 11), por exemplo, em "project name"  aparecerá as seguintes opções:

Class: é a janela que contém as classes CSS.

Data-component: é uma propriedade de configuração

Href: serve para configurar a página que será referenciada ao clicar no botão "project name".

Content: contém o texto que será apresentado, você pode editar conforme desejado.

New propety: serve para atribuir uma nova propriedade ao elemento.


 

 Figura 9 - Elemento Navbar

 

 

 Figura 10 - Barra de itens 


 

 

 Figura 11 - Atributos de Project name

 

Ao clicar e "menu itens" os atributos "content" e "new propety" serão apresentados. Além disso, em itens você você poderá clicar no ícone "olho" para apresentar o menu com subitens e clicar adicionar e remover outros subitens clicando no "+" e na lixeira, respectivamente (Figura 12). Ao selecionar um subitem, suas opções de configuração também serão apresentadas, serão os mesmo atributos descritos acima.

 

 

 Figura 12 - Atributos de Project name 

Sidebar

Com esse elemento será possível adicionar uma barra lateral à sua aplicação, que já vem configurada para aparecerá o nome do usuário logado, os botões "Home" e "Logout" (figura 13). Você poderá adicionar itens de menu a sua barra, para isso, selecione o elemento inteiro e clique no "+" (Figura 14). No menu de propriedades você poderá adicionar e remover itens de submenu e identificará os seguintes atributos (Figura 15):

 Content: contém o texto que será apresentado, você pode editar conforme desejado.

New propety: serve para atribuir uma nova propriedade ao elemento.

 

Além disso, nos submenus será possível identificar as seguintes opções (Figura 15):

Href: serve para referenciar a página para qual o usuário será levado.

Class: é a janela que contém as classes CSS.

Data-component: é uma propriedade de configuração

Content: contém o texto que será apresentado, você pode editar conforme desejado.

New propety: serve para atribuir uma nova propriedade ao elemento.



 

 Figura 13 - Elemento Sidebar 

 

 

 Figura 14 - Adicionando itens de menu 

 

 

 Figura 14 - Adicionando itens de menu 

 

 

 Figura 15 - Atributos do submenu

TextoTitulo

Esses elementos servem para colocar um texto em sua aplicação, a diferença entre eles é que o título vem configurado com maior destaque e tamanho (Figura 16). Ao clicar em qualquer um dos elementos, os seguintes atributos aparecerão (Figura 17): 


Class: é a janela que contém as classes CSS.

Content: contém o texto que será apresentado, você pode editar conforme desejado.

New propety: serve para atribuir uma nova propriedade ao elemento.


 

 Figura 16 - Adicionando os elementos texto e título


 

 Figura 17 - Atributos dos elementos texto e título

Gráficos e caixa de texto

No editor de front end do CronApp estão disponíveis diversos gráficos que poderão ser utilizados na sua aplicação, como o gráfico de rosca mostrado na figura 18.

 

 

 Figura 18 - Gráfico rosca

 

Os valores dos gráficos podem estar associados a caixas de textos, que na IDE são chamadas de input, ou vinculados ao banco de dados para formar um relatório. Para melhor entendimento, apresentaremos um exemplo de utilização de gráfico com valores associados à caixas de textos.

Nesse exemplo, são adicionados 3 inputs (Figura 19), em seguida é necessário configurar corretamente seus atributos. Ao clicar em um input serão apresentadas as seguintes propriedades (Figura 20):

Type: é um atributo de configuração que define o tipo da caixa de texto.

Ng-model: configura uma variável na seção do cliente, que irá receber o valor digitado na caixa de texto. Essa propriedade será vinculada ao gráfico.

Class: é a janela que contém as classes CSS.

Id: é a propriedade que identifica a caixa de texto.

Placeholder: configura o texto que será apresentado quando a caixa de texto não estiver selecionada.

 

Perceba que ao adicionar uma caixa de texto (input) um label também é adicionado, você poderá alterar o texto que será apresentado na propriedade "content" (Figura 21). No gráfico temos as seguintes propriedades (Figura 22):

Id: é a propriedade que identifica o gráfico.

Class: é a janela que contém as classes CSS.

Chart-data: é a propriedade que associa a caixa de texto com o gráfico, nela deve ser inserida a variável definida em ng-model na caixa de texto. nesse exemplo, são utilizados 3 inputs  com os ng-models definidos como compras_online, compras_loja, compras_telefone.

Chart-labels: serve para nomear os elementos do gráfico.


Para testar o exemplo apresentado, rode sua aplicação e no browser insira valores nas caixas de textos para que o gráfico seja mostrado (Figura 23).

 

 

 Figura 19 - Adicionando elementos inputs 

 

 Figura 20 - Propriedades de um input


 

 Figura 21 - Propriedades de um label 

 

 Figura 22 - Propriedades de um gráfico


 

 Figura 23 - Testando no browser

 

Datasource e Grids

Com o elemento datasource (Figura 24) você consegue fazer o acesso e o controle a API Rest da aplicação e efetuar funções de cadastro, registros e diversas outras. Esse elemento é todo personalizável e está configurado em linguagem javascript. Você poderá localizá-lo no diretório webapp>>components>>js, ele aparecerá apenas no editor de front end, mas não será visível na aplicação. Ao clicar no datasource os seguintes atributos deverão ser configurados:

Name: serve para atribuir um nome que será usado como referencia para o datasource.

Entity: serve para selecionar a entidade desejada, ao clicar no botão, aparecerão os serviços Rest configurados na sua aplicação (Figura 25).

Keys: Identifica o id da entidade selecionada.

Rows-per-page: indica o número de registros que serão exibidos.

Filter: essa propriedade serve para configurar o filtro dos dados que serão apresentados. Por padrão ele vem com uma chamada de método GET  concatenado com a variável de pesquisa, mas é possível configurar para outros métodos GET.

 

Para exibir as informações desejadas, você poderá utilizar horizontal grids ou vertical grids, a única diferença entre as duas é que os dados serão exibidos em formatos diferentes. Para exemplificar, serão utilizadas duas horizontal grids (Figura 26), você poderá alterar o nome das linhas na propriedade "content". Além disso, você poderá configurar para que as linhas recebem as informações do datasource, basta clicar no ícone seta em "content", selecionar o datasource e o que mais desejar que ele exiba, como mostrado na figura 27.  Rode a sua aplicação e na página do datasource verifique os dados apresentados.

 

 

 Figura 24 - Elemento datasource


 

  

 Figura 25 - Propriedade entity

 

  

 Figura 26 - Adicionando horizontal grid


 

   

 Figura 27 - Selecionando as informações da grid

Form e Gatilhos

O elemento datasource contém gatilhos para que mensagens ou outras funções aconteçam com determinadas ações de registros em sua aplicação. Para configurá-los, clique na aba de eventos e as seguintes propriedades serão apresentadas (Figura 28):

On-after-create:

On-before-update: 

On-after-update: 

On-before-delete: 

On-after-delete:  

On-after-fill:  

On-error:  

 

Para a manipulação dos itens de um datasource, você poderá utilizar um form (Figura 30) que poderá ser associado ao datasource clicando no elemento por inteiro e selecionar o datasource desejado na propriedade "datasource" (Figura 31). O form permite transitar entre os dados do datasource, adicionar um novo dado, editar e excluir.

 

   

 Figura 28 - Eventos do datasource

 

    

 Figura 29 - Criando uma função 


 

   

 Figura 30 - Elemento form


 

    

 Figura 31 - Associando o form a um datasource

Tabs

O Tabs é um elemento de aba que poderá ser adicionado à sua aplicação (Figura 32). Ao adicioná-lo serão introduzidas apenas duas abas,mas outras abas podem ser adicionadas facilmente, clicando no ícone "+", no menu de propriedades ou removê-las clicando na "lixeira" (Figura 33). Para alterar o texto que será apresentada na aba, basta editá-lo na propriedade "content". Para adicionar um elemento a uma aba basta arrastá-lo para baixo da aba desejada (Figura 34).   

 

 

 Figura 32 - Elemento tabs

 

  

 Figura 33 - Menu de propriedades 

 

   

 Figura 34 - Adicionando um elemento em uma aba


 

 









 

 

Nesta página

 

  • No labels