Skip to end of metadata
Go to start of metadata

Criando um projeto a partir do modelo “Projeto AngularJS sem autenticação” será carregado um projeto já elaborado.

A base de desenvolvimento desse projeto tem o domínio da aplicação presente no seguinte diagrama: agenda.umlcd. Esse diagrama contém as entidades ContatoGrupo e Telefone. Para recriar esse domínio em um novo diagrama, somente é necessário arrastar três controles ”Class” da área de controle (lado direito do CronApp IDE) para a área central do editor do diagrama.  Esse processo deverá ser realizado três vezes para se inserir três entidades no diagrama. Observe a imagem abaixo:

 

Figura 1 - Inserindo Entidades no Diagrama

 

Após a inserção das três entidades no diagrama, clique sobre uma delas para seleciona-la. A seguir, no painel do lado direito do CronApp IDE será exibido as propriedades da entidade selecionada. Nesse painel altere a propriedade “Class Name” da entidade selecionada, para alterar o nome. Se desejar, a propriedade “Table Name” também poderá ser alterada, a fim de modificar o nome da tabela que será criada no banco de dados da aplicação para armazenar os registros dessa entidade.

Caso essa propriedade não sofra alteração, assim permanecendo com o valor padrão (no caso o valor vazio) a tabela que será criada no banco para armazenar os registros dessa entidade terá o mesmo nome que foi definido para a classe, na propriedade “Class Name”, porém com todas as letras em maiúsculo.

Altere a propriedade “Class Name” da primeira entidade selecionada para “Contato”.
 

Figura 25 - Entidade "Contato" com a propriedade "Class Name" alterada

 

Repita o mesmo processo utilizado para configurar Contato para configurar a propriedade “Class Name” para as entidades Grupo e Telefone.

Após definir os valores das propriedades “Class Name” das entidades adicionadas, clique no controle “1toN” (lado direito do CronApp IDE). Em seguida, clique na classe Contato e, logo após, na classe Telefone. Com isso, será iniciado um relacionamento com a cardinalidade “1 para muitos”.

Desse modo será incorporado a ambas entidades os atributos “id” (pré-configurados automaticamente) e o atributo contato somente na entidade Telefone, que vem a ser a chave estrangeira, a qual configura a relação entre as entidades Contato e Telefone. Esse atributo contato, também configurado automaticamente, corresponde a um campo que recebe a coluna no banco de dados. Nessa coluna persistirá o valor da chave primária da entidade Contato configurada com o nome “fk_contato”.

Insira outro relacionamento com o controle “1toN”, dessa vez clicando na entidade Grupo e em seguida em Contato.

Para remover um relacionamento entre classes, aproxime o mouse sobre a seta que representa o relacionamento e clique no botão X.  Assim, o relacionamento e o atributo de chave primária que foi inserido automaticamente serão removidos.

Desse modo a entidade Grupo também receberá o atributo “id” e a entidade Contato receberá o atributo grupo, sendo também uma chave estrangeira, já pré-configurada como a da entidade Telefone.
 

Figura 3 - Relacionamentos entre as entidades inseridos


Se ao invés do relacionamento “1toN” tivesse sido utilizado o relacionamento “1to1” o comportamento resultante da inserção desse relacionamento seria similar, porém o atributo de chave estrangeira, que especifica o relacionamento entre as entidades, seria inserido na primeira entidade clicada, e não na segunda.

Retomando, clique duas vezes sobre a entidade Contato.  Após essa ação será exibida uma janela de configuração de entidade. Observe na imagem abaixo:
 

Figura 4 - Janela de configuração da entidade exibindo a aba "Attibutes"

 

Essa janela contém as seguintes abas: Attributes e Queries. A aba Attributes possibilita a configuração dos atributos da entidade. A aba Queries possibilita a configuração de “Named Queries” da entidade, que são consultas definidas para a busca de registros no banco de dados. Essas consultas devem ser realizadas na linguagem “JPQL” que é uma derivação da linguagem “SQL” própria para o uso de frameworks JPA de persistência e mapeamento de banco de dados em processo da orientação a objetos.
 

Figura 5 - Janela de configuração da entidade exibindo a aba "Queries"

 

Na aba Attributes temos as seguintes colunas e suas respectivas funções:

