Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Bloco de código
languagejs
firstline1
titleExecmplo
linenumberstrue
define([
    'index',
	...
], function (index) {

    'use strict';

	var customersListController = function ($rootScope, appViewService, customerService, customizationFactory) {

		// *********************************************************************************
		// *** Variables
		// *********************************************************************************
		var self = this;

        self.records = [];
		self.recordsCount = 0;
		...
 
		// *********************************************************************************
		// *** Control Initialize
		// *********************************************************************************

		self.init = function () {

			appViewService.startView($rootScope.i18n('l-customer') + ' (Customizado)', 'demo.customer.list.controller', self);

			self.loadRecords(false);

			// Dispara o método 'initEvent' do serviço de customização do 'thf.demo.customer' passando o controller como parâmetro
            customizationService.callEvent('thf.demo.customer', 'initEvent', self);
		};
	
		...
	};

    customersListController.$inject = [
        '$rootScope',
        '$scopetotvs.app-main-view.Service',
        '$state',
        '$modal',
        'dateFilter',
        'totvs.app-main-view.Service',
		'customization.customer.factory', // factory com acesso ao servidor rest		'customization.customer.factory',
		// Serviço de customização 
        'customization.generic.Factory'
    ];

    index.register.controller('demo.customer.list.controller', customersListController);
});

 

E no ponto onde a customização deverá ser chamada, devemos utilziar o serviço customizationService:

 

Criando serviço de customização

É necessário criar um arquivo js para definir o serviço de customização dentro do módulo custom (thf/custom/demo/customer.js).

Bloco de código
languagejs
firstline1
titleExemplo de Customização
linenumberstrue
				// *********************************************************************************
		// *** Control Initialize
		// *********************************************************************************
		this.init = function() {
			
			if (appViewService.startView('l-country', 'framework.country-list.Control', _self)) {
				
			}
			this.search(false);
			
			customizationService.callEvent('html-sample.country', 'initEvent', _self);
		}
		

 

Customização exemplo:

Como exemplo para tela de paises, vamos utilizar o seguinte arquivo de customização comentado.

