Índice

Objetivo

O objetivo deste guia é apresentar todo o processo de desenvolvimento de um widget integrado a vários possíveis tipos de fonte de dados. Cada sessão contém apenas o código necessário para o entendimento de cada assunto específico abordado. Para ver o resultado final do desenvolvimento, baixe os projetos abaixo:

...

Vamos desenvolver um widget que mostre notícias cadastradas no fluig. Não deixe de conferir o projeto completo.

Criar projeto fluig

Em primeiro lugar, devemos ter disponível um projeto fluig onde desenvolveremos nosso widget utilizando o fluig Studio. Para isso podemos seguir os passos para criação de um projeto fluig.

Criar widget

Em seguida, criaremos um widget. Para isso podemos seguir os passos para criação de um widget.

Desenvolvendo o widget

Agora que temos a estrutura básica, podemos começar a desenvolver o código personalizado e inserir as propriedades que desejamos para esse widget.

Para isso, podemos começar com o arquivo de configurações application.info. É nele que ficam registradas informações como título, descrição, arquivos de visualização, componentes a serem utilizados etc.

Arquivo application.info

Abaixo o arquivo application.info detalhado:

...

Uso do conceito Super widget

Iremos utilizar o conceito de Super widget na construção de nosso widget. Para mais detalhes acesse o guia Super widget.

...

Interface aplicada com fluig Style Guide

Para construir a interface do widget, vamos utilizar o fluig Style Guide, que facilita a construção dos componentes visuais. O guia pode ser acessado em fluig Style Guide.

...

<button type="submit" class="btn btn-default" data-save-preferences> Salvar </button>

Preferências do widget

A seguir é explicado como salvar as preferências do widget da forma como idealizada pela equipe do fluig. É a forma padrão e é desejável que todos os widgets utilizem apenas essa técnica quando for necessário guardar algum tipo de informação para cada instância. Apesar de existirem outras formas de se guardar as preferências de um widget, recomendamos fortemente que utilize a forma disponibilizada pelo fluig pelos seguintes motivos:

...

Armazenamento

Para salvar as preferências do widget, utilizamos o método WCMSpaceAPI.PageService.UPDATEPREFERENCES passando um método para callback (tratamento de retorno), o id da instância do widget e as preferências a serem salvas.

var preferences = {
    newsSource: "fonte",
    url: "/news/feed/url",
    numberOfArticles: 10
};
 
WCMSpaceAPI.PageService.UPDATEPREFERENCES({
    async: true,
    success: function (data) {
			// código
    },
    fail: function (xhr, message, errorData) {
		// código
    }
}, this.instanceId, preferences
);

Utilização

No código abaixo podemos observar que o widget tem algumas variáveis chamadas news, newsSource, url e numberOfArticles.

...

As preferências do widget são recuperadas automaticamente. Basta salvar as preferências com os nomes das variáveis do widget, como no tópico Como salvar as preferências do widget.

Integrando o widget com dados

Interno (formulários)

Para aprender a integrar seu widget com formulários do fluig, acesse este guia.

...

Para fazer a integração com serviços SOAP, acesse este guia.

Exportar widget no servidor fluig

Para exportar o widget para o servidor fluig, basta seguir o guia Realizando o deploy do componente.

Evitar conflito de dependências com o fluig

Para saber como evitar conflito de dependência entre widgets desenvolvidos sobre a plataforma e o fluig, acesse este guia.

Zoom / Filter de Dataset

Para implementar o zoom de datasets em seu widget, pode-se usar como referência a forma indicada pelo fluig Style Guide para fazer o filter/zoom de um serviço externo. Porém, é necessário atentar-se para alguns detalhes específicos do desenvolvimento de datasets.

...