Attribute: Atributo da classe Java. Nome que será definido o atributo da classe Java a ser gerada.

DB Column: Campo do banco de dados. Nome da coluna do banco de dados que será configurada para persistência do registro da entidade que está sendo configurada.

Length: Tamanho do campo no banco de dados. Funciona de acordo com o tipo do campo adotado. No caso de campo “caracter” ou de campo “inteiro” é aceita uma entrada de um valor inteiro que corresponde a quantos caracteres ou algarismos que serão aceitos pelo banco. Ao selecionar o tipo do campo como um número fracionado a coluna Length não terá utilidade sobre esse campo, sendo exibidas duas novas colunas “Precision” e “Scale” que configurarão o tamanho do campo de tipo fracionado.

Precision: Quantidade total de algarismos aceitos em um campo do tipo numérico fracionado, contando a parte inteira e a parte fracionada.

Scale: Quantidade de algarismos que será configurada para a parte fracionada no número.

As colunas Precision e Scale somente são exibidas se o tipo do atributo escolhido na coluna Type for correspondente a um tipo numérico fracionado. Ex. DoubleLong etc.

Default Value Expression: Expressão de código Java. Será o valor padrão do atributo que será conferido, caso o mesmo venha com o valor nulo. Esse valor padrão deve estar de acordo com o tipo de campo definido.

Label: Rótulo do front-end. Valor que será o rótulo do campo quando for gerada as páginas da aplicação através do Wizard Crud View.

Mask: Máscara do campo. O campo (na página gerada através do Wizard Crud View) será configurado para ter a entrada rotulada com a expressão de máscara definida. Essa máscara só será definida na página gerada, não estando configurada na tabela gerada do banco de dados.

Type: Configura o tipo de dado do atributo, podendo ser qualquer um do tipo Java listados, inclusive sendo listado os tipos das classes que estão desenhadas no diagrama, e que ainda não foram geradas. Ao selecionar um tipo que corresponda a um tipo numérico fracionado, serão habilitadas as colunas “Precision” e “Scale” que correspondem a configuração do tamanho desse campo substituindo a coluna “Length”. O tipo selecionado deve estar de acordo com o framework de persistência que será selecionado. Ex: framework Hibernaute não aceita tipos de dados primários.

PKPrimary Key. Seleciona o atributo como chave primária da tabela que será criada no banco de dados. Ao selecionar um atributo como chave primária será habilitada a coluna PK Type.

UK: Seleciona o atributo como valor único na tabela que será criada no banco de dados.

NN: Seleciona o atributo como não nulo na tabela que será criada no banco de dados.

PK Type: Tipo do campo da chave primária. Contém opções de tratamento da chave primária. Podem ser selecionados os valores UUID, que por tratamento no código java terá como valor padrão (Default Value Expression) um conjunto de caracteres no padrão de Universally Unique Identifier (UUID). Identity configurará diretamente no banco o campo de chave primária como um campo numérico auto incremental, lembrando que sendo escolhida essa opção será necessário que o valor selecionado na coluna Type seja do tipo numérico. E, finalmente temos também a opção None, que não configura nenhum tratamento especial para o campo de chave primária.

Se não houver nenhum atributo configurado na entidade, ao clicar no botão “Novo”, será inserido um novo atributo a entidade que está sendo configurada. No caso do primeiro atributo inserido, por padrão, esse atributo virá configurado como o atributo “id”, chave primária da entidade que está sendo configurada, com as configurações correspondente a isso, com o tipo sendo configurado como String e o tipo de chave primária como UUID.

Os atributos adicionados posteriormente ao primeiro atributo virão pré-configurados como “attribute + número sequencial” e com tipo String.
 

Figura 6 - Janela de configuração da entidade Contato configurada com alguns atributos.

 

Na primeira coluna é possível selecionar qualquer um dos atributos. Assim, selecione os atributos deseja remover nessa coluna. Para essa ação selecione o atributo na coluna e clique no botão Remover. Caso o atributo selecionado para remoção tenha uma Named Query associada a ele, será exibida uma mensagem com esta informação, e perguntando se deseja remover as Named Queries associadas juntamente a remoção do atributo.