Bloco de código
languagejs
firstline1
titleExemplo de Customização
linenumberstrue
define(['index', 'totvs-custom'], function(index) {
	countryCustomService.$inject = ['customization.generic.Factory'];
	
	function countryCustomService(customService) {
		service = {
				
			// metodos para cada evento de customização 
		
			// metodo do evento customizado no controller no metodo init.
			initEvent : function (params) {
				// na chamada do callEvent foi passado o proprio controller, como o controller é acessivel para a tela
				// a tela pode fazer binding para o novo atributo criado abaixo.
				params.epcValue = "Este valor foi definido na epc e injetado no controler desta tela!!!";
				// na chamada do evento, a customização pode retornar um valor que chega até a chamada no controller.
				return "OK";
			},
		
			// metodo do evento customizado na pagina na tag HTML com totvs-custom-element="customPage" 
			customPage : function (params, element) {
				define([
    'totvs-custom'
], function (custom) {


    'use strict';

    function customerCustomService(customService) {
        var service;

        service = {
            // métodos para cada evento de customização

            // método do evento customizado no controller
            initEvent: function (params) {
                // na chamada do callEvent foi passado o próprio controller, como o controller é acessível para a tela
                // a tela pode fazer binding para o novo atributo criado abaixo.
                params.customInitValue = "Este valor foi definido no serviço de customização e injetado no controller desta tela!!!";

                // na chamada do evento, a customização pode retornar um valor que chega até a chamada no controller.
                return "OK";
            },


            // método do evento customizado na pagina na tag HTML com totvs-custom-element="customPageList"
            customPageList: function (params, element) {
                // utilizamos a API do jQuery para encontrarmos os elementos que queremos customizar na pagina
				
				// procuramos uma elmento que tem a class "title" filho de                // procuramos um elemento comque tem a class "page-head"
				var title = element.find(".page-head .title"); 
				
				// utilizando a API do jQuery podemos adicionar HTML estatico a umvar elemento
				title.append('<div style="background-color: red; font-style: italic; font-size: 24px; color: yellow;">'
							 + 'Esta tela &eacute; customiz&aacute;vel</div>');
				
				// ou podemos adicionar HTML dinamico com bindings do angular, utilizando o scope da pagina
				// com acesso ao controller, inclusive aos atributos que foram incluidos por customização.
				// tambem é possivel associar eventos que chamam o controller
				var html = '<div style="background-color: black; font-size: 24px; color: green;">' 
						 + 'E posso compilar com os bindings do angular, '
						 + 'a lista tem {{controller.listOfcountry.length}} itens'
						 + title,
                    html,
                    compiledHTML;

                title = element.find(".page-head");

                // utilizando a API do jQuery podemos adicionar HTML estático a um elemento
                title.append('<div style="background-color: red; font-style: brownitalic; font-size: 24px; color: whiteyellow;">{{controller.epcValue}}</div></div>'
				// o metodo compileHTML do customService permite que o HTML seja compilado contra o scope da tela
				var compiledHTML = customService.compileHTML(params, html);
				// e este HTML compilado pode ser adicionado ao elemento utilizando a API do jQuery
				title.append(compiledHTML);
			},
			
			// metodo do evento customizado na pagina na tag HTML com totvs-custom-element="customListItem"
			// como aquele elemento é controlado por um ng-repeat, 
			// esta customização é chamada para cada item que é renderizado na lista
			customListItem : function (params, element) {
				// primeiro encontramos o elemento que queremos customizar
				var title = element.find('div[title]:first');
				
				// definimos a customização que será adicionada ao elemento.
				var html = '<span style="background-color: yellow"> - <a target="_blank" href="http://pt.wikipedia.org/wiki/{{country.name}}">Este link para Wikipedia tamb&eacute;m e uma customiza&ccedil;&atilde;o</a></span>';
				// como o HTML tem binding para o scopo do angular, precisamos compilar o HTML
				var compiledHTML = customService.compileHTML(params, html);
				// e este HTML compilado pode ser adicionado ao elemento utilizando a API do jQuery
				title.append(compiledHTML);
			}
		
		};		
		// todas as customizações devem estender o customService para as chamadas ocorrerem de forma correta.
		angular.extend(service, customService);
		return service;
	}
	// conforme definido, o nome da factory é "custom." mais o contexto e nome da tela.
	index.register.factory('custom.html-sample.country', countryCustomService);
});

 

O resultado da customização é o seguinte:

Image Removed

 

 

' +
                                'Esta tela é <a href="http://tdn.totvs.com/pages/viewpage.action?pageId=185738044" target="_blank">customizável</a>' +
                            '</div>');

                // ou podemos adicionar HTML dinâmico com bindings do angular, utilizando o scope da pagina
                // com acesso ao controller, inclusive aos atributos que foram incluídos por customização.
                // também é possível associar eventos que chamam o controller
                html = '<div style="background-color: black; font-size: 24px; color: green;">' +
                            'E posso compilar com os bindings do angular, a lista tem {{controller.recordsCount}} itens' +
                            '<div style="background-color : brown; color: white;">{{controller.customInitValue}}</div></div>';


                // o método compileHTML do customService permite que o HTML seja compilado contra o scope da tela
                compiledHTML = customService.compileHTML(params, html);


                // e este HTML compilado pode ser adicionado ao elemento utilizando a API do jQuery
                title.append(compiledHTML);
            },

            // método do evento customizado na pagina na tag HTML com totvs-custom-element="customListItem"
            // como aquele elemento é controlado por um ng-repeat,
            // esta customização é chamada para cada item que é renderizado na lista
            customListItem : function (params, element) {
                // primeiro encontramos o elemento que queremos customizar
                var title,
                    item,
                    html,
                    compiledHTML,
                    compiledField;
                
                title = element.find('div[title]:first');

                // definimos a customização que será adicionada ao elemento.
                html = '<span style="background-color: yellow">' +
                        ' - <a target="_blank" href="http://tdn.totvs.com/display/tec/TOTVS+%7C++HTML+Framework">' +
                            'Este link para TDN tamb&eacute;m e uma customiza&ccedil;&atilde;o</a>' +
                        '</span>';


                // como o HTML tem binding para o scopo do angular, precisamos compilar o HTML
                compiledHTML = customService.compileHTML(params, html);


                // e este HTML compilado pode ser adicionado ao elemento utilizando a API do jQuery
                title.append(compiledHTML);
                item = element.find('.item-info .row');


                // definimos a customização que será adicionada ao elemento, nesse caso incluímos 2 novos campos para exibição
                html = '<totvs-list-item-info title="Campo customizado #1" value="Valor customizado #1"></totvs-list-item-info>' +
                        '<totvs-list-item-info title="Campo customizado #2" value="Valor customizado #2"></totvs-list-item-info>';


                compiledField = customService.compileHTML(params, html);

                item.append(compiledField);
            }
        };

        angular.extend(service, customService);

        return service;
    }

    customerCustomService.$inject = ['customization.generic.Factory'];

    custom.register(customerCustomService);
});

Resultado da customização

Image Added

 define([    'index',    'directive-base',    'directive-crud',    'directive-editable'], function (index) {
    'use strict';
    // ************************************************************************************* // *** Type: CONTROLLER - LIST    // ***    // *** Description: Controller responsável pela listagem dos dados    // *** // *************************************************************************************
 var customersListController = function ($rootScope, $scope, $state, $modal, dateFilter, appViewService, customerService, customizationService) {
 // ********************************************************************************* // *** Variables // *********************************************************************************
 var self = this;
        self.records = []; self.recordsCount = 0;        self.disclaimers = [];        self.advancedSearch = {};