...
A directive tl-object é uma das mais importantes directives criadas na arquitetura. Tem como responsabilidade indicar em qual objeto estamos trabalhando em uma determinada UI e em qual contexto que estamos trabalhando, listagem ou detalhe, além de inicializar a busca de mensagens para a internacionalização. Através de herança, outras directives utilizam-se destas duas característica para implementar suas funcionalidades e manipular a UI conforme necessário.
Abaixo temos um exemplo prático da utilização desta directive em dois contextos diferentes; tela de listagem e detalhe de períodos.
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div id="content" tl-object="period" tl-context="list">
<!-- ... -->
<!-- body -->
<!-- ... -->
</div> |
Neste exemplo temos um outer div, ou seja, um div que engloba todos os outros elementos presentes na partial, utilizando a directive tl-object. Quando identificada, o seu construtor é executado e a partir dos valores de atributos em elementos HTML, incializa-se a busca de mensagens para a internacionalização.Toda e qualquer funcionalidade executada por outras directives nesta partial, incorporarão dois parâmetros na sua execução: objeto de negócio e contexto de visualização.
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-object | String | Em tempo de execução, toda a directive declarada abaixo da directive TL Object (nós filhos do nó onde há o atributo Ex.: Ao preencher o atributo |
tl-context | String | Em tempo de execução, toda a directive declarada abaixo da directive TL Object (nós filhos do nó onde há o atributo Ex.: Ao preencher o atributo |
Além das funcionalidades e comportamentos acima, a directive tl-object possibilida que outras directives se registrem (através de callbacks) e sejam alertadas quando o back-end retornar as mensagens internacionalizadas. Esta directive faz uso do MessageProvider para inicializar a busca por mensagens de internacionalização.
Listagem de atributos disponibilizados pela directive tl-object:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-object | String | Em tempo de execução, toda a directive declarada abaixo da directive TL Object (nós filhos do nó onde há o atributo Ex.: Ao preencher o atributo |
tl-context | String | Em tempo de execução, toda a directive declarada abaixo da directive TL Object (nós filhos do nó onde há o atributo Ex.: Ao preencher o atributo |
Além das funcionalidades e comportamentos acima, a directive tl-object possibilida que outras directives se registrem (através de callbacks) e sejam alertadas quando o back-end retornar as mensagens internacionalizadas. Esta directive faz uso do MessageProvider para inicializar a busca por mensagens de internacionalização.
Abaixo temos um exemplo prático da utilização desta directive em dois contextos diferentes; tela de listagem e detalhe de períodos.
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div id="content" tl-object="period" tl-context="list">
<!-- ... -->
<!-- body -->
<!-- ... -->
</div> |
Neste exemplo temos um outer div, ou seja, um div que engloba todos os outros elementos presentes na partial, utilizando a directive tl-object. Quando identificada, o seu construtor é executado e a partir dos valores de atributos em elementos HTML, incializa-se a busca de mensagens para a internacionalização.Toda e qualquer funcionalidade executada por outras directives nesta partial, incorporarão dois parâmetros na sua execução: objeto de negócio e contexto de visualização.
TL Key
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 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 MessageProviderpara registrar-se e obter as mensagens de internacionalização assim que a busca for finalizada pelo MessageProvider.
Listagem de atributos disponibilizados pela directive tl-key:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-key | String | Este atributo deve especificar um objeto (usualmente mapeado no scope responsável por vincular o controller e a partial) que é utilizado pela directive na construção da consulta enviada ao back-end. |
Abaixo temos um exemplo prático da utilização desta directive em dois contextos diferentes, tela de listagem e detalhe de períodos, e a estrutura final destas telas após a execução das directives.
...
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 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.
Listagem de atributos disponibilizados pela directive tl-ref:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-ref | String | Este atributo deve especificar um objeto (usualmente mapeado no scope responsável por vincular o controller e a partial) que é utilizado pela directive na construção da consulta enviada ao back-end. |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para tornar o processo de desenvolvimento mais produtivo, evitando repetições de prefixos em chaves de internacionalização.
...
A directive tl-find disponibiliza busca genérica a partir da interação do usuário com a UI sem a necessidade implementar as chamadas HTTP ao back-ende event handlers. A partir de um objeto preenchido na tela (objeto no qual é passado para a directivepelo usuário via data-binding (uso da directive ng-model), internamente a directive percorre os atributos deste objeto e monta uma consulta padrão. Esta consulta padrão leva em consideração os tipos de dados e é construída através de cláusulas AND (por padrão) e a concatenação dos atributos e valores do objeto. Caso a busca ocorra com sucesso, um segundo atributo chamado tl-result mapeia para qual variável é atribuida a resposta da chamada. Falhas são descartadas silenciosamente pela arquitetura
Listagem de atributos disponibilizados pela directive tl-find:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-find | Object | Este atributo deve especificar um objeto (usualmente mapeado no scope responsável por vincular o controller e a partial) que é utilizado pela directive na construção da consulta enviada ao back-end. |
tl-result | Array | Este atributo deve especificar um array que será preenchido automaticamente pela directive se houver sucesso na busca. |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para realizar buscas genéricas de qualquer entidade já persistida no back-end.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- partial que possui a estrutura apresentada para o usuário, com campos que estão mapeados (estes campos estão omitidos para simplicar o exemplo) em um objeto de nome 'model' no controller deste partial --> <div id="content" tl-object="company" tl-context="list"> <!-- ... --> <!-- este botão contem a directive tl-find, na qual recebe o objeto model que contem os valores preechidos pelo usuário --> <!-- também esta mapeado o atributo tl-result, no qual diz que a resposta desta busca deve ser mapeada para o objeto 'list' presente no scope destedo controller desta partial --> <button class="aui-button align-right" tl-ref="common" tl-key="button.search" tl-find="model" tl-result="list" /> <!-- ... --> </div> |
Quando ocorrer um evento de click neste botão, a directive tl-find irá ler o objeto model, construir a consulta, realizar as chamadas ao back-end e preencher o objeto do tipo Array com nome list. Qualquer falha durante neste processo é descartada silenciosamente e a operação é interrompida.