Na última coluna dessa janela há a opção de criação automática de Named Query para busca de registros através do atributo que gerou a Named Query. Ao clicar nesse botão será gerada a Named Query correspondente ao atributo selecionado, e será exibida a aba de Named Queries. Observe a imagem abaixo:
 

Figura 7 - Criada Named Query através do atributo "Id"

 

A aba Named Queries exibe Named Queries criadas para essa entidade, nessa aba temos as seguintes colunas e suas respectivas funções:

Coluna de seleção da Named Query: Esta coluna tem um comportamento similar ao da aba Attributes necessária a seleção dessas para realizar a remoção da mesma.

Rest?: Se selecionada essa opção, ao se gerar a camada de persistência essa Named Query será gerada na camada Rest da aplicação.

Name: Nome (Identificação) da Named Query.

Query: Consulta em linguagem JPQL que efetivamente selecionará os devidos registros da entidade.

Params: Parâmetros utilizados na consulta JPQL (se houver) sendo exibido a identificação do parâmetro e o tipo correspondente.

Ao clicar no botão Novo será aberta uma janela para configuração da Named Query a ser inserida.
 

Figura 8 - Janela de Criação de Named Query

 

No topo dessa janela temos um campo para inserção do nome da Named Query. Na área central há uma entrada para inserção da consulta em linguagem JPQL, conforme se digita a consulta e se insere parâmetros com a seguinte identificação: (: + parâmetro, ou seja, se usa o sinal gráfico dois pontos mais um nome para identificar um determinado parâmetro), o mesmo é listado na parte inferior da janela de edição da Named Query, na qual será possível alterar o tipo do campo, de acordo com tipo de dado recebido e utilizado na consulta.  O botão Limpar Campos é utilizado para remoção de parâmetros.
 

Figura 9 - Janela de edição de Named Query exibindo os parâmetros da consulta.

 

Clique em Ok para que a Named Query seja inserida, para remove-la selecione a Named Query na primeira coluna da janela e clique no botão Remover.

Para que as alterações e toda a edição de atributos e Named Queries façam efeito, finalize o processo clicando no botão Salvar.
 

Figura 10 - Entidade "Contato" configurada

Obs. Observe que as Named Queries criadas são exibidas na área de métodos da representação das classes no diagrama.

 

Para realizar a reprodução do domínio da aplicação presente no diagrama “agenda.umlcd”. configure as entidades com os seguintes atributos e Named Queries geradas através dos seguintes atributos:

Entidade Contato:

Atributo: id -> DB Column: id,

                          Default Value Expression: UUID.randomUUID().toString().toUpperCase() ,

                          Label: Id,

                          Type: java.lang.String,

                          PK: selecionado,

                          NN: selecionado,

                          Pk Type: UUID.

Restante das colunas com valores nulos ou “desselecionados”.

Atributo: nome -> DB Column: nome,

                          Length: 500,

                          Label: Nome,

                          Type: java.lang.String,

                          NN: selecionado.

Restante das colunas com valores nulos ou “desselecionados”.

Atributo: email -> DB Column: email,

                          Length: 500,

                          Label: Email,

                          Type: java.lang.String,

                          NN: selecionado.

Restante das colunas com valores nulos ou “desselecionados”.

Atributo: grupo -> DB Column: fk_grupo,

                          Label: Grupo,

                          Type: Grupo.

Restante das colunas com valores nulos ou “desselecionados”.

Para finalizar a configuração dessa entidade, clique no botão da última coluna do atributo “nome” para gerar a Named Query correspondente a esse atributo.

Entidade Grupo:

Atributo: id -> DB Column: id,

                          Default Value Expression: UUID.randomUUID().toString().toUpperCase() ,

                          Label: Id,

                          Type: java.lang.String,

                          PK: selecionado,

                          NN: selecionado,

                          Pk Type: UUID.

Restante das colunas com valores nulos ou “desselecionados”.

Atributo: nome -> DB Column: nome,

                          Length: 500,

                          Label: Nome,

                          Type: java.lang.String,

                          NN: selecionado.

Restante das colunas com valores nulos ou “desselecionados”.

 

Para finalizar a configuração dessa entidade clique no botão da última coluna do atributo nome para gerar a Named Query correspondente a esse atributo.

Entidade Telefone:

