Histórico da Página

...

Services são objetos compostos por funções, passíveis de injeção de dependências e inicializados . Um serviço no framework AngularJS é tratado como um singleton e pode ser injetado através de seu nome, bastando declara-lo como parametro em seus componentes (no caso, um controller, por exemplo). Para maiores informações acesse a documentação oficial sobre services.

Dialog

...

Service 

Âncora
dialog-factory dialog-factory

É um serviço declarado através do framework AngularJS que possui unicamente a funcionalidade de retornar um objeto que controla estados de um dialog. Mencionamos na introdução de services que estes não possuem estado, porém o que citamos na anteriormente foi que o Dialog Service tem como unica funcionalidade retornar um objeto com estados. Como isto se dá? Basicamente este serviço possui uma única função, a função responsável por criar o objeto dialog, ou seja, o Dialog Service não possui estado, mas sim objeto obtido no retorno desta chamada.

...

 new

...

Dialog 

Âncora
dialog-object dialog-object

 

Dialog é um objeto definido internamente no service DialogService e tem como responsabilidade controlar os estados de um dialog. O estado é basicamente quando o dialog está aberto e a operação que esta ocorrendo no momento. Para obter um objeto do tipo Dialog basta realizarmos uma chamada para a função new no DialogService.

Property Service

É um serviço declarado através do framework AngularJS que expõe funções públicas para trabalhar com propriedades, encapsulando a complexidade de realizar requisições HTTP para o desenvolvedor. Para maiores informações, leia a documentação de resources.

As funções Os atributos disponíveis publicamente são:

Nome	Descrição	Utilização

   

properties

A partir do nome de objeto, busca todas as propriedades deste objeto no back-end.Image Removed

range

A partir de um objeto e um atributo, busca a série se existente no arquivo de internacionalização.

Image Removed 

Submit Service

Que expõe funções que mapeiam os métodos genéricos CRUD da arquitetura back-end. Internamente as requisições HTTP são tratadas e processadas, tornando-se transparente para o desenvolvedor.

operation	Define se o dialog quando exibido esta no modo de leitura ou edição.	Image Added
isOpen	Variável de controle utilizada para determinar se o Dialog está visível.	Image Added

As funções disponíveis publicamente são:

Nome	Descrição	Utilização
create	Realiza uma chamada HTTP POST para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será persistida. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de inserção e recebe como resposta, no caso de sucesso, um objeto contendo o id do objeto gerado pelo back-end ou, caso de falha, os erros gerados pelo back-end na inserção.	Image Removed
update	Realiza uma chamada HTTP PUT para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será atualizada e um atributo id com o identificador unico da entidade já persistida no banco de dados. O segundo parâmetro é o objeto JSON com os dados a serem atualizados. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de atualização de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e não recebe nenhum parametro . Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.	Image Removed
delete	Realiza uma chamada HTTP DELETE new	Inicializa um objeto do tipo Dialog e retorna.	Image Added
open	Altera o valor da atributo isOpen para false. Esta faz com que o dialog seja exibido para o usuário. No exemplo de utilização ao lado é possível notar que podemos passar um valor do tipo String. Este valor é a operação executada no dialog, quando aberto. Os valores aceitos são: create, update, delete e view.	Image Added
close	Altera o valor da atributo isOpen para false. Esta torna o dialog (se visível) oculto para o usuário.	Image Added

Property Service

É um serviço declarado através do framework AngularJS que expõe funções públicas para trabalhar com propriedades, encapsulando a complexidade de realizar requisições HTTP para o desenvolvedor. Para maiores informações, leia a documentação de resources.

As funções disponíveis publicamente são:

Nome	Descrição	Utilização
properties	A partir do nome de objeto, busca todas as propriedades deste objeto no back-end.	Image Added
range	A partir de um objeto e um atributo, busca a série se existente no arquivo de internacionalização.	Image Added

Submit Service

Que expõe funções que mapeiam os métodos genéricos CRUD da arquitetura back-end. Internamente as requisições HTTP são tratadas e processadas, tornando-se transparente para o desenvolvedor.

As funções disponíveis publicamente são:

