Skip to end of metadata
Go to start of metadata

Pode ser que em algum momento da edição do front end da sua aplicação, no Editor visual do CronApp, seja necessário utilizar elementos que dependam de outros para realizarem algumas funções. Para melhor entendimento, será usado um exemplo que mostrará a utilização do padrão master detail. Nesse padrão são apresentados dois painéis, o painel master (mestre), geralmente exibe uma lista, e o painel detail (de detalhes) com detalhes do conteúdo. Quando um item da lista do painel master é selecionado, o painel de detalhes é atualizado. 

Criando a página do master detail

O CronApp permite a criação de master detail de forma simples e rápida. Para começar, é necessário que você crie um novo projeto, caso não tenha criado anteriormente.  Além disso, você deve criar o diagrama de classes do seu projeto, atribuir os relacionamentos adequados e gerar a camada de dados do seu projeto

Após isso, vamos criar uma página angularJS que seguirá o padrão master detail. Com o projeto aberto, Clique no atalho "View" ao lado esquerdo da aplicação, em seguida clique com o botão direito em "logged" > "Novo" > "AngularJS", selecione "Empty AngularJS", clique em "Avançar" (Figura 1), Escolha o nome do arquivo de sua preferência e clique em "Finalizar". 

 

 

Figura 1 - Criando página AngularJS

 

Criando datasources dependentes

Na "view" criada, clique e arraste o componente "Datasource" para a área de edição até que a "div start" seja destacada (Figura 2), Clique no componente adicionado, em seguida clique nas reticências em frente ao "entity", ao lado direito da aplicação (Figura 3), escreva o nome da classe "Autor" no campo de pesquisa da Janela com todos os serviços REST disponíveis e clique no mesmo (Figura 4), perceba que a propriedade entity ao lado direito da aplicação será preenchida. Volte para a tela de componentes novamente, clicando no atalho de controles, e arraste um componente "Datasource" para a área de edição gráfica novamente. Clique nas reticências e escreva o nome da classe "Livro no campo de pesquisa, clique na seta para baixo e escolha a consulta "Autor/{autorId}", na janela de filtro que será exibida escolha a opção "Autor.active.id" nas opções listadas (Figura 5). Em seguida, clique em "Salvar".

  

Figura 2 - Adicionando o componente Datasource


Figura 3 - Adicionando uma entidade ao datasource


 

Figura 4 - Escolhendo a entidade Autor


 

Figura 5 - Escolhendo o filtro da consulta

 

Na propriedade "dependent-by", selecione o Datasource "Autor". Após isso, clique no atalho "controles" e arraste o componente "Dynamic Combobox" para a área de edição. Na propriedade "Option Selected" clique no botão do lado direito "editar expressão", na propriedade "field", escolha a opção "nome" (Figura 6), em seguida clique em "Save". Clique em "editar expressão" também na propriedade "Option text" e escolha a opção "nome" para a propriedade "field".

 

 

Figura 6 - Configurando a propriedade field

 

Adicionando uma tabela para exibição dos dados

Em "controles" arraste o componente "Table" e arraste para a área de edição. Clique na tabela, ao lado direito, no menu "Items", clique no ícone de lixeira no item "Column Header 2" para excluir uma coluna da tabela criada. Clique no campo "Column Header 1" da tabela, após clicar, vá na propriedade "content" e defina como "Título" e selecione "Livro" na propriedade "datasource". Após isso, clique no campo "Column Content 2" da tabela, após clicar, vá na propriedade "content" e clique no botão "editar expressão", na propriedade "field", escolha a opção "titulo" e salve.

 

 

Figura 7 - Configurando a Column Header 1

 

 

Figura 8 - Configurando a Column Content 2


Após isso, você precisará acessar o arquivo em que o seu diagrama de dados foi feito, clicar com o botão direito na classe "Autor"  e "Criar visão CRUD para a entidade". Escolha a opção "AngularJS CRUD View", em seguida clique duas vezes em "Avançar". Clique na opção "Livro" e depois em "Finalizar".

Adicionando a página do master detail ao menu

Para adicionar a página em que você criou o master detail, clique no atalho de "views", em seguida, dentro da pasta "logged", clique em "home.view.html" , perceba que foi aberto o editor gráfico da página home (figura 9).  

 

Clique na barra de menu, ao lado direito, na propriedade "Itens", clique no sinal de "+" (Figura 10). 

Após isso, no editor gráfico, clique no item de menu "Admin", em seguida na propriedade "Itens" no lado direito, clique no sinal de "+" (Figura 11).

 

Adicione um item também ao "Menu Item", clicando no sinal no sinal de "+". Em seguida clique no primeiro "Action Item", altere a propriedade "content" para "Autor" e depois clique na reticências ao lado de "href" (Figura 12), para que seja aberta uma janela de busca de páginas Angular (figura 13). Pesquise o nome da classe "autor". Clique na opção "autor.view.html", em seguida clique em "Selecionar", note que  "href" será preenchido com a rota da página. Clique no segundo "Action Item", na propriedade "content" ao lado direito dê o nome de "master", depois clique nas reticências ao lado do "href" e na janela de busca de páginas Angular selecione a classe "master". 



Figura 9 - Editor gráfico da página "home"


Figura 10 - Adicionando um item a barra de menu


 


 Figura 11 - Adicionando um item ao menu admin

 

 

Figura 12 - Editando um action item



 

Figura 13 - Janela de buscar de páginas Angular

 

 


Após isso, execute o seu projeto. Aguarde até que o Tomcat seja inicializado e então clique no botão "Abrir navegador" (Figura 14).  Insira "admin" no campo "Usuário" e "Senha", em seguida clique em "Entrar". Você será redirecionado para a página inicial da aplicação (Figura 15). 

Na barra de menu da aplicação, clique em "Menu Item" e depois em "Autor", você será redirecionado para a página de inserção dos dados do "Autor" (Figura 16). Clique em "Novo". Em seguida no campo "Nome", insira o nome do Autor. Após, clique em "Adicionar Livro", será aberto um pop up para que seja inserido o título do livro desejado (Figura 17). Insira o título do livro e clique em "Salvar", o pop up da inserção do nome do livro será fechado e a página para inserir o autor ficará disponível novamente. Clique no botão de confirmação. Repita o processo se desejado, foram apresentado os registros que acabam de ser registrados (Figura 18). Na barra de menu da aplicação, clique em "Menu Item" e depois em "Master", será aberta a página master, mostrando os registros do primeiro autor (figura 19), clique na caixa de seleção e selecione outro Autor, veja que agora os livros do segundo autor foram listados (figura 20).



Figura 14 - Login na aplicação




Figura 15 - Página inicial da aplicação
 


Figura 16 - Página de inserção do autor



Figura 17 - Pop up para inserir o livro


 Figura 18 - Livros registrados



 Figura 19 - Livros do primeiro autor



 Figura 20 - Livros do segundo autor

 

 

 

 





 

 

 

 

 

 

 

 


 

 

 




 

 

Nesta página

 

  • No labels