...
| Itens | Nome | Descrição |
|---|---|---|
| 1 | Recipients | Services, factories e providers são componentes disponibilizados pela arquitetura que expoem métodos públicos e são passíveis de injeção de dependências. |
| 2 | Directives | Directives são como uma extensão do HTML na forma de atributos anexados nestes elementos. Diretivas utilizam-se de services, factories, providers e eventos para comunicar-se e realizar suas funções. |
| 3 | Partials | Partials são páginas HTML que podem ser incorporadas em outras páginas através da directive ng-include. Todas as páginas de list listagem e detail detalhe da arquitetura são partials que compoem a estrutura HTML da aplicação. |
| 4 | Controllers | Controllers interagem com as partials e controlam itens de escopo e diretivas. Métodos e regras de negócio são expostos para as partials através de controllers. |
| 5 | Scopes | Scopes formam a cola entre controllers e directives. Para expor um método para uma diretiva, este método deve estar declarado dentro de um escopo. Cada controller possui um escopo. |
...
Partials são páginas HTML que podem ser incorporadas em outras páginas através da directive ng-include. Todas as páginas de listagem e detailhes detalhe da arquitetura são partials que compoem a estrutura HTML da aplicação.
...
| Informações |
|---|
Todas as diretivas tem uma namespace como prefixo, como por exemplo ng na API do framework AngularJS. Este prefixo serve para que atributos em elementos HTML definidos pela especificação HTML Spec 4.01 não entrem em conflito com nomes de directives. Afim A fim de seguir as boas práticas e evitar problemas advindos de novas especificações, toda directive criada e disponibilizada pela arquitetura é prefixada com a namespace tl. |
...
A directive tl-key foi criada para atender o requisito de internacionalização e a padronização de leiaute para mensagens e validações. Esta directive faz uso da directive tl-object, afim de a fim de obter o contexto da partial e então renderizar estes elementos no formato apropriado e, para registrar-se e obter as mensagens de internacionalização assim que a busca for finalizada pelo MessageProvider.
...
A directive tl-ref visa facilitar a vida do desenvolvedor. Em conjunto com a directive tl-key, é possível criar referencias para chaves evitando a repetição de longos prefixos. Internamente, a directive tl-ref, assim como a directive tl-key, faz uso da directive tl-object afim a fim de obter o contexto e objeto da partial. Contudo, a tl-ref não manipula, de forma alguma, a árvore DOM, trabalhando unicamente em conjunto com o MessageProvider.
...
Abaixo temos uma representação visual da directive tl-dialog da tela detalhe de Companhias da aplicação Shield.
...
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-submit | Object | Este atributo deve especificar objeto que deve ser enviado para o back-end. |
tl-opened | Boolean | Este atributo deve especificar um valor do tipo |
TL
...
Action
| Âncora | ||||
|---|---|---|---|---|
|
A directive tl-action habilita a edição, deleção e visualização de dados já persistidos pelo back-end através do componente de dropdown list da Atlassian. Esta directive é utilizada em conjunto com o elemento <table> e com a directive tl-action-model para possibilitar que outros controlers recebam os dados. Cada linha da tabela renderiza um botão mostrando o menu de ações que podem ser executadas pelo usuário em um determinado objeto.
Listagem de atributos disponibilizados pela directive tl-action:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-action | Array | Recebe um array de objetos, itera esta coleção e modificando a estrutura HTML para incluir as opções para o usuário. |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos as ações que podem ser tomadas pelo usuário de forma automática.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<table class="aui">
<!-- ... -->
<!-- neste exemplo a directive esta recebendo o objeto 0x1 do tipo array, através do atributo tl-action em conjunto com ng-repeat -->
<tr ng-repeat="company in list.0x1" tl-action="list.0x1">
<td>{{company.name}}</td>
<td>{{company.abbreviation}}</td>
<td>{{status[company.enabled]}}</td>
</tr>
<!-- ... -->
</table> |
Durante sua execução, a directive tl-action altera os elementos <tr> para incluir a estrutura do menu e disponibilizar as funcionalidades de edição, visualização e deleção.
Abaixo temos uma representação visual da directive tl-action da tela listagem de Companhias da aplicação Shield.
TL Action Model
| Âncora | ||||
|---|---|---|---|---|
|
A directive tl-action-model recebe o objeto em que ocorreu a ação do usuário, através da directive tl-action e atribui para o scope onde ela esta presente. A fim de padronizar as ações de usuário, usualmente dois controllers e duas partials são criadas para representar uma determinada entidade; listagem e detalhe, respectivamente. Conforme esta estrutura, utiliza-se a directive tl-action na tela de listagem e a directive tl-action-model na tela de detalhe para habilitar a manipulação de dados a partir de ações realizadas na directive tl-action.
Listagem de atributos disponibilizados pela directive tl-dialog:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-action-model | Object | Define um objeto em scopo na tela de detalhe que recebe o objeto em que o usuário realizou uma ação na tela de listagem. |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos as ações que podem ser tomadas pelo usuário de forma automática.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- o objeto que sofreu a ação através da directive tl-action será transportado para este controller e atribuído a variável de scopoe 'model' -->
<div ng-controller="CompanyAddDialogCtrl" tl-action-model="model">
</div> |
Durante sua execução, as directives tl-action e tl-action-model trocam mensagens utilizando o sistema de eventos do AngularJS para transportar os objetos que sofreram ações nas telas de listagem.
TL Calendar
A directive tl-calendar disponibiliza o widget de calendário da API AUI da Atlassian. Esta directive funciona como um wrapper para a funcionalidade já implementada, facilitando a integração com o AngularJS e eliminando instruções em Javascript que manipulam a HTML DOM.
Listagem de atributos disponibilizados pela directive tl-calendar:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-calendar | - | Esta directive marca um elemento do tipo |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos um calendário de fácil usabilidade para o usuário final.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- ... -->
<!-- no input abaixo temos a presença da directive tl-calendar que transforma este input em um calendário -->
<input tl-calendar ng-model="view.startDate" tl-key="startdate" ng-change="splitStartDate()">
<!-- ... --> |
Durante sua execução, a directive tl-calendar transforma esta directive anexando <div>s para construir a estrutura HTML necessária para montar o calendário.
Abaixo temos uma representação visual da directive tl-calendar da tela detalhe de Períodos da aplicação Shield.
TL Tab
A directive tl-tab disponibiliza o widget de tab-panels (abas). Dividida em dois atributos, tl-tabset e tl-tab, a directive tl-tab estrutura as abas de forma hierárquica. O atributo tl-tabset deve estar presente em um outer element ou nó pai, tendo como nós filhos o número desejado de elementos <div> contendo o atributo tl-tab.
Listagem de atributos disponibilizados pela directive tl-calendar:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-tabset | - | Marca um elemento do tipo block como o nó pai de todas as abas. |
tl-tab | - | Marca um elemento do tipo block como o nó filho, alterando sua renderização para abas e sua visibilidade a partir do atributo tl-active. |
tl-active | Boolean | Manipula a visibilidade da aba de acordo com o valor do tipo Boolean obtido através da variável passada para este atributo. |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos um calendário de fácil usabilidade para o usuário final.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- inicializa este elemento como nó pai de todas as abas, controlando sua visibilidade -->
<div tl-tabset>
<!-- transforma esta div em uma aba, internacionaliza seu título através da directive tl-key e determina a visiblidade através do atributo active apontando para a variável "active" nos objetos "view.tabs.dates" -->
<div tl-tab tl-key="detail.period.dates" active="view.tabs.dates.active">
<!-- ... -->
</div> |
Abaixo temos uma representação visual da directive tl-tab da tela detalhe de Períodos da aplicação Shield.