Atributo: id -> DB Column: id,

                          Default Value Expression: UUID.randomUUID().toString().toUpperCase() ,

                          Label: Id,

                          Type: java.lang.String,

                          PK: selecionado,

                          NN: selecionado,

                          Pk Type: UUID.

Restante das colunas com valores nulos ou “desselecionados”.

Atributo: numero-> DB Column: numero,

                          Length: 9,

                          Label: Número,

                          Type: java.lang.String,

                          NN: selecionado.

Restante das colunas com valores nulos ou “desselecionados”.

Atributo: contato -> DB Column: fk_contato,

                          Label: Contato,

                          Type: Contato.

Restante das colunas com valores nulos ou “desselecionados”.

Para finalizar a configuração dessa entidade, clique no botão da última coluna do atributo numero para gerar a Named Query correspondente a esse atributo. Repita o mesmo processo para o campo do atributo contato.

Finalizando o processo de edição do diagrama, clique no combobox exibido no cabeçalho do editor do diagrama. Esse exibe as conexão de banco de dados configuradas no arquivo context.xml. Como o projeto foi criado seguindo o modelo, esse arquivo já vem configurado com uma conexão de um banco de dados do DBMS (Database Management System) H2, que é um tipo de banco de dados de persistência em arquivos que serão criados no host do CronApp IDE. Assim, selecione a conexão nomeada “jdbc/Angular” e configure o valor da caixa de entrada “Namespace” para agenda.

Tendo configurado todas as entidades do diagrama e seus devidos relacionamentos o resultado será o seguinte: 
 

Figura 11 - Diagrama da aplicação agenda finalizado


 



Gerando a Camada de Persistência

 

Tendo finalizado o processo de desenhar o domínio da aplicação no diagrama clique no botão Salvar ou no botão Salvar Todos na barra de ferramentas do CronApp IDE.  Será necessário que o diagrama seja salvo para efetuar a etapa seguinte do processo que é a geração da camada de persistência da aplicação. Após a conclusão dessa ação clique no botão Gerar Camada de Persistência.
 

Figura 12- Janela de configuração de geração de camada de persistência de aplicação

 

Na janela exibida estão todas as opções de configuração da camada de persistência e todos os demais recursos de código que serão gerados automaticamente.

Obs. Observe que à frente de alguns desses parâmetros há uma caixa de seleção, se esta caixa for selecionada, significa que os recursos referentes aos parâmetros serão gerados. Caso não haja seleção significa que os recursos correspondentes não serão gerados.
 

Vale ressaltar que a camada de persistência e os recursos que serão gerados seguem o padrão MVC (Model-View-Controller), desse modo algumas classes e estruturas geradas são uma sugestão de desenvolvimento. É importante seguir essa estrutura para que se utilize o máximo de recursos do CronApp IDE na sua aplicação.

 Observe abaixo as opções de configuração apresentadas na janela de configuração:

Namespace: Corresponde ao mesmo parâmetro Namespace, esse parâmetro é definido no cabeçalho do editor do diagrama, assim o parâmetro já está pré-configurado. Esse parâmetro configura o pacote de nível mais alto que será gerado para armazenar os outros pacotes que armazenaram as classes Java que serão geradas. Alterando o valor desse parâmetro, os valores dos outros parâmetros que configuram os pacotes (que serão criados dentro do pacote do Namespace) são automaticamente alterados de acordo com o valor do parâmetro Namespace.

Entidades: Configura o pacote em que as classes Java que representaram as entidades serão criadas.

Acesso aos Dados: Configura o pacote em que as classes Java que acessam os registros no banco de dados e, que utilizam o padrão DAO (Data Acess Object) serão criadas.

Regra de Negócio: Parâmetro que configura o pacote em que as classes Java que conterão a implementação de regras negócio da aplicação que serão criadas.

SessionManager: Configura o pacote que armazenará a classe SessionManager, que configura o funcionamento do framework JPA selecionado. Normalmente essa classe fica no mesmo pacote que as classes que acessam os registros do banco (DAO).

R.E.S.T: Configura o pacote que armazenará as classes e os pacotes que serão gerados para a criação da camada Rest da aplicação.

