Introdução
Gráficos são elementos bastante utilizados para apresentar informações de uma maneira mais compreensível e amigável, eles são indicados principalmente quando trabalham com dados numéricos. Sua utilização na IDE se dá através da combinação entre os blocos de programação da categoria gráfico e o componente visual gráfico, e eles são os responsáveis, respectivamente, por criar um gráfico e o renderiza-lo em uma view HTML.
ConfiguraçãoPré-configuração
Será feito em etapas, primeiramente adicionando o componente na IDE e, após, desenvolvendo uma programação simples utilizando o bloco gráfico onde o mesmo utilizará dados de um banco.
Criando uma entidade no banco
- Adicione uma classe no diagrama - nesse exemplo, vai ser utilizado a classe anime;
- Crie atributos para essa classe, como anime (tipo texto), genero (tipo texto), episódios (tipo inteiro) e ano (tipo texto) (Figura
- 2.1);
- Faça a persistência da classe clicando com o botão direito do mouse sobre a classe e selecionando criar camada de dados para a entidade (Figura
- 2.1);
- Crie o formulário da classe clicando com o botão direito do mouse sobre a classe e selecionando criar visão para a entidade (Figura
- 2.1).
Figura 12.1 - Criar persistência e visão para a entidade
Vinculando página à barra de navegação e adicionando dados
Após, vincule a página na barra de navegação da página home (Figura 2.2) reproduzindo os passos abaixo:
- Abra a view home.view.html;
- Selecione a barra de navegação para abrir a janela Opções de Menu - caso ela não abra, clique no botão "..." (indicado pela seta vermelha na Figura 2.2) do campo configuração pertencente a aba propriedade;
- Adicione um novo item a barra (1 da Figura 2.2) e insira um nome;
- No botão "..." (2 da Figura 2.2) pertencente ao campo ação para abrir a janela de view e selecione a view da classe que foi gerada;
Figura 2.2 - Vinculando página à barra de navegação
Execute o projeto e adicione dados aleatórios, mas sempre preenchendo em todos os campos.
Adicionando componente visual
Na página da home.view.html adicione o componente gráfico. Selecione o componente e na aba propriedade, altere o conteúdo do campo identificador do gráfico para chartAnime.
Figura 3 - Alterando o campo identificador do gráfico