Camada de Visualização (Commons UI)
O projeto Commons UI é responsável por prover a estrutura da camada de visualização para todos os projetos que utilizam-se da arquitetura. Esta estrutura é composta, internamente, por bibliotecas como: AngularJS, jQuery e Atlassian AUI. Em conjunto, todas as bibliotecas agregam componentes, estruturação da apresentação, modelo de dados de fácil utilização com data-biding bidirecional, internacionalização, etc. Nesta seção veremos como o projeto Commons UI trabalha internamente e a sua intervenção no desenvolvimento da camada de visualização.
Estrutura
Conforme a imagem abaixo, o projeto é estruturado por pastas, cada qual refletindo a responsabilidade de seus componentes. Como este projeto é inteiramente composto de arquivos Javascript, não existem dependencias de outros projetos.
- Pasta directives: contém todas as diretivas customizadas que estão disponíveis para uso dos desenvolvedores. Estas diretivas foram criadas para atender os requisitos da arquitetura e não interferem nas diretivas do AngularJS.
- Pasta filters: contém filtros customizados que estão disponíveis para uso dos desenvolvedores. Estes filtros foram criadas para atender os requisitos da arquitetura e não interferem nas diretivas do AngularJS.
- Pasta lang: contém funções utilitárias, não disponibilizadas pela API Javascript nativa dos navegadores. Podemos citar como exemplo as funções: each e curry.
- Pasta providers: contem providers utilizados internamente pela arquitetura para evitar alto acoplamento entre as diretivas.
- Pasta services: contém serviços declarados através da API do AngularJS que estão disponíveis para injeção e podem ser utilizados pelos desenvolvedores para padronizar e agilizar o processo de desenvolvimento de novas funcionalidades.
- Pasta style: contém arquivos .css para padronização de elementos de UI.
- Pasta vendor: contém as bibliotecas previamente citadas neste documento já minificadas.
- Arquivotreelayer-bootstrap: quando necessário a adição de dependencias entre módulos no AngularJS, este arquivo declara um módulo que agrega toda a estrutura, facilitando na declaração de dependencias.
Providers
Nesta seção abordaremos como cada provider disponível na arquitetura funciona internamente. Providers são objetos expostos para toda a aplicação, passíveis de injeção e podem ser utilizados dentro de um bloco de configuração do AngularJS. Para maiores informações leia a documentação oficial sobre providers.
Message Provider
A arquitetura utiliza apenas um provider, o MessageProvider. Este é um componente do AngularJS que pode ser configurado em um bloco de configuração, como por exemplo URLs de validação e mensagens, e oferece uma interface pública para componentes do AngularJS (controllers, directives, filters). Abaixo temos um exemplo da utilização do MessageProvider na configuração de URLs de validação e mensagens.
Tem como responsabilidade buscar, armazenar mensagens (de validação ou descrição) e controlar o fluxo utilizando-se de listeners para avisar outros componentes de que a a busca de mensagens foi realizada com sucesso.
Busca de Mensagens
A partir de uma chamada da principal directive, tl-object, é disparada uma requisitção HTTP para um método genérico da arquitetura para buscar mensagens internacionalizadas. Esta funcionalidade baseia-se no nome do objeto passado para a directive tl-object para buscar as mensagens. Mensagens são compostas de labels, descriptions, validations, etc.
As URLs previamente configuradas ao inicializar um aplicação AngularJS servem como endpoint para esta funcionalidade.
Armazenamento de Mensagens
Após a resposta do servidor, se ocorrida com sucesso, todas as mensagens são armazenadas em cache no formato raw, ou seja, sem alteração nenhuma. Assim que possível outras diretivas irão processar estas mensagens e preencher outras áreas de cache deste provider.
Controle de Fluxo
Logo após a busca de mensagens e a resposta do servidor, todas as diretivas que se registraram neste provider serão avisadas que há mensagens não processadas. A directive tl-ref iniciará sua execução preenchendo o cache referenceMessages a com uma nova estrutura, oriunda do cache no formato raw.
Se você possui dúvidas quanto a funcionalidade das directives citadas nesta seção, leia as seções de directives Object e Ref.
Services
Nesta seção abordaremos como cada service disponível na arquitetura funciona internamente.
Diretivas
Nesta seção abordaremos como cada directive disponível na arquitetura funciona internamente.