TOTVS HTML Framework

Árvore de páginas

Estrutura dos arquivos da tela

Todas as telas do framework deverão estar contidas em uma pasta dentro de um WebContainer, para esse exemplo vamos assumir que uma pasta chamada html-sample ira ser disponibilizada por um WebServer no contexto html-sample.

Para carregar uma tela, o framework procura por um arquivo de entrada para a tela, para este exemplo vamos assumir que a tela para o framework fica na URL /html-sample/message, note que aperar desta URL, o framework irá procurar um arquivo JS (JavaScript) na seguinte URL: /html-sample/html/message/message.js, essa URL é montada, onde o contexto é a primeira parte da URL do framework, seguida de html, seguida de uma pasta com o nome da tela (segunda parte da URL do framework) e o arquivo com o nome da tela com extensão JS.

Obs: essa estrutura de duas partes ainda está em discussão.

Tendo essas informações, a estrutura para uma tela de CRUD simples possui os seguintes arquivos dentro da pasta html-sample:

ArquivoConteúdo
html-sample/i18n/translations.js

Arquivo JSON com a lista das literais utilizadas pelas tela do contexto html-sample

html-sample/html/message/message.jsArquivo JavaScript que o framework chama para inicializar os states da tela
html-sample/html/message/message-services.jsArquivo JavaScript que registra os services que a tela precisa utilizar
html-sample/html/message/message-controllers.jsArquivo JavaScript que registra os controllers que a tela precisa utilizar
html-sample/html/message/message.list.htmlArquivo HTML da tela de listagem dos registros da tabela
html-sample/html/message/message.search.htmlArquivo HTML da tela de parâmetros de pesquisa avançada de registros
html-sample/html/message/message.detail.htmlArquivo HTML da tela de visualização de um registro da tabela
html-sample/html/message/message.edit.htmlArquivo HTML da tela de alteração/inclusão de um registro da tabela

Internacionalização I18N

O filtro de i18n do framework depende de uma lista de literais que é carregado em algum momento, essa lista de literais, atualmente, é um aquivo chamado translation.js que é um arquivo JSON com um array Javascript com as literais das telas do contexto em que ele está inserido.

Para a nossa tela de exemplo, utilizamos o seguinte conteúdo:

Arquivo translation.js 
[{
	"l-name" : {
		"pt":"Nome",
		"en":"Name",
		"es":"Nombre"
	},
	"l-field" : {
		"pt":"O campo",
		"en":"The field",
		"es":"El campo"
	},
	"l-fields" : {
		"pt":"Os campos",
		"en":"The fields",
		"es":"El campos"
	},
	"l-required" : {
		"pt":"é obrigatório",
		"en":"is required",
		"es":"se requiere"
	},
	"l-requireds" : {
		"pt":"são obrigatórios",
		"en":"are required",
		"es":"se requieren"
	},
	"l-success-created": {
		"pt":"criado com sucesso",
		"en":"successfully created",
		"es":"creado con éxito"
	},
	"l-success-updated": {
		"pt":"atualizado com sucesso",
		"en":"successfully updated",
		"es":"actualizado correctamente"
	},
	"l-success-deleted": {
		"pt":"removido com sucesso",
		"en":"successfully removed",
		"es":"eliminado con éxito"
	},
	"l-message": {
		"pt":"Mensagens",
		"en":"Messages",
		"es":"Mensajes"
	},
	"l-description": {
		"pt":"Descrição",
		"en":"Description",
		"es":"Descripción"
	},
	"l-text": {
		"pt":"Texto",
		"en":"Text",
		"es":"Texto"
	}
}]

Arquivos da tela

Como dito, a tela será chamada no arquivo principal, neste exemplo, message.js, esse arquivo deve registrar todos os recursos que a tela necessida pra fucnionar, como controllers, services e states.

Neste exemplo vamos separar os states dos outros recursos.

Os states da tela, é definição de cada um dos estados da tela, a definição de cada state define para a tela:

  • id - identifica um state, deve ser unico para toda a aplicação, como sugestão todos os states da tela iniciam com a URL para a tela
  • url - identifica a URL do state, é interessante ter, pois permite que seja feito um link para a tela abrir diretamente um state específico.
  • controller - identifica qual controller deverá ser utilizado para o state, controllers podem ser utilizados para 1 ou mais states
  • controllerAs - por convenção do framework, sempre será 'controller'
  • templateUrl - é a localizaçao do template da tela, no caso cada state pode ter o seu template ou varios states podem compartilhar a mesma template.
  • abstract - é um parametro para o state raiz da tela, a api de states funciona com uma hierarquia.
  • template - caso um state não tenha uma templatem em uma URL, o conteudo da template pode ser definido neste parametro.

Mais informações a respeito da api de states, deve ser verificado na seguinte URL: https://github.com/angular-ui/ui-router/wiki

O arquivo principal tambem deve definir os outros recursos que a tela irá utilizar, mas como estamos separando os controllers e services para outro arquivo JS, utilizamos os recursos do requirejs para carregar e executar os arquivos auxiliares.

Para nossa tela de exemplo, o arquivo principal da tela possui o seguinte conteudo:

Arquivo message.js 
define([
		// index sempre deve ser utilizado, o serviço index disponibiliza os metodos da api de states
		'index',
		// a dependencia de components é necessaria quando serão usados as tags do framework HTML
		'components', 
		// sempre que houver elementos customizaveis na tela é necessário utilizar totvs-custom	
		'totvs-custom',

		// o arquivo message-controllers.js controllers utilizados pela tela
		'/html-sample/html/message/message-controllers.js'], 
// o require garante todos os recuros acima serão carregados antes de executar o conteudo da function
function(index) {
    index.stateProvider
		// como	a api de states utiliza hierarquia de states, temos que definir o state raiz da tela
        .state('html-sample/message', {
            abstract: true,
            template: '<ui-view/>' // <ui-view/> é onde os states filhos são renderizados
        })
		
		// definição do state inicial, o state é carregado a partir de sua URL
        .state('html-sample/message.start', {
            url:'/html-sample/message/',
            controller:'framework.message-list.Control',
            controllerAs: 'controller',
            templateUrl:'/html-sample/html/message/message.list.html'
        })
		
		// definição do state de visualização do registro
		.state('html-sample/message.detail', {
            url:'/html-sample/message/detail/:id',
            controller:'framework.message-detail.Control',
            controllerAs: 'controller',
            templateUrl:'/html-sample/html/message/message.detail.html'
        })
		
		// definição do state de modificação do registro
		.state('html-sample/message.edit', {
			url: '/html-sample/message/edit/:id',
			controller: 'framework.message-edit.Control',
			controllerAs: 'controller',
			templateUrl: '/html-sample/html/message/message.edit.html'
		})
		
		// definição do state de criação de um novo registro
		// note que a edição a criação de registros utilizam os mesmos controllers e templates
		.state('html-sample/message.new', {
			url: '/html-sample/message/new',
			controller: 'framework.message-edit.Control',
			controllerAs: 'controller',
			templateUrl: '/html-sample/html/message/message.edit.html'
		});
});

 

No próximo passo vamos criar os templates para as telas do CRUD