Nome	Descrição	Utilização
create	Realiza uma chamada HTTP POST para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será excluida e um atributo id com o identificador unico da entidade já persistida no banco de dados. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de deleção de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e não recebe nenhum parametro . Em caso de falha, se houver callback de falha registrado, é executado e recebe inserção e recebe como resposta, no caso de sucesso, um objeto contendo o id do objeto gerado pelo back-end ou, caso de falha, os erros gerados pelo back-end na inserção.	Image RemovedImage Added
retrieveupdate	Realiza uma chamada HTTP GET PUT para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será atualizada e um atributo id com o identificador unico da entidade já persistida no banco de dados. O segundo parâmetro é o objeto JSON com os dados a serem persistidosatualizados. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de busca atualização de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e recebe o objeto encontrado ou nulo, caso não foi possível encontrar um objeto através do identificador informadonão recebe nenhum parametro . Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.	Image Added Image Removed
finddelete	Realiza uma chamada HTTP GET DELETE para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será excluida e um atributo id com o identificador unico da entidade já persistida no banco de dados. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de deleção de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e recebe um array de objetos encontrados, ou um array vazio, caso não foi possível encontrar objetos persistidos. Em caso de falha, se houver callback de falha não recebe nenhum parametro . Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.	Image Added	Image Removed

Todos os métodos executados retornam um $promise. Promises são promessas de execução, em algum momento no futuro, da operação desejada (ex.: execução de uma chamada HTTP PUT). Algumas directives conseguem trabalhar com promises e com isso eliminamos a necessidade de callbacks. Para maiores informações, consulte a especificação Promises/A+.

Directives Disponibilizadas pela Arquitetura

O framework AngularJS já possui um conjunto de directives implementadas e disponíveis para construir a camada de apresentação. Contudo, requisitos como: internacionalização, estruturação, padronização, temas, reuso, não foram totalmente satisfeitos com as directives já implementadas. Entretanto, foi possível criar directives customizadas que atendem estes requisitos, graças a extensibilidade do framework. Nesta seção mostraremos as directives disponíveis na arquitetura, como utiliza-las em partials e quais são suas funcionalidades.

TL Object

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. 

Listagem de atributos disponibilizados pela directive tl-object:

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.

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

Listagem de atributos disponibilizados pela directive tl-key:

...

retrieve	Realiza uma chamada HTTP GET para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será persistida. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de busca de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e recebe o objeto encontrado ou nulo, caso não foi possível encontrar um objeto através do identificador informado. Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.	Image Added
find	Realiza uma chamada HTTP GET para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será persistida. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de deleção de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e recebe um array de objetos encontrados, ou um array vazio, caso não foi possível encontrar objetos persistidos. Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.	Image Added

Todos os métodos executados retornam um $promise. Promises são promessas de execução, em algum momento no futuro, da operação desejada (ex.: execução de uma chamada HTTP PUT). Algumas directives conseguem trabalhar com promises e com isso eliminamos a necessidade de callbacks. Para maiores informações, consulte a especificação Promises/A+.

Directives Disponibilizadas pela Arquitetura

O framework AngularJS já possui um conjunto de directives implementadas e disponíveis para construir a camada de apresentação. Contudo, requisitos como: internacionalização, estruturação, padronização, temas, reuso, não foram totalmente satisfeitos com as directives já implementadas. Entretanto, foi possível criar directives customizadas que atendem estes requisitos, graças a extensibilidade do framework. Nesta seção mostraremos as directives disponíveis na arquitetura, como utiliza-las em partials e quais são suas funcionalidades.

TL Object

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. 

Listagem de atributos disponibilizados pela directive tl-object:

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, e a estrutura final destas telas após a execução das directives.

<div id="content" tl-object="period" tl-context="list">
 	
	<h2 tl-ref="search.period" tl-key="title"/>
 
<!-- ... -->
 
	<!-- body -->
 
	<!-- ... -->
 
</div> 

Em sua execução, alguns elementos serão acrescentados e/ou modificados baseado no contexto adquirido através da Neste exemplo temos um outer div, ou seja, um div que engloba todos os outros elementos presentes na partial, utilizando a directive tl-object.

TL Ref

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, 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 e objeto da partial . Contudo, a tl-ref não manipula, de forma alguma, a árvore DOM, trabalhando unicamente em conjunto com o 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.

Listagem de atributos disponibilizados pela directive tl-refkey:

