A árvore de arquivos exibe os diretórios e arquivos pertencentes ao seu projeto. Porém, como informado no tópico anterior, a forma como o conteúdo será exibido na árvore dependerá da configuração da opção Modo Avançado.
Atalhos da árvore
A árvore de arquivos possui atalhos na parte superior que agilizam a navegação entre os diretórios do seu projeto. A quantidade de atalhos varia com o tipo do projeto aberto, projetos somente web não exibirão os atalhos (5) e (6) da figura 4.1, pois se trata de diretórios do projeto mobile.
Figura 4.2 - Atalhos e seus respectivos diretórios sendo visualizado em Movo Avançado desabilitado
No topo dessa janela (Figura 1.6) encontramos botões de atalho para algumas pastas.
Ir para Código Fonte: esse atalho direciona para o diretório principal do projeto servidor quando o modo Avançado estiver habilitado e, quando desabilitado, para o diretório de blocos de programação servidor (localização:
Blocos de Programação/Servidor
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/java/blockly
).
Ir para Pasta Relatórios: expande o diretório onde recomenda-se arquivar os relatórios do sistema (localização:
Relatórios
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/java/reports
).
Ir para blocos do tipo servidor: expande o diretório dos blocos de programação servidor (localização:
Blocos de Programação/Servidor
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/java/blockly
).
Ir para Pasta de Diagrama: expande a pasta dos diagramas de dados (localização:
Diagrama de dados
Tooltip onlyIcon true appendIcon info-circle Endereço
diagram
).
Ir para Pasta Mobile: encaminha para o diretório de telas autenticadas do projeto mobile (localização:
Formulários/Mobile/Autenticado
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/mobileapp/www/views/logged
).
Ir para blocos do tipo mobile: expande o diretório dos blocos de programação mobile (localização:
Bloco de Programação/Mobile
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/mobileapp/www/js/blockly
).
Ir para Pasta de Views: encaminha para o diretório de páginas autenticadas do projeto web (localização:
Formulários/Web/Autenticado
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/webapp/www/views/logged
).
Ir para blocos tipo web: expande o diretório dos blocos de programação web (localização:
Bloco de Programação/Web
Tooltip onlyIcon true appendIcon info-circle Endereço:
src/main/webapp/js/blockly
).
- Visualização da árvore: Opção disponível apenas no Modo Avançado (figura 4.3).
- Visualização de pasta: exibe os diretórios e arquivos com seus nomes originais;
Visualização de categoria: exibe alguns diretórios e arquivos com nomes mais amigáveis.
Figura 4.2 - Árvore sendo visualizada por Categoria e por Pasta
Estrutura
A árvore de arquivos exibe todos os diretórios e arquivos existentes no projeto, ordenados de forma hierárquica. O ponto inicial dessa árvore, a raiz, é intitulado com o nome do projeto. Para expandir o conteúdo interno dos diretórios, clique no símbolo ">" na frente do ícone da pasta.
...
...
...
...
...
Figura 4.3 - Diferença ao visualizar os arquivos com a opção Modo Avançado habilitada e desabilitada
Modo Analista
Ao desativar o Modo Avançado, a árvore do projeto não exibe arquivos na raiz, apenas os diretórios dos recursos low-code. As pastas estão ordenadas com base na recomendação de desenvolvimento do Cronapp: primeiro criamos o diagrama do projeto, as páginas e, em paralelo, os blocos de programação.
Descrevemos abaixo o objetivo de cada diretório na raiz do projeto quando a opção Modo Avançado está desativada.
Figura 4.4 - Diretórios do projeto quando o Modo Avançado está desativado
Alguns dos diretórios listados abaixo são virtuais, ou seja, não existem no projeto. São visíveis apenas quando a opção Modo Avançado está desativada e tem o intuito de agrupar diretórios com a mesma funcionalidade. Diretórios virtuais não possuem menu de contexto.
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
: contém os arquivos de bloco de programação servidor (back-end).
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
: hospeda os arquivos de documentação do projeto, nele você poderá criar diagramas UML, fluxogramas, diversos recursos para ajudar no desenvolvimento do projeto,
Modo Avançado
Figura 4.3 - Divisão da árvore de arquivos
Os subdiretórios e arquivos da raiz do projeto:
...
- Códigos Fonte Servidor (
java
): armazena a camada DAO, Entity, código Java, arquivo de configuração do projeto, relatórios e outros arquivos do servidor da aplicação; - Códigos Fonte Mobile (mobileapp): armazena os formulários HTML, código JavaScript, plugins, CSS, Splash e outros arquivos do projeto mobile da aplicação;
- Códigos Fonte Web: (
webapp
): armazena os formulários HTML, código JavaScript, plugins, CSS e outros arquivos do projeto web da aplicação.
...
...
...
...
...
Códigos Fonte Servidor
Dentro desse diretório estão contidas as camadas DAO e Entity, pastas com arquivos de configurações, internacionalização. relatórios e demais arquivos do servidor da aplicação.
Figura 4.4 - Arquivos do Servidor da Aplicação, em destaque o atalho para a pasta Relatórios
Os subdiretórios e arquivos da pasta Código Fonte Servidor:
- app: o diretório principal com o código-fonte do servidor:
- dao: diretório de arquivos referentes a comunicação das entidades com o banco de dados;
- entity: diretório de arquivos referentes as entidades da aplicação;
- AppConfiguration.java: arquivo de configurações iniciais do projeto java;
- populate.json: arquivo que contém os dados para popular o banco no momento que ele é iniciado, é nele que se encontra o usuário administrador.
Bloco de Programação (
blockly
): diretório onde contém as funções de blocos de programação do servidor;- i18n: diretório de arquivos referentes às propriedades de internacionalização no lado servidor do projeto;
- META-INF: diretório relacionados a arquivos JAR para configurar aplicações, extensões, carregadores de classes e serviços;
- SpringBootMain.java: classe que inicia o contexto de aplicação do SpringBoot;
- Relatórios: diretório que armazena os relatórios criados no projeto. Por padrão, essa pasta não existe quando o projeto é criado, mas para o fazê-lo, clique em seu ícone (1 da Figura 4.4) na barra de atalhos da árvore de arquivos.
...
Códigos Fonte Mobile
Arquivos responsáveis por gerar a aplicação mobile (Android e iOS).
Figura 4.5 - Estrutura do diretório Códigos Fonte Mobile
- certs: Certificate Enrollment Requests, esse diretório contém certificados que foram requisitados e estão com status pendentes ou já foram rejeitados.
- hooks: representa o diretório de scripts especiais que podem ser adicionados ao sistema para customizar comandos Cordova, que é uma estrutura apache de desenvolvimento de aplicativos móveis.
- res: pasta criada por padrão para uso de recursos na aplicação:
- icon: ícones utilizados na aplicação mobile;
- screen: plano de fundo da aplicação mobile.
- www: armazena a estrutura da aplicação mobile (verificar tópico diretório www);
- .gitignore: estão descritos os arquivos que serão ignorados na hora de fazer o commit / push para o git;
- config.xml: arquivo de configuração global que controle aspectos de uma aplicação Cordova;
- network_security_config.xml:
- package.json: responsável por descrever o projeto, informar as engines (versão do node e do npm), URL do repositório, versão do projeto entre outros coisas.
...
Diretório www
Diretório que armazena a estrutura da aplicação mobile, como telas, imagens, os blocos de programação que geram código fonte JavaScript, internacionalização e mais.
Figura 4.5.1 - Estrutura da pasta www
- bowerscripts: arquivo referente ao Bower, uma ferramenta que ajuda no gerenciamento das dependências do front-end;
- css: local onde ficam armazenadas as estilizações feitas em low-code na janela de edição visual;
- i18n: diretório onde ficam os arquivos de internacionalização da aplicação mobile;
- img: local usado para armazenar imagens usadas na aplicação;
- js: diretório de arquivos JavaScript e blockly do lado cliente mobile:
- bloco de programação (
blockly
): diretório onde ficam as funções de bloco de programação, possui um subdiretório com funções usadas durante a autenticação (6 da Figura 4.1).
- bloco de programação (
- node_modules: local onde ficam armazenadas diversas bibliotecas usadas no projeto. Durante as atualizações do Cronapp, o conteúdo dessa pasta é alterado ou substituído, por isso não recomendamos atualizar ou adicionar nada manualmente;
- Formulários (
views
): diretório que organiza as telas do aplicação mobile:- Erros (
error
): telas de informação de erros do sistema, os usuários serão encaminhados para essas telas quando ocorrer um erro no sistema; - Autenticado (
logged
): contém as páginas com permissão de acesso apenas para os logados no sistema; - Público (
public
): páginas sem restrição de acesso; - login.view.html: por padrão é a primeira página exibida para o usuário. Acesse Alterar tela inicial, caso queira mudar a tela inicial.
- Erros (
- .bowerrc: pacote de gerenciamento dos componentes mobile, bibliotecas, frameworks;
- bower.json: arquivo JSON de gerenciamento das dependências do projeto;
- cordova.js: arquivo JavaScript que tem as principais funções do Cordova;
- cordova_plugins: arquivos JavaScript que exporta os plugins do Cordova;
- favicon.ico: ícone do Cordova;
- index.html: contém as referências de plugins e CSS usados nas telas do sistema;
- package.json: responsável por descrever a parte mobile, informando a versão do projeto, o nome do projeto, a descrição, a URL do repositório, a página principal e entre outros coisas;
- README.md: arquivo de texto que apresenta um pequeno tutorial de como usar o template do Ionic Framework.
...
Códigos Fonte Web
Diretório que armazena a estrutura do sistema web, como as páginas, os blocos de programação que geram código fonte JavaScript, internacionalização e outros.
Figura 4.6 - Estrutura do diretório Códigos Fonte Web
- bowerscripts: arquivo referente ao Bower, uma ferramenta que ajuda no gerenciamento das dependências do front-end.
- css: local onde ficam armazenadas as estilizações feitas em low-code na janela de edição visual.
- i18n: diretório onde ficam os arquivos de internacionalização do sistema web.
- js: diretório de arquivos JavaScript e blockly do lado cliente web:
- Bloco de programação (
blockly
): diretório onde ficam as funções de bloco de programação (8 da Figura 4.1).
- Bloco de programação (
- node_modules: local onde ficam armazenadas diversas bibliotecas usadas no projeto. Durante as atualizações do Cronapp, o conteúdo dessa pasta é alterado ou substituído, por isso não recomendamos atualizar ou adicionar nada manualmente.
- Formulários: diretório onde ficam as páginas web:
- Administrativo (
admin
): contém as páginas com permissão de acesso apenas para os usuários com perfil de administrador do sistema; - Erros (
error
): páginas com informação de erros do sistema, os usuários serão encaminhados para essas páginas quando ocorrer um erro no sistema; - Autenticado (
logged
): contém as páginas com permissão de acesso apenas para os logados no sistema; - Público (
public
): páginas sem restrição de acesso.
- Administrativo (
- .bowerrc: pacote de gerenciamento dos componentes web, bibliotecas, frameworks.
- bower.json: arquivo JSON de gerenciamento das dependências do projeto.
- index.html: contém as referências de plugins e CSS usados nas páginas do sistema.
- package.json: responsável por descrever a parte web, informando a versão do projeto, o nome do projeto, a descrição, a URL do repositório, a página principal e entre outros coisas.
Menu de contexto
Existem algumas ações que podem ser feitas ao clicar com o botão direito do mouse na raiz do projeto (nome do projeto). O conteúdo exibido no menu de contexto varia com o tipo de projeto: servidor, mobile e web.
Figura 4.7 - Menu de contexto da raiz do projeto
- Importar: importa um projeto Cronapp em formato .zip ou obtém serviços de uma estrutura SOAP.
- Exportar: exporta o projeto em um dos seguintes formatos: GIT/SVN, war ou zip.
- Banco de dados: abre a funcionalidade de configuração do banco de dados do projeto.
- Recompilar projeto: complicação do projeto.
- Recompilar e reabrir projeto: compilação, fecha o projeto e o reabre.
- Recarregar: recarrega novamente a árvore de arquivos.
- Baixar: faz o download do conteúdo selecionado, no caso de diretórios, o mesmo é compactado em formato .zip.
- Compartilhar Pasta: abre uma janela que disponibiliza um link que permite que o usuário faça o download dessa pasta. Também é possível enviar esse link por e-mail.
- Abrir terminal: abre o diretório selecionado em um terminal linux.
- Arquivar projeto: arquiva o projeto, no qual seus arquivos serão mantidos no sistema, porém suas funcionalidades estarão desativadas.
- Fazer Backup: cria uma cópia do projeto no estado atual. Acesse o backup através da funcionalidade Gerenciamento de Backup.
- Conceder acesso remoto: abre uma janela que gera um link para permitir o acesso remoto por outro usuário, o Cronapp solicitará sua autorização quando o novo usuário abrir o projeto. Também é possível enviar o link de compartilhamento por e-mail, basta inserir os e-mails que deseja enviar o link.
- Novo: cria ou adiciona um novo arquivo:
- Fazer upload: faz upload de um arquivo do computador para o projeto;
- Fazer upload de um zip: faz upload de um .zip para o projeto, esse processo descompacta automaticamente o conteúdo compactado no local selecionado;
- Fazer upload de um link: permite realizar o upload de um arquivo passando a sua URI;
- Existem diversas opções de arquivos para serem criados, como JavaScript, JSON, XML, HTML, relatório ou você pode usar a opção Outro para criar um arquivo com outra extensão.
- Adicionar novo plugin: abre a janela para selecionar e adicionar um plugin ao projeto;
- Aplicar modelo: retorna a tela de seleção do tipo de projeto e tema, então os arquivos serão sobrescritos pelos do novo modelo;
- Compartilhar Projeto: abre uma janela que disponibiliza um link que permite que outro usuário copie o projeto para sua conta. Também é possível enviar esse link por e-mail;
- Configuração: abre a janela de configurações gerais do projeto;
- Fechar: fecha o projeto.
Menu de contexto de pasta e arquivos
Existem algumas ações que podem ser feitas ao clicar com o botão direito num diretório ou arquivo na árvore da IDE.
Figura 4.8 - Menu de contexto de um diretório e um arquivo respectivamente
- Recarregar: recarrega novamente a árvore de arquivos.
- Compartilhar Pasta: abre uma janela e disponibiliza um link público que permite o usuário fazer o download desse diretório compactado em formato .zip. Também é possível enviar esse link por e-mail.
- Abrir terminal: abre o diretório selecionado em um terminal linux.
- Arquivar projeto: arquiva o projeto, seus arquivos serão mantidos no sistema, porém as funcionalidades dele estarão desligadas.
- Fazer Backup: cria uma cópia do projeto no estado atual. Acesse o backup através da funcionalidade Gerenciamento de Backup.
- Novo: cria ou adiciona um novo arquivo;
- Fazer upload: faz upload de um arquivo do computador para o projeto;
- Fazer upload de um zip: faz upload de um .zip para o projeto, esse processo descompacta automaticamente o conteúdo compactado no local selecionado;
- Fazer upload de um link: permite realizar o upload de um arquivo passando uma URL;
- Existem diversas opções de arquivos para serem criados, como JavaScript, Json, XML, HTML, relatório ou você pode usar a opção Outro para criar um arquivo com outra extensão.
- Renomear: renomeia o arquivo ou diretório selecionado.
- Remover: exclui o arquivo ou diretório selecionado.
- Copiar: copia o arquivo ou diretório selecionado.
- Recortar: recorta o arquivo ou diretório selecionado.
- Colar: cola o arquivo ou diretório que foi recortado ou copiado.
- Duplicar: duplica o arquivo ou diretório selecionado.
- Propriedades: mostra as propriedades do arquivo ou diretório selecionado.
- Abrir: abre o arquivo selecionado.
- Abrir com: abre o arquivo como editor de texto.
- Baixar: faz o download do conteúdo selecionado, no caso de diretórios o mesmo é compactado em formato .zip.
- Compartilhar Arquivo: abre uma janela e disponibiliza um link público que permite o usuário fazer o download desse arquivo. Também é possível enviar esse link por e-mail.
Propriedades
Figura - Acesse as propriedade de arquivos e diretórios para saber o endereço real
Menu de contexto do arquivo Maven
O arquivo Definições Maven (pom.xml
) possui uma categoria a parte em seu menu de contexto.
Figura 4.9 - Ações específicas para o Maven
- Maven: ferramenta que faz o gerenciamento de dependências da aplicação e automatização de builds (versionamento e documentação):
- Processar alvos: abre uma janela para executar comandos do Maven;
- Empacotar e baixar WAR: compacta os arquivos Maven e faz o download do .war gerado.
...
Arquivos do template
Trata-se de um novo mecanismo de customização de templates adicionado a árvore de arquivos. Esses arquivos são todos os templates que o Cronapp usa para gerar arquivos, camadas de dados e CRUDs.
Acesse a página Customização de templates para mais detalhes.
...