Page tree
Skip to end of metadata
Go to start of metadata

Apesar da plataforma Cronapp possuir os mais diversos componentes visuais, pode surgir a necessidade de utilizar um componente visual com características bem específicas. Para esses casos, o Cronapp nos permite criar novos componentes visuais, importando bibliotecas AngularJS disponíveis na web ou desenvolvê-las.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

  1. Projeto do tipo mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar novo projeto );

Visão geral: exemplo

Nesse tutorial veremos como importar um Grid desenvolvidos por terceiros para um componente visual. O Angular UI Grid é um framework de código aberto e pertence a suite AngularUI, sua documentação e código fonte podem ser encontradas em: http://ui-grid.info.

Passos 

1-Criação do "Novo Componente Visual"

Primeiramente vamos criar um Novo Componente Visual no pacote META-INF que faz parte do pacote “Código Fonte Servidor”. Clicando com o botão direito do mouse em META-IN →  Novo → Novo Componente Visual (Figura 1). 

Figura 1 - Criação do Novo Componente Visual


Na janela de escolha de modelo de componente json, selecione a opção Novo Componente e clique em Avançar (Figura 2).

Figura 2 - Seleção Componente json


Na Próxima etapa, devemos inserir informações para o componente: nomes do arquivo, componente e id, template HTML, controladores Angular, endereços do JavaScript e CSS (Tabela 1) e logo em seguida clicamos em Finalizar (Figura 3).

 


Figura 3 - Preenchendo dados do novo componente visual


CampoConteúdo
Nome do Arquivo ui-grid
Id do Coimponente ui-grid
Nome do Componente UI Grid
URL de JavaScripts Requeridos

https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.2.4/ui-grid.js 
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.2.4/ui-grid.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.9/angular-touch.js 


URL de CSS Requeridos 

https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.2.4/ui-grid.css
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.2.4/ui-grid.min.css

Template HTML 
<div  id="crn-ui-grid" 
      ui-grid="{data:[
            {'Coluna A':'Valor 1', 'Coluna B':'Valor 2'},
            {'Coluna A':'Valor 3', 'Coluna B':'Valor 4'}
          ]}" 
      class="grid component-holder"
      data-component="crn-ui-grid"> UI GRID </div>
Controladores Angular (se houver)

ngTouch
ui.grid

Tabela 1 - Dados para criação do componente


Obs.:

Neste primeiro exemplo estamos passando os valores no template, será uma grid com 2 colunas e 4 valores. No segundo exemplo desse tutorial iremos retornar valores do banco de dados.

2-Testando o componente

Nesse momento o componente já se encontra na aba controle do editor HTML. Porém, é necessário fechar a aba do editor (home.view.html), caso esteja aberta dentro da IDE, e abrí-la novamente para que os componentes sejam atualizados.

Para testarmos o nosso componente, vamos utilizar a página home.view.html que encontra-se em Código Fonte  Principal  Códigos Fonte Cliente  views  logged  home.view.html. Com o arquivo aberto, vamos pesquisar (campo circulado, Figura 5) o nome do componente criado “UI Grid”, selecionamos o componente e arrastamos o ícone para o centro da página home.


 

Figura 5 - Pesquisa e seleção do componente criado


Agora vamos rodar a aplicação (F9) e visualizar o nosso novo grid na tela (Figura 6). 

 

Figura 6 - Resultado


Obs.:

Antes de exibir o grid, o sistema irá solicitar login e senha do administrador, digite "admin" e ambos os campos e clique em Entrar.


3-Alimentando o componente com dados do banco

Componente funcionando, vamos testá-lo em uma situação real, retornando os dados da tabela User do nosso dados de banco.

Vamos utilizar o mesmo grid criado no exemplo anterior na página home.view.html. Pesquisamos pelo controle Fonte de dados, selecionamos e arrastamos para o centro da nossa tela (Figura 7).

Figura 7 - Pesquisa e seleção do componente Fonte de dados  

    3.1-Alterando as propriedades da Fonte de dados

Selecione o ícone fonte de dados que arrastamos para a página e depois selecione a aba propriedade no controle (Figura 8).


Figura 8 - Acessando propriedades do controle Fonte de dados


Precisamos alterar apenas as propriedades Origem dos Dados e Depende de, como informado na Tabela 2.

 

CampoConteúdo
Depende deUserGrid
Origem dos Dados{data:UserGrid.data}

Tabela 2 - Dados para inserção na propriedade do controle Fonte de dados


Mais sobre

Para saber mais sobre o uso do componente Fonte de dados acesse: Criando Eventos em uma Fonte de Dados

    3.2-Alterando as propriedades do Grid

Selecione o grid que está na nossa página home, depois a aba propriedade do controle (Figura 9) e insira no campo ui-grid “{data:UserGrid.data}”, para alimentar o grid a fonte de dados criada.

  


Figura 9 - Acessando propriedades do controle grid


4-Testando o grid

Agora vamos rodar novamente a aplicação (F9) e visualizar o nosso grid com os dados obtidos da tabela User (Figura 10). 



Figura 10 - Resultado



Nesta Página

  • No labels