...

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.

...

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.

<div id="content" tl-object="companyperiod" tl-context="detail"list">
 	
	<h2 tl-dialogref="search.period" tl-openedkey="detailDialog.isOpentitle"/>
 	

	<!-- ... -->
 
	<!-- Neste elemento é declarado o tl-ref, informando que todos os filhos deste nó referenciarão model.company -->
	<div class="dialog-page-body" tl-ref="model.company as model">

            <form class="aui">
                </div> 

Em sua execução, alguns elementos serão acrescentados e/ou modificados baseado no contexto adquirido através da directive tl-object.

TL Ref

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:

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.

<div tl-object="company" tl-context="detail" tl-dialog tl-opened="detailDialog.isOpen">
 	
	<!-- ... -->
 
	<!-- Neste elemento é declarado o tl-ref, informando que todos os filhos deste nó referenciarão model.company -->
	<div class="dialog-panelpage-body" panel-bodytl-ref="model.company as model">

            <form class="aui">
             <div class="field-container">
 
						<!-- Este elemento é filho da div onde declaramos o tl-ref, ou seja, este tl-key agora é mapeado para "model.company.name" eliminando
a necessidade de informar o prefixo model.company -->
                        <input type="text" class="field-medium" tl-key="name" ng-model="model.0x1.name" />

                    </div>
 
				<!-- ... -->
 
	<!-- ... -->
 
</div> 

Internamente, no momento de execução do construtor da directive tl-ref, todas as mensagens presentes no MessageProvider, que estão no formato raw, são processadas conforme a referencia informada para a directive e colocadas em cache.

TL Find

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 e event handlers. A partir de um objeto preenchido pelo 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. 

Listagem de atributos disponibilizados pela directive tl-find:

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.

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

...

  <div class="dialog-panel-body panel-body">

                    <div class="field-container">
 
						<!-- Este elemento é filho da div onde declaramos o tl-ref, ou seja, este tl-key agora é mapeado para "model.company.name" eliminando
a necessidade de informar o prefixo model.company -->
                        <input type="text" class="field-medium" tl-key="name" ng-model="model.0x1.name" />

                    </div>
 
				<!-- ... -->
 
	<!-- ... -->
 
</div> 

Internamente, no momento de execução do construtor da directive tl-ref, todas as mensagens presentes no MessageProvider, que estão no formato raw, são processadas conforme a referencia informada para a directive e colocadas em cache.

TL Find

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 e event handlers. A partir de um objeto preenchido pelo 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. 

Listagem de atributos disponibilizados pela directive tl-find:

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.

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

TL Dialog

A directive tl-dialog quando aplicada em um elemento do tipo block, faz com que todos os elementos filhos sejam encapsulados em um container maior que é representado visualmente como um dialog. Esta directive também fornece um objeto a nível de controller, possibilitando que o desenvolvedor manipule suas propriedades de visibilidade.

Para criar este dialog, a factory $dialog esta disponível através de injeção de dependências e fornece métodos para criar um objeto do tipo Dialog. Uma referencia deste objeto deve ser informado em alguns atributos da directive, realizando a ligação entre as interações do controller, dialog e directive.

Listagem de atributos disponibilizados pela directive tl-dialog:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para termos a representação visual de dialogs para o usuário.

<!-- elemento div (do tipo block) que sinaliza para a arquitetura que este deve ser um dialog através do atributo tl-dialog -->
<!-- o atributo tl-opened referencia um objeto do tipo "Dialog" e a variável do tipo Boolean "isOpen" -->
<div tl-object="company" tl-context="detail" tl-dialog tl-opened="detailDialog.isOpen">

Durante a sua execução, a directive tl-dialog transforma este elemento em um dialog e controla sua visibilidade através da referencia passada para o atributo tl-opened.

Abaixo temos uma representação visual da directive tl-dialog da tela de Companhias da aplicação Shield.

Image Added

TL Submit

A directive tl-submit, assim como a directive tl-find, executa operações no back-end utilizando os endpoints que expoe os métodos genéricos da arquitetura. Porém, a directive tl-submit realiza operações de edição, remoção e adição enquanto a directive tl-find executa apenas buscas genéricas.

Listagem de atributos disponibilizados pela directive tl-dialog: