Histórico da Página
Utilização
O serviço pode ser utilizado injetando o serviço de notificação no AngularJS Controller ou Service e/ou através do disparo de eventos através do $rootScope ou $scope.
Injeção
No caso da injeção é preciso injetar o serviço propriamente dito ao AngularJS Controller ou Service:
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
sampleController.$inject = ['$rootScope', '$scope', 'totvs.app-notification.Service'];
function sampleController($rootScope, $scope, appNotificationService) {
// Exemplo de chamada direta ao sistema de notificação:
appNotificationService.message({
title: 'l-attention',
text: 'Vamos lhe fazer uma pergunta.',
help: 'Se precisar de ajuda, chame os universitários.',
size: 'lg', //opicional
callback: function() {
appNotificationService.question({
title: 'l-question',
text: 'Hoje é sexta-feira?',
cancelLabel: 'l-no', // Padrão é 'cancel'
confirmLabel: 'l-yes', // Padrão é 'ok'
callback: function(isPositiveResult) {
var alert = {
type: 'error',
title: 'Atenção',
size: 'md', //opicional
detail: 'Hoje não é sexta-feira :('
};
if (isPositiveResult) {
alert.type = 'success';
alert.detail = 'Hoje é sexta-feira :)'
}
appNotificationService.notify(alert);
}
});
}
});
} |
Evento
O disparo das mensagens também pode ocorrer através de eventos, desde que estes tenham registrados listeners no controller principal da aplicação centralizadora. O nome dos eventos fica a critério do produto ou aplicação, neste exemplo definimos os eventos no arquivo events.js para facilitar a utilização no produto, tendo disponíveis:
...
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
sampleController.$inject = ['$rootScope', '$scope'];
function sampleController($rootScope, $scope) {
// Exemplo de chamada por evento ao sistema de notificação:
$rootScope.$broadcast(TOTVSEvent.showNotification, {
type: 'info',
title: 'Evento',
detail: 'Esta notificação foi disparada através de um evento.'
});
} |
Definição
Cada produto é livre para definir a forma como irá gerenciar suas notificações.
...
O serviço de notificação, na aplicação de referência, está resumido a 3 funcionalidades:
Notificação
A notificação utiliza uma biblioteca externa (JQuery Toastr) para apresentação das mensagens ao usuário. O foco desta função é disparar notificações ao usuário sem que este perca o foco ou trave suas atividades no momento; sendo apresentado um toaster ao usuário, este toaster por padrão será disposto no canto superior direito do monitor.
...
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<html>
<head>Exemplo</head>
<body>
<!--
Diretiva definida para utilização do sistema de notificação via toaster.
Caso não seja necessária a utilização basta remover a tag abaixo.
-->
<toaster-container toaster-options="{'time-out': 5000}"></toaster-container>
</body>
</html> |
...
- type: indica o tipo de alerta a ser apresentado, tendo como opções:
- error: na cor vermelha;
- info: na cor azul claro;
- success: na cor verde;
- warning: na cor laranja;
- title: titulo da notificação;
- detail: mensagem ou detalhamento da notificação;
- timeout: (opcional) tempo que ficará disponível em tela até desaparecer.
Mensagem
Apresenta ao usuário uma mensagem focal, a qual obrigará o usuário a tomar alguma ação para prosseguir com a operação. Diferente da notificação esta função permite a disposição de apenas uma mensagem por vez. Sendo que o objeto message deve obedecer a seguinte estrutura:
- title: (opcional) titulo da mensagem, quando não informado assume o código 'l-internal-error'. Sendo que o title deve será traduzido pelo sistema de internacionalização;
- text: breve descrição da mensagem. Este já deve ser encaminhado traduzido para o serviço;
- help: detalhamento e/ou ajuda referente a mensagem. Já deve ser encaminhado traduzido para o serviço;
- size: (opcional) define o tamanho da caixa de mensagem exibida, caso não seja informado assume o tamanho 'lg' (grande). Os valores permitidos: lg (grande), md (médio) e sm (pequeno).
- callback: (opcional) função a ser chamada ao fechar a mensagem de notificação.
- ao ser chamada a função de callback, não é passado nenhum parâmetro para a mesma.
...
Observação: Como o template de mensagem e questionamento é o mesmo é preciso definir um AngularJS Controller em runtime para utilização da modal para apresentação da mensagem.
Questionamento
Questiona o usuário referente ao conteúdo da mensagem. As respostas devem ser de forma objetiva na qual o usuário responda sim ou não. Assim como a mensagem esta função permite a disposição de apenas uma questão por vez e é preciso que o objeto question obedeça a seguinte estrutura:
- title: titulo;
- text: descrição da pergunta;
- confirmLabel: (opcional) label para o botão de confirmação (padrão 'l-ok');
- cancelLabel: (opcional) label para o botão de cancelamento (padrão 'l-cancel');
- size: (opcional) define o tamanho da caixa de mensagem exibida, caso não seja informado assume o tamanho 'lg' (grande). Os valores permitidos: lg (grande), md (médio) e sm (pequeno).
- callback: (opcional) função a ser chamada ao responder a questão.
- ao chamar a função de callback será passado para a função um parametro para indicar se o resultado do questionamento foi positivo (true) ou negativo (false).
- ao chamar a função de callback será passado para a função um parametro para indicar se o resultado do questionamento foi positivo (true) ou negativo (false).
Observação: Como o template de mensagem e questionamento é o mesmo é preciso definir um AngularJS Controller em runtime para utilização da modal para apresentação da mensagem.
Notificações por Eventos
Para facilitar o acesso ao serviço de notificações pode ser adicionado listeners no AngularJS Controller principal da aplicação centralizadora para que eles se encarreguem de realizar a chamada ao serviço de notificação. Utilizando a aplicação de referencia como base, temos:
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
// Controller principal para resolução das interações da aplicação que não
// dizem respeito ao programa aberto (content).
// Em resumo, é responsável pela barra de navegação e 'menus', entre outros.
appMainController.$inject = ['$rootScope', '$scope', 'totvs.app-notification.Service'];
function appMainController($rootScope, $scope, appNotificationService) {
...
// appNotificationService
// Para evitar que todos os demais AngularJS Controllers e Services precisem
// injetar o serviço de notificação, o serviço pode ficar disponível através
// de eventos. Para isto basta injetar o appNotificationService no
// appMainController para dar suporte as notificações.
$scope.$on(TOTVSEvent.showNotification, function (event, alerts) {
appNotificationService.notify(alerts);
});
$scope.$on(TOTVSEvent.showMessage, function (event, message) {
appNotificationService.message(message);
});
$scope.$on(TOTVSEvent.showQuestion, function (event, question) {
appNotificationService.question(question);
});
} |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas