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 na camada de apresentação. 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.

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.