Exception: Configura o pacote que armazenará as classes de exceção (especificações que herdam da classe Exception, natural do Java) que são utilizadas para tratamento de erros da aplicação. Esse pacote é uma sugestão para manter a estrutura da aplicação. Normalmente fica dentro do pacote configurado para receber as classes da camada Rest.

Caminho: Configura a definição do caminho de acesso à camada Rest da aplicação. Tem como padrão o seguinte valor: /api/rest/(valor configurado no parâmetro Namespace)

Testes: Configura o pacote que armazenará as classes de teste unitários de aplicação. Esse pacote é uma sugestão para manter a estrutura da aplicação. Para o correto funcionamento da ferramenta de execução dos testes unitários do CronApp IDE, as classes de testes devem estar no pacote “src/test/java”, seguindo a convenção do Maven.

API RAML: Configura o diretório que armazenará os recursos da API RAML que será gerada para implementar um web-service para os serviços Rest da aplicação. Também é especificado através desse parâmetro o nome do arquivo de acesso principal a essa API Raml, para que seja consumida. Tem como padrão “webcontent/raml/agenda/api.raml”. Esse parâmetro é o único que (por padrão) não vem selecionado para ser gerado. Caso as configurações desse parâmetro não estejam efetuadas corretamente ou o projeto apresente algum erro de compilação, será apresentado um erro na etapa de geração do da API RAML que efetua a compilação de todo o projeto.

Persistence Unit name: Valor que será configurada a unidade de persistência no arquivo persistence.xml que configura as definições do framework JPA. Por padrão tem o mesmo valor do Namespace.

Persistence Provider: Seleção do framework de persistência JPA que será utilizado, possui as seguintes opções “EclipseLink”, “Hibernate” e “OpenJPA”.

Tipo de Geração: Opção de tratamento de criação e atualização de tabelas no banco de dados, tendo as seguintes opções: create-or-extend-tables, drop-and-create-tables e none.

Todos esses parâmetros podem ser editados, embora a recomendação seja somente alterar o valor do parâmetro Namespace no cabeçalho do editor e, se desejar, alterar também os dois últimos parâmetros que configuram o uso do framework de persistência. Alguns parâmetros podem ser selecionados para serem gerados ou não, clicando na caixa de seleção exibida a frente de alguns desses parâmetros. Tendo configurado todos esses parâmetros, clique no botão Gerar para ser efetuada a geração da camada de persistência.

Caso necessite “re-gerar” a camada de persistência e algum dos arquivos anteriormente gerados que tenham sido alterados, antes de efetuar a geração desses recursos será apresentada uma janela listando os arquivos que estão em conflito. Clicando duas vezes sobre algum desses arquivos será aberta uma janela de edição de conflitos para que o arquivo que será gerado possa ser editado e, assim não desapareçam as  alterações que foram efetuadas anteriormente.
 

Figura 13 - Camada de persistência gerada

 

Figura 14 - LIsta de arquivos de camada de persistência que foram alterados

 

Figura 15 - Janela de edição de conflitos para manter alterações

 

Tendo finalizado o processo de gerar a camada de persistência, clique no botão Wizard Diagram Crud View. Será aberta a janela de configuração da geração de páginas de Crud (Create, Read, Update e Delete – Inserir, Pesquisar, Atualizar e Remover) da aplicação.
 

Figura 16 - Janela de configuração de geração das páginas de Crud da aplicação

 

Clique sobre a opção “AngularJS Crud View” e clique no botão (...) que se encontra à frente do parâmetro “Alvo”. Será exibida uma janela de seleção com todos os diretórios do projeto.
 

Figura 17 - Janela de seleção de parâmetro "Alvo"

 

Digite o valor view e selecione o diretório “webcontent/views”, clicando duas vezes sobre esse diretório que será listado. O parâmetro “Alvo” configura o diretório que receberá as páginas de Crud criadas a partir da ferramenta do Wizard Diagram Crud View.
 

Figura 18 - Configurado parâmentro "Alvo" da geração de páginas de Crud da Aplicação

 

Tendo configurado o parâmetro “Alvo”, clique no botão Próximo. Será exibida a janela de seleção das entidades para as quais as páginas de Crud serão geradas.
 

Figura 19 - Seleção de entidades para geração de páginas de Crud

 

