Histórico da Página

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.

Image Removed

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.

1. 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

   ).

2. 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

   ).

3. 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

   ).

4. 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

   ).

5. 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

   ).

6. 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

   ).

7. 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

   ).

8. 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

   ).

9. 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.

Image Removed

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. 

...

Como informado no tópico Opção de Modo Avançado, o Cronapp pode exibir a estrutura de seus arquivos em seu endereço real (opção habilitada) ou em sua localização virtual (opção desabilitada). Na figura abaixo as duas estruturas estão com o mesmo diretório aberto, a pasta dos blocos de programação web, porém, a opção da direita (Modo Avançado desabilitado) exibe o conteúdo de forma muito mais simplificada. 

...

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.

...

• Diagrama de dados 

  Tooltip
  onlyIcon true appendIcon Kein Icon
  Endereço: diagram

  : contém os arquivos de diagrama de classe do projeto.

• Formulários: diretório virtual para agrupar as pastas de formulários dos projetos mobile e web.

  • Mobile 

    Tooltip
    onlyIcon true appendIcon info-circle
    Endereço: src/main/mobileapp/www/views

    : diretório que organiza as telas do aplicação mobile,

  • Web 

    Tooltip
    onlyIcon true appendIcon info-circle
    Endereço: src/main/webapp/views

    : diretório onde ficam organizadas as páginas web.

• Blocos de programação: diretório virtual para agrupar as pastas dos blocos de programação mobile, servidor e web.

  • Mobile 

    Tooltip
    onlyIcon true appendIcon info-circle
    Endereço: src/main/mobileapp/www/js/blockly

    : contém os arquivos de bloco de programação mobile (cliente).

  • Servidor 

    Tooltip
    onlyIcon true appendIcon info-circle
    Endereço: src/main/java/blockly

    : contém os arquivos de bloco de programação servidor (back-end).

  • Web 

    Tooltip
    onlyIcon true appendIcon info-circle
    Endereço: src/main/webapp/js/blockly

    : contém os arquivos de bloco de programação web (cliente).

• Relatórios

  Tooltip
  onlyIcon true appendIcon info-circle
  Endereço: src/main/java/reports

  : armazena os relatórios criados no projeto.

• Recursos: diretório virtual para agrupar arquivos estáticos para os projetos mobile, servidor e web.

• Fluxo de Trabalho 

  Tooltip
  onlyIcon true appendIcon info-circle
  Endereço: src/main/resources/bpm

  : contém os arquivos de fluxo de trabalho do Cronapp BPM.

• Testes 

  Tooltip
  onlyIcon true appendIcon info-circle
  Endereço: src/test/java/blockly

  : pasta reservada para os blocos de programação de teste do projeto servidor.

• Documentação 

  Tooltip
  onlyIcon true appendIcon info-circle
  Endereço: docs

  : 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

...

• Códigos Fonte (main): dependendo de como foi criado o projeto, esse diretório possuirá os seguintes subdiretórios:
  • 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.
• Configurações (config): contém os arquivos de testes, as funcionalidades de configurações do projeto (app.config) e banco de dados (context.xml);
• Diagrama de Dados (diagram): contém os arquivos de diagrama de classe do projeto;
• Documentação (docs): arquivos de documentação do projeto, nele você poderá criar diagramas UML, fluxogramas, diversos recursos para ajudar no desenvolvimento do projeto;
• .gitignore: estão descritos os arquivos que serão ignorados na hora de fazer o commit / push para o git;
• Dockerfile: arquivo de configuração do Docker;
• Definições Maven (pom.xml): ferramenta que gerencia os plugins e bibliotecas Maven do projeto;
• README.md: arquivo de texto que apresenta um pequeno tutorial de importar projeto GIT. O conteúdo é exibido na tela inicial do seu projeto na página git;
• template.properties: propriedades do template utilizado pelo projeto.
• Arquivos de Template: diretório onde é possível alterar os arquivos de template gerados pelo Cronapp.

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.

...

Códigos Fonte Mobile

Arquivos responsáveis por gerar a aplicação mobile (Android e iOS).

...

• 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.

...

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.

...

• 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).
• 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.
• .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.

...

• 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.

...

• 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.

...

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.

...