Para finalizar o processo de gerar as páginas de cadastro das entidades selecionadas basta clicar no botão Finalizar. Desse modo as páginas serão criadas com as configurações padrão das entidades. Para alterar essas configurações, clique no botão (...) exibido a frente da linha que representa cada entidade.

Acessando essas opções serão exibidas duas janelas. A primeira janela configura a lista de campos que serão exibidas em uma Grid (tabela) que exibirá os dados dos registros da entidade. Logo abaixo dessa configuração há a opção de definir um campo que busca por registros dessas entidades. Para gerar esse campo de busca, basta selecionar uma Named Query dentre as configuradas nessa entidade que serão listadas em uma caixa de seleção. Tem como padrão a seleção dos três primeiros campos do tipo String.

Clicando no botão Próximo será exibida a segunda janela de configuração da página de cadastro da entidade que será gerada. Essa segunda página configura a opção de cadastro de entidade, assim definindo os campos que permitiram a entrada de dados para efetuar o cadastro. Tem como padrão a seleção de todos os campos, com exceção do ID que será inserido automaticamente, seja por código Java ou pelo banco de dados.
 

Figura 20 - Janela de seleção dos camps da Grid da página que será gerada

 

Figura 21 - Janela de Seleção de Campos de Formulário

 

Tendo configurado a exibição e a entrada de dados nessas duas janelas clique no botão Finalizar.  Após está ação será exibida novamente a janela de seleção de entidades para as quais as páginas de cadastro serão geradas.

Efetue o processo de configuração dessas páginas selecionando todos os campos para serem exibidos na Grid e selecionando todos os campos, com exceção do ID para serem exibidos no formulário de cadastro do registro da entidade. Para os campos de pesquisa de registro selecione as seguintes Named Queries:

Entidade Telefone: listByNumero, Entidade Contato: listByNome e Entidade Grupo: listByNome.

 Tendo efetuada a configuração de todas as entidades clique no botão Finalizar. Será exibida uma mensagem informando que os recursos foram gerados com sucesso. Observe a imagem abaixo:
 

Figura 22 - Páginas de Cadastro Geradas

 

Clique no botão Ok e feche o arquivo do diagrama. Acesse a árvore de recursos, expanda o diretório “webcontent” e em seguida o diretório “view”. Abra o arquivo “home.view.html”. Esse arquivo já vem corretamente editado com o menu configurado para referenciar as páginas geradas através do Wizard Diagram Crud View.

Clique no botão Rodar da barra de ferramentas. A aplicação será carregada no servidor da IDE. Logo após esta ação será habilitado o botão Abrir Navegador. Ao clicar nessa no botão Abrir Navegação será exibida uma nova aba no navegador, com a execução da aplicação. 
 

Figura 23 - Executando a Aplicação
 

Clique na opção Grupos no menu à esquerda. 
 

Figura 24 - Página de Cadastro de Entidade Grupo

 

Clique no botão Novo. No formulário exibido digite um valor para o parâmetro nome e clique no botão V em verde.

Figura 25 - Cadastro de Contatos
 

Obs. Observe que o registro do grupo inserido anteriormente é exibido na caixa de seleção do parâmetro Grupo.
 

A aplicação está finalizada. Nos próximos artigos essa aplicação será aprimorada.

 


Modelagem de Dados

 

Nesta sessão temos artigos que apresentam um dos mais importantes e poderosos recursos do CronApp IDE. Trata-se de uma completa ferramenta de geração de código de back-end e front-end para ser um facilitador para a criação da sua aplicação, realizando todos os processos iniciais e genéricos de uma aplicação com uso de banco de dados. Nessa ferramenta o usuário poderá definir e desenhar o domínio da sua aplicação e, com isso, após a definição de todas as entidades que serão necessárias para a construção da mesma, o usuário poderá criar uma aplicação usual com uso de recursos de banco de dados e telas de cadastro. Sendo necessário, praticamente, para a utilização da aplicação já em produção, apenas a inserção de links e alguns ajustes visuais a sua aplicação. Deste modo, o ganho em produtividade para se criar uma aplicação do zero é muito grande, não sendo necessário ao usuário codificar grande quantidade de códigos HTML, Java e JavaScript, visto que o mesmo será gerado pelo CronApp IDE.

 

Modelagem de Dados


  • No labels